@simplysm/solid 13.0.0-beta.6

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

@@ -0,0 +1,162 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, waitFor } from "@solidjs/testing-library";
+import { createSignal } from "solid-js";
+import { Collapse } from "../../../src";
+
+describe("Collapse", () => {
+  // requestAnimationFrame mock
+  beforeEach(() => {
+    vi.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 0;
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe("렌더링", () => {
+    it("open={false}일 때 aria-hidden=true", () => {
+      const { container } = render(() => <Collapse open={false}>Content</Collapse>);
+      expect(container.querySelector("[aria-hidden='true']")).toBeTruthy();
+    });
+
+    it("open={true}일 때 aria-hidden=false", () => {
+      const { container } = render(() => <Collapse open={true}>Content</Collapse>);
+      expect(container.querySelector("[aria-hidden='false']")).toBeTruthy();
+    });
+
+    it("open이 undefined일 때 false로 처리 (aria-hidden=true)", () => {
+      const { container } = render(() => <Collapse>Content</Collapse>);
+      expect(container.querySelector("[aria-hidden='true']")).toBeTruthy();
+    });
+
+    it("콘텐츠가 비어있어도 정상 렌더링", () => {
+      const { container } = render(() => <Collapse open={false} />);
+      expect(container.firstChild).toBeTruthy();
+    });
+
+    it("추가 class가 병합됨", () => {
+      const { container } = render(() => (
+        // eslint-disable-next-line tailwindcss/no-custom-classname
+        <Collapse open={true} class="my-test-class">
+          Content
+        </Collapse>
+      ));
+      expect(container.querySelector(".my-test-class")).toBeTruthy();
+      // overflow: hidden은 inline style로 적용됨
+      const rootDiv = container.querySelector("[aria-hidden]") as HTMLElement;
+      expect(rootDiv.style.overflow).toBe("hidden");
+    });
+  });
+
+  describe("margin-top 계산", () => {
+    it("open={false}일 때 margin-top이 콘텐츠 높이의 음수값", async () => {
+      const { container } = render(() => (
+        <Collapse open={false}>
+          <div style={{ height: "100px" }}>Content</div>
+        </Collapse>
+      ));
+      const contentDiv = container.querySelector("[aria-hidden]")?.firstElementChild as HTMLElement;
+      expect(contentDiv).toBeTruthy();
+
+      // ResizeObserver가 측정을 완료할 때까지 대기
+      await waitFor(() => {
+        const marginTop = contentDiv.style.marginTop;
+        // margin-top이 음수값인지 확인 (실제 높이 측정됨)
+        expect(marginTop).toMatch(/^-\d+px$/);
+        expect(parseInt(marginTop)).toBeLessThan(0);
+      });
+    });
+
+    it("open={true}일 때 margin-top이 없음", () => {
+      const { container } = render(() => (
+        <Collapse open={true}>
+          <div style={{ height: "100px" }}>Content</div>
+        </Collapse>
+      ));
+      const contentDiv = container.querySelector("[aria-hidden]")?.firstElementChild;
+      const marginTop = (contentDiv as HTMLElement).style.marginTop;
+      expect(!marginTop || marginTop === "").toBeTruthy();
+    });
+  });
+
+  describe("초기 렌더링 및 transition", () => {
+    it("마운트 후 transition 클래스가 적용됨", () => {
+      const { container } = render(() => <Collapse open={false}>Content</Collapse>);
+      const contentDiv = container.querySelector("[aria-hidden]")?.firstElementChild;
+      expect(contentDiv?.classList.contains("transition-[margin-top]")).toBeTruthy();
+    });
+
+    it("open 상태 변경 시 transition class 유지되며 margin-top 변경", async () => {
+      const [open, setOpen] = createSignal(false);
+      const { container } = render(() => (
+        <Collapse open={open()}>
+          <div style={{ height: "100px" }}>Content</div>
+        </Collapse>
+      ));
+
+      const contentDiv = container.querySelector("[aria-hidden]")?.firstElementChild as HTMLElement;
+
+      // 초기 상태: 닫힘, margin-top 음수
+      await waitFor(() => {
+        expect(parseInt(contentDiv.style.marginTop)).toBeLessThan(0);
+      });
+      expect(contentDiv.classList.contains("transition-[margin-top]")).toBeTruthy();
+      expect(contentDiv.classList.contains("duration-200")).toBeTruthy();
+
+      // 열림 상태로 변경
+      setOpen(true);
+
+      // transition class 유지, margin-top 변경
+      await waitFor(() => {
+        const marginTop = contentDiv.style.marginTop;
+        expect(!marginTop || marginTop === "").toBeTruthy();
+      });
+      expect(contentDiv.classList.contains("transition-[margin-top]")).toBeTruthy();
+    });
+  });
+
+  describe("동적 상태 변경", () => {
+    it("open 상태 변경 시 aria-hidden 업데이트", () => {
+      const [open, setOpen] = createSignal(false);
+      const { container } = render(() => <Collapse open={open()}>Content</Collapse>);
+
+      expect(container.querySelector("[aria-hidden='true']")).toBeTruthy();
+
+      setOpen(true);
+      expect(container.querySelector("[aria-hidden='false']")).toBeTruthy();
+    });
+
+    it("콘텐츠 높이 변경 시 margin-top 재계산", async () => {
+      const [showExtra, setShowExtra] = createSignal(false);
+      const { container } = render(() => (
+        <Collapse open={false}>
+          <div style={{ height: "50px" }}>Base Content</div>
+          {showExtra() && <div style={{ height: "50px" }}>Extra Content</div>}
+        </Collapse>
+      ));
+
+      const contentDiv = container.querySelector("[aria-hidden]")?.firstElementChild as HTMLElement;
+
+      // 초기 높이 측정 대기
+      await waitFor(() => {
+        const initialMarginTop = parseInt(contentDiv.style.marginTop);
+        expect(initialMarginTop).toBeLessThan(0);
+      });
+
+      const initialMarginTop = parseInt(contentDiv.style.marginTop);
+
+      // 콘텐츠 추가로 높이 변경
+      setShowExtra(true);
+
+      // ResizeObserver가 새 높이를 감지하고 margin-top 재계산 대기
+      await waitFor(() => {
+        const newMarginTop = parseInt(contentDiv.style.marginTop);
+        // 새 margin-top이 초기값보다 더 작아야 함 (더 큰 음수)
+        expect(newMarginTop).toBeLessThan(initialMarginTop);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,319 @@
+import { render, fireEvent, waitFor } from "@solidjs/testing-library";
+import { describe, it, expect, vi } from "vitest";
+import { Dialog } from "../../../src/components/disclosure/Dialog";
+
+describe("Dialog 컴포넌트", () => {
+  describe("기본 렌더링", () => {
+    it("open=true일 때 다이얼로그가 렌더링된다", async () => {
+      render(() => (
+        <Dialog open={true} title="테스트 다이얼로그">
+          <div data-testid="content">다이얼로그 내용</div>
+        </Dialog>
+      ));
+      await waitFor(() => {
+        const content = document.querySelector('[data-testid="content"]');
+        expect(content).not.toBeNull();
+      });
+    });
+
+    it("open=false일 때 다이얼로그가 DOM에 없다", () => {
+      render(() => (
+        <Dialog open={false} title="테스트 다이얼로그">
+          <div data-testid="content">다이얼로그 내용</div>
+        </Dialog>
+      ));
+      const content = document.querySelector('[data-testid="content"]');
+      expect(content).toBeNull();
+    });
+
+    it("data-modal 속성이 설정된다", async () => {
+      render(() => (
+        <Dialog open={true} title="테스트 다이얼로그">
+          <div>내용</div>
+        </Dialog>
+      ));
+      await waitFor(() => {
+        const modal = document.querySelector("[data-modal]");
+        expect(modal).not.toBeNull();
+      });
+    });
+
+    it("제목이 표시된다", async () => {
+      render(() => (
+        <Dialog open={true} title="내 다이얼로그 제목">
+          <div>내용</div>
+        </Dialog>
+      ));
+      await waitFor(() => {
+        const modal = document.querySelector("[data-modal]");
+        expect(modal).not.toBeNull();
+        expect(modal!.textContent).toContain("내 다이얼로그 제목");
+      });
+    });
+  });
+
+  describe("헤더 옵션", () => {
+    it("hideHeader=true일 때 헤더가 표시되지 않는다", async () => {
+      render(() => (
+        <Dialog open={true} title="테스트" hideHeader>
+          <div data-testid="content">내용</div>
+        </Dialog>
+      ));
+      await waitFor(() => {
+        const content = document.querySelector('[data-testid="content"]');
+        expect(content).not.toBeNull();
+      });
+      const header = document.querySelector("[data-modal-header]");
+      expect(header).toBeNull();
+    });
+
+    it("closable={false}일 때 닫기 버튼이 없다", async () => {
+      render(() => (
+        <Dialog open={true} title="테스트" closable={false}>
+          <div>내용</div>
+        </Dialog>
+      ));
+      await waitFor(() => {
+        expect(document.querySelector("[data-modal]")).not.toBeNull();
+      });
+      const closeBtn = document.querySelector("[data-modal-close]");
+      expect(closeBtn).toBeNull();
+    });
+  });
+
+  describe("닫힘 동작", () => {
+    it("닫기 버튼 클릭 시 onOpenChange(false)가 호출된다", async () => {
+      const handleOpenChange = vi.fn();
+      render(() => (
+        <Dialog open={true} title="테스트" onOpenChange={handleOpenChange}>
+          <div>내용</div>
+        </Dialog>
+      ));
+      await waitFor(() => {
+        expect(document.querySelector("[data-modal-close]")).not.toBeNull();
+      });
+      fireEvent.click(document.querySelector("[data-modal-close]")!);
+      expect(handleOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it("closeOnBackdrop=true일 때 백드롭 클릭으로 닫힌다", async () => {
+      const handleOpenChange = vi.fn();
+      render(() => (
+        <Dialog open={true} title="테스트" closeOnBackdrop onOpenChange={handleOpenChange}>
+          <div>내용</div>
+        </Dialog>
+      ));
+      await waitFor(() => {
+        expect(document.querySelector("[data-modal-backdrop]")).not.toBeNull();
+      });
+      fireEvent.click(document.querySelector("[data-modal-backdrop]")!);
+      expect(handleOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it("closeOnBackdrop 미설정 시 백드롭 클릭으로 닫히지 않는다", async () => {
+      const handleOpenChange = vi.fn();
+      render(() => (
+        <Dialog open={true} title="테스트" onOpenChange={handleOpenChange}>
+          <div>내용</div>
+        </Dialog>
+      ));
+      await waitFor(() => {
+        expect(document.querySelector("[data-modal-backdrop]")).not.toBeNull();
+      });
+      fireEvent.click(document.querySelector("[data-modal-backdrop]")!);
+      expect(handleOpenChange).not.toHaveBeenCalled();
+    });
+
+    it("기본적으로 Escape 키로 닫힌다", async () => {
+      const handleOpenChange = vi.fn();
+      render(() => (
+        <Dialog open={true} title="테스트" onOpenChange={handleOpenChange}>
+          <div>내용</div>
+        </Dialog>
+      ));
+      await waitFor(() => {
+        expect(document.querySelector("[data-modal]")).not.toBeNull();
+      });
+      fireEvent.keyDown(document, { key: "Escape" });
+      expect(handleOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it("closeOnEscape=true일 때 Escape로 닫힌다", async () => {
+      const handleOpenChange = vi.fn();
+      render(() => (
+        <Dialog open={true} title="테스트" closeOnEscape onOpenChange={handleOpenChange}>
+          <div>내용</div>
+        </Dialog>
+      ));
+      await waitFor(() => {
+        expect(document.querySelector("[data-modal]")).not.toBeNull();
+      });
+      fireEvent.keyDown(document, { key: "Escape" });
+      expect(handleOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it("closeOnEscape=false일 때 Escape로 닫히지 않는다", async () => {
+      const handleOpenChange = vi.fn();
+      render(() => (
+        <Dialog open={true} title="테스트" closeOnEscape={false} onOpenChange={handleOpenChange}>
+          <div>내용</div>
+        </Dialog>
+      ));
+      await waitFor(() => {
+        expect(document.querySelector("[data-modal]")).not.toBeNull();
+      });
+      fireEvent.keyDown(document, { key: "Escape" });
+      expect(handleOpenChange).not.toHaveBeenCalled();
+    });
+
+    it("canDeactivate가 false를 반환하면 닫히지 않는다", async () => {
+      const handleOpenChange = vi.fn();
+      render(() => (
+        <Dialog open={true} title="테스트" onOpenChange={handleOpenChange} canDeactivate={() => false}>
+          <div>내용</div>
+        </Dialog>
+      ));
+      await waitFor(() => {
+        expect(document.querySelector("[data-modal-close]")).not.toBeNull();
+      });
+      fireEvent.click(document.querySelector("[data-modal-close]")!);
+      expect(handleOpenChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("접근성", () => {
+    it("role=dialog와 aria-modal 속성이 설정된다", async () => {
+      render(() => (
+        <Dialog open={true} title="접근성 테스트">
+          <div>내용</div>
+        </Dialog>
+      ));
+      await waitFor(() => {
+        const dialog = document.querySelector("[data-modal-dialog]") as HTMLElement;
+        expect(dialog).not.toBeNull();
+        expect(dialog.getAttribute("role")).toBe("dialog");
+        expect(dialog.getAttribute("aria-modal")).toBe("true");
+        expect(dialog.getAttribute("aria-label")).toBe("접근성 테스트");
+      });
+    });
+
+    it("float 모드에서는 aria-modal이 설정되지 않는다", async () => {
+      render(() => (
+        <Dialog open={true} title="플로팅 다이얼로그" float>
+          <div>내용</div>
+        </Dialog>
+      ));
+      await waitFor(() => {
+        const dialog = document.querySelector("[data-modal-dialog]") as HTMLElement;
+        expect(dialog).not.toBeNull();
+        expect(dialog.getAttribute("role")).toBe("dialog");
+        expect(dialog.hasAttribute("aria-modal")).toBe(false);
+        expect(dialog.getAttribute("aria-label")).toBe("플로팅 다이얼로그");
+      });
+    });
+  });
+
+  describe("float 모드", () => {
+    it("float=true일 때 백드롭이 없다", async () => {
+      render(() => (
+        <Dialog open={true} title="테스트" float>
+          <div data-testid="content">내용</div>
+        </Dialog>
+      ));
+      await waitFor(() => {
+        expect(document.querySelector('[data-testid="content"]')).not.toBeNull();
+      });
+      const backdrop = document.querySelector("[data-modal-backdrop]");
+      expect(backdrop).toBeNull();
+    });
+  });
+
+  describe("fill 모드", () => {
+    it("fill=true일 때 다이얼로그에 fill 스타일이 적용된다", async () => {
+      render(() => (
+        <Dialog open={true} title="테스트" fill>
+          <div>내용</div>
+        </Dialog>
+      ));
+      await waitFor(() => {
+        const dialog = document.querySelector("[data-modal-dialog]") as HTMLElement;
+        expect(dialog).not.toBeNull();
+        expect(dialog.style.width).toBe("100%");
+        expect(dialog.style.height).toBe("100%");
+      });
+    });
+  });
+
+  describe("크기 제어", () => {
+    it("widthPx, heightPx가 적용된다", async () => {
+      render(() => (
+        <Dialog open={true} title="테스트" widthPx={400} heightPx={300}>
+          <div>내용</div>
+        </Dialog>
+      ));
+      await waitFor(() => {
+        const dialog = document.querySelector("[data-modal-dialog]") as HTMLElement;
+        expect(dialog).not.toBeNull();
+        expect(dialog.style.width).toBe("400px");
+        expect(dialog.style.height).toBe("300px");
+      });
+    });
+
+    it("minWidthPx, minHeightPx가 적용된다", async () => {
+      render(() => (
+        <Dialog open={true} title="테스트" minWidthPx={300} minHeightPx={200}>
+          <div>내용</div>
+        </Dialog>
+      ));
+      await waitFor(() => {
+        const dialog = document.querySelector("[data-modal-dialog]") as HTMLElement;
+        expect(dialog).not.toBeNull();
+        expect(dialog.style.minWidth).toBe("300px");
+        expect(dialog.style.minHeight).toBe("200px");
+      });
+    });
+  });
+
+  describe("리사이즈", () => {
+    it("resizable=true일 때 리사이즈 바가 렌더링된다", async () => {
+      render(() => (
+        <Dialog open={true} title="테스트" resizable>
+          <div>내용</div>
+        </Dialog>
+      ));
+      await waitFor(() => {
+        const bars = document.querySelectorAll("[data-resize-bar]");
+        expect(bars.length).toBe(8);
+      });
+    });
+
+    it("resizable=false(기본)일 때 리사이즈 바가 없다", async () => {
+      render(() => (
+        <Dialog open={true} title="테스트">
+          <div>내용</div>
+        </Dialog>
+      ));
+      await waitFor(() => {
+        expect(document.querySelector("[data-modal]")).not.toBeNull();
+      });
+      const bars = document.querySelectorAll("[data-resize-bar]");
+      expect(bars.length).toBe(0);
+    });
+  });
+
+  describe("애니메이션", () => {
+    it("열림 시 transition 클래스가 적용된다", async () => {
+      render(() => (
+        <Dialog open={true} title="테스트">
+          <div>내용</div>
+        </Dialog>
+      ));
+      await waitFor(() => {
+        const dialog = document.querySelector("[data-modal-dialog]") as HTMLElement;
+        expect(dialog).not.toBeNull();
+        expect(dialog.classList.contains("transition-[opacity,transform]")).toBe(true);
+        expect(dialog.classList.contains("duration-200")).toBe(true);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,110 @@
+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";
+
+// 테스트용 다이얼로그 콘텐츠 컴포넌트
+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>
+  );
+}
+
+// useDialog를 호출하는 테스트용 컴포넌트
+function TestApp() {
+  const dialog = useDialog();
+
+  return (
+    <button
+      data-testid="open-btn"
+      onClick={() => {
+        void dialog.show<string>(() => <TestContent />, { title: "테스트 다이얼로그" });
+      }}
+    >
+      다이얼로그 열기
+    </button>
+  );
+}
+
+describe("DialogProvider", () => {
+  it("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("useDialogInstance로 close를 호출하면 다이얼로그가 닫힌다", 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"]')!);
+
+    // 닫힘 애니메이션 fallback timer(200ms) 후 다이얼로그 콘텐츠가 제거됨
+    await waitFor(() => {
+      expect(document.querySelector('[data-testid="modal-content"]')).toBeNull();
+    });
+  });
+
+  it("close() 호출 시 다이얼로그가 닫힌다", 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("다이얼로그 제목이 표시된다", 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("테스트 다이얼로그");
+    });
+  });
+});