@simplysm/solid 13.0.69 → 13.0.71

package/tests/components/disclosure/DialogProvider.spec.tsx

@@ -0,0 +1,142 @@
+import { render, fireEvent, 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 { useDialogInstance } from "../../../src/components/disclosure/DialogInstanceContext";
+
+// dialog content component for testing
+function TestContent() {
+  const dialog = useDialogInstance<string>();
+  return (
+    <div>
+      <span data-testid="modal-content">다이얼로그 내용</span>
+      <button data-testid="close-btn" onClick={() => dialog?.close("result")}>
+        닫기
+      </button>
+      <button data-testid="close-no-result" onClick={() => dialog?.close()}>
+        취소
+      </button>
+    </div>
+  );
+}
+
+// test component that calls useDialog
+function TestApp() {
+  const dialog = useDialog();
+
+  return (
+    <button
+      data-testid="open-btn"
+      onClick={() => {
+        void dialog.show<string>(() => <TestContent />, { header: "테스트 다이얼로그" });
+      }}
+    >
+      다이얼로그 열기
+    </button>
+  );
+}
+
+// test component that opens without a header
+function TestAppNoHeader() {
+  const dialog = useDialog();
+
+  return (
+    <button
+      data-testid="open-btn"
+      onClick={() => {
+        void dialog.show<string>(() => <TestContent />, {});
+      }}
+    >
+      다이얼로그 열기
+    </button>
+  );
+}
+
+describe("DialogProvider", () => {
+  it("displays dialog via show()", async () => {
+    render(() => (
+      <DialogProvider>
+        <TestApp />
+      </DialogProvider>
+    ));
+
+    fireEvent.click(document.querySelector('[data-testid="open-btn"]')!);
+
+    await waitFor(() => {
+      expect(document.querySelector('[data-testid="modal-content"]')).not.toBeNull();
+    });
+  });
+
+  it("closes dialog when close is called via useDialogInstance", async () => {
+    render(() => (
+      <DialogProvider>
+        <TestApp />
+      </DialogProvider>
+    ));
+
+    fireEvent.click(document.querySelector('[data-testid="open-btn"]')!);
+
+    await waitFor(() => {
+      expect(document.querySelector('[data-testid="close-btn"]')).not.toBeNull();
+    });
+
+    fireEvent.click(document.querySelector('[data-testid="close-btn"]')!);
+
+    // dialog content is removed after close animation fallback timer (200ms)
+    await waitFor(() => {
+      expect(document.querySelector('[data-testid="modal-content"]')).toBeNull();
+    });
+  });
+
+  it("closes dialog when close() is called", async () => {
+    render(() => (
+      <DialogProvider>
+        <TestApp />
+      </DialogProvider>
+    ));
+
+    fireEvent.click(document.querySelector('[data-testid="open-btn"]')!);
+
+    await waitFor(() => {
+      expect(document.querySelector('[data-testid="close-no-result"]')).not.toBeNull();
+    });
+
+    fireEvent.click(document.querySelector('[data-testid="close-no-result"]')!);
+
+    await waitFor(() => {
+      expect(document.querySelector('[data-testid="modal-content"]')).toBeNull();
+    });
+  });
+
+  it("displays dialog header", async () => {
+    render(() => (
+      <DialogProvider>
+        <TestApp />
+      </DialogProvider>
+    ));
+
+    fireEvent.click(document.querySelector('[data-testid="open-btn"]')!);
+
+    await waitFor(() => {
+      const modal = document.querySelector("[data-modal]");
+      expect(modal).not.toBeNull();
+      expect(modal!.textContent).toContain("테스트 다이얼로그");
+    });
+  });
+
+  it("does not render header when header is not provided", async () => {
+    render(() => (
+      <DialogProvider>
+        <TestAppNoHeader />
+      </DialogProvider>
+    ));
+
+    fireEvent.click(document.querySelector('[data-testid="open-btn"]')!);
+
+    await waitFor(() => {
+      expect(document.querySelector('[data-testid="modal-content"]')).not.toBeNull();
+    });
+    const header = document.querySelector("[data-modal-header]");
+    expect(header).toBeNull();
+  });
+});

package/tests/components/disclosure/Dropdown.spec.tsx

@@ -0,0 +1,333 @@
+import { render, fireEvent, waitFor } from "@solidjs/testing-library";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { createSignal } from "solid-js";
+import { Dropdown } from "../../../src/components/disclosure/Dropdown";
+
+describe("Dropdown", () => {
+  beforeEach(() => {
+    vi.stubGlobal("innerWidth", 1024);
+    vi.stubGlobal("innerHeight", 768);
+    vi.stubGlobal("scrollX", 0);
+    vi.stubGlobal("scrollY", 0);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  describe("Trigger/Content structure", () => {
+    it("renders Content on Trigger click", async () => {
+      render(() => (
+        <Dropdown>
+          <Dropdown.Trigger>
+            <button data-testid="trigger">열기</button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <div data-testid="content">팝업 내용</div>
+          </Dropdown.Content>
+        </Dropdown>
+      ));
+
+      const trigger = document.querySelector('[data-testid="trigger"]')!;
+      expect(document.querySelector('[data-testid="content"]')).toBeNull();
+
+      fireEvent.click(trigger);
+
+      await waitFor(() => {
+        expect(document.querySelector('[data-testid="content"]')).not.toBeNull();
+      });
+    });
+
+    it("closes on second Trigger click", () => {
+      const [open, setOpen] = createSignal(false);
+      const handleOpenChange = vi.fn((v: boolean) => setOpen(v));
+
+      render(() => (
+        <Dropdown open={open()} onOpenChange={handleOpenChange}>
+          <Dropdown.Trigger>
+            <button data-testid="trigger">열기</button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <div data-testid="content">팝업</div>
+          </Dropdown.Content>
+        </Dropdown>
+      ));
+
+      const trigger = document.querySelector('[data-testid="trigger"]')!;
+      fireEvent.click(trigger);
+      expect(handleOpenChange).toHaveBeenCalledWith(true);
+
+      fireEvent.click(trigger);
+      expect(handleOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it("ignores Trigger click when disabled", () => {
+      const [open, setOpen] = createSignal(false);
+      const handleOpenChange = vi.fn((v: boolean) => setOpen(v));
+
+      render(() => (
+        <Dropdown disabled open={open()} onOpenChange={handleOpenChange}>
+          <Dropdown.Trigger>
+            <button data-testid="trigger">열기</button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <div>팝업</div>
+          </Dropdown.Content>
+        </Dropdown>
+      ));
+
+      fireEvent.click(document.querySelector('[data-testid="trigger"]')!);
+      expect(handleOpenChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("controlled mode", () => {
+    it("is controlled by open prop", async () => {
+      const [open, setOpen] = createSignal(false);
+
+      render(() => (
+        <Dropdown open={open()} onOpenChange={setOpen}>
+          <Dropdown.Trigger>
+            <button>트리거</button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <div data-testid="content">팝업</div>
+          </Dropdown.Content>
+        </Dropdown>
+      ));
+
+      expect(document.querySelector('[data-testid="content"]')).toBeNull();
+
+      setOpen(true);
+
+      await waitFor(() => {
+        expect(document.querySelector('[data-testid="content"]')).not.toBeNull();
+      });
+    });
+  });
+
+  describe("Context menu (no Trigger)", () => {
+    it("sets position via position prop", async () => {
+      render(() => (
+        <Dropdown position={{ x: 300, y: 200 }} open={true}>
+          <Dropdown.Content>
+            <div data-testid="content">메뉴</div>
+          </Dropdown.Content>
+        </Dropdown>
+      ));
+
+      await waitFor(() => {
+        const dropdown = document.querySelector("[data-dropdown]") as HTMLElement;
+        expect(dropdown).not.toBeNull();
+        expect(dropdown.style.left).toBeTruthy();
+      });
+    });
+  });
+
+  describe("close detection", () => {
+    it("closes on outside pointerdown", async () => {
+      const handleOpenChange = vi.fn();
+
+      render(() => (
+        <>
+          <div data-testid="outside">외부</div>
+          <Dropdown open={true} onOpenChange={handleOpenChange}>
+            <Dropdown.Trigger>
+              <button>트리거</button>
+            </Dropdown.Trigger>
+            <Dropdown.Content>
+              <div>팝업</div>
+            </Dropdown.Content>
+          </Dropdown>
+        </>
+      ));
+
+      await waitFor(() => {
+        expect(document.querySelector("[data-dropdown]")).not.toBeNull();
+      });
+
+      fireEvent.pointerDown(document.querySelector('[data-testid="outside"]')!);
+      expect(handleOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it("closes on Escape key", async () => {
+      const handleOpenChange = vi.fn();
+
+      render(() => (
+        <Dropdown open={true} onOpenChange={handleOpenChange}>
+          <Dropdown.Trigger>
+            <button>트리거</button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <div>팝업</div>
+          </Dropdown.Content>
+        </Dropdown>
+      ));
+
+      await waitFor(() => {
+        expect(document.querySelector("[data-dropdown]")).not.toBeNull();
+      });
+
+      fireEvent.keyDown(document, { key: "Escape" });
+      expect(handleOpenChange).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe("maxHeight", () => {
+    it("defaults to 300px", async () => {
+      render(() => (
+        <Dropdown open={true}>
+          <Dropdown.Trigger>
+            <button>트리거</button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <div>팝업</div>
+          </Dropdown.Content>
+        </Dropdown>
+      ));
+
+      await waitFor(() => {
+        const dropdown = document.querySelector("[data-dropdown]") as HTMLElement;
+        expect(dropdown.style.maxHeight).toBe("300px");
+      });
+    });
+
+    it("applies custom value", async () => {
+      render(() => (
+        <Dropdown open={true} maxHeight={500}>
+          <Dropdown.Trigger>
+            <button>트리거</button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <div>팝업</div>
+          </Dropdown.Content>
+        </Dropdown>
+      ));
+
+      await waitFor(() => {
+        const dropdown = document.querySelector("[data-dropdown]") as HTMLElement;
+        expect(dropdown.style.maxHeight).toBe("500px");
+      });
+    });
+  });
+
+  describe("keyboardNav tabbable navigation", () => {
+    it("ArrowDown from trigger focuses first tabbable in popup (input, not list item)", async () => {
+      const [open, setOpen] = createSignal(true);
+
+      render(() => (
+        <Dropdown open={open()} onOpenChange={setOpen} keyboardNav>
+          <Dropdown.Trigger>
+            <button data-testid="trigger">trigger</button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <input data-testid="search" />
+            <button data-testid="action-btn" type="button">action</button>
+            <button data-list-item data-testid="item1" type="button">item1</button>
+          </Dropdown.Content>
+        </Dropdown>
+      ));
+
+      await waitFor(() => {
+        expect(document.querySelector("[data-dropdown]")).not.toBeNull();
+      });
+
+      const triggerWrapper = document.querySelector("[data-dropdown-trigger]") as HTMLElement;
+      triggerWrapper.focus();
+
+      fireEvent.keyDown(triggerWrapper, { key: "ArrowDown" });
+
+      const search = document.querySelector('[data-testid="search"]') as HTMLElement;
+      expect(document.activeElement).toBe(search);
+    });
+
+    it("ArrowDown from input focuses next tabbable (button)", async () => {
+      const [open, setOpen] = createSignal(true);
+
+      render(() => (
+        <Dropdown open={open()} onOpenChange={setOpen} keyboardNav>
+          <Dropdown.Trigger>
+            <button data-testid="trigger">trigger</button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <input data-testid="search" />
+            <button data-testid="action-btn" type="button">action</button>
+            <button data-list-item data-testid="item1" type="button">item1</button>
+          </Dropdown.Content>
+        </Dropdown>
+      ));
+
+      await waitFor(() => {
+        expect(document.querySelector("[data-dropdown]")).not.toBeNull();
+      });
+
+      const search = document.querySelector('[data-testid="search"]') as HTMLElement;
+      search.focus();
+
+      const popup = document.querySelector("[data-dropdown]") as HTMLElement;
+      fireEvent.keyDown(popup, { key: "ArrowDown" });
+
+      const actionBtn = document.querySelector('[data-testid="action-btn"]') as HTMLElement;
+      expect(document.activeElement).toBe(actionBtn);
+    });
+
+    it("ArrowUp from input focuses trigger (no prev tabbable, dir=down)", async () => {
+      const [open, setOpen] = createSignal(true);
+
+      render(() => (
+        <Dropdown open={open()} onOpenChange={setOpen} keyboardNav>
+          <Dropdown.Trigger>
+            <button data-testid="trigger">trigger</button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <input data-testid="search" />
+            <button data-list-item data-testid="item1" type="button">item1</button>
+          </Dropdown.Content>
+        </Dropdown>
+      ));
+
+      await waitFor(() => {
+        expect(document.querySelector("[data-dropdown]")).not.toBeNull();
+      });
+
+      const search = document.querySelector('[data-testid="search"]') as HTMLElement;
+      search.focus();
+
+      const popup = document.querySelector("[data-dropdown]") as HTMLElement;
+      fireEvent.keyDown(popup, { key: "ArrowUp" });
+
+      const triggerWrapper = document.querySelector("[data-dropdown-trigger]") as HTMLElement;
+      expect(document.activeElement).toBe(triggerWrapper);
+    });
+
+    it("ArrowUp from action button focuses prev tabbable (input)", async () => {
+      const [open, setOpen] = createSignal(true);
+
+      render(() => (
+        <Dropdown open={open()} onOpenChange={setOpen} keyboardNav>
+          <Dropdown.Trigger>
+            <button data-testid="trigger">trigger</button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <input data-testid="search" />
+            <button data-testid="action-btn" type="button">action</button>
+            <button data-list-item data-testid="item1" type="button">item1</button>
+          </Dropdown.Content>
+        </Dropdown>
+      ));
+
+      await waitFor(() => {
+        expect(document.querySelector("[data-dropdown]")).not.toBeNull();
+      });
+
+      const actionBtn = document.querySelector('[data-testid="action-btn"]') as HTMLElement;
+      actionBtn.focus();
+
+      const popup = document.querySelector("[data-dropdown]") as HTMLElement;
+      fireEvent.keyDown(popup, { key: "ArrowUp" });
+
+      const search = document.querySelector('[data-testid="search"]') as HTMLElement;
+      expect(document.activeElement).toBe(search);
+    });
+  });
+});

package/tests/components/disclosure/Tabs.spec.tsx

@@ -0,0 +1,220 @@
+import { render, fireEvent } from "@solidjs/testing-library";
+import { describe, it, expect, vi } from "vitest";
+import { createSignal } from "solid-js";
+import { Tabs } from "../../../src/components/disclosure/Tabs";
+
+describe("Tabs", () => {
+  describe("basic rendering", () => {
+    it("renders with tablist role", () => {
+      const { getByRole } = render(() => (
+        <Tabs>
+          <Tabs.Tab value="a">A</Tabs.Tab>
+        </Tabs>
+      ));
+      expect(getByRole("tablist")).toBeTruthy();
+    });
+
+    it("renders Tabs.Tab with tab role", () => {
+      const { getByRole } = render(() => (
+        <Tabs>
+          <Tabs.Tab value="a">A</Tabs.Tab>
+        </Tabs>
+      ));
+      expect(getByRole("tab")).toBeTruthy();
+    });
+
+    it("renders children", () => {
+      const { getByText } = render(() => (
+        <Tabs>
+          <Tabs.Tab value="a">탭 A</Tabs.Tab>
+          <Tabs.Tab value="b">탭 B</Tabs.Tab>
+        </Tabs>
+      ));
+      expect(getByText("탭 A")).toBeTruthy();
+      expect(getByText("탭 B")).toBeTruthy();
+    });
+  });
+
+  describe("selection behavior", () => {
+    it("sets aria-selected to true on click", () => {
+      const { getAllByRole } = render(() => (
+        <Tabs>
+          <Tabs.Tab value="a">A</Tabs.Tab>
+          <Tabs.Tab value="b">B</Tabs.Tab>
+        </Tabs>
+      ));
+      const tabs = getAllByRole("tab");
+
+      fireEvent.click(tabs[0]);
+      expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+      expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    });
+
+    it("changes selection on different tab click", () => {
+      const { getAllByRole } = render(() => (
+        <Tabs value="a">
+          <Tabs.Tab value="a">A</Tabs.Tab>
+          <Tabs.Tab value="b">B</Tabs.Tab>
+        </Tabs>
+      ));
+      const tabs = getAllByRole("tab");
+
+      fireEvent.click(tabs[1]);
+      expect(tabs[1].getAttribute("aria-selected")).toBe("true");
+      expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    });
+
+    it("does not select disabled tab on click", () => {
+      const handleChange = vi.fn();
+      const { getAllByRole } = render(() => (
+        <Tabs onValueChange={handleChange}>
+          <Tabs.Tab value="a">A</Tabs.Tab>
+          <Tabs.Tab value="b" disabled>
+            B
+          </Tabs.Tab>
+        </Tabs>
+      ));
+
+      fireEvent.click(getAllByRole("tab")[1]);
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("keyboard behavior", () => {
+    it("selects tab with Space key", () => {
+      const { getAllByRole } = render(() => (
+        <Tabs>
+          <Tabs.Tab value="a">A</Tabs.Tab>
+          <Tabs.Tab value="b">B</Tabs.Tab>
+        </Tabs>
+      ));
+
+      fireEvent.keyDown(getAllByRole("tab")[0], { key: " " });
+      expect(getAllByRole("tab")[0].getAttribute("aria-selected")).toBe("true");
+    });
+
+    it("selects tab with Enter key", () => {
+      const { getAllByRole } = render(() => (
+        <Tabs>
+          <Tabs.Tab value="a">A</Tabs.Tab>
+          <Tabs.Tab value="b">B</Tabs.Tab>
+        </Tabs>
+      ));
+
+      fireEvent.keyDown(getAllByRole("tab")[1], { key: "Enter" });
+      expect(getAllByRole("tab")[1].getAttribute("aria-selected")).toBe("true");
+    });
+  });
+
+  describe("controlled pattern", () => {
+    it("reflects value prop as selected state", () => {
+      const { getAllByRole } = render(() => (
+        <Tabs value="b">
+          <Tabs.Tab value="a">A</Tabs.Tab>
+          <Tabs.Tab value="b">B</Tabs.Tab>
+        </Tabs>
+      ));
+
+      expect(getAllByRole("tab")[0].getAttribute("aria-selected")).toBe("false");
+      expect(getAllByRole("tab")[1].getAttribute("aria-selected")).toBe("true");
+    });
+
+    it("calls onValueChange on click", () => {
+      const handleChange = vi.fn();
+      const { getAllByRole } = render(() => (
+        <Tabs value="a" onValueChange={handleChange}>
+          <Tabs.Tab value="a">A</Tabs.Tab>
+          <Tabs.Tab value="b">B</Tabs.Tab>
+        </Tabs>
+      ));
+
+      fireEvent.click(getAllByRole("tab")[1]);
+      expect(handleChange).toHaveBeenCalledWith("b");
+    });
+
+    it("updates when external state changes", () => {
+      const [value, setValue] = createSignal("a");
+      const { getAllByRole } = render(() => (
+        <Tabs value={value()} onValueChange={setValue}>
+          <Tabs.Tab value="a">A</Tabs.Tab>
+          <Tabs.Tab value="b">B</Tabs.Tab>
+        </Tabs>
+      ));
+
+      expect(getAllByRole("tab")[0].getAttribute("aria-selected")).toBe("true");
+
+      setValue("b");
+      expect(getAllByRole("tab")[1].getAttribute("aria-selected")).toBe("true");
+      expect(getAllByRole("tab")[0].getAttribute("aria-selected")).toBe("false");
+    });
+  });
+
+  describe("size", () => {
+    it("applies different styles per size prop", () => {
+      const { getAllByRole: getDefault } = render(() => (
+        <Tabs>
+          <Tabs.Tab value="a">A</Tabs.Tab>
+        </Tabs>
+      ));
+      const { getAllByRole: getSm } = render(() => (
+        <Tabs size="sm">
+          <Tabs.Tab value="a">A</Tabs.Tab>
+        </Tabs>
+      ));
+
+      expect(getDefault("tab")[0].className).not.toBe(getSm("tab")[0].className);
+    });
+  });
+
+  describe("accessibility", () => {
+    it("sets aria-disabled on disabled tab", () => {
+      const { getAllByRole } = render(() => (
+        <Tabs>
+          <Tabs.Tab value="a">A</Tabs.Tab>
+          <Tabs.Tab value="b" disabled>
+            B
+          </Tabs.Tab>
+        </Tabs>
+      ));
+
+      expect(getAllByRole("tab")[1].getAttribute("aria-disabled")).toBe("true");
+    });
+
+    it("sets tabIndex to -1 on disabled tab", () => {
+      const { getAllByRole } = render(() => (
+        <Tabs>
+          <Tabs.Tab value="a">A</Tabs.Tab>
+          <Tabs.Tab value="b" disabled>
+            B
+          </Tabs.Tab>
+        </Tabs>
+      ));
+
+      expect(getAllByRole("tab")[1].getAttribute("tabindex")).toBe("-1");
+    });
+  });
+
+  describe("class merging", () => {
+    it("merges custom class on Tabs", () => {
+      const { getByRole } = render(() => (
+        // eslint-disable-next-line tailwindcss/no-custom-classname
+        <Tabs class="my-tab-class">
+          <Tabs.Tab value="a">A</Tabs.Tab>
+        </Tabs>
+      ));
+      expect(getByRole("tablist").classList.contains("my-tab-class")).toBe(true);
+    });
+
+    it("merges custom class on Tabs.Tab", () => {
+      const { getByRole } = render(() => (
+        <Tabs>
+          {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
+          <Tabs.Tab value="a" class="my-item-class">
+            A
+          </Tabs.Tab>
+        </Tabs>
+      ));
+      expect(getByRole("tab").classList.contains("my-item-class")).toBe(true);
+    });
+  });
+});