@simplysm/solid 13.0.69 → 13.0.71

package/tests/components/form-control/select/SelectItem.spec.tsx

@@ -0,0 +1,174 @@
+import type { JSX } from "solid-js";
+import { render, fireEvent } from "@solidjs/testing-library";
+import { describe, it, expect, vi } from "vitest";
+import { SelectItem } from "../../../../src/components/form-control/select/SelectItem";
+import {
+  SelectContext,
+  type SelectContextValue,
+} from "../../../../src/components/form-control/select/SelectContext";
+
+// Test provider
+function TestProvider(props: { children: JSX.Element; value: SelectContextValue }) {
+  return <SelectContext.Provider value={props.value}>{props.children}</SelectContext.Provider>;
+}
+
+describe("SelectItem component", () => {
+  describe("basic rendering", () => {
+    it("renders children", () => {
+      const mockContext: SelectContextValue = {
+        multiple: () => false,
+        isSelected: () => false,
+        toggleValue: vi.fn(),
+        closeDropdown: vi.fn(),
+        setHeader: vi.fn(),
+        setAction: vi.fn(),
+        setItemTemplate: vi.fn(),
+      };
+
+      const { getByText } = render(() => (
+        <TestProvider value={mockContext}>
+          <SelectItem value="apple">사과</SelectItem>
+        </TestProvider>
+      ));
+
+      expect(getByText("사과")).not.toBeNull();
+    });
+
+    it("sets data-select-item attribute", () => {
+      const mockContext: SelectContextValue = {
+        multiple: () => false,
+        isSelected: () => false,
+        toggleValue: vi.fn(),
+        closeDropdown: vi.fn(),
+        setHeader: vi.fn(),
+        setAction: vi.fn(),
+        setItemTemplate: vi.fn(),
+      };
+
+      render(() => (
+        <TestProvider value={mockContext}>
+          <SelectItem value="apple">사과</SelectItem>
+        </TestProvider>
+      ));
+
+      expect(document.querySelector("[data-select-item]")).not.toBeNull();
+    });
+  });
+
+  describe("selection behavior", () => {
+    it("calls toggleValue on click", () => {
+      const toggleValue = vi.fn();
+      const mockContext: SelectContextValue = {
+        multiple: () => false,
+        isSelected: () => false,
+        toggleValue,
+        closeDropdown: vi.fn(),
+        setHeader: vi.fn(),
+        setAction: vi.fn(),
+        setItemTemplate: vi.fn(),
+      };
+
+      const { getByText } = render(() => (
+        <TestProvider value={mockContext}>
+          <SelectItem value="apple">사과</SelectItem>
+        </TestProvider>
+      ));
+
+      fireEvent.click(getByText("사과"));
+      expect(toggleValue).toHaveBeenCalledWith("apple");
+    });
+
+    it("calls closeDropdown on click in single selection mode", () => {
+      const closeDropdown = vi.fn();
+      const mockContext: SelectContextValue = {
+        multiple: () => false,
+        isSelected: () => false,
+        toggleValue: vi.fn(),
+        closeDropdown,
+        setHeader: vi.fn(),
+        setAction: vi.fn(),
+        setItemTemplate: vi.fn(),
+      };
+
+      const { getByText } = render(() => (
+        <TestProvider value={mockContext}>
+          <SelectItem value="apple">사과</SelectItem>
+        </TestProvider>
+      ));
+
+      fireEvent.click(getByText("사과"));
+      expect(closeDropdown).toHaveBeenCalled();
+    });
+
+    it("does not call closeDropdown on click in multiple selection mode", () => {
+      const closeDropdown = vi.fn();
+      const mockContext: SelectContextValue = {
+        multiple: () => true,
+        isSelected: () => false,
+        toggleValue: vi.fn(),
+        closeDropdown,
+        setHeader: vi.fn(),
+        setAction: vi.fn(),
+        setItemTemplate: vi.fn(),
+      };
+
+      const { getByText } = render(() => (
+        <TestProvider value={mockContext}>
+          <SelectItem value="apple">사과</SelectItem>
+        </TestProvider>
+      ));
+
+      fireEvent.click(getByText("사과"));
+      expect(closeDropdown).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("selected state", () => {
+    it("sets aria-selected=true on selected item", () => {
+      const mockContext: SelectContextValue = {
+        multiple: () => false,
+        isSelected: (v) => v === "apple",
+        toggleValue: vi.fn(),
+        closeDropdown: vi.fn(),
+        setHeader: vi.fn(),
+        setAction: vi.fn(),
+        setItemTemplate: vi.fn(),
+      };
+
+      render(() => (
+        <TestProvider value={mockContext}>
+          <SelectItem value="apple">사과</SelectItem>
+        </TestProvider>
+      ));
+
+      const item = document.querySelector("[data-select-item]");
+      expect(item?.getAttribute("aria-selected")).toBe("true");
+    });
+  });
+
+  describe("disabled state", () => {
+    it("does not call toggleValue on click when disabled", () => {
+      const toggleValue = vi.fn();
+      const mockContext: SelectContextValue = {
+        multiple: () => false,
+        isSelected: () => false,
+        toggleValue,
+        closeDropdown: vi.fn(),
+        setHeader: vi.fn(),
+        setAction: vi.fn(),
+        setItemTemplate: vi.fn(),
+      };
+
+      const { getByText } = render(() => (
+        <TestProvider value={mockContext}>
+          <SelectItem value="apple" disabled>
+            사과
+          </SelectItem>
+        </TestProvider>
+      ));
+
+      fireEvent.click(getByText("사과"));
+      expect(toggleValue).not.toHaveBeenCalled();
+    });
+  });
+});

package/tests/components/layout/FormGroup.spec.tsx

@@ -0,0 +1,104 @@
+import { render } from "@solidjs/testing-library";
+import { describe, it, expect } from "vitest";
+import { FormGroup } from "../../../src/components/layout/FormGroup";
+
+describe("FormGroup component", () => {
+  describe("basic rendering", () => {
+    it("displays children inside FormGroup", () => {
+      const { getByText } = render(() => <FormGroup>Content</FormGroup>);
+      expect(getByText("Content")).toBeTruthy();
+    });
+
+    it("renders as div element", () => {
+      const { container } = render(() => <FormGroup>Content</FormGroup>);
+      const group = container.firstChild as HTMLElement;
+      expect(group.tagName).toBe("DIV");
+    });
+  });
+
+  describe("inline property", () => {
+    it("styles differ based on inline prop", () => {
+      const { container: defaultContainer } = render(() => <FormGroup>Content</FormGroup>);
+      const { container: inlineContainer } = render(() => <FormGroup inline>Content</FormGroup>);
+
+      const defaultClass = (defaultContainer.firstChild as HTMLElement).className;
+      const inlineClass = (inlineContainer.firstChild as HTMLElement).className;
+
+      expect(defaultClass).not.toBe(inlineClass);
+    });
+  });
+
+  describe("class merging", () => {
+    it("merges custom classes", () => {
+      // eslint-disable-next-line tailwindcss/no-custom-classname
+      const { container } = render(() => <FormGroup class="my-form-group">Content</FormGroup>);
+      const group = container.firstChild as HTMLElement;
+      expect(group.classList.contains("my-form-group")).toBe(true);
+    });
+  });
+});
+
+describe("FormGroup.Item component", () => {
+  describe("basic rendering", () => {
+    it("displays children inside Item", () => {
+      const { getByText } = render(() => (
+        <FormGroup>
+          <FormGroup.Item>Field Content</FormGroup.Item>
+        </FormGroup>
+      ));
+      expect(getByText("Field Content")).toBeTruthy();
+    });
+
+    it("renders as div element", () => {
+      const { container } = render(() => (
+        <FormGroup>
+          <FormGroup.Item>Content</FormGroup.Item>
+        </FormGroup>
+      ));
+      const item = container.querySelector("[data-form-group-item]");
+      expect(item?.tagName).toBe("DIV");
+    });
+  });
+
+  describe("label property", () => {
+    it("displays label", () => {
+      const { getByText } = render(() => (
+        <FormGroup>
+          <FormGroup.Item label="Name">Input</FormGroup.Item>
+        </FormGroup>
+      ));
+      expect(getByText("Name")).toBeTruthy();
+    });
+
+    it("label can be JSX.Element", () => {
+      const { getByText } = render(() => (
+        <FormGroup>
+          <FormGroup.Item label={<span>Custom Label</span>}>Input</FormGroup.Item>
+        </FormGroup>
+      ));
+      expect(getByText("Custom Label")).toBeTruthy();
+    });
+
+    it("label element is not rendered when no label is provided", () => {
+      const { container } = render(() => (
+        <FormGroup>
+          <FormGroup.Item>Input</FormGroup.Item>
+        </FormGroup>
+      ));
+      expect(container.querySelector("label")).toBeNull();
+    });
+  });
+
+  describe("class merging", () => {
+    it("applies custom classes to Item", () => {
+      const { container } = render(() => (
+        <FormGroup>
+          {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
+          <FormGroup.Item class="my-item">Content</FormGroup.Item>
+        </FormGroup>
+      ));
+      const item = container.querySelector("[data-form-group-item]");
+      expect(item?.classList.contains("my-item")).toBe(true);
+    });
+  });
+});

package/tests/components/layout/FormTable.spec.tsx

@@ -0,0 +1,43 @@
+import { render } from "@solidjs/testing-library";
+import { describe, it, expect } from "vitest";
+import { FormTable } from "../../../src/components/layout/FormTable";
+
+describe("FormTable component", () => {
+  describe("basic rendering", () => {
+    it("displays children inside FormTable", () => {
+      const { container } = render(() => (
+        <FormTable>
+          <tbody>
+            <tr>
+              <td>Content</td>
+            </tr>
+          </tbody>
+        </FormTable>
+      ));
+      expect(container.querySelector("td")?.textContent).toBe("Content");
+    });
+
+    it("renders as table element", () => {
+      const { container } = render(() => <FormTable>Content</FormTable>);
+      const table = container.firstChild as HTMLElement;
+      expect(table.tagName).toBe("TABLE");
+    });
+  });
+
+  describe("class merging", () => {
+    it("merges custom classes", () => {
+      // eslint-disable-next-line tailwindcss/no-custom-classname
+      const { container } = render(() => <FormTable class="my-form-table">Content</FormTable>);
+      const table = container.firstChild as HTMLElement;
+      expect(table.classList.contains("my-form-table")).toBe(true);
+    });
+  });
+
+  describe("HTML attribute forwarding", () => {
+    it("passes data-* attributes", () => {
+      const { container } = render(() => <FormTable data-testid="test-table">Content</FormTable>);
+      const table = container.firstChild as HTMLElement;
+      expect(table.getAttribute("data-testid")).toBe("test-table");
+    });
+  });
+});

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

@@ -0,0 +1,192 @@
+import { render } 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";
+
+// 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("Sidebar component", () => {
+  beforeEach(() => {
+    mockCreateMediaQuery.mockReturnValue(() => true); // Desktop mode
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("basic rendering", () => {
+    it("displays children inside sidebar", () => {
+      const { getByText } = render(() => (
+        <Sidebar.Container>
+          <Sidebar>
+            <span>Sidebar content</span>
+          </Sidebar>
+        </Sidebar.Container>
+      ));
+
+      expect(getByText("Sidebar content")).toBeTruthy();
+    });
+
+    it("renders as aside element", () => {
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <Sidebar>Content</Sidebar>
+        </Sidebar.Container>
+      ));
+
+      expect(container.querySelector("aside")).toBeTruthy();
+    });
+  });
+
+  describe("open/closed state", () => {
+    it("on desktop with toggle=false shows open state (translateX(0))", () => {
+      mockCreateMediaQuery.mockReturnValue(() => true); // Desktop
+
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <Sidebar>Content</Sidebar>
+        </Sidebar.Container>
+      ));
+
+      // toggle=false (initial) → open on desktop
+      const sidebar = container.querySelector("aside") as HTMLElement;
+      expect(sidebar.style.transform).toBe("translateX(0px)");
+    });
+
+    it("on desktop with toggle=true shows closed state (translateX(-100%))", () => {
+      mockCreateMediaQuery.mockReturnValue(() => true); // Desktop
+      let setToggle!: Setter<boolean>;
+
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <ToggleCapture onCapture={(fn) => (setToggle = fn)} />
+          <Sidebar>Content</Sidebar>
+        </Sidebar.Container>
+      ));
+
+      setToggle(true); // Switch to closed
+      const sidebar = container.querySelector("aside") as HTMLElement;
+      expect(sidebar.style.transform).toBe("translateX(-100%)");
+    });
+
+    it("on mobile with toggle=false shows closed state (translateX(-100%))", () => {
+      mockCreateMediaQuery.mockReturnValue(() => false); // Mobile
+
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <Sidebar>Content</Sidebar>
+        </Sidebar.Container>
+      ));
+
+      // toggle=false (initial) → closed on mobile
+      const sidebar = container.querySelector("aside") as HTMLElement;
+      expect(sidebar.style.transform).toBe("translateX(-100%)");
+    });
+
+    it("on mobile with toggle=true shows open state (translateX(0))", () => {
+      mockCreateMediaQuery.mockReturnValue(() => false); // Mobile
+      let setToggle!: Setter<boolean>;
+
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <ToggleCapture onCapture={(fn) => (setToggle = fn)} />
+          <Sidebar>Content</Sidebar>
+        </Sidebar.Container>
+      ));
+
+      setToggle(true); // Switch to open
+      const sidebar = container.querySelector("aside") as HTMLElement;
+      expect(sidebar.style.transform).toBe("translateX(0px)");
+    });
+  });
+
+  describe("aria attributes", () => {
+    it("has aria-hidden=false when open", () => {
+      mockCreateMediaQuery.mockReturnValue(() => true); // Desktop
+
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <Sidebar>Content</Sidebar>
+        </Sidebar.Container>
+      ));
+
+      // toggle=false (initial) → open on desktop
+      const sidebar = container.querySelector("aside");
+      expect(sidebar?.getAttribute("aria-hidden")).toBe("false");
+    });
+
+    it("has aria-hidden=true when closed", () => {
+      mockCreateMediaQuery.mockReturnValue(() => false); // Mobile
+
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <Sidebar>Content</Sidebar>
+        </Sidebar.Container>
+      ));
+
+      // toggle=false (initial) → closed on mobile
+      const sidebar = container.querySelector("aside");
+      expect(sidebar?.getAttribute("aria-hidden")).toBe("true");
+    });
+
+    it("sets inert attribute when closed", () => {
+      mockCreateMediaQuery.mockReturnValue(() => false); // Mobile
+
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <Sidebar>Content</Sidebar>
+        </Sidebar.Container>
+      ));
+
+      // toggle=false (initial) → closed on mobile
+      const sidebar = container.querySelector("aside");
+      expect(sidebar?.hasAttribute("inert")).toBe(true);
+    });
+  });
+
+  describe("style merging", () => {
+    it("merges custom classes", () => {
+      const { container } = render(() => (
+        <Sidebar.Container>
+          {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
+          <Sidebar class="my-custom-class">Content</Sidebar>
+        </Sidebar.Container>
+      ));
+
+      const sidebar = container.querySelector("aside");
+      expect(sidebar?.classList.contains("my-custom-class")).toBe(true);
+    });
+  });
+
+  describe("Context usage", () => {
+    it("throws error when useSidebarContext is used outside SidebarContainer", () => {
+      const TestComponent = () => {
+        useSidebarContext();
+        return <div>Test</div>;
+      };
+
+      expect(() => render(() => <TestComponent />)).toThrow(
+        "useSidebarContext can only be used inside SidebarContainer",
+      );
+    });
+  });
+});