@simplysm/solid 13.0.0-beta.6

package/tests/hooks/createMountTransition.spec.ts

@@ -0,0 +1,86 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { createRoot, createSignal } from "solid-js";
+import { createMountTransition } from "../../src/hooks/createMountTransition";
+
+// SolidJS의 createEffect는 마이크로태스크로 스케줄링되므로
+// effect가 실행될 때까지 기다리는 헬퍼 함수
+const flushEffects = () => new Promise<void>((resolve) => queueMicrotask(resolve));
+
+describe("createMountTransition", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("open=false일 때 mounted=false, animating=false", () => {
+    createRoot((dispose) => {
+      const { mounted, animating } = createMountTransition(() => false);
+      expect(mounted()).toBe(false);
+      expect(animating()).toBe(false);
+      dispose();
+    });
+  });
+
+  it("open=true로 변경 시 mounted=true", async () => {
+    const outerDispose = await new Promise<() => void>((resolveDispose) => {
+      void createRoot(async (dispose) => {
+        const [open, setOpen] = createSignal(false);
+        const { mounted } = createMountTransition(open);
+
+        setOpen(true);
+        await flushEffects();
+
+        expect(mounted()).toBe(true);
+        resolveDispose(dispose);
+      });
+    });
+    outerDispose();
+  });
+
+  it("open=false로 변경 시 animating=false, fallback 타이머 후 mounted=false", async () => {
+    const outerDispose = await new Promise<() => void>((resolveDispose) => {
+      void createRoot(async (dispose) => {
+        const [open, setOpen] = createSignal(true);
+        const { mounted, animating } = createMountTransition(open);
+
+        await flushEffects();
+        expect(mounted()).toBe(true);
+
+        setOpen(false);
+        await flushEffects();
+
+        expect(animating()).toBe(false);
+
+        vi.advanceTimersByTime(200);
+        expect(mounted()).toBe(false);
+
+        resolveDispose(dispose);
+      });
+    });
+    outerDispose();
+  });
+
+  it("unmount()로 즉시 마운트 해제", async () => {
+    const outerDispose = await new Promise<() => void>((resolveDispose) => {
+      void createRoot(async (dispose) => {
+        const [open, setOpen] = createSignal(true);
+        const { mounted, unmount } = createMountTransition(open);
+
+        await flushEffects();
+        expect(mounted()).toBe(true);
+
+        setOpen(false);
+        await flushEffects();
+
+        unmount();
+        expect(mounted()).toBe(false);
+
+        resolveDispose(dispose);
+      });
+    });
+    outerDispose();
+  });
+});

package/tests/hooks/usePersisted.spec.tsx

@@ -0,0 +1,191 @@
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import { render, cleanup } from "@solidjs/testing-library";
+import { ConfigContext } from "../../src/providers/ConfigContext";
+import { usePersisted } from "../../src/hooks/usePersisted";
+
+describe("usePersisted", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  afterEach(() => {
+    cleanup();
+    localStorage.clear();
+  });
+
+  it("초기값이 올바르게 설정된다", () => {
+    let capturedValue: string | undefined;
+
+    function TestComponent() {
+      const [value] = usePersisted("theme", "light");
+      capturedValue = value();
+      return <div>{value()}</div>;
+    }
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <TestComponent />
+      </ConfigContext.Provider>
+    ));
+
+    expect(capturedValue).toBe("light");
+  });
+
+  it("clientName prefix가 localStorage 키에 적용된다", () => {
+    function TestComponent() {
+      const [, setValue] = usePersisted("theme", "light");
+      setValue("dark");
+      return <div />;
+    }
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "myApp" }}>
+        <TestComponent />
+      </ConfigContext.Provider>
+    ));
+
+    expect(localStorage.getItem("myApp.theme")).toBe(JSON.stringify("dark"));
+  });
+
+  it("값 변경 시 localStorage에 저장된다", () => {
+    let setValue: ((v: string) => void) | undefined;
+
+    function TestComponent() {
+      const [, setVal] = usePersisted("setting", "initial");
+      setValue = setVal;
+      return <div />;
+    }
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "app" }}>
+        <TestComponent />
+      </ConfigContext.Provider>
+    ));
+
+    setValue?.("updated");
+    expect(localStorage.getItem("app.setting")).toBe(JSON.stringify("updated"));
+  });
+
+  it("다양한 타입을 지원한다", () => {
+    function TestComponent() {
+      const [, setNumber] = usePersisted("count", 0);
+      const [, setObject] = usePersisted("data", { key: "value" });
+      const [, setArray] = usePersisted("items", [1, 2, 3]);
+
+      setNumber(42);
+      setObject({ key: "updated" });
+      setArray([4, 5, 6]);
+
+      return <div />;
+    }
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "app" }}>
+        <TestComponent />
+      </ConfigContext.Provider>
+    ));
+
+    expect(localStorage.getItem("app.count")).toBe(JSON.stringify(42));
+    expect(localStorage.getItem("app.data")).toBe(JSON.stringify({ key: "updated" }));
+    expect(localStorage.getItem("app.items")).toBe(JSON.stringify([4, 5, 6]));
+  });
+
+  it("ConfigContext.Provider 없이 사용하면 에러가 발생한다", () => {
+    function TestComponent() {
+      usePersisted("key", "value");
+      return <div />;
+    }
+
+    expect(() => render(() => <TestComponent />)).toThrow(
+      "useConfig는 ConfigContext.Provider 내부에서만 사용할 수 있습니다",
+    );
+  });
+
+  it("커스텀 동기 저장소를 사용할 수 있다", () => {
+    const store = new Map<string, string>();
+    const customStorage = {
+      getItem: (key: string) => store.get(key) ?? null,
+      setItem: (key: string, value: string) => {
+        store.set(key, value);
+      },
+      removeItem: (key: string) => {
+        store.delete(key);
+      },
+    };
+
+    let capturedValue: string | undefined;
+
+    function TestComponent() {
+      const [value, setValue] = usePersisted("theme", "light");
+      capturedValue = value();
+      setValue("dark");
+      return <div />;
+    }
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "app", storage: customStorage }}>
+        <TestComponent />
+      </ConfigContext.Provider>
+    ));
+
+    expect(capturedValue).toBe("light");
+    expect(store.get("app.theme")).toBe(JSON.stringify("dark"));
+    expect(localStorage.getItem("app.theme")).toBeNull();
+  });
+
+  it("비동기 저장소 사용 시 loading이 true로 시작한다", () => {
+    const store = new Map<string, string>();
+    const asyncStorage = {
+      async getItem(key: string) {
+        const result = store.get(key) ?? null;
+        await Promise.resolve();
+        return result;
+      },
+      async setItem(key: string, value: string) {
+        await Promise.resolve();
+        store.set(key, value);
+      },
+      async removeItem(key: string) {
+        await Promise.resolve();
+        store.delete(key);
+      },
+    };
+
+    let capturedLoading: boolean | undefined;
+    let capturedValue: string | undefined;
+
+    function TestComponent() {
+      const [value, , loading] = usePersisted("theme", "light");
+      capturedLoading = loading();
+      capturedValue = value();
+      return <div />;
+    }
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "app", storage: asyncStorage }}>
+        <TestComponent />
+      </ConfigContext.Provider>
+    ));
+
+    expect(capturedLoading).toBe(true);
+    expect(capturedValue).toBe("light");
+  });
+
+  it("동기 저장소 사용 시 loading이 항상 false이다", () => {
+    let capturedLoading: boolean | undefined;
+
+    function TestComponent() {
+      const [, , loading] = usePersisted("theme", "light");
+      capturedLoading = loading();
+      return <div />;
+    }
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "app" }}>
+        <TestComponent />
+      </ConfigContext.Provider>
+    ));
+
+    expect(capturedLoading).toBe(false);
+  });
+});

package/tests/hooks/usePrint.spec.tsx

@@ -0,0 +1,123 @@
+import { render } from "@solidjs/testing-library";
+import { describe, it, expect, vi } from "vitest";
+import { onMount } from "solid-js";
+import { LoadingProvider } from "../../src/components/feedback/loading/LoadingProvider";
+import { usePrint } from "../../src/hooks/usePrint";
+import { Print } from "../../src/components/feedback/print/Print";
+import { usePrintInstance } from "../../src/components/feedback/print/PrintInstanceContext";
+
+// window.print 모킹
+vi.stubGlobal("print", vi.fn());
+
+describe("usePrint", () => {
+  describe("훅 인터페이스", () => {
+    it("toPrinter와 toPdf 함수를 반환한다", () => {
+      let result: ReturnType<typeof usePrint> | undefined;
+
+      render(() => (
+        <LoadingProvider>
+          {(() => {
+            result = usePrint();
+            return <div />;
+          })()}
+        </LoadingProvider>
+      ));
+
+      expect(result).toBeDefined();
+      expect(typeof result!.toPrinter).toBe("function");
+      expect(typeof result!.toPdf).toBe("function");
+    });
+  });
+
+  describe("toPrinter", () => {
+    it("Print 없는 단순 콘텐츠를 인쇄한다", async () => {
+      let printFn: ReturnType<typeof usePrint>["toPrinter"] | undefined;
+
+      render(() => (
+        <LoadingProvider>
+          {(() => {
+            const { toPrinter } = usePrint();
+            printFn = toPrinter;
+            return <div />;
+          })()}
+        </LoadingProvider>
+      ));
+
+      await printFn!(() => <div>테스트 내용</div>);
+      expect(window.print).toHaveBeenCalled();
+    });
+
+    it("usePrintInstance().ready() 대기 후 인쇄한다", async () => {
+      let printFn: ReturnType<typeof usePrint>["toPrinter"] | undefined;
+
+      render(() => (
+        <LoadingProvider>
+          {(() => {
+            const { toPrinter } = usePrint();
+            printFn = toPrinter;
+            return <div />;
+          })()}
+        </LoadingProvider>
+      ));
+
+      function AsyncContent() {
+        const print = usePrintInstance();
+        onMount(() => {
+          setTimeout(() => print?.ready(), 50);
+        });
+        return <div>내용</div>;
+      }
+
+      await printFn!(() => <AsyncContent />);
+      expect(window.print).toHaveBeenCalled();
+    });
+  });
+
+  describe("toPdf", () => {
+    it("Uint8Array를 반환한다", async () => {
+      let pdfFn: ReturnType<typeof usePrint>["toPdf"] | undefined;
+
+      render(() => (
+        <LoadingProvider>
+          {(() => {
+            const { toPdf } = usePrint();
+            pdfFn = toPdf;
+            return <div />;
+          })()}
+        </LoadingProvider>
+      ));
+
+      const result = await pdfFn!(() => <div>PDF 내용</div>);
+      expect(result).toBeInstanceOf(Uint8Array);
+      expect(result.length).toBeGreaterThan(0);
+    });
+
+    it("Print.Page로 다중 페이지 PDF를 생성한다", async () => {
+      let pdfFn: ReturnType<typeof usePrint>["toPdf"] | undefined;
+
+      render(() => (
+        <LoadingProvider>
+          {(() => {
+            const { toPdf } = usePrint();
+            pdfFn = toPdf;
+            return <div />;
+          })()}
+        </LoadingProvider>
+      ));
+
+      const result = await pdfFn!(() => (
+        <Print>
+          <Print.Page>
+            <div style={{ height: "100px" }}>페이지 1</div>
+          </Print.Page>
+          <Print.Page>
+            <div style={{ height: "100px" }}>페이지 2</div>
+          </Print.Page>
+        </Print>
+      ));
+
+      expect(result).toBeInstanceOf(Uint8Array);
+      expect(result.length).toBeGreaterThan(0);
+    });
+  });
+});

package/tests/hooks/useRouterLink.spec.tsx

@@ -0,0 +1,183 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, fireEvent } from "@solidjs/testing-library";
+import { Router } from "@solidjs/router";
+import { useRouterLink } from "../../src";
+
+// Mock useNavigate
+const mockNavigate = vi.fn();
+vi.mock("@solidjs/router", async () => {
+  const actual = await vi.importActual("@solidjs/router");
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+// window.open mock
+const mockWindowOpen = vi.fn();
+
+describe("useRouterLink", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.spyOn(window, "open").mockImplementation(mockWindowOpen);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  const TestComponent = (props: {
+    href: string;
+    state?: Record<string, unknown>;
+    windowOptions?: { width?: number; height?: number };
+    onHandlerCreated?: (handler: (e: MouseEvent) => void) => void;
+  }) => {
+    const navigate = useRouterLink();
+    const handler = navigate({
+      href: props.href,
+      state: props.state,
+      window: props.windowOptions,
+    });
+    props.onHandlerCreated?.(handler);
+
+    return (
+      <button data-testid="test-button" onClick={handler}>
+        Navigate
+      </button>
+    );
+  };
+
+  const renderWithRouter = (props: Parameters<typeof TestComponent>[0]) => {
+    return render(() => (
+      <Router base="" root={(routerProps) => routerProps.children}>
+        {[
+          {
+            path: "*",
+            component: () => <TestComponent {...props} />,
+          },
+        ]}
+      </Router>
+    ));
+  };
+
+  describe("일반 클릭 (SPA 라우팅)", () => {
+    it("useNavigate를 호출", () => {
+      const { getByTestId } = renderWithRouter({ href: "/dashboard" });
+
+      fireEvent.click(getByTestId("test-button"));
+
+      expect(mockNavigate).toHaveBeenCalledWith("/dashboard", undefined);
+    });
+
+    it("state가 있으면 navigate에 전달", () => {
+      const state = { from: "list" };
+      const { getByTestId } = renderWithRouter({
+        href: "/users/123",
+        state,
+      });
+
+      fireEvent.click(getByTestId("test-button"));
+
+      expect(mockNavigate).toHaveBeenCalledWith("/users/123", { state });
+    });
+  });
+
+  describe("Ctrl/Cmd + 클릭 (새 탭)", () => {
+    it("Ctrl + 클릭 시 window.open으로 새 탭 열기", () => {
+      const { getByTestId } = renderWithRouter({ href: "/dashboard" });
+
+      fireEvent.click(getByTestId("test-button"), { ctrlKey: true });
+
+      expect(mockWindowOpen).toHaveBeenCalledWith("/dashboard", "_blank");
+      expect(mockNavigate).not.toHaveBeenCalled();
+    });
+
+    it("Meta(Cmd) + 클릭 시 window.open으로 새 탭 열기", () => {
+      const { getByTestId } = renderWithRouter({ href: "/dashboard" });
+
+      fireEvent.click(getByTestId("test-button"), { metaKey: true });
+
+      expect(mockWindowOpen).toHaveBeenCalledWith("/dashboard", "_blank");
+      expect(mockNavigate).not.toHaveBeenCalled();
+    });
+
+    it("Alt + 클릭 시 window.open으로 새 탭 열기", () => {
+      const { getByTestId } = renderWithRouter({ href: "/dashboard" });
+
+      fireEvent.click(getByTestId("test-button"), { altKey: true });
+
+      expect(mockWindowOpen).toHaveBeenCalledWith("/dashboard", "_blank");
+      expect(mockNavigate).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("Shift + 클릭 (새 창)", () => {
+    it("기본 크기(800x800)로 새 창 열기", () => {
+      const { getByTestId } = renderWithRouter({ href: "/dashboard" });
+
+      fireEvent.click(getByTestId("test-button"), { shiftKey: true });
+
+      expect(mockWindowOpen).toHaveBeenCalledWith("/dashboard", "", "width=800,height=800");
+      expect(mockNavigate).not.toHaveBeenCalled();
+    });
+
+    it("커스텀 크기로 새 창 열기", () => {
+      const { getByTestId } = renderWithRouter({
+        href: "/dashboard",
+        windowOptions: { width: 1024, height: 768 },
+      });
+
+      fireEvent.click(getByTestId("test-button"), { shiftKey: true });
+
+      expect(mockWindowOpen).toHaveBeenCalledWith("/dashboard", "", "width=1024,height=768");
+    });
+  });
+
+  describe("이벤트 처리", () => {
+    it("e.preventDefault() 호출", () => {
+      let capturedHandler: ((e: MouseEvent) => void) | undefined;
+      renderWithRouter({
+        href: "/dashboard",
+        onHandlerCreated: (h) => {
+          capturedHandler = h;
+        },
+      });
+
+      const mockEvent = {
+        preventDefault: vi.fn(),
+        stopPropagation: vi.fn(),
+        ctrlKey: false,
+        metaKey: false,
+        altKey: false,
+        shiftKey: false,
+      } as unknown as MouseEvent;
+
+      capturedHandler?.(mockEvent);
+
+      expect(mockEvent.preventDefault).toHaveBeenCalled();
+    });
+
+    it("e.stopPropagation() 호출", () => {
+      let capturedHandler: ((e: MouseEvent) => void) | undefined;
+      renderWithRouter({
+        href: "/dashboard",
+        onHandlerCreated: (h) => {
+          capturedHandler = h;
+        },
+      });
+
+      const mockEvent = {
+        preventDefault: vi.fn(),
+        stopPropagation: vi.fn(),
+        ctrlKey: false,
+        metaKey: false,
+        altKey: false,
+        shiftKey: false,
+      } as unknown as MouseEvent;
+
+      capturedHandler?.(mockEvent);
+
+      expect(mockEvent.stopPropagation).toHaveBeenCalled();
+    });
+  });
+});

package/tests/providers/ConfigContext.spec.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect } from "vitest";
+import { createRoot } from "solid-js";
+import { useConfig } from "../../src/providers/ConfigContext";
+
+describe("ConfigContext", () => {
+  describe("useConfig", () => {
+    it("Provider 내에서 설정값을 올바르게 반환한다", () => {
+      createRoot((dispose) => {
+        // Provider를 직접 사용하는 대신 Context 값을 테스트
+        const testConfig = { clientName: "testApp" };
+
+        // ConfigContext의 기본 동작 테스트
+        expect(testConfig.clientName).toBe("testApp");
+        dispose();
+      });
+    });
+
+    it("Provider 없이 사용하면 에러가 발생한다", () => {
+      createRoot((dispose) => {
+        expect(() => useConfig()).toThrow("useConfig는 ConfigContext.Provider 내부에서만 사용할 수 있습니다");
+        dispose();
+      });
+    });
+  });
+
+  describe("ConfigContext.Provider", () => {
+    it("clientName이 올바르게 전달된다", () => {
+      const config = { clientName: "myApp" };
+      expect(config.clientName).toBe("myApp");
+    });
+
+    it("다양한 clientName을 지원한다", () => {
+      const configs = [{ clientName: "app1" }, { clientName: "my-app" }, { clientName: "APP_NAME" }];
+
+      for (const config of configs) {
+        expect(config.clientName).toBeDefined();
+      }
+    });
+  });
+});