@simplysm/solid 13.0.69 → 13.0.71

package/tests/components/disclosure/dialogZIndex.spec.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import {
+  registerDialog,
+  unregisterDialog,
+  getTopmostDialog,
+} from "../../../src/components/disclosure/dialogZIndex";
+
+describe("getTopmostDialog", () => {
+  let el1: HTMLElement;
+  let el2: HTMLElement;
+
+  beforeEach(() => {
+    el1 = document.createElement("div");
+    el2 = document.createElement("div");
+    // Clean up any leftover registrations
+    unregisterDialog(el1);
+    unregisterDialog(el2);
+  });
+
+  it("returns null when no dialogs are registered", () => {
+    expect(getTopmostDialog()).toBeNull();
+  });
+
+  it("returns the only registered dialog", () => {
+    registerDialog(el1);
+    expect(getTopmostDialog()).toBe(el1);
+    unregisterDialog(el1);
+  });
+
+  it("returns the last registered dialog when multiple are open", () => {
+    registerDialog(el1);
+    registerDialog(el2);
+    expect(getTopmostDialog()).toBe(el2);
+    unregisterDialog(el2);
+    unregisterDialog(el1);
+  });
+
+  it("returns previous dialog after topmost is unregistered", () => {
+    registerDialog(el1);
+    registerDialog(el2);
+    unregisterDialog(el2);
+    expect(getTopmostDialog()).toBe(el1);
+    unregisterDialog(el1);
+  });
+});

package/tests/components/display/Alert.spec.tsx

@@ -0,0 +1,47 @@
+import { render } from "@solidjs/testing-library";
+import { describe, it, expect } from "vitest";
+import { Alert } from "../../../src/components/display/Alert";
+
+describe("Alert", () => {
+  describe("basic rendering", () => {
+    it("renders children", () => {
+      const { getByText } = render(() => <Alert>This is a note</Alert>);
+      expect(getByText("This is a note")).toBeTruthy();
+    });
+
+    it("renders as div element", () => {
+      const { container } = render(() => <Alert>Content</Alert>);
+      const alert = container.firstChild as HTMLElement;
+      expect(alert.tagName).toBe("DIV");
+    });
+  });
+
+  describe("theme prop", () => {
+    it("applies different styles per theme", () => {
+      const { container: defaultContainer } = render(() => <Alert>Content</Alert>);
+      const { container: themedContainer } = render(() => <Alert theme="danger">Content</Alert>);
+
+      const defaultClass = (defaultContainer.firstChild as HTMLElement).className;
+      const themedClass = (themedContainer.firstChild as HTMLElement).className;
+
+      expect(defaultClass).not.toBe(themedClass);
+    });
+  });
+
+  describe("class merging", () => {
+    it("merges custom classes", () => {
+      // eslint-disable-next-line tailwindcss/no-custom-classname
+      const { container } = render(() => <Alert class="my-alert">Content</Alert>);
+      const alert = container.firstChild as HTMLElement;
+      expect(alert.classList.contains("my-alert")).toBe(true);
+    });
+  });
+
+  describe("HTML attribute forwarding", () => {
+    it("passes data-* attributes", () => {
+      const { container } = render(() => <Alert data-testid="test-alert">Content</Alert>);
+      const alert = container.firstChild as HTMLElement;
+      expect(alert.getAttribute("data-testid")).toBe("test-alert");
+    });
+  });
+});

package/tests/components/display/Barcode.spec.tsx

@@ -0,0 +1,61 @@
+import { render } from "@solidjs/testing-library";
+import { describe, it, expect } from "vitest";
+import { createSignal } from "solid-js";
+import { Barcode } from "../../../src/components/display/Barcode";
+
+describe("Barcode", () => {
+  describe("basic rendering", () => {
+    it("renders with data-barcode attribute", () => {
+      const { container } = render(() => <Barcode type="qrcode" value="test" />);
+      expect(container.querySelector("[data-barcode]")).toBeTruthy();
+    });
+
+    it("renders SVG when value is provided", () => {
+      const { container } = render(() => <Barcode type="qrcode" value="hello" />);
+      const el = container.querySelector("[data-barcode]")!;
+      expect(el.querySelector("svg")).toBeTruthy();
+    });
+
+    it("renders empty when value is absent", () => {
+      const { container } = render(() => <Barcode type="qrcode" />);
+      const el = container.querySelector("[data-barcode]")!;
+      expect(el.innerHTML).toBe("");
+    });
+  });
+
+  describe("reactivity", () => {
+    it("updates SVG when value changes", () => {
+      const [value, setValue] = createSignal("first");
+      const { container } = render(() => <Barcode type="qrcode" value={value()} />);
+      const el = container.querySelector("[data-barcode]")!;
+
+      const firstSvg = el.innerHTML;
+      setValue("second");
+      const secondSvg = el.innerHTML;
+
+      expect(firstSvg).not.toBe("");
+      expect(secondSvg).not.toBe("");
+      expect(firstSvg).not.toBe(secondSvg);
+    });
+
+    it("removes SVG when value changes to empty string", () => {
+      const [value, setValue] = createSignal("hello");
+      const { container } = render(() => <Barcode type="qrcode" value={value()} />);
+      const el = container.querySelector("[data-barcode]")!;
+
+      expect(el.querySelector("svg")).toBeTruthy();
+
+      setValue("");
+      expect(el.innerHTML).toBe("");
+    });
+  });
+
+  describe("class merging", () => {
+    it("merges custom classes", () => {
+      // eslint-disable-next-line tailwindcss/no-custom-classname
+      const { container } = render(() => <Barcode type="qrcode" value="test" class="my-custom" />);
+      const el = container.querySelector("[data-barcode]")!;
+      expect(el.classList.contains("my-custom")).toBe(true);
+    });
+  });
+});

package/tests/components/display/Card.spec.tsx

@@ -0,0 +1,41 @@
+import { render } from "@solidjs/testing-library";
+import { describe, it, expect } from "vitest";
+import { Card } from "../../../src/components/display/Card";
+
+describe("Card", () => {
+  describe("basic rendering", () => {
+    it("renders children", () => {
+      const { getByText } = render(() => <Card>Card Content</Card>);
+      expect(getByText("Card Content")).toBeTruthy();
+    });
+
+    it("renders as div element", () => {
+      const { container } = render(() => <Card>Content</Card>);
+      const card = container.firstChild as HTMLElement;
+      expect(card.tagName).toBe("DIV");
+    });
+  });
+
+  describe("class merging", () => {
+    it("merges custom classes", () => {
+      // eslint-disable-next-line tailwindcss/no-custom-classname
+      const { container } = render(() => <Card class="my-custom-class">Content</Card>);
+      const card = container.firstChild as HTMLElement;
+      expect(card.classList.contains("my-custom-class")).toBe(true);
+    });
+  });
+
+  describe("HTML attribute forwarding", () => {
+    it("passes data-* attributes", () => {
+      const { container } = render(() => <Card data-testid="test-card">Content</Card>);
+      const card = container.firstChild as HTMLElement;
+      expect(card.getAttribute("data-testid")).toBe("test-card");
+    });
+
+    it("passes id attribute", () => {
+      const { container } = render(() => <Card id="my-card">Content</Card>);
+      const card = container.firstChild as HTMLElement;
+      expect(card.id).toBe("my-card");
+    });
+  });
+});

package/tests/components/display/Link.spec.tsx

@@ -0,0 +1,62 @@
+import { render } from "@solidjs/testing-library";
+import { describe, it, expect } from "vitest";
+import { Link } from "../../../src/components/display/Link";
+
+describe("Link", () => {
+  describe("basic rendering", () => {
+    it("renders children", () => {
+      const { getByText } = render(() => <Link href="https://example.com">링크</Link>);
+      expect(getByText("링크")).toBeTruthy();
+    });
+
+    it("renders as link element", () => {
+      const { container } = render(() => <Link href="https://example.com">링크</Link>);
+      const link = container.firstChild as HTMLElement;
+      expect(link.tagName).toBe("A");
+    });
+  });
+
+  describe("href prop", () => {
+    it("passes href to anchor element", () => {
+      const { container } = render(() => <Link href="https://example.com">링크</Link>);
+      const link = container.firstChild as HTMLAnchorElement;
+      expect(link.getAttribute("href")).toBe("https://example.com");
+    });
+
+    it("passes target attribute", () => {
+      const { container } = render(() => (
+        <Link href="https://example.com" target="_blank">
+          링크
+        </Link>
+      ));
+      const link = container.firstChild as HTMLAnchorElement;
+      expect(link.getAttribute("target")).toBe("_blank");
+    });
+  });
+
+  describe("class merging", () => {
+    it("merges custom classes", () => {
+      /* eslint-disable tailwindcss/no-custom-classname */
+      const { container } = render(() => (
+        <Link href="#" class="my-link">
+          링크
+        </Link>
+      ));
+      /* eslint-enable tailwindcss/no-custom-classname */
+      const link = container.firstChild as HTMLElement;
+      expect(link.classList.contains("my-link")).toBe(true);
+    });
+  });
+
+  describe("HTML attribute forwarding", () => {
+    it("passes data-* attributes", () => {
+      const { container } = render(() => (
+        <Link href="#" data-testid="test-link">
+          링크
+        </Link>
+      ));
+      const link = container.firstChild as HTMLElement;
+      expect(link.getAttribute("data-testid")).toBe("test-link");
+    });
+  });
+});

package/tests/components/display/Tag.spec.tsx

@@ -0,0 +1,47 @@
+import { render } from "@solidjs/testing-library";
+import { describe, it, expect } from "vitest";
+import { Tag } from "../../../src/components/display/Tag";
+
+describe("Tag", () => {
+  describe("basic rendering", () => {
+    it("renders children", () => {
+      const { getByText } = render(() => <Tag>New</Tag>);
+      expect(getByText("New")).toBeTruthy();
+    });
+
+    it("renders as span element", () => {
+      const { container } = render(() => <Tag>Tag</Tag>);
+      const tag = container.firstChild as HTMLElement;
+      expect(tag.tagName).toBe("SPAN");
+    });
+  });
+
+  describe("theme prop", () => {
+    it("applies different styles per theme", () => {
+      const { container: defaultContainer } = render(() => <Tag>Tag</Tag>);
+      const { container: themedContainer } = render(() => <Tag theme="danger">Tag</Tag>);
+
+      const defaultClass = (defaultContainer.firstChild as HTMLElement).className;
+      const themedClass = (themedContainer.firstChild as HTMLElement).className;
+
+      expect(defaultClass).not.toBe(themedClass);
+    });
+  });
+
+  describe("class merging", () => {
+    it("merges custom classes", () => {
+      // eslint-disable-next-line tailwindcss/no-custom-classname
+      const { container } = render(() => <Tag class="my-tag">Tag</Tag>);
+      const tag = container.firstChild as HTMLElement;
+      expect(tag.classList.contains("my-tag")).toBe(true);
+    });
+  });
+
+  describe("HTML attribute forwarding", () => {
+    it("passes data-* attributes", () => {
+      const { container } = render(() => <Tag data-testid="test-tag">Tag</Tag>);
+      const tag = container.firstChild as HTMLElement;
+      expect(tag.getAttribute("data-testid")).toBe("test-tag");
+    });
+  });
+});

package/tests/components/features/address/AddressSearch.spec.tsx

@@ -0,0 +1,45 @@
+import { render, waitFor } from "@solidjs/testing-library";
+import { describe, it, expect } from "vitest";
+import { DialogProvider } from "../../../../src/components/disclosure/DialogProvider";
+import { useDialog } from "../../../../src/components/disclosure/DialogContext";
+import { AddressSearchContent } from "../../../../src/components/features/address/AddressSearch";
+
+function TestApp() {
+  const dialog = useDialog();
+
+  return (
+    <button
+      data-testid="open-btn"
+      onClick={() => {
+        void dialog.show(() => <AddressSearchContent />, {
+          header: "주소 검색",
+        });
+      }}
+    >
+      주소 검색 열기
+    </button>
+  );
+}
+
+describe("AddressSearchContent", () => {
+  it("mounts and renders Daum Postcode widget inside content area", async () => {
+    const { getByTestId } = render(() => (
+      <DialogProvider>
+        <TestApp />
+      </DialogProvider>
+    ));
+
+    getByTestId("open-btn").click();
+
+    // wait for Daum Postcode script load + widget embed
+    await waitFor(
+      () => {
+        const content = document.querySelector("[data-address-content]");
+        expect(content).not.toBeNull();
+        // once the Daum Postcode widget is embedded, content has child elements
+        expect(content!.children.length).toBeGreaterThan(0);
+      },
+      { timeout: 10000 },
+    );
+  });
+});