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

package/dist/components/GridList/GridList.test.js

@@ -0,0 +1,371 @@
+import { jsxs as m, jsx as e, Fragment as a } from "react/jsx-runtime";
+import { v as c, d as r, b as g, a as y, i as s, r as o, s as i, g as t } from "../../react.esm-DLSrfVwM.mjs";
+import { GridList as n } from "./GridList.js";
+c.mock("../../utils/helpers", () => ({
+  classes: (l) => l.filter(Boolean).join(" ")
+}));
+c.mock("./GridList.module.scss", () => ({
+  default: {
+    "grid-list": "grid-list-module",
+    "grid-list-header": "grid-list-header-module",
+    "grid-list---5-columns": "grid-list---5-columns-module",
+    "grid-list--0-columns": "grid-list--0-columns-module",
+    "grid-list--1-columns": "grid-list--1-columns-module",
+    "grid-list--2-columns": "grid-list--2-columns-module",
+    "grid-list--3-columns": "grid-list--3-columns-module",
+    "grid-list--4-columns": "grid-list--4-columns-module",
+    "grid-list--5-columns": "grid-list--5-columns-module",
+    "grid-list--6-columns": "grid-list--6-columns-module",
+    "grid-list--7-columns": "grid-list--7-columns-module",
+    "grid-list--8-columns": "grid-list--8-columns-module",
+    "grid-list--9-columns": "grid-list--9-columns-module",
+    "grid-list--10-columns": "grid-list--10-columns-module"
+  }
+}));
+r("GridList", () => {
+  g(() => {
+    c.clearAllMocks();
+  }), y(() => {
+    c.restoreAllMocks();
+  }), r("Basic Rendering", () => {
+    s("should render a ul element", () => {
+      o(
+        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("li", { children: "Item 1" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toBeInTheDocument(), t(l.tagName).toBe("UL");
+    }), s("should render children inside the ul", () => {
+      o(
+        /* @__PURE__ */ m(n, { children: [
+          /* @__PURE__ */ e("li", { children: "Item 1" }),
+          /* @__PURE__ */ e("li", { children: "Item 2" }),
+          /* @__PURE__ */ e("li", { children: "Item 3" })
+        ] })
+      ), t(i.getByText("Item 1")).toBeInTheDocument(), t(i.getByText("Item 2")).toBeInTheDocument(), t(i.getByText("Item 3")).toBeInTheDocument();
+    }), s("should apply base grid-list class", () => {
+      o(
+        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toHaveClass("grid-list-module");
+    }), s("should render with no header by default", () => {
+      o(
+        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      ), t(i.queryByRole("heading")).not.toBeInTheDocument();
+    });
+  }), r("Header Text", () => {
+    s("should render header when headerText is provided", () => {
+      o(
+        /* @__PURE__ */ e(n, { headerText: "My Grid", children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("heading", { level: 3 });
+      t(l).toBeInTheDocument(), t(l).toHaveTextContent("My Grid");
+    }), s("should not render header when headerText is empty string", () => {
+      o(
+        /* @__PURE__ */ e(n, { headerText: "", children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      ), t(i.queryByRole("heading")).not.toBeInTheDocument();
+    }), s("should apply header classes", () => {
+      o(
+        /* @__PURE__ */ e(n, { headerText: "Test Header", children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("heading");
+      t(l).toHaveClass("grid-list-header-module"), t(l).toHaveClass("grid-list-header");
+    }), s("should render h3 element for header", () => {
+      o(
+        /* @__PURE__ */ e(n, { headerText: "Title", children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByText("Title");
+      t(l.tagName).toBe("H3");
+    }), s("should handle special characters in header text", () => {
+      o(
+        /* @__PURE__ */ e(n, { headerText: "Grid & List <Title>", children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      ), t(i.getByText("Grid & List <Title>")).toBeInTheDocument();
+    }), s("should handle unicode characters in header text", () => {
+      o(
+        /* @__PURE__ */ e(n, { headerText: "🎨 Gallery Grid", children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      ), t(i.getByText("🎨 Gallery Grid")).toBeInTheDocument();
+    });
+  }), r("Number of Columns", () => {
+    s("should use 2 columns by default", () => {
+      o(
+        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toHaveClass("grid-list--2-columns-module");
+    }), s("should apply 1 column class", () => {
+      o(
+        /* @__PURE__ */ e(n, { numberOfColumns: 1, children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toHaveClass("grid-list--1-columns-module");
+    }), s("should apply 3 column class", () => {
+      o(
+        /* @__PURE__ */ e(n, { numberOfColumns: 3, children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toHaveClass("grid-list--3-columns-module");
+    }), s("should apply 4 column class", () => {
+      o(
+        /* @__PURE__ */ e(n, { numberOfColumns: 4, children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toHaveClass("grid-list--4-columns-module");
+    }), s("should apply 5 column class", () => {
+      o(
+        /* @__PURE__ */ e(n, { numberOfColumns: 5, children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toHaveClass("grid-list--5-columns-module");
+    }), s("should apply 6 column class", () => {
+      o(
+        /* @__PURE__ */ e(n, { numberOfColumns: 6, children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toHaveClass("grid-list--6-columns-module");
+    }), s("should apply 7 column class", () => {
+      o(
+        /* @__PURE__ */ e(n, { numberOfColumns: 7, children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toHaveClass("grid-list--7-columns-module");
+    }), s("should apply 8 column class", () => {
+      o(
+        /* @__PURE__ */ e(n, { numberOfColumns: 8, children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toHaveClass("grid-list--8-columns-module");
+    }), s("should apply 9 column class", () => {
+      o(
+        /* @__PURE__ */ e(n, { numberOfColumns: 9, children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toHaveClass("grid-list--9-columns-module");
+    }), s("should apply 10 column class", () => {
+      o(
+        /* @__PURE__ */ e(n, { numberOfColumns: 10, children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toHaveClass("grid-list--10-columns-module");
+    }), s("should cap numberOfColumns at 10 when 11 is provided", () => {
+      o(
+        /* @__PURE__ */ e(n, { numberOfColumns: 11, children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toHaveClass("grid-list--10-columns-module");
+    }), s("should cap numberOfColumns at 10 when 15 is provided", () => {
+      o(
+        /* @__PURE__ */ e(n, { numberOfColumns: 15, children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toHaveClass("grid-list--10-columns-module");
+    }), s("should cap numberOfColumns at 10 when 100 is provided", () => {
+      o(
+        /* @__PURE__ */ e(n, { numberOfColumns: 100, children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toHaveClass("grid-list--10-columns-module");
+    });
+  }), r("Children Rendering", () => {
+    s("should render single child", () => {
+      o(
+        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("li", { children: "Single Item" }) })
+      );
+      const l = i.getAllByRole("listitem");
+      t(l).toHaveLength(1);
+    }), s("should render multiple children", () => {
+      o(
+        /* @__PURE__ */ m(n, { children: [
+          /* @__PURE__ */ e("li", { children: "Item 1" }),
+          /* @__PURE__ */ e("li", { children: "Item 2" }),
+          /* @__PURE__ */ e("li", { children: "Item 3" }),
+          /* @__PURE__ */ e("li", { children: "Item 4" })
+        ] })
+      );
+      const l = i.getAllByRole("listitem");
+      t(l).toHaveLength(4);
+    }), s("should render complex children with nested elements", () => {
+      o(
+        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("li", { children: /* @__PURE__ */ m("div", { children: [
+          /* @__PURE__ */ e("span", { children: "Complex" }),
+          /* @__PURE__ */ e("strong", { children: "Item" })
+        ] }) }) })
+      ), t(i.getByText("Complex")).toBeInTheDocument(), t(i.getByText("Item")).toBeInTheDocument();
+    }), s("should render children with custom components", () => {
+      const l = ({ text: d }) => /* @__PURE__ */ e("li", { children: d });
+      o(
+        /* @__PURE__ */ m(n, { children: [
+          /* @__PURE__ */ e(l, { text: "Custom 1" }),
+          /* @__PURE__ */ e(l, { text: "Custom 2" })
+        ] })
+      ), t(i.getByText("Custom 1")).toBeInTheDocument(), t(i.getByText("Custom 2")).toBeInTheDocument();
+    }), s("should handle empty children gracefully", () => {
+      o(
+        /* @__PURE__ */ e(n, { children: null })
+      );
+      const l = i.getByRole("list");
+      t(l).toBeInTheDocument();
+    }), s("should render children with conditional rendering", () => {
+      o(
+        /* @__PURE__ */ m(n, { children: [
+          /* @__PURE__ */ e("li", { children: "Conditional Item" }),
+          /* @__PURE__ */ e("li", { children: "Always Item" })
+        ] })
+      ), t(i.getByText("Conditional Item")).toBeInTheDocument(), t(i.getByText("Always Item")).toBeInTheDocument();
+    });
+  }), r("Class Application", () => {
+    s("should apply both module and global classes to list", () => {
+      o(
+        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toHaveClass("grid-list-module"), t(l).toHaveClass("grid-list--2-columns-module");
+    }), s("should apply column class based on numberOfColumns prop", () => {
+      o(
+        /* @__PURE__ */ e(n, { numberOfColumns: 3, children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toHaveClass("grid-list--3-columns-module"), t(l).not.toHaveClass("grid-list--2-columns-module");
+    }), s("should apply both header classes when header is rendered", () => {
+      o(
+        /* @__PURE__ */ e(n, { headerText: "Header", children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("heading");
+      t(l).toHaveClass("grid-list-header-module"), t(l).toHaveClass("grid-list-header");
+    });
+  }), r("Edge Cases", () => {
+    s("should handle numberOfColumns as 0", () => {
+      o(
+        /* @__PURE__ */ e(n, { numberOfColumns: 0, children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toHaveClass("grid-list--0-columns-module");
+    }), s("should handle negative numberOfColumns", () => {
+      o(
+        /* @__PURE__ */ e(n, { numberOfColumns: -5, children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toHaveClass("grid-list---5-columns-module");
+    }), s("should handle very long header text", () => {
+      const l = "A".repeat(500);
+      o(
+        /* @__PURE__ */ e(n, { headerText: l, children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      ), t(i.getByText(l)).toBeInTheDocument();
+    }), s("should render with whitespace-only header text", () => {
+      o(
+        /* @__PURE__ */ e(n, { headerText: "   ", children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("heading");
+      t(l).toBeInTheDocument(), t(l.textContent).toBe("   ");
+    }), s("should handle many children", () => {
+      const l = Array.from(
+        { length: 100 },
+        (h, u) => /* @__PURE__ */ m("li", { children: [
+          "Item ",
+          u
+        ] }, u)
+      );
+      o(/* @__PURE__ */ e(n, { children: l }));
+      const d = i.getAllByRole("listitem");
+      t(d).toHaveLength(100);
+    }), s("should handle fragment children", () => {
+      o(
+        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ m(a, { children: [
+          /* @__PURE__ */ e("li", { children: "Fragment Item 1" }),
+          /* @__PURE__ */ e("li", { children: "Fragment Item 2" })
+        ] }) })
+      ), t(i.getByText("Fragment Item 1")).toBeInTheDocument(), t(i.getByText("Fragment Item 2")).toBeInTheDocument();
+    });
+  }), r("Integration", () => {
+    s("should render complete grid with header and multiple columns", () => {
+      o(
+        /* @__PURE__ */ m(n, { headerText: "Product Gallery", numberOfColumns: 4, children: [
+          /* @__PURE__ */ e("li", { children: "Product 1" }),
+          /* @__PURE__ */ e("li", { children: "Product 2" }),
+          /* @__PURE__ */ e("li", { children: "Product 3" }),
+          /* @__PURE__ */ e("li", { children: "Product 4" }),
+          /* @__PURE__ */ e("li", { children: "Product 5" }),
+          /* @__PURE__ */ e("li", { children: "Product 6" })
+        ] })
+      );
+      const l = i.getByRole("heading", { level: 3 });
+      t(l).toHaveTextContent("Product Gallery");
+      const d = i.getByRole("list");
+      t(d).toHaveClass("grid-list--4-columns-module");
+      const h = i.getAllByRole("listitem");
+      t(h).toHaveLength(6);
+    }), s("should render grid with maximum columns and header", () => {
+      o(
+        /* @__PURE__ */ m(n, { headerText: "Maximum Grid", numberOfColumns: 10, children: [
+          /* @__PURE__ */ e("li", { children: "Item 1" }),
+          /* @__PURE__ */ e("li", { children: "Item 2" })
+        ] })
+      );
+      const l = i.getByRole("heading");
+      t(l).toHaveTextContent("Maximum Grid");
+      const d = i.getByRole("list");
+      t(d).toHaveClass("grid-list--10-columns-module");
+    }), s("should update when numberOfColumns changes", () => {
+      const { rerender: l } = o(
+        /* @__PURE__ */ e(n, { numberOfColumns: 2, children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      let d = i.getByRole("list");
+      t(d).toHaveClass("grid-list--2-columns-module"), l(
+        /* @__PURE__ */ e(n, { numberOfColumns: 5, children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      ), d = i.getByRole("list"), t(d).toHaveClass("grid-list--5-columns-module"), t(d).not.toHaveClass("grid-list--2-columns-module");
+    }), s("should update when headerText changes", () => {
+      const { rerender: l } = o(
+        /* @__PURE__ */ e(n, { headerText: "Original Header", children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      t(i.getByText("Original Header")).toBeInTheDocument(), l(
+        /* @__PURE__ */ e(n, { headerText: "Updated Header", children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      ), t(i.queryByText("Original Header")).not.toBeInTheDocument(), t(i.getByText("Updated Header")).toBeInTheDocument();
+    }), s("should show/hide header when headerText changes to/from empty", () => {
+      const { rerender: l } = o(
+        /* @__PURE__ */ e(n, { headerText: "Visible Header", children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      t(i.getByRole("heading")).toBeInTheDocument(), l(
+        /* @__PURE__ */ e(n, { headerText: "", children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      ), t(i.queryByRole("heading")).not.toBeInTheDocument(), l(
+        /* @__PURE__ */ e(n, { headerText: "Back Again", children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      ), t(i.getByRole("heading")).toBeInTheDocument(), t(i.getByText("Back Again")).toBeInTheDocument();
+    });
+  }), r("Default Props", () => {
+    s("should use default numberOfColumns of 2", () => {
+      o(
+        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toHaveClass("grid-list--2-columns-module");
+    }), s("should use default headerText of empty string", () => {
+      o(
+        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      ), t(i.queryByRole("heading")).not.toBeInTheDocument();
+    }), s("should use all defaults when only children provided", () => {
+      o(
+        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toHaveClass("grid-list--2-columns-module"), t(i.queryByRole("heading")).not.toBeInTheDocument();
+    });
+  }), r("Column Cap Behavior", () => {
+    s("should not cap numberOfColumns when exactly 10", () => {
+      o(
+        /* @__PURE__ */ e(n, { numberOfColumns: 10, children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toHaveClass("grid-list--10-columns-module");
+    }), s("should cap numberOfColumns at first value over 10", () => {
+      o(
+        /* @__PURE__ */ e(n, { numberOfColumns: 11, children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toHaveClass("grid-list--10-columns-module"), t(l).not.toHaveClass("grid-list--11-columns-module");
+    }), s("should cap large numberOfColumns values", () => {
+      o(
+        /* @__PURE__ */ e(n, { numberOfColumns: 1e3, children: /* @__PURE__ */ e("li", { children: "Item" }) })
+      );
+      const l = i.getByRole("list");
+      t(l).toHaveClass("grid-list--10-columns-module");
+    });
+  });
+});