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

package/dist/components/Select/Select.test.js

@@ -0,0 +1,367 @@
+import { jsx as l } from "react/jsx-runtime";
+import { v as p, d, b, i as a, r as n, g as o, s as r, f as u } from "../../react.esm-DLSrfVwM.mjs";
+import "../../index-BVxBrkZB.mjs";
+import { Select as s } from "./Select.js";
+p.mock("react-feather", () => ({
+  CheckCircle: () => /* @__PURE__ */ l("div", { "data-testid": "check-circle", children: "CheckCircle" }),
+  AlertTriangle: () => /* @__PURE__ */ l("div", { "data-testid": "alert-triangle", children: "AlertTriangle" })
+}));
+d("Select", () => {
+  const m = (e = 3) => Array.from({ length: e }, (t, i) => ({
+    label: `Option ${i + 1}`,
+    value: `value${i + 1}`
+  })), c = {
+    name: "testSelect",
+    label: "Test Label",
+    options: m(),
+    width: "50"
+  };
+  b(() => {
+    p.clearAllMocks();
+  }), d("Basic Rendering", () => {
+    a("should render label element", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c })), t = e.querySelector("label");
+      o(t).toBeInTheDocument();
+    }), a("should render select element", () => {
+      n(/* @__PURE__ */ l(s, { ...c }));
+      const e = r.getByRole("combobox");
+      o(e).toBeInTheDocument();
+    }), a("should render label text", () => {
+      n(/* @__PURE__ */ l(s, { ...c, label: "My Label" })), o(r.getByText("My Label")).toBeInTheDocument();
+    }), a("should render all options", () => {
+      const e = [
+        { label: "First", value: "first" },
+        { label: "Second", value: "second" },
+        { label: "Third", value: "third" }
+      ], { container: t } = n(/* @__PURE__ */ l(s, { ...c, options: e })), i = t.querySelectorAll("option");
+      o(i).toHaveLength(4);
+    }), a("should set name attribute on select", () => {
+      n(/* @__PURE__ */ l(s, { ...c, name: "mySelect" }));
+      const e = r.getByRole("combobox");
+      o(e).toHaveAttribute("name", "mySelect");
+    }), a("should set id attribute on select", () => {
+      n(/* @__PURE__ */ l(s, { ...c, name: "mySelect" }));
+      const e = r.getByRole("combobox");
+      o(e).toHaveAttribute("id", "mySelect");
+    }), a("should link label to select via htmlFor", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c, name: "mySelect" })), t = e.querySelector("label");
+      o(t).toHaveAttribute("for", "mySelect");
+    });
+  }), d("Width Classes", () => {
+    a("should apply width class based on width prop", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c, width: "30" })), t = e.querySelector("label");
+      o(t).toHaveClass("input-width--30");
+    }), a("should apply different width classes", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c, width: "50" })), { container: t } = n(/* @__PURE__ */ l(s, { ...c, width: "100" })), i = e.querySelector("label"), h = t.querySelector("label");
+      o(i).toHaveClass("input-width--50"), o(h).toHaveClass("input-width--100");
+    }), a("should apply form-field and form-field--select classes", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c })), t = e.querySelector("label");
+      o(t == null ? void 0 : t.className).toContain("form-field"), o(t == null ? void 0 : t.className).toContain("form-field--select");
+    });
+  }), d("Options Rendering", () => {
+    a("should render option with correct label", () => {
+      n(/* @__PURE__ */ l(s, { ...c, options: [{ label: "Custom Label", value: "custom" }] })), o(r.getByText("Custom Label")).toBeInTheDocument();
+    }), a("should render option with correct value", () => {
+      const e = [{ label: "Label", value: "customValue" }], { container: t } = n(/* @__PURE__ */ l(s, { ...c, options: e })), i = t.querySelector('option[value="customValue"]');
+      o(i).toBeInTheDocument();
+    }), a("should render option with numeric value", () => {
+      const e = [{ label: "Number", value: 123 }], { container: t } = n(/* @__PURE__ */ l(s, { ...c, options: e })), i = t.querySelector('option[value="123"]');
+      o(i).toBeInTheDocument();
+    }), a("should generate unique keys for options", () => {
+      n(/* @__PURE__ */ l(s, { ...c, options: [
+        { label: "First", value: "val1" },
+        { label: "Second", value: "val2" }
+      ] })), o(r.getByText("First")).toBeInTheDocument(), o(r.getByText("Second")).toBeInTheDocument();
+    }), a("should handle empty options array", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c, options: [] })), t = e.querySelectorAll("option");
+      o(t).toHaveLength(1);
+    });
+  }), d("Default First Option", () => {
+    a('should render "-- Select One --" when width > 20 and not multiple', () => {
+      n(/* @__PURE__ */ l(s, { ...c, multiple: !1, width: "30" })), o(r.getByText("-- Select One --")).toBeInTheDocument();
+    }), a("should render empty option when width <= 20 and not multiple", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c, multiple: !1, width: "20" })), t = e.querySelector('option[value=""]');
+      o(t).toBeInTheDocument(), o(t == null ? void 0 : t.textContent).toBe("");
+    }), a("should not render default option when multiple is true", () => {
+      n(/* @__PURE__ */ l(s, { ...c, multiple: !0, width: "50" })), o(r.queryByText("-- Select One --")).not.toBeInTheDocument();
+    }), a("should handle width boundary at 20", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c, width: "20" })), t = e.querySelector('option[value=""]');
+      o(t == null ? void 0 : t.textContent).toBe("");
+    });
+  }), d("Multiple Select", () => {
+    a("should set multiple attribute when multiple is true", () => {
+      n(/* @__PURE__ */ l(s, { ...c, multiple: !0 }));
+      const e = r.getByRole("listbox");
+      o(e).toHaveAttribute("multiple");
+    }), a("should not set multiple attribute when multiple is false", () => {
+      n(/* @__PURE__ */ l(s, { ...c, multiple: !1 }));
+      const e = r.getByRole("combobox");
+      o(e).not.toHaveAttribute("multiple");
+    }), a("should use false as default for multiple", () => {
+      n(/* @__PURE__ */ l(s, { ...c }));
+      const e = r.getByRole("combobox");
+      o(e).not.toHaveAttribute("multiple");
+    });
+  }), d("Initial Value", () => {
+    a("should set defaultValue to initValue", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c, initValue: "value2" })), t = e.querySelector("select");
+      o(t.value).toBe("value2");
+    }), a("should use empty string as default initValue", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c })), t = e.querySelector("select");
+      o(t.value).toBe("");
+    }), a("should handle numeric initValue", () => {
+      const e = [{ label: "Number", value: 123 }], { container: t } = n(/* @__PURE__ */ l(s, { ...c, initValue: "123", options: e })), i = t.querySelector("select");
+      o(i.value).toBe("123");
+    });
+  }), d("Help Text", () => {
+    a("should render help text when provided", () => {
+      n(/* @__PURE__ */ l(s, { ...c, helpText: "This is help text" })), o(r.getByText("This is help text")).toBeInTheDocument();
+    }), a("should not render help text when not provided", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c })), t = e.querySelector(".form-field__label-help");
+      o(t).toBeInTheDocument(), o(t == null ? void 0 : t.textContent).toBe("");
+    }), a("should wrap help text in correct class", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c, helpText: "Help" })), t = e.querySelector(".form-field__label-help");
+      o(t).toHaveTextContent("Help");
+    });
+  }), d("Validation States", () => {
+    a("should start with clean validation status", () => {
+      n(/* @__PURE__ */ l(s, { ...c })), o(r.queryByTestId("check-circle")).not.toBeInTheDocument(), o(r.queryByTestId("alert-triangle")).not.toBeInTheDocument();
+    }), a("should change to touched state on blur", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c, required: !0 })), t = r.getByRole("combobox");
+      u.blur(t);
+      const i = e.querySelector("select");
+      o(i).toHaveClass("input--touched");
+    }), a("should show validation icon after blur", () => {
+      n(/* @__PURE__ */ l(s, { ...c, required: !0 }));
+      const e = r.getByRole("combobox");
+      o(r.queryByTestId("check-circle")).not.toBeInTheDocument(), u.blur(e);
+      const t = r.queryByTestId("check-circle") || r.queryByTestId("alert-triangle");
+      o(t).toBeInTheDocument();
+    });
+  }), d("Validation Icons", () => {
+    a("should show CheckCircle when valid and touched", () => {
+      n(/* @__PURE__ */ l(s, { ...c, required: !0, options: [{ label: "Valid", value: "valid" }] }));
+      const t = r.getByRole("combobox");
+      u.change(t, { target: { value: "valid" } }), u.blur(t), o(r.getByTestId("check-circle")).toBeInTheDocument();
+    }), a("should show AlertTriangle when invalid and touched", () => {
+      n(/* @__PURE__ */ l(s, { ...c, required: !0 }));
+      const e = r.getByRole("combobox");
+      u.blur(e), o(r.getByTestId("alert-triangle")).toBeInTheDocument();
+    }), a("should not show validation icons when showValidation is false", () => {
+      n(/* @__PURE__ */ l(s, { ...c, required: !0, showValidation: !1 }));
+      const e = r.getByRole("combobox");
+      u.blur(e), o(r.queryByTestId("check-circle")).not.toBeInTheDocument(), o(r.queryByTestId("alert-triangle")).not.toBeInTheDocument();
+    }), a("should apply invalid icon class when invalid", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c, required: !0 })), t = r.getByRole("combobox");
+      u.blur(t);
+      const i = e.querySelector(".form-field__icon--invalid");
+      o(i).toBeInTheDocument();
+    }), a("should show validation icons by default (showValidation=true)", () => {
+      n(/* @__PURE__ */ l(s, { ...c, required: !0, options: [{ label: "Valid", value: "valid" }] }));
+      const t = r.getByRole("combobox");
+      u.change(t, { target: { value: "valid" } }), u.blur(t), o(r.getByTestId("check-circle")).toBeInTheDocument();
+    });
+  }), d("Validation Messages", () => {
+    a("should show validation message when invalid and touched", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c, required: !0 })), t = r.getByRole("combobox");
+      u.blur(t);
+      const i = e.querySelector(".form-field__error-message");
+      o(i).toBeInTheDocument(), o(i == null ? void 0 : i.textContent).toBeTruthy();
+    }), a("should not show validation message when valid", () => {
+      const e = [{ label: "Valid", value: "valid" }], { container: t } = n(/* @__PURE__ */ l(s, { ...c, required: !0, options: e })), i = r.getByRole("combobox");
+      u.change(i, { target: { value: "valid" } }), u.blur(i);
+      const h = t.querySelector(".form-field__error-message");
+      o(h).not.toBeInTheDocument();
+    }), a("should not show validation message when showValidation is false", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c, required: !0, showValidation: !1 })), t = r.getByRole("combobox");
+      u.blur(t);
+      const i = e.querySelector(".form-field__error-message");
+      o(i).not.toBeInTheDocument();
+    }), a("should clear validation message when field becomes valid", () => {
+      const e = [{ label: "Valid", value: "valid" }], { container: t } = n(/* @__PURE__ */ l(s, { ...c, required: !0, options: e })), i = r.getByRole("combobox");
+      u.blur(i);
+      let h = t.querySelector(".form-field__error-message");
+      o(h).toBeInTheDocument(), u.change(i, { target: { value: "valid" } }), u.blur(i), h = t.querySelector(".form-field__error-message"), o(h).not.toBeInTheDocument();
+    });
+  }), d("Spread Attributes", () => {
+    a("should pass required attribute", () => {
+      n(/* @__PURE__ */ l(s, { ...c, required: !0 }));
+      const e = r.getByRole("combobox");
+      o(e).toBeRequired();
+    }), a("should pass disabled attribute", () => {
+      n(/* @__PURE__ */ l(s, { ...c, disabled: !0 }));
+      const e = r.getByRole("combobox");
+      o(e).toBeDisabled();
+    }), a("should pass custom data attributes", () => {
+      n(/* @__PURE__ */ l(s, { ...c, "data-testid": "custom-select" }));
+      const e = r.getByTestId("custom-select");
+      o(e).toBeInTheDocument();
+    }), a("should pass aria attributes", () => {
+      n(/* @__PURE__ */ l(s, { ...c, "aria-label": "Custom aria label" }));
+      const e = r.getByRole("combobox");
+      o(e).toHaveAttribute("aria-label", "Custom aria label");
+    }), a("should pass className attribute", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c, className: "custom-class" })), t = e.querySelector("select");
+      o(t).toHaveClass("custom-class");
+    });
+  }), d("Edge Cases", () => {
+    a("should handle very long label text", () => {
+      const e = "A".repeat(500);
+      n(/* @__PURE__ */ l(s, { ...c, label: e })), o(r.getByText(e)).toBeInTheDocument();
+    }), a("should handle special characters in label", () => {
+      n(/* @__PURE__ */ l(s, { ...c, label: 'Label with <special> & "characters"' })), o(r.getByText('Label with <special> & "characters"')).toBeInTheDocument();
+    }), a("should handle unicode in option labels", () => {
+      n(/* @__PURE__ */ l(s, { ...c, options: [
+        { label: "🎉 Emoji Option", value: "emoji" },
+        { label: "你好 Chinese", value: "chinese" }
+      ] })), o(r.getByText("🎉 Emoji Option")).toBeInTheDocument(), o(r.getByText("你好 Chinese")).toBeInTheDocument();
+    }), a("should handle very large number of options", () => {
+      const e = m(100), { container: t } = n(/* @__PURE__ */ l(s, { ...c, options: e })), i = t.querySelectorAll("option");
+      o(i).toHaveLength(101);
+    }), a("should handle empty string values", () => {
+      const e = [{ label: "Empty", value: "" }], { container: t } = n(/* @__PURE__ */ l(s, { ...c, options: e })), i = t.querySelector('option[value=""]');
+      o(i).toBeInTheDocument();
+    }), a("should handle duplicate values", () => {
+      const e = [
+        { label: "First", value: "duplicate" },
+        { label: "Second", value: "duplicate" }
+      ], { container: t } = n(/* @__PURE__ */ l(s, { ...c, options: e })), i = t.querySelectorAll('option[value="duplicate"]');
+      o(i.length).toBeGreaterThan(0);
+    }), a("should handle width as string with non-numeric characters", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c, width: "50px" })), t = e.querySelector("label");
+      o(t).toHaveClass("input-width--50px");
+    }), a("should handle very small width values", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c, width: "5" })), t = e.querySelector("label");
+      o(t).toHaveClass("input-width--5");
+      const i = e.querySelector('option[value=""]');
+      o(i == null ? void 0 : i.textContent).toBe("");
+    }), a("should handle very large width values", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c, width: "500" })), t = e.querySelector("label");
+      o(t).toHaveClass("input-width--500"), o(r.getByText("-- Select One --")).toBeInTheDocument();
+    });
+  }), d("Type Safety", () => {
+    a("should accept valid SelectOption array", () => {
+      const e = [
+        { label: "Option 1", value: "val1" },
+        { label: "Option 2", value: 123 }
+      ], { container: t } = n(/* @__PURE__ */ l(s, { ...c, options: e }));
+      o(t.querySelector("select")).toBeInTheDocument();
+    }), a("should accept string values in SelectOption", () => {
+      n(/* @__PURE__ */ l(s, { ...c, options: [
+        { label: "String", value: "stringValue" }
+      ] })), o(r.getByText("String")).toBeInTheDocument();
+    }), a("should accept number values in SelectOption", () => {
+      n(/* @__PURE__ */ l(s, { ...c, options: [
+        { label: "Number", value: 42 }
+      ] })), o(r.getByText("Number")).toBeInTheDocument();
+    }), a("should accept all required props", () => {
+      const e = [{ label: "Test", value: "test" }], { container: t } = n(
+        /* @__PURE__ */ l(
+          s,
+          {
+            label: "Test Label",
+            name: "test",
+            options: e,
+            width: "50"
+          }
+        )
+      );
+      o(t.querySelector("select")).toBeInTheDocument();
+    }), a("should accept all optional props", () => {
+      const e = [{ label: "Test", value: "test" }], { container: t } = n(
+        /* @__PURE__ */ l(
+          s,
+          {
+            disabled: !0,
+            multiple: !0,
+            required: !0,
+            helpText: "Help",
+            label: "Test Label",
+            name: "test",
+            options: e,
+            showValidation: !1,
+            width: "50"
+          }
+        )
+      );
+      o(t.querySelector("select")).toBeInTheDocument();
+    });
+  }), d("Integration Tests", () => {
+    a("should render complete component with all features", () => {
+      const e = [
+        { label: "Option A", value: "a" },
+        { label: "Option B", value: "b" }
+      ], { container: t } = n(
+        /* @__PURE__ */ l(
+          s,
+          {
+            required: !0,
+            helpText: "Choose an option",
+            initValue: "a",
+            label: "Integration Test Label",
+            name: "integrationTest",
+            options: e,
+            width: "75"
+          }
+        )
+      );
+      o(r.getByText("Integration Test Label")).toBeInTheDocument(), o(r.getByText("Choose an option")).toBeInTheDocument(), o(r.getByText("Option A")).toBeInTheDocument(), o(r.getByText("Option B")).toBeInTheDocument(), o(t.querySelector("select")).toBeRequired();
+    }), a("should coordinate validation state with UI elements", () => {
+      const e = [{ label: "Valid", value: "valid" }], { container: t } = n(
+        /* @__PURE__ */ l(
+          s,
+          {
+            ...c,
+            required: !0,
+            options: e
+          }
+        )
+      ), i = r.getByRole("combobox");
+      o(r.queryByTestId("check-circle")).not.toBeInTheDocument(), o(r.queryByTestId("alert-triangle")).not.toBeInTheDocument(), u.blur(i), o(r.getByTestId("alert-triangle")).toBeInTheDocument(), o(t.querySelector(".form-field__error-message")).toBeInTheDocument(), u.change(i, { target: { value: "valid" } }), u.blur(i), o(r.getByTestId("check-circle")).toBeInTheDocument(), o(t.querySelector(".form-field__error-message")).not.toBeInTheDocument();
+    }), a("should handle multiple blur events correctly", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c, required: !0 })), t = r.getByRole("combobox");
+      u.blur(t), u.blur(t), u.blur(t), o(r.getByTestId("alert-triangle")).toBeInTheDocument(), o(e.querySelector(".input--touched")).toBeInTheDocument();
+    }), a("should maintain state through multiple interactions", () => {
+      n(/* @__PURE__ */ l(s, { ...c, required: !0, options: [
+        { label: "Option 1", value: "1" },
+        { label: "Option 2", value: "2" }
+      ] }));
+      const t = r.getByRole("combobox");
+      u.change(t, { target: { value: "1" } }), u.blur(t), o(r.getByTestId("check-circle")).toBeInTheDocument(), u.change(t, { target: { value: "2" } }), u.blur(t), o(r.getByTestId("check-circle")).toBeInTheDocument(), u.change(t, { target: { value: "" } }), u.blur(t), o(r.getByTestId("alert-triangle")).toBeInTheDocument();
+    });
+  }), d("Conditional First Option Logic", () => {
+    a('should render "-- Select One --" for width 21', () => {
+      n(/* @__PURE__ */ l(s, { ...c, multiple: !1, width: "21" })), o(r.getByText("-- Select One --")).toBeInTheDocument();
+    }), a("should render empty option for width 19", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c, multiple: !1, width: "19" })), t = e.querySelector('option[value=""]');
+      o(t == null ? void 0 : t.textContent).toBe("");
+    }), a("should handle width with decimal parsing", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c, multiple: !1, width: "20.5" })), t = e.querySelector('option[value=""]');
+      o(t == null ? void 0 : t.textContent).toBe("");
+    }), a("should handle non-numeric width gracefully", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c, multiple: !1, width: "abc" })), t = e.querySelectorAll("option");
+      o(t).toHaveLength(3);
+    });
+  }), d("CSS Class Management", () => {
+    a("should apply initial input class", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c })), t = e.querySelector("select");
+      o(t).toHaveClass("form-field__input");
+    }), a("should add touched class on blur", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c })), t = r.getByRole("combobox");
+      u.blur(t);
+      const i = e.querySelector("select");
+      o(i).toHaveClass("form-field__input"), o(i).toHaveClass("input--touched");
+    }), a("should apply label span class", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c })), t = e.querySelector(".form-field__label");
+      o(t).toBeInTheDocument();
+    }), a("should apply help text span class", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c, helpText: "Help" })), t = e.querySelector(".form-field__label-help");
+      o(t).toBeInTheDocument();
+    }), a("should apply validation icon classes", () => {
+      const { container: e } = n(/* @__PURE__ */ l(s, { ...c, required: !0 })), t = r.getByRole("combobox");
+      u.blur(t);
+      const i = e.querySelector(".form-field__icon");
+      o(i).toBeInTheDocument();
+    });
+  });
+});

package/dist/components/ShowAboutContent/ShowAboutContent.js

@@ -1,5 +1,5 @@
 import { jsxs as a, Fragment as d, jsx as n } from "react/jsx-runtime";
-import { p as l } from "../../index-VjANCDXC.mjs";
+import { p as l } from "../../index-06PEPfBQ.mjs";
 import { classes as p } from "../../utils/helpers.js";
 import { SectionedContent as m } from "../SectionedContent/SectionedContent.js";
 import { GenericList as u } from "../GenericList/GenericList.js";