@scrippsproduct/networks-ui-library 1.1.9 → 1.1.10-alpha.0

package/dist/components/EqualSizeGrid/EqualSizeGrid.test.js

@@ -0,0 +1,358 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { d as s, b as m, a as g, i as d, r, g as i } from "../../react.esm-DLSrfVwM.mjs";
+import "../../index-BVxBrkZB.mjs";
+import { EqualSizeGrid as n } from "./EqualSizeGrid.js";
+s("EqualSizeGrid", () => {
+  let a;
+  m(() => {
+    a = document.createElement("div"), a.id = "root", document.body.appendChild(a);
+  }), g(() => {
+    document.body.removeChild(a);
+  }), s("Basic Rendering", () => {
+    d("should render the custom element", () => {
+      r(/* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("div", { children: "Child" }) }));
+      const t = document.querySelector("equal-size-grid");
+      i(t).toBeInTheDocument();
+    }), d("should render single child", () => {
+      const { container: t } = r(
+        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("div", { children: "Child 1" }) })
+      );
+      i(t.textContent).toContain("Child 1");
+    }), d("should render multiple children", () => {
+      const { container: t } = r(
+        /* @__PURE__ */ o(n, { children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" }),
+          /* @__PURE__ */ e("div", { children: "Child 3" })
+        ] })
+      );
+      i(t.textContent).toContain("Child 1"), i(t.textContent).toContain("Child 2"), i(t.textContent).toContain("Child 3");
+    }), d("should wrap each child in equal-size-grid__item div", () => {
+      r(
+        /* @__PURE__ */ o(n, { children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const t = document.querySelectorAll(".equal-size-grid__item");
+      i(t.length).toBe(2);
+    }), d("should set data-item-count attribute", () => {
+      r(
+        /* @__PURE__ */ o(n, { children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" }),
+          /* @__PURE__ */ e("div", { children: "Child 3" })
+        ] })
+      );
+      const t = document.querySelector("equal-size-grid");
+      i(t).toHaveAttribute("data-item-count", "3");
+    });
+  }), s("Gap Prop", () => {
+    d("should use default gap of 1.5rem", () => {
+      r(
+        /* @__PURE__ */ o(n, { children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const l = document.querySelector("equal-size-grid").getAttribute("style");
+      i(l).toContain("--esg-gap-size: 1.5rem");
+    }), d("should apply custom gap value", () => {
+      r(
+        /* @__PURE__ */ o(n, { gap: "2rem", children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const l = document.querySelector("equal-size-grid").getAttribute("style");
+      i(l).toContain("--esg-gap-size: 2rem");
+    }), d("should handle gap with different units", () => {
+      r(
+        /* @__PURE__ */ o(n, { gap: "20px", children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const l = document.querySelector("equal-size-grid").getAttribute("style");
+      i(l).toContain("--esg-gap-size: 20px");
+    }), d("should handle gap of 0", () => {
+      r(
+        /* @__PURE__ */ o(n, { gap: "0", children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const l = document.querySelector("equal-size-grid").getAttribute("style");
+      i(l).toContain("--esg-gap-size: 0");
+    });
+  }), s("ItemsPerRow Prop", () => {
+    d("should use default itemsPerRow of 4", () => {
+      r(
+        /* @__PURE__ */ o(n, { children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const l = document.querySelector("equal-size-grid").getAttribute("style");
+      i(l).toContain("--esg-template-columns: repeat(4, 1fr)");
+    }), d("should apply custom itemsPerRow value", () => {
+      r(
+        /* @__PURE__ */ o(n, { itemsPerRow: 3, children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" }),
+          /* @__PURE__ */ e("div", { children: "Child 3" })
+        ] })
+      );
+      const l = document.querySelector("equal-size-grid").getAttribute("style");
+      i(l).toContain("--esg-template-columns: repeat(3, 1fr)");
+    }), d("should handle itemsPerRow of 1", () => {
+      r(
+        /* @__PURE__ */ o(n, { itemsPerRow: 1, children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const l = document.querySelector("equal-size-grid").getAttribute("style");
+      i(l).toContain("--esg-template-columns: repeat(1, 1fr)");
+    }), d("should handle itemsPerRow of 6", () => {
+      r(
+        /* @__PURE__ */ o(n, { itemsPerRow: 6, children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const l = document.querySelector("equal-size-grid").getAttribute("style");
+      i(l).toContain("--esg-template-columns: repeat(6, 1fr)");
+    }), d("should handle large itemsPerRow values", () => {
+      r(
+        /* @__PURE__ */ o(n, { itemsPerRow: 12, children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const l = document.querySelector("equal-size-grid").getAttribute("style");
+      i(l).toContain("--esg-template-columns: repeat(12, 1fr)");
+    });
+  }), s("Classname Prop", () => {
+    d("should not set class attribute when classname not provided", () => {
+      r(
+        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("div", { children: "Child 1" }) })
+      );
+      const t = document.querySelector("equal-size-grid");
+      i(t).toHaveAttribute("class", "");
+    }), d("should apply custom classname", () => {
+      r(
+        /* @__PURE__ */ o(n, { classname: "custom-grid", children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const t = document.querySelector("equal-size-grid");
+      i(t).toHaveAttribute("class", "custom-grid");
+    }), d("should apply multiple classnames", () => {
+      r(
+        /* @__PURE__ */ e(n, { classname: "custom-grid another-class", children: /* @__PURE__ */ e("div", { children: "Child 1" }) })
+      );
+      const t = document.querySelector("equal-size-grid");
+      i(t).toHaveAttribute("class", "custom-grid another-class");
+    });
+  }), s("CSS Custom Properties", () => {
+    d("should set both CSS custom properties", () => {
+      r(
+        /* @__PURE__ */ o(n, { gap: "2rem", itemsPerRow: 3, children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const l = document.querySelector("equal-size-grid").getAttribute("style");
+      i(l).toContain("--esg-gap-size: 2rem"), i(l).toContain("--esg-template-columns: repeat(3, 1fr)");
+    }), d("should update CSS properties when props change", () => {
+      const { rerender: t } = r(
+        /* @__PURE__ */ o(n, { gap: "1rem", itemsPerRow: 3, children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      let l = document.querySelector("equal-size-grid"), c = l.getAttribute("style");
+      i(c).toContain("--esg-gap-size: 1rem"), i(c).toContain("--esg-template-columns: repeat(3, 1fr)"), t(
+        /* @__PURE__ */ o(n, { gap: "3rem", itemsPerRow: 5, children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      ), l = document.querySelector("equal-size-grid"), c = l.getAttribute("style"), i(c).toContain("--esg-gap-size: 3rem"), i(c).toContain("--esg-template-columns: repeat(5, 1fr)");
+    });
+  }), s("Children Handling", () => {
+    d("should handle React elements as children", () => {
+      const { container: t } = r(
+        /* @__PURE__ */ o(n, { children: [
+          /* @__PURE__ */ e("button", { children: "Button 1" }),
+          /* @__PURE__ */ e("button", { children: "Button 2" })
+        ] })
+      ), l = t.querySelectorAll("button");
+      i(l.length).toBe(2);
+    }), d("should handle text nodes as children", () => {
+      const { container: t } = r(
+        /* @__PURE__ */ o(n, { children: [
+          /* @__PURE__ */ e("span", { children: "Text 1" }),
+          /* @__PURE__ */ e("span", { children: "Text 2" })
+        ] })
+      );
+      i(t.textContent).toContain("Text 1"), i(t.textContent).toContain("Text 2");
+    }), d("should preserve child props when cloning", () => {
+      const { container: t } = r(
+        /* @__PURE__ */ o(n, { children: [
+          /* @__PURE__ */ e("div", { className: "custom-class", "data-testid": "child1", children: "Child 1" }),
+          /* @__PURE__ */ e("div", { className: "another-class", "data-testid": "child2", children: "Child 2" })
+        ] })
+      ), l = t.querySelector('[data-testid="child1"]'), c = t.querySelector('[data-testid="child2"]');
+      i(l).toHaveClass("custom-class"), i(c).toHaveClass("another-class");
+    }), d("should handle mixed content types", () => {
+      const { container: t } = r(
+        /* @__PURE__ */ o(n, { children: [
+          /* @__PURE__ */ e("div", { children: "Div element" }),
+          /* @__PURE__ */ e("button", { children: "Button element" }),
+          /* @__PURE__ */ e("span", { children: "Span element" })
+        ] })
+      );
+      i(t.querySelector("div")).toBeInTheDocument(), i(t.querySelector("button")).toBeInTheDocument(), i(t.querySelector("span")).toBeInTheDocument();
+    }), d("should handle single child", () => {
+      const { container: t } = r(
+        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("div", { children: "Only Child" }) })
+      ), l = t.querySelectorAll(".equal-size-grid__item");
+      i(l.length).toBe(1), i(t.textContent).toContain("Only Child");
+    });
+  }), s("Grid Layout Behavior", () => {
+    d("should create grid with 4 columns by default", () => {
+      r(
+        /* @__PURE__ */ o(n, { children: [
+          /* @__PURE__ */ e("div", { children: "1" }),
+          /* @__PURE__ */ e("div", { children: "2" }),
+          /* @__PURE__ */ e("div", { children: "3" }),
+          /* @__PURE__ */ e("div", { children: "4" }),
+          /* @__PURE__ */ e("div", { children: "5" })
+        ] })
+      );
+      const l = document.querySelector("equal-size-grid").getAttribute("style");
+      i(l).toContain("repeat(4, 1fr)");
+    }), d("should handle more children than itemsPerRow", () => {
+      r(
+        /* @__PURE__ */ o(n, { itemsPerRow: 3, children: [
+          /* @__PURE__ */ e("div", { children: "1" }),
+          /* @__PURE__ */ e("div", { children: "2" }),
+          /* @__PURE__ */ e("div", { children: "3" }),
+          /* @__PURE__ */ e("div", { children: "4" }),
+          /* @__PURE__ */ e("div", { children: "5" }),
+          /* @__PURE__ */ e("div", { children: "6" }),
+          /* @__PURE__ */ e("div", { children: "7" })
+        ] })
+      );
+      const t = document.querySelector("equal-size-grid");
+      i(t).toHaveAttribute("data-item-count", "7");
+      const l = document.querySelectorAll(".equal-size-grid__item");
+      i(l.length).toBe(7);
+    }), d("should handle fewer children than itemsPerRow", () => {
+      r(
+        /* @__PURE__ */ o(n, { itemsPerRow: 5, children: [
+          /* @__PURE__ */ e("div", { children: "1" }),
+          /* @__PURE__ */ e("div", { children: "2" })
+        ] })
+      );
+      const t = document.querySelector("equal-size-grid");
+      i(t).toHaveAttribute("data-item-count", "2");
+      const l = document.querySelectorAll(".equal-size-grid__item");
+      i(l.length).toBe(2);
+    });
+  }), s("Edge Cases", () => {
+    d("should handle zero children gracefully", () => {
+      r(/* @__PURE__ */ e(n, { children: [] }));
+      const t = document.querySelector("equal-size-grid");
+      i(t).toBeInTheDocument(), i(t).toHaveAttribute("data-item-count", "0");
+    }), d("should handle very large number of children", () => {
+      const t = Array.from({ length: 50 }, (h, u) => /* @__PURE__ */ o("div", { children: [
+        "Child ",
+        u + 1
+      ] }, u));
+      r(
+        /* @__PURE__ */ e(n, { itemsPerRow: 4, children: t })
+      );
+      const l = document.querySelector("equal-size-grid");
+      i(l).toHaveAttribute("data-item-count", "50");
+      const c = document.querySelectorAll(".equal-size-grid__item");
+      i(c.length).toBe(50);
+    }), d("should handle null children", () => {
+      r(
+        /* @__PURE__ */ o(n, { children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          null,
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const t = document.querySelector("equal-size-grid");
+      i(t).toHaveAttribute("data-item-count", "2");
+    }), d("should handle undefined children", () => {
+      r(
+        /* @__PURE__ */ o(n, { children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          void 0,
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const t = document.querySelector("equal-size-grid");
+      i(t).toHaveAttribute("data-item-count", "2");
+    }), d("should handle boolean children", () => {
+      r(
+        /* @__PURE__ */ o(n, { children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          !1,
+          !0,
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const t = document.querySelector("equal-size-grid");
+      i(t).toHaveAttribute("data-item-count", "2");
+    });
+  }), s("Integration", () => {
+    d("should correctly render with all props and multiple children", () => {
+      const { container: t } = r(
+        /* @__PURE__ */ o(n, { classname: "custom-grid-class", gap: "2.5rem", itemsPerRow: 3, children: [
+          /* @__PURE__ */ e("div", { className: "item-1", children: "Item 1" }),
+          /* @__PURE__ */ e("div", { className: "item-2", children: "Item 2" }),
+          /* @__PURE__ */ e("div", { className: "item-3", children: "Item 3" }),
+          /* @__PURE__ */ e("div", { className: "item-4", children: "Item 4" }),
+          /* @__PURE__ */ e("div", { className: "item-5", children: "Item 5" }),
+          /* @__PURE__ */ e("div", { className: "item-6", children: "Item 6" })
+        ] })
+      ), l = document.querySelector("equal-size-grid");
+      i(l).toHaveAttribute("data-item-count", "6"), i(l).toHaveAttribute("class", "custom-grid-class");
+      const c = l.getAttribute("style");
+      i(c).toContain("--esg-gap-size: 2.5rem"), i(c).toContain("--esg-template-columns: repeat(3, 1fr)");
+      const h = t.querySelectorAll(".equal-size-grid__item");
+      i(h.length).toBe(6), i(t.querySelector(".item-1")).toBeInTheDocument(), i(t.querySelector(".item-2")).toBeInTheDocument(), i(t.querySelector(".item-3")).toBeInTheDocument(), i(t.querySelector(".item-4")).toBeInTheDocument(), i(t.querySelector(".item-5")).toBeInTheDocument(), i(t.querySelector(".item-6")).toBeInTheDocument();
+    }), d("should handle dynamic children updates", () => {
+      const { rerender: t, container: l } = r(
+        /* @__PURE__ */ o(n, { itemsPerRow: 3, children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      let c = document.querySelector("equal-size-grid");
+      i(c).toHaveAttribute("data-item-count", "2"), t(
+        /* @__PURE__ */ o(n, { itemsPerRow: 3, children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" }),
+          /* @__PURE__ */ e("div", { children: "Child 3" }),
+          /* @__PURE__ */ e("div", { children: "Child 4" }),
+          /* @__PURE__ */ e("div", { children: "Child 5" })
+        ] })
+      ), c = document.querySelector("equal-size-grid"), i(c).toHaveAttribute("data-item-count", "5");
+      const h = l.querySelectorAll(".equal-size-grid__item");
+      i(h.length).toBe(5);
+    }), d("should handle all props with edge case values", () => {
+      r(
+        /* @__PURE__ */ e(n, { classname: "", gap: "0", itemsPerRow: 1, children: /* @__PURE__ */ e("div", { children: "Single Item" }) })
+      );
+      const t = document.querySelector("equal-size-grid"), l = t.getAttribute("style");
+      i(l).toContain("--esg-gap-size: 0"), i(l).toContain("--esg-template-columns: repeat(1, 1fr)"), i(t).toHaveAttribute("class", ""), i(t).toHaveAttribute("data-item-count", "1");
+    });
+  });
+});

package/dist/components/ErrorHandler/ErrorHandler.js

@@ -1,5 +1,5 @@
 import { jsx as r, jsxs as o } from "react/jsx-runtime";
-import { p as _ } from "../../index-VjANCDXC.mjs";
+import { p as _ } from "../../index-06PEPfBQ.mjs";
 import { classes as e } from "../../utils/helpers.js";
 import '../../assets/ErrorHandler.css';const s = {
   "error-handler__message": "_error-handler__message_4uq8z_1"
@@ -7,7 +7,7 @@ import '../../assets/ErrorHandler.css';const s = {
 function m({ title: a, message: l }) {
   return /* @__PURE__ */ r("error-handler", { children: /* @__PURE__ */ o("div", { className: e([s["error-handler__message"], "error-handler__message"]), children: [
     /* @__PURE__ */ r("h2", { className: e([s["error-handler__title"], "error-handler__title"]), children: a }),
-    /* @__PURE__ */ r("p", { className: e([s["error-handler__message-text"], "error-handler__message-text"]), children: _(l) })
+    /* @__PURE__ */ r("div", { className: e([s["error-handler__message-text"], "error-handler__message-text"]), children: _(l) })
   ] }) });
 }
 export {

package/dist/components/ErrorHandler/ErrorHandler.test.js

@@ -0,0 +1,158 @@
+import { jsx as r, jsxs as d, Fragment as u } from "react/jsx-runtime";
+import { d as m, b as T, a as B, i as n, r as s, g as e, s as a, v as y } from "../../react.esm-DLSrfVwM.mjs";
+import "../../index-BVxBrkZB.mjs";
+import { ErrorHandler as o } from "./ErrorHandler.js";
+m("ErrorHandler", () => {
+  let g;
+  T(() => {
+    g = document.createElement("div"), g.id = "root", document.body.appendChild(g);
+  }), B(() => {
+    document.body.removeChild(g);
+  }), m("Basic Rendering", () => {
+    n("should render the custom error-handler element", () => {
+      s(/* @__PURE__ */ r(o, { message: "Something went wrong", title: "Error" }));
+      const t = document.querySelector("error-handler");
+      e(t).toBeInTheDocument();
+    }), n("should render title", () => {
+      s(/* @__PURE__ */ r(o, { message: "Test message", title: "Test Error" })), e(a.getByText("Test Error")).toBeInTheDocument();
+    }), n("should render message", () => {
+      s(/* @__PURE__ */ r(o, { message: "Something went wrong", title: "Error" })), e(a.getByText("Something went wrong")).toBeInTheDocument();
+    }), n("should render title in h2 element", () => {
+      s(/* @__PURE__ */ r(o, { message: "Test message", title: "Test Title" }));
+      const t = a.getByRole("heading", { level: 2 });
+      e(t).toHaveTextContent("Test Title");
+    }), n("should render message in div element", () => {
+      const { container: t } = s(/* @__PURE__ */ r(o, { message: "Test message", title: "Error" })), c = t.querySelector("div.error-handler__message-text");
+      e(c).toBeInTheDocument(), e(c).toHaveTextContent("Test message");
+    });
+  }), m("CSS Classes", () => {
+    n("should apply error-handler__message class to container div", () => {
+      s(/* @__PURE__ */ r(o, { message: "Message", title: "Error" }));
+      const t = document.querySelector(".error-handler__message");
+      e(t).toBeInTheDocument();
+    }), n("should apply error-handler__title class to h2", () => {
+      s(/* @__PURE__ */ r(o, { message: "Message", title: "Error" }));
+      const t = document.querySelector(".error-handler__title");
+      e(t).toBeInTheDocument(), e(t == null ? void 0 : t.tagName).toBe("H2");
+    }), n("should apply error-handler__message-text class to div", () => {
+      s(/* @__PURE__ */ r(o, { message: "Test", title: "Error" }));
+      const t = document.querySelector(".error-handler__message-text");
+      e(t).toBeInTheDocument(), e(t == null ? void 0 : t.tagName).toBe("DIV");
+    });
+  }), m("HTML Parsing in Message", () => {
+    n("should parse HTML tags in message", () => {
+      s(/* @__PURE__ */ r(o, { message: "<strong>Bold text</strong>", title: "Error" }));
+      const t = document.querySelector("strong");
+      e(t).toBeInTheDocument(), e(t).toHaveTextContent("Bold text");
+    }), n("should parse multiple HTML tags", () => {
+      s(/* @__PURE__ */ r(o, { message: "<em>Italic</em> and <strong>bold</strong>", title: "Error" })), e(document.querySelector("em")).toBeInTheDocument(), e(document.querySelector("strong")).toBeInTheDocument();
+    }), n("should parse links in message", () => {
+      s(/* @__PURE__ */ r(o, { message: '<a href="/help">Click here</a> for help', title: "Error" }));
+      const t = a.getByRole("link", { name: /click here/i });
+      e(t).toBeInTheDocument(), e(t).toHaveAttribute("href", "/help");
+    }), n("should parse nested HTML elements", () => {
+      s(/* @__PURE__ */ r(o, { message: "<div><span>Nested content</span></div>", title: "Error" }));
+      const t = document.querySelector("span");
+      e(t).toBeInTheDocument(), e(t).toHaveTextContent("Nested content");
+    }), n("should handle plain text without HTML", () => {
+      s(/* @__PURE__ */ r(o, { message: "Plain text message", title: "Error" })), e(a.getByText("Plain text message")).toBeInTheDocument();
+    }), n("should parse line breaks", () => {
+      s(/* @__PURE__ */ r(o, { message: "Line 1<br/>Line 2", title: "Error" }));
+      const t = document.querySelector("br");
+      e(t).toBeInTheDocument();
+    }), n("should handle mixed content", () => {
+      s(/* @__PURE__ */ r(o, { message: "Some text <strong>bold</strong> more text", title: "Error" }));
+      const t = document.querySelector(".error-handler__message-text");
+      e(t).toHaveTextContent("Some text bold more text"), e(t == null ? void 0 : t.querySelector("strong")).toBeInTheDocument();
+    });
+  }), m("Title Variations", () => {
+    n("should render short title", () => {
+      s(/* @__PURE__ */ r(o, { message: "Message", title: "Error" })), e(a.getByText("Error")).toBeInTheDocument();
+    }), n("should render long title", () => {
+      const t = "This is a very long error title that describes the problem in detail";
+      s(/* @__PURE__ */ r(o, { message: "Message", title: t })), e(a.getByText(t)).toBeInTheDocument();
+    }), n("should render title with special characters", () => {
+      s(/* @__PURE__ */ r(o, { message: "Message", title: "Error: 404 - Not Found!" })), e(a.getByText("Error: 404 - Not Found!")).toBeInTheDocument();
+    }), n("should render title with numbers", () => {
+      s(/* @__PURE__ */ r(o, { message: "Message", title: "Error Code 500" })), e(a.getByText("Error Code 500")).toBeInTheDocument();
+    }), n("should handle empty title", () => {
+      s(/* @__PURE__ */ r(o, { message: "Message", title: "" }));
+      const t = a.getByRole("heading", { level: 2 });
+      e(t).toHaveTextContent("");
+    });
+  }), m("Message Variations", () => {
+    n("should render short message", () => {
+      s(/* @__PURE__ */ r(o, { message: "Oops!", title: "Error" })), e(a.getByText("Oops!")).toBeInTheDocument();
+    }), n("should render long message", () => {
+      const t = "This is a very long error message that provides detailed information about what went wrong and how the user might be able to fix it.";
+      s(/* @__PURE__ */ r(o, { message: t, title: "Error" })), e(a.getByText(t)).toBeInTheDocument();
+    }), n("should render message with special characters", () => {
+      s(/* @__PURE__ */ r(o, { message: "Error: Can't process & save data!", title: "Error" })), e(a.getByText(/Error: Can't process & save data!/)).toBeInTheDocument();
+    }), n("should render message with quotes", () => {
+      s(/* @__PURE__ */ r(o, { message: 'The "file" could not be found', title: "Error" })), e(a.getByText(/The "file" could not be found/)).toBeInTheDocument();
+    }), n("should handle empty message", () => {
+      s(/* @__PURE__ */ r(o, { message: "", title: "Error" }));
+      const t = document.querySelector(".error-handler__message-text");
+      e(t).toBeInTheDocument(), e(t).toHaveTextContent("");
+    }), n("should render message with multiple paragraphs", () => {
+      s(/* @__PURE__ */ r(o, { message: "<p>Paragraph 1</p><p>Paragraph 2</p>", title: "Error" }));
+      const t = document.querySelectorAll("p");
+      e(t.length).toBeGreaterThanOrEqual(2);
+    });
+  }), m("Component Structure", () => {
+    n("should have correct DOM hierarchy", () => {
+      const { container: t } = s(/* @__PURE__ */ r(o, { message: "Message", title: "Error" })), c = t.querySelector("error-handler"), l = c == null ? void 0 : c.querySelector(".error-handler__message"), h = l == null ? void 0 : l.querySelector("h2"), i = l == null ? void 0 : l.querySelector(".error-handler__message-text");
+      e(c).toBeInTheDocument(), e(l).toBeInTheDocument(), e(h).toBeInTheDocument(), e(i).toBeInTheDocument();
+    }), n("should have h2 before div in DOM order", () => {
+      var h, i;
+      const { container: t } = s(/* @__PURE__ */ r(o, { message: "Test", title: "Error" })), c = t.querySelector(".error-handler__message"), l = Array.from((c == null ? void 0 : c.children) || []);
+      e((h = l[0]) == null ? void 0 : h.tagName).toBe("H2"), e((i = l[1]) == null ? void 0 : i.tagName).toBe("DIV");
+    });
+  }), m("Edge Cases", () => {
+    n("should handle HTML entities in message", () => {
+      const t = y.spyOn(console, "error").mockImplementation(() => {
+      }), { container: c } = s(/* @__PURE__ */ r(o, { message: '<tag> & "text"', title: "Error" })), l = c.querySelector(".error-handler__message-text");
+      e(l).toBeInTheDocument();
+      const h = l == null ? void 0 : l.querySelector("tag");
+      e(h).toBeInTheDocument(), t.mockRestore();
+    }), n("should handle unicode characters", () => {
+      s(/* @__PURE__ */ r(o, { message: "Error: © 2024 — Something™ went wrong… 😢", title: "Error" })), e(a.getByText(/Error: © 2024 — Something™ went wrong… 😢/)).toBeInTheDocument();
+    }), n("should handle message with only HTML tags", () => {
+      s(/* @__PURE__ */ r(o, { message: "<strong></strong>", title: "Error" }));
+      const t = document.querySelector("strong");
+      e(t).toBeInTheDocument();
+    }), n("should handle self-closing tags", () => {
+      s(/* @__PURE__ */ r(o, { message: "Line 1<br />Line 2", title: "Error" }));
+      const t = document.querySelector("br");
+      e(t).toBeInTheDocument();
+    }), n("should handle message with scripts (security consideration)", () => {
+      s(/* @__PURE__ */ r(o, { message: '<script>alert("test")<\/script>Normal text', title: "Error" })), e(a.getByText(/Normal text/)).toBeInTheDocument();
+    });
+  }), m("Integration", () => {
+    n("should render complete error handler with all features", () => {
+      const { container: t } = s(
+        /* @__PURE__ */ r(
+          o,
+          {
+            message: 'The page you are looking for could not be found. <a href="/">Go home</a> or <a href="/contact">contact support</a>.',
+            title: "Error 404: Page Not Found"
+          }
+        )
+      ), c = t.querySelector("error-handler");
+      e(c).toBeInTheDocument(), e(a.getByText("Error 404: Page Not Found")).toBeInTheDocument(), e(a.getByText(/The page you are looking for could not be found/)).toBeInTheDocument();
+      const l = a.getAllByRole("link");
+      e(l).toHaveLength(2), e(l[0]).toHaveAttribute("href", "/"), e(l[1]).toHaveAttribute("href", "/contact");
+    }), n("should render multiple ErrorHandler components independently", () => {
+      const { container: t } = s(
+        /* @__PURE__ */ d(u, { children: [
+          /* @__PURE__ */ r(o, { message: "First error message", title: "Error 1" }),
+          /* @__PURE__ */ r(o, { message: "Second error message", title: "Error 2" })
+        ] })
+      ), c = t.querySelectorAll("error-handler");
+      e(c).toHaveLength(2), e(a.getByText("Error 1")).toBeInTheDocument(), e(a.getByText("Error 2")).toBeInTheDocument(), e(a.getByText("First error message")).toBeInTheDocument(), e(a.getByText("Second error message")).toBeInTheDocument();
+    }), n("should update when props change", () => {
+      const { rerender: t } = s(/* @__PURE__ */ r(o, { message: "Message 1", title: "Error 1" }));
+      e(a.getByText("Error 1")).toBeInTheDocument(), e(a.getByText("Message 1")).toBeInTheDocument(), t(/* @__PURE__ */ r(o, { message: "Message 2", title: "Error 2" })), e(a.getByText("Error 2")).toBeInTheDocument(), e(a.getByText("Message 2")).toBeInTheDocument(), e(a.queryByText("Error 1")).not.toBeInTheDocument(), e(a.queryByText("Message 1")).not.toBeInTheDocument();
+    });
+  });
+});