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

package/dist/components/ResultsTableBody/ResultsTableBody.test.js

@@ -0,0 +1,445 @@
+import { jsx as n } from "react/jsx-runtime";
+import { d as m, i as u, r, g as l, s as c } from "../../react.esm-DLSrfVwM.mjs";
+import { ResultsTableBody as a } from "./ResultsTableBody.js";
+m("ResultsTableBody", () => {
+  m("Basic Rendering", () => {
+    u("should render rows when results provided", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], t = [
+        { name: "John Doe" }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelectorAll(".results-table__row");
+      l(o).toHaveLength(1);
+    }), u("should render no results message when results empty", () => {
+      r(/* @__PURE__ */ n(a, { columns: [
+        { title: "Name", resultKey: "name" }
+      ], noResultsMsg: "No data", results: [] })), l(c.getByText("No data")).toBeInTheDocument();
+    }), u("should render items within rows", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], t = [
+        { name: "John Doe" }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelectorAll(".results-table__item");
+      l(o.length).toBeGreaterThan(0);
+    }), u("should render mobile labels within items", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], t = [
+        { name: "John Doe" }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelectorAll(".results-table__mobile-label");
+      l(o.length).toBeGreaterThan(0);
+    });
+  }), m("Results Prop", () => {
+    u("should render one row per result", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], t = [
+        { name: "John Doe" },
+        { name: "Jane Smith" },
+        { name: "Bob Johnson" }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelectorAll(".results-table__row");
+      l(o).toHaveLength(3);
+    }), u("should handle single result", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], t = [
+        { name: "John Doe" }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelectorAll(".results-table__row");
+      l(o).toHaveLength(1);
+    }), u("should handle empty results array", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], { container: t } = r(/* @__PURE__ */ n(a, { columns: e, results: [] })), s = t.querySelector(".results-table__no-results");
+      l(s).toBeInTheDocument();
+    }), u("should render result values", () => {
+      r(/* @__PURE__ */ n(a, { columns: [
+        { title: "Name", resultKey: "name" }
+      ], results: [
+        { name: "John Doe" }
+      ] })), l(c.getByText("John Doe")).toBeInTheDocument();
+    }), u("should handle results with string values", () => {
+      r(/* @__PURE__ */ n(a, { columns: [
+        { title: "Name", resultKey: "name" },
+        { title: "Email", resultKey: "email" }
+      ], results: [
+        { name: "John Doe", email: "john@example.com" }
+      ] })), l(c.getByText("John Doe")).toBeInTheDocument(), l(c.getByText("john@example.com")).toBeInTheDocument();
+    }), u("should handle results with number values", () => {
+      r(/* @__PURE__ */ n(a, { columns: [
+        { title: "Age", resultKey: "age" },
+        { title: "Score", resultKey: "score" }
+      ], results: [
+        { age: 30, score: 95 }
+      ] })), l(c.getByText("30")).toBeInTheDocument(), l(c.getByText("95")).toBeInTheDocument();
+    }), u("should handle results with boolean values", () => {
+      const e = [
+        { title: "Active", resultKey: "active" }
+      ], t = [
+        { active: !0 }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelectorAll(".results-table__item");
+      l(o).toHaveLength(1);
+    }), u("should render empty string when result key not found", () => {
+      const e = [
+        { title: "Name", resultKey: "name" },
+        { title: "Age", resultKey: "age" }
+      ], t = [
+        { name: "John Doe" }
+        // age key missing
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelectorAll(".results-table__item");
+      l(o).toHaveLength(2), l(c.getByText("John Doe")).toBeInTheDocument();
+    });
+  }), m("Columns Prop", () => {
+    u("should render one item per column per row", () => {
+      const e = [
+        { title: "Name", resultKey: "name" },
+        { title: "Age", resultKey: "age" }
+      ], t = [
+        { name: "John Doe", age: 30 }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelectorAll(".results-table__item");
+      l(o).toHaveLength(2);
+    }), u("should handle single column", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], t = [
+        { name: "John Doe" }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelectorAll(".results-table__item");
+      l(o).toHaveLength(1);
+    }), u("should handle multiple columns", () => {
+      const e = [
+        { title: "Name", resultKey: "name" },
+        { title: "Email", resultKey: "email" },
+        { title: "Phone", resultKey: "phone" },
+        { title: "City", resultKey: "city" }
+      ], t = [
+        { name: "John", email: "john@example.com", phone: "555-1234", city: "NYC" }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelectorAll(".results-table__item");
+      l(o).toHaveLength(4);
+    }), u("should handle empty columns array", () => {
+      const e = [
+        { name: "John Doe" }
+      ], { container: t } = r(/* @__PURE__ */ n(a, { columns: [], results: e })), s = t.querySelectorAll(".results-table__row");
+      l(s).toHaveLength(1);
+      const o = t.querySelectorAll(".results-table__item");
+      l(o).toHaveLength(0);
+    }), u("should use column title for mobile label", () => {
+      r(/* @__PURE__ */ n(a, { columns: [
+        { title: "Full Name", resultKey: "name" }
+      ], results: [
+        { name: "John Doe" }
+      ] })), l(c.getByText(/Full Name:/)).toBeInTheDocument();
+    }), u("should use column resultKey to access result data", () => {
+      r(/* @__PURE__ */ n(a, { columns: [
+        { title: "Name", resultKey: "fullName" }
+      ], results: [
+        { fullName: "John Doe" }
+      ] })), l(c.getByText("John Doe")).toBeInTheDocument();
+    });
+  }), m("Mobile Labels", () => {
+    u("should render mobile label for each item", () => {
+      const e = [
+        { title: "Name", resultKey: "name" },
+        { title: "Age", resultKey: "age" }
+      ], t = [
+        { name: "John Doe", age: 30 }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelectorAll(".results-table__mobile-label");
+      l(o).toHaveLength(2);
+    }), u("should include column title in mobile label", () => {
+      r(/* @__PURE__ */ n(a, { columns: [
+        { title: "Name", resultKey: "name" }
+      ], results: [
+        { name: "John Doe" }
+      ] })), l(c.getByText(/Name:/)).toBeInTheDocument();
+    }), u("should include colon after column title in mobile label", () => {
+      const e = [
+        { title: "Email Address", resultKey: "email" }
+      ], t = [
+        { email: "john@example.com" }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelector(".results-table__mobile-label");
+      l(o == null ? void 0 : o.textContent).toBe("Email Address:");
+    }), u("should render mobile label as span element", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], t = [
+        { name: "John Doe" }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelector(".results-table__mobile-label");
+      l(o == null ? void 0 : o.tagName).toBe("SPAN");
+    });
+  }), m("Dynamic CSS Classes", () => {
+    u("should add dynamic class based on column title", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], t = [
+        { name: "John Doe" }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelector(".results-table__name");
+      l(o).toBeInTheDocument();
+    }), u("should convert column title to lowercase for class", () => {
+      const e = [
+        { title: "EMAIL", resultKey: "email" }
+      ], t = [
+        { email: "john@example.com" }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelector(".results-table__email");
+      l(o).toBeInTheDocument();
+    }), u("should replace spaces with hyphens in class", () => {
+      const e = [
+        { title: "Full Name", resultKey: "name" }
+      ], t = [
+        { name: "John Doe" }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelector(".results-table__full-name");
+      l(o).toBeInTheDocument();
+    }), u("should handle multiple spaces in column title", () => {
+      const e = [
+        { title: "First Middle Last", resultKey: "name" }
+      ], t = [
+        { name: "John Doe" }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelector(".results-table__first-middle");
+      l(o).toBeInTheDocument();
+    });
+  }), m("NoResultsMsg Prop", () => {
+    u("should display noResultsMsg when results empty", () => {
+      r(/* @__PURE__ */ n(a, { columns: [
+        { title: "Name", resultKey: "name" }
+      ], noResultsMsg: "Custom message", results: [] })), l(c.getByText("Custom message")).toBeInTheDocument();
+    }), u("should use default noResultsMsg when not provided", () => {
+      r(/* @__PURE__ */ n(a, { columns: [
+        { title: "Name", resultKey: "name" }
+      ], results: [] })), l(c.getByText("No results were returned")).toBeInTheDocument();
+    }), u("should not display noResultsMsg when results exist", () => {
+      r(/* @__PURE__ */ n(a, { columns: [
+        { title: "Name", resultKey: "name" }
+      ], noResultsMsg: "No data", results: [
+        { name: "John Doe" }
+      ] })), l(c.queryByText("No data")).not.toBeInTheDocument();
+    }), u("should render noResultsMsg in no-results div", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], { container: t } = r(/* @__PURE__ */ n(a, { columns: e, noResultsMsg: "Empty", results: [] })), s = t.querySelector(".results-table__no-results");
+      l(s == null ? void 0 : s.textContent).toBe("Empty");
+    }), u("should apply no-results class to message div", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], { container: t } = r(/* @__PURE__ */ n(a, { columns: e, results: [] })), s = t.querySelector(".results-table__no-results");
+      l(s).toHaveClass("results-table__item"), l(s).toHaveClass("results-table__no-results");
+    });
+  }), m("Row and Item Keys", () => {
+    u("should generate unique keys for rows", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], t = [
+        { name: "John" },
+        { name: "Jane" },
+        { name: "Bob" }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelectorAll(".results-table__row");
+      l(o).toHaveLength(3);
+    }), u("should use index-based keys for rows", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], t = [
+        { name: "John Doe" }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelectorAll(".results-table__row");
+      l(o).toHaveLength(1);
+    }), u("should generate unique keys for items", () => {
+      const e = [
+        { title: "Name", resultKey: "name" },
+        { title: "Age", resultKey: "age" }
+      ], t = [
+        { name: "John", age: 30 }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelectorAll(".results-table__item");
+      l(o).toHaveLength(2);
+    });
+  }), m("CSS Classes", () => {
+    u("should apply results-table__row class to rows", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], t = [
+        { name: "John Doe" }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelector(".results-table__row");
+      l(o).toBeInTheDocument();
+    }), u("should apply results-table__item class to items", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], t = [
+        { name: "John Doe" }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelector(".results-table__item");
+      l(o).toBeInTheDocument();
+    }), u("should apply results-table__mobile-label class to labels", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], t = [
+        { name: "John Doe" }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelector(".results-table__mobile-label");
+      l(o).toBeInTheDocument();
+    }), u("should apply multiple classes to items", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], t = [
+        { name: "John Doe" }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelector(".results-table__item");
+      l(o).toHaveClass("results-table__item"), l(o).toHaveClass("results-table__name");
+    });
+  }), m("Default Props", () => {
+    u("should use default empty results array", () => {
+      r(/* @__PURE__ */ n(a, { columns: [
+        { title: "Name", resultKey: "name" }
+      ] })), l(c.getByText("No results were returned")).toBeInTheDocument();
+    }), u("should use default empty columns array", () => {
+      const e = [
+        { name: "John Doe" }
+      ], { container: t } = r(/* @__PURE__ */ n(a, { results: e })), s = t.querySelectorAll(".results-table__row");
+      l(s).toHaveLength(1);
+      const o = t.querySelectorAll(".results-table__item");
+      l(o).toHaveLength(0);
+    }), u("should use default noResultsMsg", () => {
+      r(/* @__PURE__ */ n(a, {})), l(c.getByText("No results were returned")).toBeInTheDocument();
+    });
+  }), m("Integration Tests", () => {
+    u("should render complete table with multiple rows and columns", () => {
+      const e = [
+        { title: "Name", resultKey: "name" },
+        { title: "Email", resultKey: "email" },
+        { title: "Age", resultKey: "age" }
+      ], t = [
+        { name: "John Doe", email: "john@example.com", age: 30 },
+        { name: "Jane Smith", email: "jane@example.com", age: 25 }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelectorAll(".results-table__row");
+      l(o).toHaveLength(2);
+      const h = s.querySelectorAll(".results-table__item");
+      l(h).toHaveLength(6), l(c.getByText("John Doe")).toBeInTheDocument(), l(c.getByText("Jane Smith")).toBeInTheDocument(), l(c.getByText("john@example.com")).toBeInTheDocument(), l(c.getByText("jane@example.com")).toBeInTheDocument();
+    }), u("should handle mixed data types in results", () => {
+      r(/* @__PURE__ */ n(a, { columns: [
+        { title: "Name", resultKey: "name" },
+        { title: "Age", resultKey: "age" },
+        { title: "Score", resultKey: "score" }
+      ], results: [
+        { name: "John Doe", age: 30, score: 95 }
+      ] })), l(c.getByText("John Doe")).toBeInTheDocument(), l(c.getByText("30")).toBeInTheDocument(), l(c.getByText("95")).toBeInTheDocument();
+    }), u("should handle partial data in results", () => {
+      const e = [
+        { title: "Name", resultKey: "name" },
+        { title: "Email", resultKey: "email" },
+        { title: "Phone", resultKey: "phone" }
+      ], t = [
+        { name: "John Doe", email: "john@example.com" }
+        // phone missing
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelectorAll(".results-table__item");
+      l(o).toHaveLength(3), l(c.getByText("John Doe")).toBeInTheDocument(), l(c.getByText("john@example.com")).toBeInTheDocument();
+    }), u("should render all mobile labels correctly", () => {
+      r(/* @__PURE__ */ n(a, { columns: [
+        { title: "Name", resultKey: "name" },
+        { title: "Age", resultKey: "age" }
+      ], results: [
+        { name: "John Doe", age: 30 }
+      ] })), l(c.getByText(/Name:/)).toBeInTheDocument(), l(c.getByText(/Age:/)).toBeInTheDocument();
+    });
+  }), m("Type Safety", () => {
+    u("should accept valid column definitions", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], t = [
+        { name: "John Doe" }
+      ];
+      l(() => {
+        r(/* @__PURE__ */ n(a, { columns: e, results: t }));
+      }).not.toThrow();
+    }), u("should accept results with string values", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], t = [
+        { name: "John Doe", email: "john@example.com" }
+      ];
+      l(() => {
+        r(/* @__PURE__ */ n(a, { columns: e, results: t }));
+      }).not.toThrow();
+    }), u("should accept results with number values", () => {
+      const e = [
+        { title: "Age", resultKey: "age" }
+      ], t = [
+        { age: 30, score: 95 }
+      ];
+      l(() => {
+        r(/* @__PURE__ */ n(a, { columns: e, results: t }));
+      }).not.toThrow();
+    }), u("should accept results with boolean values", () => {
+      const e = [
+        { title: "Active", resultKey: "active" }
+      ], t = [
+        { active: !0, verified: !1 }
+      ];
+      l(() => {
+        r(/* @__PURE__ */ n(a, { columns: e, results: t }));
+      }).not.toThrow();
+    }), u("should accept empty arrays", () => {
+      const e = [], t = [];
+      l(() => {
+        r(/* @__PURE__ */ n(a, { columns: e, results: t }));
+      }).not.toThrow();
+    });
+  }), m("Edge Cases", () => {
+    u("should handle very long column titles", () => {
+      r(/* @__PURE__ */ n(a, { columns: [
+        { title: "This is a very long column title that might wrap or overflow", resultKey: "long" }
+      ], results: [
+        { long: "Value" }
+      ] })), l(c.getByText(/This is a very long column title/)).toBeInTheDocument();
+    }), u("should handle empty string in column title", () => {
+      const e = [
+        { title: "", resultKey: "empty" }
+      ], t = [
+        { empty: "Value" }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelector(".results-table__item");
+      l(o).toBeInTheDocument();
+    }), u("should handle special characters in result values", () => {
+      r(/* @__PURE__ */ n(a, { columns: [
+        { title: "Name", resultKey: "name" }
+      ], results: [
+        { name: `John "Johnny" O'Brien & Sons <Company>` }
+      ] })), l(c.getByText(/John "Johnny" O'Brien & Sons/)).toBeInTheDocument();
+    }), u("should handle numeric zero values", () => {
+      r(/* @__PURE__ */ n(a, { columns: [
+        { title: "Score", resultKey: "score" }
+      ], results: [
+        { score: 0 }
+      ] })), l(c.getByText("0")).toBeInTheDocument();
+    }), u("should handle empty string values", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], t = [
+        { name: "" }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelectorAll(".results-table__item");
+      l(o).toHaveLength(1);
+    }), u("should handle many columns", () => {
+      const e = Array.from({ length: 10 }, (h, i) => ({
+        title: `Column ${i + 1}`,
+        resultKey: `col${i + 1}`
+      })), t = [
+        Object.fromEntries(Array.from({ length: 10 }, (h, i) => [`col${i + 1}`, `Value ${i + 1}`]))
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelectorAll(".results-table__item");
+      l(o).toHaveLength(10);
+    }), u("should handle large dataset", () => {
+      const e = [
+        { title: "ID", resultKey: "id" }
+      ], t = Array.from({ length: 100 }, (h, i) => ({
+        id: i + 1
+      })), { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelectorAll(".results-table__row");
+      l(o).toHaveLength(100);
+    }), u("should handle empty string noResultsMsg", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], { container: t } = r(/* @__PURE__ */ n(a, { columns: e, noResultsMsg: "", results: [] })), s = t.querySelector(".results-table__no-results");
+      l(s == null ? void 0 : s.textContent).toBe("");
+    }), u("should handle results with null values", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], t = [
+        { name: null }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelectorAll(".results-table__item");
+      l(o).toHaveLength(1);
+    }), u("should handle results with undefined values", () => {
+      const e = [
+        { title: "Name", resultKey: "name" }
+      ], t = [
+        { name: void 0 }
+      ], { container: s } = r(/* @__PURE__ */ n(a, { columns: e, results: t })), o = s.querySelectorAll(".results-table__item");
+      l(o).toHaveLength(1);
+    });
+  });
+});

package/dist/components/ResultsTableHeader/ResultsTableHeader.js

@@ -1,20 +1,42 @@
-import { jsx as t } from "react/jsx-runtime";
-import { s as r } from "../../ResultsTable.module-1zxhXaem.mjs";
-function i({ columns: s = [] }) {
-  return /* @__PURE__ */ t("div", { className: [r["results-table__row"], r["results-table__header-row"], "results-table__header-row"].join(" "), children: s.map((e) => /* @__PURE__ */ t(
+import { jsx as l } from "react/jsx-runtime";
+import { classes as u } from "../../utils/helpers.js";
+import { s } from "../../ResultsTable.module-wcNUQEKe.mjs";
+function h({ columns: a = [] }) {
+  let t = [];
+  const i = a.map((e, d) => {
+    if (t.includes(e.title)) {
+      const r = `${e.title} ${d + 1}`;
+      return t.push(r), {
+        ...e,
+        title: r
+      };
+    } else
+      return t.push(e.title), e;
+  });
+  return /* @__PURE__ */ l(
     "div",
     {
-      className: [
-        r["results-table__header"],
-        `results-table__${e.title.replace(" ", "-").toLowerCase()}`,
-        "results-table__header"
-      ].join(" "),
-      children: e.title
-    },
-    `result-header-${e.title}`
-  )) });
+      className: u([
+        s["results-table__row"],
+        s["results-table__header-row"],
+        "results-table__header-row"
+      ]),
+      children: i.map((e) => /* @__PURE__ */ l(
+        "div",
+        {
+          className: [
+            s["results-table__header"],
+            `results-table__${e.title.replace(" ", "-").toLowerCase()}`,
+            "results-table__header"
+          ].join(" "),
+          children: e.title
+        },
+        `result-header-${e.title}`
+      ))
+    }
+  );
 }
 export {
-  i as ResultsTableHeader,
-  i as default
+  h as ResultsTableHeader,
+  h as default
 };