@scrippsproduct/networks-ui-library 1.1.9 → 1.1.10

package/dist/components/ResultsTable/ResultsTable.test.js

@@ -0,0 +1,402 @@
+import { jsx as o } from "react/jsx-runtime";
+import { v as y, d, i as a, r, g as l, s as u } from "../../react.esm-DLSrfVwM.mjs";
+import { ResultsTable as n } from "./ResultsTable.js";
+y.mock("../ResultsTableHeader", () => ({
+  default: ({ columns: t }) => /* @__PURE__ */ o("div", { "data-columns": JSON.stringify(t), "data-testid": "results-table-header", children: "ResultsTableHeader Mock" })
+}));
+y.mock("../ResultsTableBody", () => ({
+  default: ({
+    columns: t,
+    results: e,
+    noResultsMsg: s
+  }) => /* @__PURE__ */ o(
+    "div",
+    {
+      "data-columns": JSON.stringify(t),
+      "data-no-results-msg": s,
+      "data-results": JSON.stringify(e),
+      "data-testid": "results-table-body",
+      children: "ResultsTableBody Mock"
+    }
+  )
+}));
+d("ResultsTable", () => {
+  d("Basic Rendering", () => {
+    a("should render wrapper div", () => {
+      const t = [
+        { title: "Name", resultKey: "name" }
+      ], { container: e } = r(/* @__PURE__ */ o(n, { columns: t, results: [] })), s = e.querySelector("div.results-table");
+      l(s).toBeInTheDocument();
+    }), a("should render ResultsTableHeader component", () => {
+      r(/* @__PURE__ */ o(n, { columns: [
+        { title: "Name", resultKey: "name" }
+      ], results: [] }));
+      const e = u.getByTestId("results-table-header");
+      l(e).toBeInTheDocument();
+    }), a("should render ResultsTableBody component", () => {
+      r(/* @__PURE__ */ o(n, { columns: [
+        { title: "Name", resultKey: "name" }
+      ], results: [] }));
+      const e = u.getByTestId("results-table-body");
+      l(e).toBeInTheDocument();
+    }), a("should render header before body", () => {
+      const t = [
+        { title: "Name", resultKey: "name" }
+      ], { container: e } = r(/* @__PURE__ */ o(n, { columns: t, results: [] })), s = e.querySelector("div.results-table"), c = Array.from((s == null ? void 0 : s.children) || []);
+      l(c[0]).toHaveAttribute("data-testid", "results-table-header"), l(c[1]).toHaveAttribute("data-testid", "results-table-body");
+    });
+  }), d("Columns Prop", () => {
+    a("should pass columns to ResultsTableHeader", () => {
+      const t = [
+        { title: "Name", resultKey: "name" },
+        { title: "Age", resultKey: "age" }
+      ];
+      r(/* @__PURE__ */ o(n, { columns: t, results: [] }));
+      const e = u.getByTestId("results-table-header");
+      l(e).toHaveAttribute("data-columns", JSON.stringify(t));
+    }), a("should pass columns to ResultsTableBody", () => {
+      const t = [
+        { title: "Name", resultKey: "name" },
+        { title: "Age", resultKey: "age" }
+      ];
+      r(/* @__PURE__ */ o(n, { columns: t, results: [] }));
+      const e = u.getByTestId("results-table-body");
+      l(e).toHaveAttribute("data-columns", JSON.stringify(t));
+    }), a("should handle single column", () => {
+      const t = [
+        { title: "Name", resultKey: "name" }
+      ];
+      r(/* @__PURE__ */ o(n, { columns: t, results: [] }));
+      const e = u.getByTestId("results-table-header"), s = u.getByTestId("results-table-body");
+      l(e).toHaveAttribute("data-columns", JSON.stringify(t)), l(s).toHaveAttribute("data-columns", JSON.stringify(t));
+    }), a("should handle multiple columns", () => {
+      const t = [
+        { title: "Name", resultKey: "name" },
+        { title: "Email", resultKey: "email" },
+        { title: "Phone", resultKey: "phone" },
+        { title: "City", resultKey: "city" }
+      ];
+      r(/* @__PURE__ */ o(n, { columns: t, results: [] }));
+      const e = u.getByTestId("results-table-header");
+      l(e).toHaveAttribute("data-columns", JSON.stringify(t));
+    }), a("should handle empty columns array", () => {
+      r(/* @__PURE__ */ o(n, { columns: [], results: [] }));
+      const e = u.getByTestId("results-table-header");
+      l(e).toHaveAttribute("data-columns", "[]");
+    }), a("should handle columns with special characters in title", () => {
+      const t = [
+        { title: "Name & Surname", resultKey: "name" },
+        { title: "Age (years)", resultKey: "age" }
+      ];
+      r(/* @__PURE__ */ o(n, { columns: t, results: [] }));
+      const e = u.getByTestId("results-table-header");
+      l(e).toHaveAttribute("data-columns", JSON.stringify(t));
+    });
+  }), d("Results Prop", () => {
+    a("should pass results to ResultsTableBody", () => {
+      const t = [
+        { title: "Name", resultKey: "name" }
+      ], e = [
+        { name: "John Doe" }
+      ];
+      r(/* @__PURE__ */ o(n, { columns: t, results: e }));
+      const s = u.getByTestId("results-table-body");
+      l(s).toHaveAttribute("data-results", JSON.stringify(e));
+    }), a("should handle empty results array", () => {
+      r(/* @__PURE__ */ o(n, { columns: [
+        { title: "Name", resultKey: "name" }
+      ], results: [] }));
+      const s = u.getByTestId("results-table-body");
+      l(s).toHaveAttribute("data-results", "[]");
+    }), a("should handle single result row", () => {
+      const t = [
+        { title: "Name", resultKey: "name" },
+        { title: "Age", resultKey: "age" }
+      ], e = [
+        { name: "John Doe", age: 30 }
+      ];
+      r(/* @__PURE__ */ o(n, { columns: t, results: e }));
+      const s = u.getByTestId("results-table-body");
+      l(s).toHaveAttribute("data-results", JSON.stringify(e));
+    }), a("should handle multiple result rows", () => {
+      const t = [
+        { title: "Name", resultKey: "name" }
+      ], e = [
+        { name: "John Doe" },
+        { name: "Jane Smith" },
+        { name: "Bob Johnson" }
+      ];
+      r(/* @__PURE__ */ o(n, { columns: t, results: e }));
+      const s = u.getByTestId("results-table-body");
+      l(s).toHaveAttribute("data-results", JSON.stringify(e));
+    }), a("should handle results with string values", () => {
+      const t = [
+        { title: "Name", resultKey: "name" }
+      ], e = [
+        { name: "John Doe" }
+      ];
+      r(/* @__PURE__ */ o(n, { columns: t, results: e }));
+      const s = u.getByTestId("results-table-body");
+      l(s).toHaveAttribute("data-results", JSON.stringify(e));
+    }), a("should handle results with number values", () => {
+      const t = [
+        { title: "Age", resultKey: "age" },
+        { title: "Score", resultKey: "score" }
+      ], e = [
+        { age: 30, score: 95 }
+      ];
+      r(/* @__PURE__ */ o(n, { columns: t, results: e }));
+      const s = u.getByTestId("results-table-body");
+      l(s).toHaveAttribute("data-results", JSON.stringify(e));
+    }), a("should handle results with mixed string and number values", () => {
+      const t = [
+        { title: "Name", resultKey: "name" },
+        { title: "Age", resultKey: "age" }
+      ], e = [
+        { name: "John Doe", age: 30 },
+        { name: "Jane Smith", age: 25 }
+      ];
+      r(/* @__PURE__ */ o(n, { columns: t, results: e }));
+      const s = u.getByTestId("results-table-body");
+      l(s).toHaveAttribute("data-results", JSON.stringify(e));
+    });
+  }), d("NoResultsMsg Prop", () => {
+    a("should pass noResultsMsg to ResultsTableBody", () => {
+      r(/* @__PURE__ */ o(n, { columns: [
+        { title: "Name", resultKey: "name" }
+      ], noResultsMsg: "Custom message", results: [] }));
+      const e = u.getByTestId("results-table-body");
+      l(e).toHaveAttribute("data-no-results-msg", "Custom message");
+    }), a("should use default noResultsMsg when not provided", () => {
+      r(/* @__PURE__ */ o(n, { columns: [
+        { title: "Name", resultKey: "name" }
+      ], results: [] }));
+      const e = u.getByTestId("results-table-body");
+      l(e).toHaveAttribute("data-no-results-msg", "No results were returned");
+    }), a("should handle empty string noResultsMsg", () => {
+      r(/* @__PURE__ */ o(n, { columns: [
+        { title: "Name", resultKey: "name" }
+      ], noResultsMsg: "", results: [] }));
+      const e = u.getByTestId("results-table-body");
+      l(e).toHaveAttribute("data-no-results-msg", "");
+    }), a("should handle long noResultsMsg", () => {
+      const t = [
+        { title: "Name", resultKey: "name" }
+      ], e = "No results were found matching your search criteria. Please try adjusting your filters or search terms.";
+      r(/* @__PURE__ */ o(n, { columns: t, noResultsMsg: e, results: [] }));
+      const s = u.getByTestId("results-table-body");
+      l(s).toHaveAttribute("data-no-results-msg", e);
+    });
+  }), d("CompactLayout Prop", () => {
+    a("should add compact class when compactLayout is true", () => {
+      const t = [
+        { title: "Name", resultKey: "name" }
+      ], { container: e } = r(/* @__PURE__ */ o(n, { compactLayout: !0, columns: t, results: [] })), s = e.querySelector("div.results-table");
+      l(s).toHaveClass("results-table--compact");
+    }), a("should not add compact class when compactLayout is false", () => {
+      const t = [
+        { title: "Name", resultKey: "name" }
+      ], { container: e } = r(/* @__PURE__ */ o(n, { columns: t, compactLayout: !1, results: [] })), s = e.querySelector("div.results-table");
+      l(s).not.toHaveClass("results-table--compact");
+    }), a("should not add compact class when compactLayout is undefined", () => {
+      const t = [
+        { title: "Name", resultKey: "name" }
+      ], { container: e } = r(/* @__PURE__ */ o(n, { columns: t, results: [] })), s = e.querySelector("div.results-table");
+      l(s).not.toHaveClass("results-table--compact");
+    }), a("should add both module and non-module compact classes", () => {
+      const t = [
+        { title: "Name", resultKey: "name" }
+      ], { container: e } = r(/* @__PURE__ */ o(n, { compactLayout: !0, columns: t, results: [] })), s = e.querySelector("div.results-table");
+      l(s == null ? void 0 : s.className).toContain("results-table--compact");
+    });
+  }), d("CSS Classes", () => {
+    a("should apply results-table class", () => {
+      const t = [
+        { title: "Name", resultKey: "name" }
+      ], { container: e } = r(/* @__PURE__ */ o(n, { columns: t, results: [] })), s = e.querySelector("div");
+      l(s).toHaveClass("results-table");
+    }), a("should apply fade-in__wrapper class", () => {
+      const t = [
+        { title: "Name", resultKey: "name" }
+      ], { container: e } = r(/* @__PURE__ */ o(n, { columns: t, results: [] })), s = e.querySelector("div");
+      l(s).toHaveClass("fade-in__wrapper");
+    }), a("should combine multiple classes", () => {
+      const t = [
+        { title: "Name", resultKey: "name" }
+      ], { container: e } = r(/* @__PURE__ */ o(n, { compactLayout: !0, columns: t, results: [] })), s = e.querySelector("div");
+      l(s).toHaveClass("results-table"), l(s).toHaveClass("fade-in__wrapper"), l(s).toHaveClass("results-table--compact");
+    });
+  }), d("Default Props", () => {
+    a("should use default empty arrays when columns not provided", () => {
+      r(/* @__PURE__ */ o(n, { columns: [], results: [] }));
+      const t = u.getByTestId("results-table-header");
+      l(t).toHaveAttribute("data-columns", "[]");
+    }), a("should use default empty array when results not provided", () => {
+      r(/* @__PURE__ */ o(n, { columns: [
+        { title: "Name", resultKey: "name" }
+      ], results: [] }));
+      const e = u.getByTestId("results-table-body");
+      l(e).toHaveAttribute("data-results", "[]");
+    }), a("should use default noResultsMsg", () => {
+      r(/* @__PURE__ */ o(n, { columns: [
+        { title: "Name", resultKey: "name" }
+      ], results: [] }));
+      const e = u.getByTestId("results-table-body");
+      l(e).toHaveAttribute("data-no-results-msg", "No results were returned");
+    }), a("should use default compactLayout false", () => {
+      const t = [
+        { title: "Name", resultKey: "name" }
+      ], { container: e } = r(/* @__PURE__ */ o(n, { columns: t, results: [] })), s = e.querySelector("div.results-table");
+      l(s).not.toHaveClass("results-table--compact");
+    });
+  }), d("Integration Tests", () => {
+    a("should render complete table with all props", () => {
+      const t = [
+        { title: "Name", resultKey: "name" },
+        { title: "Email", resultKey: "email" },
+        { title: "Age", resultKey: "age" }
+      ], e = [
+        { name: "John Doe", email: "john@example.com", age: 30 },
+        { name: "Jane Smith", email: "jane@example.com", age: 25 }
+      ], { container: s } = r(
+        /* @__PURE__ */ o(
+          n,
+          {
+            compactLayout: !0,
+            columns: t,
+            noResultsMsg: "No data found",
+            results: e
+          }
+        )
+      ), c = s.querySelector("div.results-table"), m = u.getByTestId("results-table-header"), i = u.getByTestId("results-table-body");
+      l(c).toBeInTheDocument(), l(c).toHaveClass("results-table--compact"), l(m).toHaveAttribute("data-columns", JSON.stringify(t)), l(i).toHaveAttribute("data-columns", JSON.stringify(t)), l(i).toHaveAttribute("data-results", JSON.stringify(e)), l(i).toHaveAttribute("data-no-results-msg", "No data found");
+    }), a("should render minimal table with only required props", () => {
+      const t = [
+        { title: "Name", resultKey: "name" }
+      ], { container: e } = r(/* @__PURE__ */ o(n, { columns: t, results: [] })), s = e.querySelector("div.results-table"), c = u.getByTestId("results-table-header"), m = u.getByTestId("results-table-body");
+      l(s).toBeInTheDocument(), l(c).toBeInTheDocument(), l(m).toBeInTheDocument();
+    }), a("should handle large dataset", () => {
+      const t = [
+        { title: "ID", resultKey: "id" },
+        { title: "Name", resultKey: "name" }
+      ], e = Array.from({ length: 100 }, (c, m) => ({
+        id: m + 1,
+        name: `User ${m + 1}`
+      }));
+      r(/* @__PURE__ */ o(n, { columns: t, results: e }));
+      const s = u.getByTestId("results-table-body");
+      l(s).toHaveAttribute("data-results", JSON.stringify(e));
+    }), a("should pass same columns to both header and body", () => {
+      const t = [
+        { title: "Name", resultKey: "name" },
+        { title: "Age", resultKey: "age" }
+      ];
+      r(/* @__PURE__ */ o(n, { columns: t, results: [] }));
+      const e = u.getByTestId("results-table-header"), s = u.getByTestId("results-table-body"), c = e.getAttribute("data-columns"), m = s.getAttribute("data-columns");
+      l(c).toBe(m), l(c).toBe(JSON.stringify(t));
+    });
+  }), d("Type Safety", () => {
+    a("should accept valid column definitions", () => {
+      const t = [
+        { title: "Name", resultKey: "name" },
+        { title: "Age", resultKey: "age" }
+      ];
+      l(() => {
+        r(/* @__PURE__ */ o(n, { columns: t, results: [] }));
+      }).not.toThrow();
+    }), a("should accept valid result rows with strings", () => {
+      const t = [
+        { title: "Name", resultKey: "name" }
+      ], e = [
+        { name: "John Doe", email: "john@example.com" }
+      ];
+      l(() => {
+        r(/* @__PURE__ */ o(n, { columns: t, results: e }));
+      }).not.toThrow();
+    }), a("should accept valid result rows with numbers", () => {
+      const t = [
+        { title: "Age", resultKey: "age" }
+      ], e = [
+        { age: 30, score: 95 }
+      ];
+      l(() => {
+        r(/* @__PURE__ */ o(n, { columns: t, results: e }));
+      }).not.toThrow();
+    }), a("should accept valid result rows with mixed types", () => {
+      const t = [
+        { title: "Name", resultKey: "name" },
+        { title: "Age", resultKey: "age" }
+      ], e = [
+        { name: "John Doe", age: 30, active: "yes", score: 95 }
+      ];
+      l(() => {
+        r(/* @__PURE__ */ o(n, { columns: t, results: e }));
+      }).not.toThrow();
+    }), a("should accept empty arrays for columns and results", () => {
+      const t = [], e = [];
+      l(() => {
+        r(/* @__PURE__ */ o(n, { columns: t, results: e }));
+      }).not.toThrow();
+    });
+  }), d("Edge Cases", () => {
+    a("should handle very long column titles", () => {
+      const t = [
+        { title: "This is a very long column title that might wrap or overflow", resultKey: "longTitle" }
+      ];
+      r(/* @__PURE__ */ o(n, { columns: t, results: [] }));
+      const e = u.getByTestId("results-table-header");
+      l(e).toHaveAttribute("data-columns", JSON.stringify(t));
+    }), a("should handle columns with empty strings", () => {
+      const t = [
+        { title: "", resultKey: "empty" }
+      ];
+      r(/* @__PURE__ */ o(n, { columns: t, results: [] }));
+      const e = u.getByTestId("results-table-header");
+      l(e).toHaveAttribute("data-columns", JSON.stringify(t));
+    }), a("should handle results with extra fields not in columns", () => {
+      const t = [
+        { title: "Name", resultKey: "name" }
+      ], e = [
+        { name: "John Doe", email: "john@example.com", age: 30 }
+      ];
+      r(/* @__PURE__ */ o(n, { columns: t, results: e }));
+      const s = u.getByTestId("results-table-body");
+      l(s).toHaveAttribute("data-results", JSON.stringify(e));
+    }), a("should handle many columns", () => {
+      const t = Array.from({ length: 20 }, (s, c) => ({
+        title: `Column ${c + 1}`,
+        resultKey: `col${c + 1}`
+      }));
+      r(/* @__PURE__ */ o(n, { columns: t, results: [] }));
+      const e = u.getByTestId("results-table-header");
+      l(e).toHaveAttribute("data-columns", JSON.stringify(t));
+    }), a("should handle special characters in result values", () => {
+      const t = [
+        { title: "Name", resultKey: "name" }
+      ], e = [
+        { name: `John "Johnny" O'Brien & Sons` }
+      ];
+      r(/* @__PURE__ */ o(n, { columns: t, results: e }));
+      const s = u.getByTestId("results-table-body");
+      l(s).toHaveAttribute("data-results", JSON.stringify(e));
+    }), a("should handle numeric zero values", () => {
+      const t = [
+        { title: "Score", resultKey: "score" }
+      ], e = [
+        { score: 0 }
+      ];
+      r(/* @__PURE__ */ o(n, { columns: t, results: e }));
+      const s = u.getByTestId("results-table-body");
+      l(s).toHaveAttribute("data-results", JSON.stringify(e));
+    }), a("should handle empty string values", () => {
+      const t = [
+        { title: "Name", resultKey: "name" }
+      ], e = [
+        { name: "" }
+      ];
+      r(/* @__PURE__ */ o(n, { columns: t, results: e }));
+      const s = u.getByTestId("results-table-body");
+      l(s).toHaveAttribute("data-results", JSON.stringify(e));
+    });
+  });
+});

package/dist/components/ResultsTableBody/ResultsTableBody.js

@@ -1,6 +1,6 @@
 import { jsx as t, Fragment as m, jsxs as _ } from "react/jsx-runtime";
 import { classes as l } from "../../utils/helpers.js";
-import { s as e } from "../../ResultsTable.module-1zxhXaem.mjs";
+import { s as e } from "../../ResultsTable.module-wcNUQEKe.mjs";
 function c({ results: r = [], columns: u = [], noResultsMsg: b = "No results were returned" }) {
   return r.length > 0 ? /* @__PURE__ */ t(m, { children: r.map((a, i) => /* @__PURE__ */ t(
     "div",