@scrippsproduct/networks-ui-library 1.1.9 → 1.1.10

package/dist/components/ResultsTableHeader/ResultsTableHeader.test.js

@@ -0,0 +1,275 @@
+import { jsx as o } from "react/jsx-runtime";
+import { d as m, i as n, r, g as s, s as c } from "../../react.esm-DLSrfVwM.mjs";
+import { ResultsTableHeader as a } from "./ResultsTableHeader.js";
+m("ResultsTableHeader", () => {
+  m("Basic Rendering", () => {
+    n("should render header row wrapper", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelector(".results-table__header-row");
+      s(t).toBeInTheDocument();
+    }), n("should render header items for each column", () => {
+      const e = [
+        { title: "Name", resultKey: "name" },
+        { title: "Age", resultKey: "age" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelectorAll(".results-table__header");
+      s(t).toHaveLength(2);
+    }), n("should render column titles", () => {
+      r(/* @__PURE__ */ o(a, { columns: [
+        { title: "Name", resultKey: "name" },
+        { title: "Email", resultKey: "email" }
+      ] })), s(c.getByText("Name")).toBeInTheDocument(), s(c.getByText("Email")).toBeInTheDocument();
+    }), n("should render all column titles in order", () => {
+      const e = [
+        { title: "First", resultKey: "first" },
+        { title: "Second", resultKey: "second" },
+        { title: "Third", resultKey: "third" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelectorAll(".results-table__header");
+      s(t[0]).toHaveTextContent("First"), s(t[1]).toHaveTextContent("Second"), s(t[2]).toHaveTextContent("Third");
+    });
+  }), m("Columns Prop", () => {
+    n("should render one header per column", () => {
+      const e = [
+        { title: "Name", resultKey: "name" },
+        { title: "Age", resultKey: "age" },
+        { title: "Email", resultKey: "email" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelectorAll(".results-table__header");
+      s(t).toHaveLength(3);
+    }), n("should handle single column", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelectorAll(".results-table__header");
+      s(t).toHaveLength(1);
+    }), n("should handle multiple columns", () => {
+      const e = [
+        { title: "ID", resultKey: "id" },
+        { title: "Name", resultKey: "name" },
+        { title: "Email", resultKey: "email" },
+        { title: "Phone", resultKey: "phone" },
+        { title: "City", resultKey: "city" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelectorAll(".results-table__header");
+      s(t).toHaveLength(5);
+    }), n("should handle empty columns array", () => {
+      const e = [], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelectorAll(".results-table__header");
+      s(t).toHaveLength(0);
+    }), n("should use column title for header text", () => {
+      r(/* @__PURE__ */ o(a, { columns: [
+        { title: "Full Name", resultKey: "name" }
+      ] })), s(c.getByText("Full Name")).toBeInTheDocument();
+    }), n("should not render resultKey in header", () => {
+      r(/* @__PURE__ */ o(a, { columns: [
+        { title: "Name", resultKey: "fullNameField" }
+      ] })), s(c.getByText("Name")).toBeInTheDocument(), s(c.queryByText("fullNameField")).not.toBeInTheDocument();
+    });
+  }), m("Dynamic CSS Classes", () => {
+    n("should add dynamic class based on column title", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelector(".results-table__name");
+      s(t).toBeInTheDocument();
+    }), n("should convert column title to lowercase for class", () => {
+      const e = [
+        { title: "EMAIL", resultKey: "email" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelector(".results-table__email");
+      s(t).toBeInTheDocument();
+    }), n("should replace first space with hyphen in class", () => {
+      const e = [
+        { title: "Full Name", resultKey: "name" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelector(".results-table__full-name");
+      s(t).toBeInTheDocument();
+    }), n("should handle multiple spaces in column title", () => {
+      const e = [
+        { title: "First Middle Last", resultKey: "name" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelector(".results-table__first-middle");
+      s(t).toBeInTheDocument();
+    }), n("should apply different dynamic classes to different columns", () => {
+      const e = [
+        { title: "Name", resultKey: "name" },
+        { title: "Age", resultKey: "age" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e }));
+      s(l.querySelector(".results-table__name")).toBeInTheDocument(), s(l.querySelector(".results-table__age")).toBeInTheDocument();
+    });
+  }), m("Header Keys", () => {
+    n("should generate unique keys for headers", () => {
+      const e = [
+        { title: "Name", resultKey: "name" },
+        { title: "Age", resultKey: "age" },
+        { title: "Email", resultKey: "email" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelectorAll(".results-table__header");
+      s(t).toHaveLength(3);
+    }), n("should use title-based keys for headers", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelectorAll(".results-table__header");
+      s(t).toHaveLength(1);
+    });
+  }), m("CSS Classes", () => {
+    n("should apply results-table__row class to header row", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelector(".results-table__header-row");
+      s(t).toHaveClass("results-table__row");
+    }), n("should apply results-table__header-row class", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelector(".results-table__row");
+      s(t).toHaveClass("results-table__header-row");
+    }), n("should apply results-table__header class to headers", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelector(".results-table__header");
+      s(t).toHaveClass("results-table__header");
+    }), n("should apply multiple classes to header row", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelector(".results-table__header-row");
+      s(t).toHaveClass("results-table__row"), s(t).toHaveClass("results-table__header-row");
+    }), n("should apply multiple classes to header items", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelector(".results-table__header");
+      s(t).toHaveClass("results-table__header"), s(t).toHaveClass("results-table__name");
+    });
+  }), m("Default Props", () => {
+    n("should use default empty columns array", () => {
+      const { container: e } = r(/* @__PURE__ */ o(a, { columns: [] })), l = e.querySelector(".results-table__header-row");
+      s(l).toBeInTheDocument();
+      const t = e.querySelectorAll(".results-table__header");
+      s(t).toHaveLength(0);
+    }), n("should render empty header row when no columns provided", () => {
+      const { container: e } = r(/* @__PURE__ */ o(a, { columns: [] })), l = e.querySelector(".results-table__header-row");
+      s(l).toBeInTheDocument(), s(l == null ? void 0 : l.children).toHaveLength(0);
+    });
+  }), m("Integration Tests", () => {
+    n("should render complete header with all columns", () => {
+      const e = [
+        { title: "ID", resultKey: "id" },
+        { title: "Name", resultKey: "name" },
+        { title: "Email", resultKey: "email" },
+        { title: "Phone", resultKey: "phone" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelector(".results-table__header-row");
+      s(t).toBeInTheDocument();
+      const u = l.querySelectorAll(".results-table__header");
+      s(u).toHaveLength(4), s(c.getByText("ID")).toBeInTheDocument(), s(c.getByText("Name")).toBeInTheDocument(), s(c.getByText("Email")).toBeInTheDocument(), s(c.getByText("Phone")).toBeInTheDocument();
+    }), n("should render headers with correct structure", () => {
+      const e = [
+        { title: "Name", resultKey: "name" },
+        { title: "Age", resultKey: "age" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelector(".results-table__header-row");
+      s(t == null ? void 0 : t.children).toHaveLength(2);
+      const u = t == null ? void 0 : t.children[0], i = t == null ? void 0 : t.children[1];
+      s(u).toHaveClass("results-table__header"), s(i).toHaveClass("results-table__header");
+    }), n("should match column count with header count", () => {
+      const e = [
+        { title: "Col1", resultKey: "col1" },
+        { title: "Col2", resultKey: "col2" },
+        { title: "Col3", resultKey: "col3" },
+        { title: "Col4", resultKey: "col4" },
+        { title: "Col5", resultKey: "col5" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelectorAll(".results-table__header");
+      s(t.length).toBe(e.length);
+    }), n("should render all dynamic classes correctly", () => {
+      const e = [
+        { title: "First Name", resultKey: "firstName" },
+        { title: "Last Name", resultKey: "lastName" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e }));
+      s(l.querySelector(".results-table__first-name")).toBeInTheDocument(), s(l.querySelector(".results-table__last-name")).toBeInTheDocument();
+    });
+  }), m("Type Safety", () => {
+    n("should accept valid column definitions", () => {
+      const e = [
+        { title: "Name", resultKey: "name" },
+        { title: "Age", resultKey: "age" }
+      ];
+      s(() => {
+        r(/* @__PURE__ */ o(a, { columns: e }));
+      }).not.toThrow();
+    }), n("should accept empty columns array", () => {
+      const e = [];
+      s(() => {
+        r(/* @__PURE__ */ o(a, { columns: e }));
+      }).not.toThrow();
+    }), n("should accept columns with different title and resultKey", () => {
+      const e = [
+        { title: "Full Name", resultKey: "name" },
+        { title: "Age (years)", resultKey: "age" }
+      ];
+      s(() => {
+        r(/* @__PURE__ */ o(a, { columns: e }));
+      }).not.toThrow();
+    }), n("should accept columns with special characters in title", () => {
+      const e = [
+        { title: "Name & Surname", resultKey: "name" },
+        { title: "Email (Primary)", resultKey: "email" }
+      ];
+      s(() => {
+        r(/* @__PURE__ */ o(a, { columns: e }));
+      }).not.toThrow();
+    });
+  }), m("Edge Cases", () => {
+    n("should handle very long column titles", () => {
+      r(/* @__PURE__ */ o(a, { columns: [
+        { title: "This is a very long column title that might wrap or overflow in the header", resultKey: "long" }
+      ] })), s(c.getByText(/This is a very long column title/)).toBeInTheDocument();
+    }), n("should handle empty string column title", () => {
+      const e = [
+        { title: "", resultKey: "empty" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelectorAll(".results-table__header");
+      s(t).toHaveLength(1), s(t[0]).toHaveTextContent("");
+    }), n("should handle column title with only spaces", () => {
+      const e = [
+        { title: "   ", resultKey: "spaces" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelectorAll(".results-table__header");
+      s(t).toHaveLength(1);
+    }), n("should handle special characters in column title", () => {
+      r(/* @__PURE__ */ o(a, { columns: [
+        { title: "Name & Surname (Required)", resultKey: "name" }
+      ] })), s(c.getByText("Name & Surname (Required)")).toBeInTheDocument();
+    }), n("should handle many columns", () => {
+      const e = Array.from({ length: 20 }, (u, i) => ({
+        title: `Column ${i + 1}`,
+        resultKey: `col${i + 1}`
+      })), { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelectorAll(".results-table__header");
+      s(t).toHaveLength(20);
+    }), n("should handle column titles with numbers", () => {
+      r(/* @__PURE__ */ o(a, { columns: [
+        { title: "Column 1", resultKey: "col1" },
+        { title: "Column 2", resultKey: "col2" }
+      ] })), s(c.getByText("Column 1")).toBeInTheDocument(), s(c.getByText("Column 2")).toBeInTheDocument();
+    }), n("should handle duplicate column titles", () => {
+      const e = [
+        { title: "Name", resultKey: "firstName" },
+        { title: "Name", resultKey: "lastName" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelectorAll(".results-table__header");
+      s(t).toHaveLength(2);
+      const u = c.getAllByText("Name"), i = c.getAllByText("Name 2");
+      s(u).toHaveLength(1), s(i).toHaveLength(1);
+    }), n("should handle column title with leading/trailing spaces", () => {
+      const e = [
+        { title: "  Name  ", resultKey: "name" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelector(".results-table__header");
+      s(t == null ? void 0 : t.textContent).toBe("  Name  ");
+    }), n("should handle unicode characters in column title", () => {
+      r(/* @__PURE__ */ o(a, { columns: [
+        { title: "Nombre 🌟", resultKey: "name" },
+        { title: "Âge", resultKey: "age" }
+      ] })), s(c.getByText("Nombre 🌟")).toBeInTheDocument(), s(c.getByText("Âge")).toBeInTheDocument();
+    }), n("should handle column title with only special characters", () => {
+      r(/* @__PURE__ */ o(a, { columns: [
+        { title: "@#$%", resultKey: "special" }
+      ] })), s(c.getByText("@#$%")).toBeInTheDocument();
+    });
+  }), m("Array Join Pattern", () => {
+    n("should join classes with space separator for header row", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelector(".results-table__header-row"), u = t == null ? void 0 : t.className.split(" ");
+      s(u).toContain("results-table__row"), s(u).toContain("results-table__header-row");
+    }), n("should join classes with space separator for header items", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], { container: l } = r(/* @__PURE__ */ o(a, { columns: e })), t = l.querySelector(".results-table__header"), u = t == null ? void 0 : t.className.split(" ");
+      s(u).toContain("results-table__header"), s(u).toContain("results-table__name");
+    });
+  });
+});