@simplysm/solid 13.0.69 → 13.0.71

package/tests/hooks/useLocalStorage.spec.tsx

@@ -0,0 +1,223 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { render, cleanup } from "@solidjs/testing-library";
+import { useLocalStorage } from "../../src/hooks/useLocalStorage";
+import { ConfigContext } from "../../src/providers/ConfigContext";
+
+describe("useLocalStorage", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  afterEach(() => {
+    cleanup();
+    localStorage.clear();
+  });
+
+  it("returns undefined when no initial value is provided", () => {
+    let value!: () => string | undefined;
+
+    function TestComponent() {
+      [value] = useLocalStorage<string>("test-key");
+      return <div />;
+    }
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <TestComponent />
+      </ConfigContext.Provider>
+    ));
+
+    expect(value()).toBeUndefined();
+  });
+
+  it("returns provided initial value", () => {
+    let value!: () => string | undefined;
+
+    function TestComponent() {
+      [value] = useLocalStorage("test-key", "default");
+      return <div />;
+    }
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <TestComponent />
+      </ConfigContext.Provider>
+    ));
+
+    expect(value()).toBe("default");
+  });
+
+  it("returns existing value from localStorage if available", () => {
+    localStorage.setItem("testApp.test-key", JSON.stringify("stored"));
+
+    let value!: () => string | undefined;
+
+    function TestComponent() {
+      [value] = useLocalStorage("test-key", "default");
+      return <div />;
+    }
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <TestComponent />
+      </ConfigContext.Provider>
+    ));
+
+    expect(value()).toBe("stored");
+  });
+
+  it("saves value to localStorage when set", () => {
+    let value!: () => string | undefined;
+    let setValue!: (v: string) => void;
+
+    function TestComponent() {
+      [value, setValue] = useLocalStorage<string>("test-key");
+      return <div />;
+    }
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <TestComponent />
+      </ConfigContext.Provider>
+    ));
+
+    setValue("new-value");
+    expect(value()).toBe("new-value");
+    expect(localStorage.getItem("testApp.test-key")).toBe(JSON.stringify("new-value"));
+  });
+
+  it("removes from localStorage when set to undefined", () => {
+    localStorage.setItem("testApp.test-key", JSON.stringify("stored"));
+
+    let value!: () => string | undefined;
+    let setValue!: (v: string | undefined) => void;
+
+    function TestComponent() {
+      [value, setValue] = useLocalStorage<string>("test-key");
+      return <div />;
+    }
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <TestComponent />
+      </ConfigContext.Provider>
+    ));
+
+    expect(value()).toBe("stored");
+
+    setValue(undefined);
+    expect(value()).toBeUndefined();
+    expect(localStorage.getItem("testApp.test-key")).toBeNull();
+  });
+
+  it("different keys work independently", () => {
+    let value1!: () => string | undefined;
+    let setValue1!: (v: string) => void;
+    let value2!: () => string | undefined;
+    let setValue2!: (v: string) => void;
+
+    function TestComponent() {
+      [value1, setValue1] = useLocalStorage<string>("key1");
+      [value2, setValue2] = useLocalStorage<string>("key2");
+      return <div />;
+    }
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <TestComponent />
+      </ConfigContext.Provider>
+    ));
+
+    setValue1("value1");
+    setValue2("value2");
+
+    expect(value1()).toBe("value1");
+    expect(value2()).toBe("value2");
+  });
+
+  it("can store and read complex objects", () => {
+    let value!: () => { name: string; count: number } | undefined;
+    let setValue!: (v: { name: string; count: number }) => void;
+
+    function TestComponent() {
+      [value, setValue] = useLocalStorage<{ name: string; count: number }>("test-key");
+      return <div />;
+    }
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <TestComponent />
+      </ConfigContext.Provider>
+    ));
+
+    const obj = { name: "test", count: 42 };
+    setValue(obj);
+    expect(value()).toEqual(obj);
+    expect(localStorage.getItem("testApp.test-key")).toBe(JSON.stringify(obj));
+  });
+
+  it("invalid JSON is replaced with initial value", () => {
+    localStorage.setItem("testApp.test-key", "invalid-json");
+
+    let value!: () => string | undefined;
+
+    function TestComponent() {
+      [value] = useLocalStorage("test-key", "default");
+      return <div />;
+    }
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <TestComponent />
+      </ConfigContext.Provider>
+    ));
+
+    expect(value()).toBe("default");
+  });
+
+  it("creates independent signals with same key", () => {
+    let value1!: () => string | undefined;
+    let setValue1!: (v: string) => void;
+    let value2!: () => string | undefined;
+
+    function TestComponent() {
+      [value1, setValue1] = useLocalStorage("test-key", "initial");
+      [value2] = useLocalStorage("test-key", "initial");
+      return <div />;
+    }
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "testApp" }}>
+        <TestComponent />
+      </ConfigContext.Provider>
+    ));
+
+    // Initial values are the same
+    expect(value1()).toBe("initial");
+    expect(value2()).toBe("initial");
+
+    // Changing one updates localStorage but does not change the other signal
+    setValue1("changed");
+    expect(value1()).toBe("changed");
+    expect(value2()).toBe("initial"); // Still initial value
+  });
+
+  it("key is prefixed with clientName", () => {
+    let setValue!: (v: string) => void;
+
+    function TestComponent() {
+      [, setValue] = useLocalStorage<string>("my-key");
+      return <div />;
+    }
+
+    render(() => (
+      <ConfigContext.Provider value={{ clientName: "myApp" }}>
+        <TestComponent />
+      </ConfigContext.Provider>
+    ));
+
+    setValue("hello");
+    expect(localStorage.getItem("myApp.my-key")).toBe(JSON.stringify("hello"));
+    expect(localStorage.getItem("my-key")).toBeNull();
+  });
+});

package/tests/hooks/useLogger.spec.tsx

@@ -0,0 +1,116 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { cleanup, renderHook } from "@solidjs/testing-library";
+import { useLogger } from "../../src/hooks/useLogger";
+import { LoggerProvider } from "../../src/providers/LoggerContext";
+import { consola } from "consola";
+
+function loggerWrapper() {
+  return (props: { children: any }) => <LoggerProvider>{props.children}</LoggerProvider>;
+}
+
+describe("useLogger", () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should return a logger object with log, info, warn, error, configure methods", () => {
+    const { result } = renderHook(() => useLogger(), { wrapper: loggerWrapper() });
+    expect(typeof result.log).toBe("function");
+    expect(typeof result.info).toBe("function");
+    expect(typeof result.warn).toBe("function");
+    expect(typeof result.error).toBe("function");
+    expect(typeof result.configure).toBe("function");
+  });
+
+  it("should call consola when no LoggerProvider is present", () => {
+    const consolaSpy = {
+      log: vi.spyOn(consola, "log").mockImplementation(() => {}),
+      info: vi.spyOn(consola, "info").mockImplementation(() => {}),
+      warn: vi.spyOn(consola, "warn").mockImplementation(() => {}),
+      error: vi.spyOn(consola, "error").mockImplementation(() => {}),
+    };
+
+    const { result } = renderHook(() => useLogger());
+
+    result.log("log message");
+    result.info("info message");
+    result.warn("warn message");
+    result.error("error message");
+
+    expect(consolaSpy.log).toHaveBeenCalledWith("log message");
+    expect(consolaSpy.info).toHaveBeenCalledWith("info message");
+    expect(consolaSpy.warn).toHaveBeenCalledWith("warn message");
+    expect(consolaSpy.error).toHaveBeenCalledWith("error message");
+  });
+
+  it("should call consola before configure() is called (with Provider)", () => {
+    const consolaSpy = vi.spyOn(consola, "info").mockImplementation(() => {});
+
+    const { result } = renderHook(() => useLogger(), { wrapper: loggerWrapper() });
+    result.info("before configure");
+
+    expect(consolaSpy).toHaveBeenCalledWith("before configure");
+  });
+
+  it("should use adapter after configure() is called", () => {
+    const writeSpy = vi.fn();
+    const consolaSpy = vi.spyOn(consola, "info").mockImplementation(() => {});
+
+    const { result } = renderHook(() => useLogger(), { wrapper: loggerWrapper() });
+
+    result.configure(() => ({ write: writeSpy }));
+    result.info("test message", { key: "value" });
+
+    expect(writeSpy).toHaveBeenCalledWith("info", "test message", { key: "value" });
+    expect(consolaSpy).not.toHaveBeenCalled();
+  });
+
+  it("should pass all severity levels to adapter after configure()", () => {
+    const writeSpy = vi.fn();
+
+    const { result } = renderHook(() => useLogger(), { wrapper: loggerWrapper() });
+    result.configure(() => ({ write: writeSpy }));
+
+    result.log("a");
+    result.info("b");
+    result.warn("c");
+    result.error("d");
+
+    expect(writeSpy).toHaveBeenCalledWith("log", "a");
+    expect(writeSpy).toHaveBeenCalledWith("info", "b");
+    expect(writeSpy).toHaveBeenCalledWith("warn", "c");
+    expect(writeSpy).toHaveBeenCalledWith("error", "d");
+  });
+
+  it("should throw when configure() is called without LoggerProvider", () => {
+    const { result } = renderHook(() => useLogger());
+
+    expect(() => result.configure(() => ({ write: vi.fn() }))).toThrow(
+      "configure() can only be used inside LoggerProvider",
+    );
+  });
+
+  it("should chain decorators — origin receives the previous adapter", () => {
+    const firstSpy = vi.fn();
+    const secondSpy = vi.fn();
+
+    const { result } = renderHook(() => useLogger(), { wrapper: loggerWrapper() });
+
+    result.configure(() => ({ write: firstSpy }));
+    result.configure((origin) => ({
+      write: (severity, ...data) => {
+        secondSpy(severity, ...data);
+        void origin.write(severity, ...data);
+      },
+    }));
+
+    result.info("chained");
+
+    expect(secondSpy).toHaveBeenCalledWith("info", "chained");
+    expect(firstSpy).toHaveBeenCalledWith("info", "chained");
+  });
+});

package/tests/hooks/usePrint.spec.tsx

@@ -0,0 +1,134 @@
+import { render } from "@solidjs/testing-library";
+import { describe, it, expect, vi } from "vitest";
+import { onMount } from "solid-js";
+import { BusyProvider } from "../../src/components/feedback/busy/BusyProvider";
+import { PrintProvider } from "../../src/components/feedback/print/PrintProvider";
+import { usePrint } from "../../src/hooks/usePrint";
+import { Print } from "../../src/components/feedback/print/Print";
+import { usePrintInstance } from "../../src/components/feedback/print/PrintInstanceContext";
+
+// Mock window.print
+vi.stubGlobal("print", vi.fn());
+
+describe("usePrint", () => {
+  describe("Hook interface", () => {
+    it("returns toPrinter and toPdf functions", () => {
+      let result: ReturnType<typeof usePrint> | undefined;
+
+      render(() => (
+        <BusyProvider>
+          <PrintProvider>
+            {(() => {
+              result = usePrint();
+              return <div />;
+            })()}
+          </PrintProvider>
+        </BusyProvider>
+      ));
+
+      expect(result).toBeDefined();
+      expect(typeof result!.toPrinter).toBe("function");
+      expect(typeof result!.toPdf).toBe("function");
+    });
+  });
+
+  describe("toPrinter", () => {
+    it("prints simple content without Print", async () => {
+      let printFn: ReturnType<typeof usePrint>["toPrinter"] | undefined;
+
+      render(() => (
+        <BusyProvider>
+          <PrintProvider>
+            {(() => {
+              const { toPrinter } = usePrint();
+              printFn = toPrinter;
+              return <div />;
+            })()}
+          </PrintProvider>
+        </BusyProvider>
+      ));
+
+      await printFn!(() => <div>test content</div>);
+      expect(window.print).toHaveBeenCalled();
+    });
+
+    it("prints after waiting for usePrintInstance().ready()", async () => {
+      let printFn: ReturnType<typeof usePrint>["toPrinter"] | undefined;
+
+      render(() => (
+        <BusyProvider>
+          <PrintProvider>
+            {(() => {
+              const { toPrinter } = usePrint();
+              printFn = toPrinter;
+              return <div />;
+            })()}
+          </PrintProvider>
+        </BusyProvider>
+      ));
+
+      function AsyncContent() {
+        const print = usePrintInstance();
+        onMount(() => {
+          setTimeout(() => print?.ready(), 50);
+        });
+        return <div>content</div>;
+      }
+
+      await printFn!(() => <AsyncContent />);
+      expect(window.print).toHaveBeenCalled();
+    });
+  });
+
+  describe("toPdf", () => {
+    it("returns Uint8Array", async () => {
+      let pdfFn: ReturnType<typeof usePrint>["toPdf"] | undefined;
+
+      render(() => (
+        <BusyProvider>
+          <PrintProvider>
+            {(() => {
+              const { toPdf } = usePrint();
+              pdfFn = toPdf;
+              return <div />;
+            })()}
+          </PrintProvider>
+        </BusyProvider>
+      ));
+
+      const result = await pdfFn!(() => <div>PDF content</div>);
+      expect(result).toBeInstanceOf(Uint8Array);
+      expect(result.length).toBeGreaterThan(0);
+    });
+
+    it("generates multi-page PDF with Print.Page", async () => {
+      let pdfFn: ReturnType<typeof usePrint>["toPdf"] | undefined;
+
+      render(() => (
+        <BusyProvider>
+          <PrintProvider>
+            {(() => {
+              const { toPdf } = usePrint();
+              pdfFn = toPdf;
+              return <div />;
+            })()}
+          </PrintProvider>
+        </BusyProvider>
+      ));
+
+      const result = await pdfFn!(() => (
+        <Print>
+          <Print.Page>
+            <div style={{ height: "100px" }}>Page 1</div>
+          </Print.Page>
+          <Print.Page>
+            <div style={{ height: "100px" }}>Page 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("Normal click (SPA routing)", () => {
+    it("calls useNavigate", () => {
+      const { getByTestId } = renderWithRouter({ href: "/dashboard" });
+
+      fireEvent.click(getByTestId("test-button"));
+
+      expect(mockNavigate).toHaveBeenCalledWith("/dashboard", undefined);
+    });
+
+    it("passes state to navigate if present", () => {
+      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 + click (new tab)", () => {
+    it("opens new tab with window.open on Ctrl + click", () => {
+      const { getByTestId } = renderWithRouter({ href: "/dashboard" });
+
+      fireEvent.click(getByTestId("test-button"), { ctrlKey: true });
+
+      expect(mockWindowOpen).toHaveBeenCalledWith("/dashboard", "_blank");
+      expect(mockNavigate).not.toHaveBeenCalled();
+    });
+
+    it("opens new tab with window.open on Meta(Cmd) + click", () => {
+      const { getByTestId } = renderWithRouter({ href: "/dashboard" });
+
+      fireEvent.click(getByTestId("test-button"), { metaKey: true });
+
+      expect(mockWindowOpen).toHaveBeenCalledWith("/dashboard", "_blank");
+      expect(mockNavigate).not.toHaveBeenCalled();
+    });
+
+    it("opens new tab with window.open on Alt + click", () => {
+      const { getByTestId } = renderWithRouter({ href: "/dashboard" });
+
+      fireEvent.click(getByTestId("test-button"), { altKey: true });
+
+      expect(mockWindowOpen).toHaveBeenCalledWith("/dashboard", "_blank");
+      expect(mockNavigate).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("Shift + click (new window)", () => {
+    it("opens new window with default size (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("opens new window with custom size", () => {
+      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("Event handling", () => {
+    it("calls 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("calls 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();
+    });
+  });
+});