@simplysm/solid 13.0.0-beta.6 → 13.0.1

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

@@ -1,162 +0,0 @@
-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

@@ -1,319 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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("테스트 다이얼로그");
-    });
-  });
-});