@simplysm/solid 13.0.69 → 13.0.71

package/tests/components/layout/sidebar/SidebarContainer.spec.tsx

@@ -0,0 +1,261 @@
+import { render, fireEvent } from "@solidjs/testing-library";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import type { Component, Setter } from "solid-js";
+
+// Media query mock
+const mockCreateMediaQuery = vi.fn(() => () => true as boolean);
+vi.mock("@solid-primitives/media", () => ({
+  createMediaQuery: () => mockCreateMediaQuery(),
+}));
+
+// @solidjs/router mock
+vi.mock("@solidjs/router", () => ({
+  useBeforeLeave: vi.fn(),
+  useLocation: vi.fn(() => ({ pathname: "/" })),
+  useNavigate: vi.fn(() => vi.fn()),
+}));
+
+import { Sidebar, useSidebarContext } from "../../../../src";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { ConfigProvider } from "../../../../src/providers/ConfigContext";
+
+// ToggleCapture helper - Extract setToggle from Context for external control
+const ToggleCapture: Component<{ onCapture: (setToggle: Setter<boolean>) => void }> = (props) => {
+  const { setToggle } = useSidebarContext();
+  props.onCapture(setToggle);
+  return null;
+};
+
+describe("SidebarContainer component", () => {
+  beforeEach(() => {
+    mockCreateMediaQuery.mockReturnValue(() => true); // Desktop mode
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    localStorage.removeItem("test.i18n-locale");
+  });
+
+  describe("basic rendering", () => {
+    it("displays children inside container", () => {
+      const { getByText } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          <Sidebar.Container>
+          <span>Content</span>
+        </Sidebar.Container>
+        </I18nProvider></ConfigProvider>
+      ));
+
+      expect(getByText("Content")).toBeTruthy();
+    });
+  });
+
+  describe("padding-left handling", () => {
+    it("applies padding-left when open on desktop", () => {
+      mockCreateMediaQuery.mockReturnValue(() => true); // Desktop
+
+      const { container } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          <Sidebar.Container>
+          <div>Content</div>
+        </Sidebar.Container>
+        </I18nProvider></ConfigProvider>
+      ));
+
+      // toggle=false (initial) → open on desktop
+      const containerEl = container.firstElementChild as HTMLElement;
+      expect(containerEl.style.paddingLeft).toBe("16rem");
+    });
+
+    it("removes padding-left when closed on desktop", () => {
+      mockCreateMediaQuery.mockReturnValue(() => true); // Desktop
+      let setToggle!: Setter<boolean>;
+
+      const { container } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          <Sidebar.Container>
+          <ToggleCapture onCapture={(fn) => (setToggle = fn)} />
+          <div>Content</div>
+        </Sidebar.Container>
+        </I18nProvider></ConfigProvider>
+      ));
+
+      setToggle(true); // Switch to closed
+      const containerEl = container.firstElementChild as HTMLElement;
+      expect(containerEl.style.paddingLeft).toBe("");
+    });
+
+    it("has no padding-left on mobile", () => {
+      mockCreateMediaQuery.mockReturnValue(() => false); // Mobile
+
+      const { container } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          <Sidebar.Container>
+          <div>Content</div>
+        </Sidebar.Container>
+        </I18nProvider></ConfigProvider>
+      ));
+
+      const containerEl = container.firstElementChild as HTMLElement;
+      expect(containerEl.style.paddingLeft).toBe("");
+    });
+  });
+
+  describe("backdrop rendering", () => {
+    it("renders backdrop when open on mobile", () => {
+      mockCreateMediaQuery.mockReturnValue(() => false); // Mobile
+      let setToggle!: Setter<boolean>;
+
+      const { container } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          <Sidebar.Container>
+          <ToggleCapture onCapture={(fn) => (setToggle = fn)} />
+          <div>Content</div>
+        </Sidebar.Container>
+        </I18nProvider></ConfigProvider>
+      ));
+
+      setToggle(true); // Open on mobile
+      const backdrop = container.querySelector('[role="button"][aria-label="Close sidebar"]');
+      expect(backdrop).toBeTruthy();
+    });
+
+    it("does not render backdrop when closed on mobile", () => {
+      mockCreateMediaQuery.mockReturnValue(() => false); // Mobile
+
+      const { container } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          <Sidebar.Container>
+          <div>Content</div>
+        </Sidebar.Container>
+        </I18nProvider></ConfigProvider>
+      ));
+
+      // toggle=false (initial) → closed on mobile
+      const backdrop = container.querySelector('[role="button"][aria-label="Close sidebar"]');
+      expect(backdrop).toBeFalsy();
+    });
+
+    it("does not render backdrop on desktop", () => {
+      mockCreateMediaQuery.mockReturnValue(() => true); // Desktop
+
+      const { container } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          <Sidebar.Container>
+          <div>Content</div>
+        </Sidebar.Container>
+        </I18nProvider></ConfigProvider>
+      ));
+
+      const backdrop = container.querySelector('[role="button"][aria-label="Close sidebar"]');
+      expect(backdrop).toBeFalsy();
+    });
+  });
+
+  describe("backdrop click events", () => {
+    it("closes sidebar when backdrop is clicked", () => {
+      mockCreateMediaQuery.mockReturnValue(() => false); // Mobile
+      let setToggle!: Setter<boolean>;
+      let toggleValue = false;
+
+      const { container } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          <Sidebar.Container>
+          <ToggleCapture
+            onCapture={(fn) => {
+              setToggle = fn;
+            }}
+          />
+          <Sidebar>Sidebar Content</Sidebar>
+          <div>Content</div>
+        </Sidebar.Container>
+        </I18nProvider></ConfigProvider>
+      ));
+
+      setToggle(true); // Switch to open state
+      // Wrap setToggle to track changes
+      const originalSetToggle = setToggle;
+      setToggle = ((val: boolean) => {
+        toggleValue = val;
+        originalSetToggle(val);
+      }) as Setter<boolean>;
+
+      const backdrop = container.querySelector(
+        '[role="button"][aria-label="Close sidebar"]',
+      ) as HTMLElement;
+      expect(backdrop).toBeTruthy();
+
+      fireEvent.click(backdrop);
+
+      // Verify toggle changed to false
+      expect(toggleValue).toBe(false);
+    });
+
+    it("closes sidebar when Escape key is pressed on backdrop", () => {
+      mockCreateMediaQuery.mockReturnValue(() => false); // Mobile
+      let setToggle!: Setter<boolean>;
+      let toggleValue = false;
+
+      const { container } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          <Sidebar.Container>
+          <ToggleCapture
+            onCapture={(fn) => {
+              setToggle = fn;
+            }}
+          />
+          <Sidebar>Sidebar Content</Sidebar>
+          <div>Content</div>
+        </Sidebar.Container>
+        </I18nProvider></ConfigProvider>
+      ));
+
+      setToggle(true); // Switch to open state
+      // Wrap setToggle to track changes
+      const originalSetToggle = setToggle;
+      setToggle = ((val: boolean) => {
+        toggleValue = val;
+        originalSetToggle(val);
+      }) as Setter<boolean>;
+
+      const backdrop = container.querySelector(
+        '[role="button"][aria-label="Close sidebar"]',
+      ) as HTMLElement;
+      expect(backdrop).toBeTruthy();
+
+      fireEvent.keyDown(backdrop, { key: "Escape" });
+
+      expect(toggleValue).toBe(false);
+    });
+  });
+
+  describe("style merging", () => {
+    it("merges custom classes", () => {
+      const { container } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
+          <Sidebar.Container class="my-custom-class">
+          <div>Content</div>
+        </Sidebar.Container>
+        </I18nProvider></ConfigProvider>
+      ));
+
+      const containerEl = container.firstElementChild as HTMLElement;
+      expect(containerEl.classList.contains("my-custom-class")).toBe(true);
+    });
+
+    it("merges custom styles", () => {
+      const { container } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          <Sidebar.Container style={{ "background-color": "red" }}>
+          <div>Content</div>
+        </Sidebar.Container>
+        </I18nProvider></ConfigProvider>
+      ));
+
+      const containerEl = container.firstElementChild as HTMLElement;
+      expect(containerEl.style.backgroundColor).toBe("red");
+    });
+  });
+});

package/tests/components/layout/sidebar/SidebarMenu.spec.tsx

@@ -0,0 +1,219 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, fireEvent } from "@solidjs/testing-library";
+import { Router } from "@solidjs/router";
+import { Sidebar, type AppMenu } from "../../../../src";
+
+// Mock pathname signal
+import { createSignal } from "solid-js";
+const [mockPathname, setMockPathname] = createSignal("/");
+
+// Mock useNavigate and useLocation
+const mockNavigate = vi.fn();
+vi.mock("@solidjs/router", async () => {
+  const actual = await vi.importActual("@solidjs/router");
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+    useLocation: () => ({
+      get pathname() {
+        return mockPathname();
+      },
+    }),
+  };
+});
+
+// window.open mock
+const mockWindowOpen = vi.fn();
+
+describe("SidebarMenu", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    setMockPathname("/"); // Initialize pathname
+    vi.spyOn(window, "open").mockImplementation(mockWindowOpen);
+    // requestAnimationFrame mock (for Collapse animation)
+    vi.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 0;
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  const renderWithRouter = (menus: AppMenu[]) => {
+    return render(() => (
+      <Router base="" root={(props) => props.children}>
+        {[
+          {
+            path: "*",
+            component: () => <Sidebar.Menu menus={menus} />,
+          },
+        ]}
+      </Router>
+    ));
+  };
+
+  describe("rendering", () => {
+    it("renders menu items", () => {
+      const menus: AppMenu[] = [
+        { title: "Dashboard", href: "/dashboard" },
+        { title: "Settings", href: "/settings" },
+      ];
+
+      const { getByText } = renderWithRouter(menus);
+
+      expect(getByText("Dashboard")).toBeTruthy();
+      expect(getByText("Settings")).toBeTruthy();
+    });
+
+    it("displays MENU header", () => {
+      const menus: AppMenu[] = [{ title: "Home", href: "/" }];
+
+      const { getByText } = renderWithRouter(menus);
+
+      expect(getByText("MENU")).toBeTruthy();
+    });
+
+    it("renders nested menu", () => {
+      const menus: AppMenu[] = [
+        {
+          title: "Settings",
+          children: [
+            { title: "Profile", href: "/settings/profile" },
+            { title: "Security", href: "/settings/security" },
+          ],
+        },
+      ];
+
+      const { getByText } = renderWithRouter(menus);
+
+      expect(getByText("Settings")).toBeTruthy();
+    });
+
+    it("renders menu with icon", () => {
+      const MockIcon = (props: { class?: string }) => (
+        <svg data-testid="mock-icon" class={props.class} />
+      );
+
+      const menus: AppMenu[] = [{ title: "Dashboard", href: "/dashboard", icon: MockIcon }];
+
+      const { container } = renderWithRouter(menus);
+
+      expect(container.querySelector("[data-testid='mock-icon']")).toBeTruthy();
+    });
+  });
+
+  describe("link behavior", () => {
+    it("navigates using SPA routing on internal link click", () => {
+      const menus: AppMenu[] = [{ title: "Dashboard", href: "/dashboard" }];
+
+      const { getByText } = renderWithRouter(menus);
+
+      fireEvent.click(getByText("Dashboard"));
+
+      expect(mockNavigate).toHaveBeenCalledWith("/dashboard");
+    });
+
+    it("opens external link in new tab on click", () => {
+      const menus: AppMenu[] = [{ title: "External Link", href: "https://example.com" }];
+
+      const { getByText } = renderWithRouter(menus);
+
+      fireEvent.click(getByText("External Link"));
+
+      expect(mockWindowOpen).toHaveBeenCalledWith(
+        "https://example.com",
+        "_blank",
+        "noopener,noreferrer",
+      );
+    });
+  });
+
+  describe("expand/collapse behavior", () => {
+    it("toggles expanded when clicking menu with children", () => {
+      const menus: AppMenu[] = [
+        {
+          title: "Settings",
+          children: [{ title: "Profile", href: "/settings/profile" }],
+        },
+      ];
+
+      const { getByText, container } = renderWithRouter(menus);
+
+      // Initial state: collapsed
+      const listItem = container.querySelector("[data-list-item]") as HTMLElement;
+      expect(listItem.getAttribute("aria-expanded")).toBe("false");
+
+      // After click: expanded
+      fireEvent.click(getByText("Settings"));
+      expect(listItem.getAttribute("aria-expanded")).toBe("true");
+    });
+  });
+
+  describe("pathname reactivity", () => {
+    it("automatically expands parent menu when pathname matches nested menu", () => {
+      // Set initial pathname to nested menu path
+      setMockPathname("/settings/profile");
+
+      const menus: AppMenu[] = [
+        { title: "Dashboard", href: "/dashboard" },
+        {
+          title: "Settings",
+          children: [
+            { title: "Profile", href: "/settings/profile" },
+            { title: "Security", href: "/settings/security" },
+          ],
+        },
+      ];
+
+      const { container } = renderWithRouter(menus);
+
+      // "Settings" menu should automatically expand
+      const settingsItem = container.querySelectorAll("[data-list-item]")[1] as HTMLElement;
+      expect(settingsItem.getAttribute("aria-expanded")).toBe("true");
+    });
+
+    it("expands parent menu of matching pathname when pathname changes", () => {
+      const menus: AppMenu[] = [
+        { title: "Dashboard", href: "/dashboard" },
+        {
+          title: "Settings",
+          children: [{ title: "Profile", href: "/settings/profile" }],
+        },
+      ];
+
+      const { container } = renderWithRouter(menus);
+
+      // Initial state: Settings menu collapsed
+      const settingsItem = container.querySelectorAll("[data-list-item]")[1] as HTMLElement;
+      expect(settingsItem.getAttribute("aria-expanded")).toBe("false");
+
+      // Change pathname
+      setMockPathname("/settings/profile");
+
+      // Settings menu should expand
+      expect(settingsItem.getAttribute("aria-expanded")).toBe("true");
+    });
+  });
+
+  describe("style merging", () => {
+    it("merges custom classes", () => {
+      const menus: AppMenu[] = [{ title: "Home", href: "/" }];
+
+      const { container } = render(() => (
+        <Router base="" root={(props) => props.children}>
+          {[
+            {
+              path: "*",
+              // eslint-disable-next-line tailwindcss/no-custom-classname
+              component: () => <Sidebar.Menu menus={menus} class="my-custom-class" />,
+            },
+          ]}
+        </Router>
+      ));
+
+      expect(container.querySelector(".my-custom-class")).toBeTruthy();
+    });
+  });
+});

package/tests/components/layout/sidebar/SidebarUser.spec.tsx

@@ -0,0 +1,133 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, fireEvent } from "@solidjs/testing-library";
+import { Sidebar, type SidebarUserMenu } from "../../../../src";
+
+describe("SidebarUser", () => {
+  beforeEach(() => {
+    // requestAnimationFrame mock (for Collapse animation)
+    vi.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 0;
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe("rendering", () => {
+    it("renders name prop", () => {
+      const { getByText } = render(() => <Sidebar.User name="User Name" />);
+
+      expect(getByText("User Name")).toBeTruthy();
+    });
+
+    it("does not have aria-expanded when menus are not provided", () => {
+      const { container } = render(() => <Sidebar.User name="User" />);
+
+      const button = container.querySelector("button");
+      expect(button?.hasAttribute("aria-expanded")).toBe(false);
+    });
+
+    it("has aria-expanded=false when menus are provided", () => {
+      const menus: SidebarUserMenu[] = [{ title: "Logout", onClick: () => {} }];
+
+      const { container } = render(() => <Sidebar.User name="User" menus={menus} />);
+
+      const button = container.querySelector("button");
+      expect(button?.getAttribute("aria-expanded")).toBe("false");
+    });
+  });
+
+  describe("click behavior", () => {
+    it("does not open dropdown when clicked without menus", () => {
+      const { container } = render(() => <Sidebar.User name="User" />);
+
+      const button = container.querySelector("button")!;
+      fireEvent.click(button);
+
+      // aria-expanded not present or unchanged
+      expect(button.hasAttribute("aria-expanded")).toBe(false);
+    });
+
+    it("toggles dropdown when clicked with menus", () => {
+      const menus: SidebarUserMenu[] = [{ title: "Logout", onClick: () => {} }];
+
+      const { container } = render(() => <Sidebar.User name="User" menus={menus} />);
+
+      const button = container.querySelector("button")!;
+
+      // Initial state: closed
+      expect(button.getAttribute("aria-expanded")).toBe("false");
+
+      // First click: open
+      fireEvent.click(button);
+      expect(button.getAttribute("aria-expanded")).toBe("true");
+
+      // Second click: close
+      fireEvent.click(button);
+      expect(button.getAttribute("aria-expanded")).toBe("false");
+    });
+  });
+
+  describe("menu item click", () => {
+    it("calls onClick when menu item is clicked", () => {
+      const onLogout = vi.fn();
+      const menus: SidebarUserMenu[] = [{ title: "Logout", onClick: onLogout }];
+
+      const { container, getByText } = render(() => <Sidebar.User name="User" menus={menus} />);
+
+      // Open dropdown
+      const button = container.querySelector("button")!;
+      fireEvent.click(button);
+
+      // Click menu item
+      fireEvent.click(getByText("Logout"));
+
+      expect(onLogout).toHaveBeenCalledTimes(1);
+    });
+
+    it("closes dropdown when menu item is clicked", () => {
+      const menus: SidebarUserMenu[] = [{ title: "Profile", onClick: () => {} }];
+
+      const { container, getByText } = render(() => <Sidebar.User name="User" menus={menus} />);
+
+      const button = container.querySelector("button")!;
+
+      // Open dropdown
+      fireEvent.click(button);
+      expect(button.getAttribute("aria-expanded")).toBe("true");
+
+      // Click menu item
+      fireEvent.click(getByText("Profile"));
+
+      // Dropdown closed
+      expect(button.getAttribute("aria-expanded")).toBe("false");
+    });
+  });
+
+  describe("styles based on menu presence", () => {
+    it("styles differ based on menus prop", () => {
+      const menus: SidebarUserMenu[] = [{ title: "Logout", onClick: () => {} }];
+
+      const { container: withoutMenus } = render(() => <Sidebar.User name="User" />);
+      const { container: withMenus } = render(() => <Sidebar.User name="User" menus={menus} />);
+
+      const buttonWithout = withoutMenus.querySelector("button")!;
+      const buttonWith = withMenus.querySelector("button")!;
+
+      expect(buttonWithout.className).not.toBe(buttonWith.className);
+    });
+  });
+
+  describe("style merging", () => {
+    it("merges custom classes", () => {
+      const { container } = render(() => (
+        // eslint-disable-next-line tailwindcss/no-custom-classname
+        <Sidebar.User name="User" class="my-custom-class" />
+      ));
+
+      expect(container.querySelector(".my-custom-class")).toBeTruthy();
+    });
+  });
+});

package/tests/components/layout/topbar/TopbarActions.spec.tsx

@@ -0,0 +1,77 @@
+import { render, cleanup } from "@solidjs/testing-library";
+import { describe, it, expect, afterEach } from "vitest";
+import { createSignal, Show } from "solid-js";
+import { Topbar, createTopbarActions } from "../../../../src";
+
+describe("Topbar.Actions component", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("renders registered actions at Topbar.Actions position", () => {
+    function PageWithActions() {
+      createTopbarActions(() => <button>Save</button>);
+      return <div>Page Content</div>;
+    }
+
+    const { getByText } = render(() => (
+      <Topbar.Container>
+        <Topbar>
+          <span>Title</span>
+          <Topbar.Actions />
+        </Topbar>
+        <PageWithActions />
+      </Topbar.Container>
+    ));
+
+    expect(getByText("Save")).toBeTruthy();
+  });
+
+  it("renders nothing when actions are not provided", () => {
+    const { container } = render(() => (
+      <Topbar.Container>
+        <Topbar>
+          <span>Title</span>
+          <Topbar.Actions />
+        </Topbar>
+        <div>Content</div>
+      </Topbar.Container>
+    ));
+
+    const actionsSlot = container.querySelector("[data-topbar-actions]");
+    expect(actionsSlot?.childNodes.length ?? 0).toBe(0);
+  });
+
+  it("releases previous actions and displays new actions when switching components", () => {
+    function PageA() {
+      createTopbarActions(() => <button>Save</button>);
+      return <div>Page A</div>;
+    }
+
+    function PageB() {
+      createTopbarActions(() => <button>Delete</button>);
+      return <div>Page B</div>;
+    }
+
+    const [page, setPage] = createSignal<"a" | "b">("a");
+
+    const { getByText, queryByText } = render(() => (
+      <Topbar.Container>
+        <Topbar>
+          <Topbar.Actions />
+        </Topbar>
+        <Show when={page() === "a"} fallback={<PageB />}>
+          <PageA />
+        </Show>
+      </Topbar.Container>
+    ));
+
+    expect(getByText("Save")).toBeTruthy();
+    expect(queryByText("Delete")).toBeNull();
+
+    setPage("b");
+
+    expect(queryByText("Save")).toBeNull();
+    expect(getByText("Delete")).toBeTruthy();
+  });
+});