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

package/dist/components/Input/Input.test.js

@@ -0,0 +1,263 @@
+import { jsx as l } from "react/jsx-runtime";
+import { v as c, d as r, b as m, i as s, r as n, s as t, g as a } from "../../react.esm-DLSrfVwM.mjs";
+import { u } from "../../index-BUN4jQ3m.mjs";
+import { Input as i } from "./Input.js";
+c.mock("react-feather", () => ({
+  CheckCircle: () => /* @__PURE__ */ l("span", { "data-testid": "check-circle", children: "✓" }),
+  AlertTriangle: () => /* @__PURE__ */ l("span", { "data-testid": "alert-triangle", children: "⚠" })
+}));
+c.mock("../../utils/helpers", () => ({
+  areaCodePhoneNumberMask: (e) => {
+    const o = e.replace(/\D/g, "");
+    return o.length === 10 ? `(${o.slice(0, 3)}) ${o.slice(3, 6)}-${o.slice(6)}` : e;
+  },
+  classes: (e) => e.filter(Boolean).join(" ")
+}));
+c.mock("./../CustomDataList/Form.module.scss", () => ({
+  default: {
+    "form-field": "form-field-module",
+    "form-field__input": "form-field-input-module",
+    "form-field__label": "form-field-label-module",
+    "form-field__label-help": "form-field-label-help-module",
+    "form-field__icon": "form-field-icon-module",
+    "form-field__icon--invalid": "form-field-icon-invalid-module",
+    "form-field__error-message": "form-field-error-message-module",
+    "input--touched": "input-touched-module",
+    "input-width--100": "input-width-100-module",
+    "input-width--50": "input-width-50-module",
+    "input-width--75": "input-width-75-module"
+  }
+}));
+r("Input", () => {
+  m(() => {
+    c.clearAllMocks();
+  }), r("Basic Rendering", () => {
+    s("should render label element", () => {
+      n(/* @__PURE__ */ l(i, { name: "test" }));
+      const e = t.getByRole("textbox").closest("label");
+      a(e).toBeInTheDocument();
+    }), s("should render input with correct name", () => {
+      n(/* @__PURE__ */ l(i, { name: "test-input" }));
+      const e = t.getByRole("textbox");
+      a(e).toHaveAttribute("name", "test-input"), a(e).toHaveAttribute("id", "test-input");
+    }), s("should apply module classes", () => {
+      n(/* @__PURE__ */ l(i, { name: "test" }));
+      const e = t.getByRole("textbox").closest("label");
+      a(e).toHaveClass("form-field-module");
+    }), s("should default to text type", () => {
+      n(/* @__PURE__ */ l(i, { name: "test" }));
+      const e = t.getByRole("textbox");
+      a(e).toHaveAttribute("type", "text");
+    });
+  }), r("Label and Help Text", () => {
+    s("should render without label by default", () => {
+      n(/* @__PURE__ */ l(i, { name: "test" }));
+      const e = document.querySelector(".form-field-label-module");
+      a(e).toHaveTextContent("");
+    }), s("should render custom label", () => {
+      n(/* @__PURE__ */ l(i, { label: "Username", name: "test" })), a(t.getByText("Username")).toBeInTheDocument();
+    }), s("should render help text", () => {
+      n(/* @__PURE__ */ l(i, { helpText: "(required)", label: "Email", name: "test" })), a(t.getByText("(required)")).toBeInTheDocument();
+    }), s("should render label and help text together", () => {
+      n(/* @__PURE__ */ l(i, { helpText: "min 8 chars", label: "Password", name: "test" })), a(t.getByText("Password")).toBeInTheDocument(), a(t.getByText("min 8 chars")).toBeInTheDocument();
+    }), s("should apply help text class", () => {
+      n(/* @__PURE__ */ l(i, { helpText: "helper", name: "test" }));
+      const e = t.getByText("helper");
+      a(e).toHaveClass("form-field-label-help-module");
+    });
+  }), r("Input Types", () => {
+    s("should render email type", () => {
+      n(/* @__PURE__ */ l(i, { name: "test", type: "email" }));
+      const e = t.getByRole("textbox");
+      a(e).toHaveAttribute("type", "email");
+    }), s("should render tel type", () => {
+      n(/* @__PURE__ */ l(i, { name: "test", type: "tel" }));
+      const e = t.getByRole("textbox");
+      a(e).toHaveAttribute("type", "tel");
+    }), s("should render password type", () => {
+      n(/* @__PURE__ */ l(i, { name: "test", type: "password" }));
+      const e = document.querySelector('input[type="password"]');
+      a(e).toBeInTheDocument();
+    });
+  }), r("Width Prop", () => {
+    s("should default to width 100", () => {
+      n(/* @__PURE__ */ l(i, { name: "test" }));
+      const e = t.getByRole("textbox").closest("label");
+      a(e).toHaveClass("input-width-100-module");
+    }), s("should apply width 50", () => {
+      n(/* @__PURE__ */ l(i, { name: "test", width: 50 }));
+      const e = t.getByRole("textbox").closest("label");
+      a(e).toHaveClass("input-width-50-module");
+    }), s("should apply width 75", () => {
+      n(/* @__PURE__ */ l(i, { name: "test", width: 75 }));
+      const e = t.getByRole("textbox").closest("label");
+      a(e).toHaveClass("input-width-75-module");
+    });
+  }), r("Validation - Clean State", () => {
+    s("should not show validation icons initially", () => {
+      n(/* @__PURE__ */ l(i, { name: "test" })), a(t.queryByTestId("check-circle")).not.toBeInTheDocument(), a(t.queryByTestId("alert-triangle")).not.toBeInTheDocument();
+    }), s("should not show error message initially", () => {
+      n(/* @__PURE__ */ l(i, { required: !0, name: "test" }));
+      const e = document.querySelector(".form-field-error-message-module");
+      a(e).not.toBeInTheDocument();
+    });
+  }), r("Validation - On Blur (Required Field)", () => {
+    s("should show error on blur when required field is empty", async () => {
+      const e = u.setup();
+      n(/* @__PURE__ */ l(i, { required: !0, name: "test" }));
+      const o = t.getByRole("textbox");
+      await e.click(o), await e.tab(), a(t.getByTestId("alert-triangle")).toBeInTheDocument();
+    }), s("should add touched class on blur", async () => {
+      const e = u.setup();
+      n(/* @__PURE__ */ l(i, { name: "test" }));
+      const o = t.getByRole("textbox");
+      await e.click(o), await e.tab(), a(o).toHaveClass("input-touched-module");
+    }), s("should show check icon when valid", async () => {
+      const e = u.setup();
+      n(/* @__PURE__ */ l(i, { required: !0, name: "test" }));
+      const o = t.getByRole("textbox");
+      await e.type(o, "valid input"), await e.tab(), a(t.getByTestId("check-circle")).toBeInTheDocument();
+    }), s("should clear validation message when field becomes valid", async () => {
+      const e = u.setup();
+      n(/* @__PURE__ */ l(i, { required: !0, name: "test" }));
+      const o = t.getByRole("textbox");
+      await e.click(o), await e.tab(), await e.click(o), await e.type(o, "valid"), await e.tab();
+      const d = document.querySelector(".form-field-error-message-module");
+      a(d).not.toBeInTheDocument();
+    });
+  }), r("Email Validation", () => {
+    s("should show custom email error message", async () => {
+      const e = u.setup();
+      n(/* @__PURE__ */ l(i, { name: "test", type: "email" }));
+      const o = t.getByRole("textbox");
+      await e.type(o, "invalid-email"), await e.tab(), a(t.getByText("Please enter a vaild email.")).toBeInTheDocument();
+    }), s("should not show error for valid email", async () => {
+      const e = u.setup();
+      n(/* @__PURE__ */ l(i, { name: "test", type: "email" }));
+      const o = t.getByRole("textbox");
+      await e.type(o, "test@example.com"), await e.tab(), a(t.queryByText("Please enter a vaild email.")).not.toBeInTheDocument(), a(t.getByTestId("check-circle")).toBeInTheDocument();
+    });
+  }), r("Phone Number Validation and Masking", () => {
+    s("should apply phone mask on blur", async () => {
+      const e = u.setup();
+      n(/* @__PURE__ */ l(i, { name: "test", type: "tel" }));
+      const o = t.getByRole("textbox");
+      await e.type(o, "1234567890"), await e.tab(), a(o.value).toBe("(123) 456-7890");
+    }), s("should show custom tel error message for invalid format", async () => {
+      const e = u.setup();
+      n(/* @__PURE__ */ l(i, { name: "test", pattern: "\\\\(\\\\d{3}\\\\) \\\\d{3}-\\\\d{4}", type: "tel" }));
+      const o = t.getByRole("textbox");
+      await e.type(o, "123"), await e.tab(), a(t.getByText("Please match the requested format: (xxx) xxx-xxxx")).toBeInTheDocument();
+    }), s("should not mask incomplete phone numbers", async () => {
+      const e = u.setup();
+      n(/* @__PURE__ */ l(i, { name: "test", type: "tel" }));
+      const o = t.getByRole("textbox");
+      await e.type(o, "123456"), await e.tab(), a(o.value).toBe("123456");
+    });
+  }), r("Show Validation Prop", () => {
+    s("should hide validation icons when showValidation is false", async () => {
+      const e = u.setup();
+      n(/* @__PURE__ */ l(i, { required: !0, name: "test", showValidation: !1 }));
+      const o = t.getByRole("textbox");
+      await e.type(o, "test"), await e.tab(), a(t.queryByTestId("check-circle")).not.toBeInTheDocument();
+    }), s("should hide error messages when showValidation is false", async () => {
+      const e = u.setup();
+      n(/* @__PURE__ */ l(i, { required: !0, name: "test", showValidation: !1 }));
+      const o = t.getByRole("textbox");
+      await e.click(o), await e.tab();
+      const d = document.querySelector(".form-field-error-message-module");
+      a(d).not.toBeInTheDocument();
+    }), s("should show validation by default", async () => {
+      const e = u.setup();
+      n(/* @__PURE__ */ l(i, { required: !0, name: "test" }));
+      const o = t.getByRole("textbox");
+      await e.type(o, "test"), await e.tab(), a(t.getByTestId("check-circle")).toBeInTheDocument();
+    });
+  }), r("Custom HTML Attributes", () => {
+    s("should pass through placeholder attribute", () => {
+      n(/* @__PURE__ */ l(i, { name: "test", placeholder: "Enter text" }));
+      const e = t.getByPlaceholderText("Enter text");
+      a(e).toBeInTheDocument();
+    }), s("should pass through required attribute", () => {
+      n(/* @__PURE__ */ l(i, { required: !0, name: "test" }));
+      const e = t.getByRole("textbox");
+      a(e).toBeRequired();
+    }), s("should pass through disabled attribute", () => {
+      n(/* @__PURE__ */ l(i, { disabled: !0, name: "test" }));
+      const e = t.getByRole("textbox");
+      a(e).toBeDisabled();
+    }), s("should pass through maxLength attribute", () => {
+      n(/* @__PURE__ */ l(i, { maxLength: 10, name: "test" }));
+      const e = t.getByRole("textbox");
+      a(e).toHaveAttribute("maxLength", "10");
+    }), s("should pass through pattern attribute", () => {
+      n(/* @__PURE__ */ l(i, { name: "test", pattern: "[A-Za-z]+" }));
+      const e = t.getByRole("textbox");
+      a(e).toHaveAttribute("pattern", "[A-Za-z]+");
+    }), s("should pass through value attribute", () => {
+      n(/* @__PURE__ */ l(i, { name: "test", value: "initial", onChange: () => {
+      } }));
+      const e = t.getByRole("textbox");
+      a(e.value).toBe("initial");
+    });
+  }), r("Integration", () => {
+    s("should render complete form field with all features", async () => {
+      const e = u.setup();
+      n(
+        /* @__PURE__ */ l(
+          i,
+          {
+            required: !0,
+            helpText: "(required)",
+            label: "Email Address",
+            name: "email",
+            placeholder: "you@example.com",
+            type: "email",
+            width: 75
+          }
+        )
+      ), a(t.getByText("Email Address")).toBeInTheDocument(), a(t.getByText("(required)")).toBeInTheDocument();
+      const o = t.getByPlaceholderText("you@example.com");
+      a(o).toHaveAttribute("type", "email"), a(o).toBeRequired();
+      const d = o.closest("label");
+      a(d).toHaveClass("input-width-75-module"), await e.type(o, "test@example.com"), await e.tab(), a(t.getByTestId("check-circle")).toBeInTheDocument();
+    }), s("should handle complete phone number workflow", async () => {
+      const e = u.setup();
+      n(
+        /* @__PURE__ */ l(
+          i,
+          {
+            label: "Phone",
+            name: "phone",
+            type: "tel"
+          }
+        )
+      );
+      const o = t.getByRole("textbox");
+      await e.type(o, "5551234567"), await e.tab(), a(o.value).toBe("(555) 123-4567");
+    });
+  }), r("Edge Cases", () => {
+    s("should handle empty name gracefully", () => {
+      n(/* @__PURE__ */ l(i, { name: "" }));
+      const e = t.getByRole("textbox");
+      a(e).toHaveAttribute("name", "");
+    }), s("should handle blur without input ref", async () => {
+      const e = u.setup();
+      n(/* @__PURE__ */ l(i, { name: "test" }));
+      const o = t.getByRole("textbox");
+      await e.click(o), await e.tab(), a(o).toBeInTheDocument();
+    }), s("should handle multiple blur events", async () => {
+      const e = u.setup();
+      n(/* @__PURE__ */ l(i, { required: !0, name: "test" }));
+      const o = t.getByRole("textbox");
+      await e.click(o), await e.tab(), await e.click(o), await e.tab(), a(t.getByTestId("alert-triangle")).toBeInTheDocument();
+    }), s("should handle rapid focus/blur cycles", async () => {
+      const e = u.setup();
+      n(/* @__PURE__ */ l(i, { name: "test" }));
+      const o = t.getByRole("textbox");
+      for (let d = 0; d < 5; d++)
+        await e.click(o), await e.tab();
+      a(o).toHaveClass("input-touched-module");
+    });
+  });
+});

package/dist/components/InstructionsList/InstructionsList.js

@@ -1,27 +1,27 @@
-import { jsxs as c, jsx as i } from "react/jsx-runtime";
-import { p as r } from "../../index-VjANCDXC.mjs";
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { p as r } from "../../index-06PEPfBQ.mjs";
 import { classes as s } from "../../utils/helpers.js";
-import '../../assets/InstructionsList.css';const t = {
+import '../../assets/InstructionsList.css';const i = {
   "instructions-list__list": "_instructions-list__list_suf45_1",
   "instructions-list__item": "_instructions-list__item_suf45_5"
 };
-function a({
+function m({
   headerHtml: n = "",
   instructions: l = []
 }) {
-  return /* @__PURE__ */ c("div", { className: s([t["instructions-list"], "instructions-list"]), children: [
-    n !== "" && /* @__PURE__ */ i("h3", { className: s([t["instructions-list__header"], "instructions-list__header"]), children: r(n) }),
-    /* @__PURE__ */ i("ol", { className: s([t["instructions-list__list"], "instructions-list__list"]), children: l.map((_) => /* @__PURE__ */ i(
+  return /* @__PURE__ */ o("div", { className: s([i["instructions-list"], "instructions-list"]), children: [
+    n !== "" && /* @__PURE__ */ t("h3", { className: s([i["instructions-list__header"], "instructions-list__header"]), children: r(n) }),
+    /* @__PURE__ */ t("ol", { className: s([i["instructions-list__list"], "instructions-list__list"]), children: l.map((_, c) => /* @__PURE__ */ t(
       "li",
       {
-        className: s([t["instructions-list__item"], "instructions-list__item"]),
+        className: s([i["instructions-list__item"], "instructions-list__item"]),
         children: r(_)
       },
-      `${Math.random() * 1e6}`
+      `ili-${c + 1}`
     )) })
   ] });
 }
 export {
-  a as InstructionsList,
-  a as default
+  m as InstructionsList,
+  m as default
 };

package/dist/components/InstructionsList/InstructionsList.test.js

@@ -0,0 +1,181 @@
+import { jsx as o } from "react/jsx-runtime";
+import { v as d, d as a, i, r as l, g as t, s as n } from "../../react.esm-DLSrfVwM.mjs";
+import { InstructionsList as r } from "./InstructionsList.js";
+d.mock("html-react-parser", () => ({
+  default: (e) => e
+}));
+d.mock("../../utils/helpers", () => ({
+  classes: (e) => e.filter(Boolean).join(" ")
+}));
+d.mock("./InstructionsList.module.scss", () => ({
+  default: {
+    "instructions-list": "instructions-list-module",
+    "instructions-list__header": "instructions-list__header-module",
+    "instructions-list__list": "instructions-list__list-module",
+    "instructions-list__item": "instructions-list__item-module"
+  }
+}));
+a("InstructionsList", () => {
+  a("Basic Rendering", () => {
+    i("should render container div with correct classes", () => {
+      const { container: e } = l(/* @__PURE__ */ o(r, {})), s = e.firstChild;
+      t(s).toBeInTheDocument(), t(s.tagName).toBe("DIV"), t(s).toHaveClass("instructions-list-module"), t(s).toHaveClass("instructions-list");
+    }), i("should render ordered list element", () => {
+      l(/* @__PURE__ */ o(r, {}));
+      const e = n.getByRole("list");
+      t(e).toBeInTheDocument(), t(e.tagName).toBe("OL");
+    }), i("should apply list classes", () => {
+      l(/* @__PURE__ */ o(r, {}));
+      const e = n.getByRole("list");
+      t(e).toHaveClass("instructions-list__list-module"), t(e).toHaveClass("instructions-list__list");
+    }), i("should render with default empty props", () => {
+      const { container: e } = l(/* @__PURE__ */ o(r, {}));
+      t(e.firstChild).toBeInTheDocument(), t(n.queryByRole("heading")).not.toBeInTheDocument(), t(n.queryAllByRole("listitem")).toHaveLength(0);
+    });
+  }), a("Header Rendering", () => {
+    i("should not render header when headerHtml is empty string", () => {
+      l(/* @__PURE__ */ o(r, { headerHtml: "" })), t(n.queryByRole("heading")).not.toBeInTheDocument();
+    }), i("should not render header when headerHtml is not provided", () => {
+      l(/* @__PURE__ */ o(r, {})), t(n.queryByRole("heading")).not.toBeInTheDocument();
+    }), i("should render header when headerHtml is provided", () => {
+      l(/* @__PURE__ */ o(r, { headerHtml: "Test Header" }));
+      const e = n.getByRole("heading", { level: 3 });
+      t(e).toBeInTheDocument(), t(e).toHaveTextContent("Test Header");
+    }), i("should apply header classes", () => {
+      l(/* @__PURE__ */ o(r, { headerHtml: "Header" }));
+      const e = n.getByRole("heading");
+      t(e).toHaveClass("instructions-list__header-module"), t(e).toHaveClass("instructions-list__header");
+    }), i("should parse HTML in header", () => {
+      l(/* @__PURE__ */ o(r, { headerHtml: "<strong>Bold</strong> Header" }));
+      const e = n.getByRole("heading");
+      t(e).toHaveTextContent("<strong>Bold</strong> Header");
+    }), i("should render header with special characters", () => {
+      l(/* @__PURE__ */ o(r, { headerHtml: "Header & Title" }));
+      const e = n.getByRole("heading");
+      t(e).toHaveTextContent("Header & Title");
+    });
+  }), a("Instructions List Rendering", () => {
+    i("should render empty list when instructions array is empty", () => {
+      l(/* @__PURE__ */ o(r, { instructions: [] }));
+      const e = n.getByRole("list");
+      t(e).toBeInTheDocument(), t(n.queryAllByRole("listitem")).toHaveLength(0);
+    }), i("should render single instruction", () => {
+      l(/* @__PURE__ */ o(r, { instructions: ["First instruction"] }));
+      const e = n.getAllByRole("listitem");
+      t(e).toHaveLength(1), t(e[0]).toHaveTextContent("First instruction");
+    }), i("should render multiple instructions", () => {
+      l(/* @__PURE__ */ o(r, { instructions: [
+        "First instruction",
+        "Second instruction",
+        "Third instruction"
+      ] }));
+      const s = n.getAllByRole("listitem");
+      t(s).toHaveLength(3), t(s[0]).toHaveTextContent("First instruction"), t(s[1]).toHaveTextContent("Second instruction"), t(s[2]).toHaveTextContent("Third instruction");
+    }), i("should apply item classes to each list item", () => {
+      l(/* @__PURE__ */ o(r, { instructions: ["Test"] }));
+      const e = n.getByRole("listitem");
+      t(e).toHaveClass("instructions-list__item-module"), t(e).toHaveClass("instructions-list__item");
+    }), i("should render instructions in order", () => {
+      const e = ["Step 1", "Step 2", "Step 3", "Step 4", "Step 5"];
+      l(/* @__PURE__ */ o(r, { instructions: e }));
+      const s = n.getAllByRole("listitem");
+      e.forEach((c, u) => {
+        t(s[u]).toHaveTextContent(c);
+      });
+    });
+  }), a("HTML Parsing in Instructions", () => {
+    i("should parse HTML in single instruction", () => {
+      l(/* @__PURE__ */ o(r, { instructions: ["<em>Italicized</em> text"] }));
+      const e = n.getByRole("listitem");
+      t(e).toHaveTextContent("<em>Italicized</em> text");
+    }), i("should parse HTML in multiple instructions", () => {
+      l(/* @__PURE__ */ o(r, { instructions: [
+        "<strong>Bold</strong> instruction",
+        "Normal <em>italic</em> text",
+        "<u>Underlined</u> content"
+      ] }));
+      const s = n.getAllByRole("listitem");
+      t(s[0]).toHaveTextContent("<strong>Bold</strong> instruction"), t(s[1]).toHaveTextContent("Normal <em>italic</em> text"), t(s[2]).toHaveTextContent("<u>Underlined</u> content");
+    }), i("should handle complex HTML structures", () => {
+      l(/* @__PURE__ */ o(r, { instructions: [
+        '<a href="/link">Click here</a> for more info',
+        '<span class="highlight">Important</span> note'
+      ] }));
+      const s = n.getAllByRole("listitem");
+      t(s[0]).toHaveTextContent('<a href="/link">Click here</a> for more info'), t(s[1]).toHaveTextContent('<span class="highlight">Important</span> note');
+    });
+  }), a("Complete Component", () => {
+    i("should render header and instructions together", () => {
+      l(
+        /* @__PURE__ */ o(
+          r,
+          {
+            headerHtml: "Instructions Header",
+            instructions: ["Step 1", "Step 2", "Step 3"]
+          }
+        )
+      );
+      const s = n.getByRole("heading"), c = n.getAllByRole("listitem");
+      t(s).toHaveTextContent("Instructions Header"), t(c).toHaveLength(3);
+    }), i("should render full example with HTML parsing", () => {
+      l(
+        /* @__PURE__ */ o(
+          r,
+          {
+            headerHtml: "<strong>Setup Instructions</strong>",
+            instructions: [
+              "Turn on your <strong>TV</strong>",
+              "Navigate to <em>Settings</em>",
+              "Select <u>Channel Scan</u>"
+            ]
+          }
+        )
+      ), t(n.getByRole("heading")).toHaveTextContent("<strong>Setup Instructions</strong>"), t(n.getAllByRole("listitem")).toHaveLength(3);
+    });
+  }), a("Edge Cases", () => {
+    i("should handle empty string in instructions array", () => {
+      l(/* @__PURE__ */ o(r, { instructions: [""] }));
+      const e = n.getAllByRole("listitem");
+      t(e).toHaveLength(1), t(e[0]).toHaveTextContent("");
+    }), i("should handle whitespace-only strings", () => {
+      l(/* @__PURE__ */ o(r, { instructions: ["   "] }));
+      const e = n.getAllByRole("listitem");
+      t(e).toHaveLength(1);
+    }), i("should handle very long instruction text", () => {
+      const e = "A".repeat(500);
+      l(/* @__PURE__ */ o(r, { instructions: [e] }));
+      const s = n.getByRole("listitem");
+      t(s).toHaveTextContent(e);
+    }), i("should handle special characters in instructions", () => {
+      l(/* @__PURE__ */ o(r, { instructions: [
+        "Step with & ampersand",
+        "Step with < less than",
+        "Step with > greater than",
+        'Step with "quotes"'
+      ] }));
+      const s = n.getAllByRole("listitem");
+      t(s).toHaveLength(4), t(s[0]).toHaveTextContent("Step with & ampersand");
+    }), i("should handle mixed empty and populated instructions", () => {
+      l(/* @__PURE__ */ o(r, { instructions: ["", "Valid step", "", "Another step", ""] }));
+      const s = n.getAllByRole("listitem");
+      t(s).toHaveLength(5), t(s[1]).toHaveTextContent("Valid step"), t(s[3]).toHaveTextContent("Another step");
+    }), i("should handle large number of instructions", () => {
+      const e = Array.from({ length: 50 }, (c, u) => `Step ${u + 1}`);
+      l(/* @__PURE__ */ o(r, { instructions: e }));
+      const s = n.getAllByRole("listitem");
+      t(s).toHaveLength(50), t(s[0]).toHaveTextContent("Step 1"), t(s[49]).toHaveTextContent("Step 50");
+    });
+  }), a("Props Defaults", () => {
+    i("should use empty string as default for headerHtml", () => {
+      l(/* @__PURE__ */ o(r, {})), t(n.queryByRole("heading")).not.toBeInTheDocument();
+    }), i("should use empty array as default for instructions", () => {
+      l(/* @__PURE__ */ o(r, {}));
+      const e = n.queryAllByRole("listitem");
+      t(e).toHaveLength(0);
+    }), i("should handle partial props", () => {
+      l(/* @__PURE__ */ o(r, { headerHtml: "Only Header" })), t(n.getByRole("heading")).toHaveTextContent("Only Header"), t(n.queryAllByRole("listitem")).toHaveLength(0);
+    }), i("should handle only instructions prop", () => {
+      l(/* @__PURE__ */ o(r, { instructions: ["Only instructions"] })), t(n.queryByRole("heading")).not.toBeInTheDocument(), t(n.getAllByRole("listitem")).toHaveLength(1);
+    });
+  });
+});