@simplysm/solid 13.0.75 → 13.0.77

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

@@ -2,7 +2,7 @@ import { render, fireEvent, waitFor } from "@solidjs/testing-library";
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { createSignal } from "solid-js";
 import { Select } from "../../../../src/components/form-control/select/Select";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("Select component", () => {
@@ -14,32 +14,6 @@ describe("Select component", () => {
     localStorage.removeItem("test.i18n-locale");
   });
 
-  describe("basic rendering", () => {
-    it("renders trigger", () => {
-      const { getByRole } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <Select renderValue={(v) => <>{v}</>}>
-          <Select.Item value="apple">사과</Select.Item>
-        </Select>
-        </I18nProvider></ConfigProvider>
-      ));
-
-      expect(getByRole("combobox")).not.toBeNull();
-    });
-
-    it("displays placeholder", () => {
-      const { getByText } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <Select placeholder="Please select" renderValue={(v) => <>{v}</>}>
-          <Select.Item value="apple">사과</Select.Item>
-        </Select>
-        </I18nProvider></ConfigProvider>
-      ));
-
-      expect(getByText("Please select")).not.toBeNull();
-    });
-  });
-
   describe("dropdown opening/closing", () => {
     it("opens dropdown on trigger click", async () => {
       const { getByRole } = render(() => (
@@ -237,33 +211,9 @@ describe("Select component", () => {
 
       expect(document.querySelector("[data-dropdown]")).toBeNull();
     });
-
-    it("sets aria-disabled when disabled", () => {
-      const { getByRole } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <Select disabled renderValue={(v) => <>{v}</>}>
-          <Select.Item value="apple">사과</Select.Item>
-        </Select>
-        </I18nProvider></ConfigProvider>
-      ));
-
-      expect(getByRole("combobox").getAttribute("aria-disabled")).toBe("true");
-    });
   });
 
   describe("accessibility", () => {
-    it("sets role=combobox", () => {
-      const { getByRole } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <Select renderValue={(v) => <>{v}</>}>
-          <Select.Item value="apple">사과</Select.Item>
-        </Select>
-        </I18nProvider></ConfigProvider>
-      ));
-
-      expect(getByRole("combobox")).not.toBeNull();
-    });
-
     it("sets aria-expanded=true when open", async () => {
       const { getByRole } = render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
@@ -285,12 +235,12 @@ describe("Select component", () => {
   });
 
   describe("search functionality", () => {
-    it("displays search input when getSearchText is provided", async () => {
+    it("displays search input when itemSearchText is provided", async () => {
       const { getByRole } = render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <Select
           items={["apple", "banana", "cherry"]}
-          getSearchText={(item) => item}
+          itemSearchText={(item) => item}
           renderValue={(v) => <>{v}</>}
         >
           <Select.ItemTemplate>{(item) => <>{item}</>}</Select.ItemTemplate>
@@ -311,7 +261,7 @@ describe("Select component", () => {
         <ConfigProvider clientName="test"><I18nProvider>
           <Select
           items={["apple", "banana", "cherry"]}
-          getSearchText={(item) => item}
+          itemSearchText={(item) => item}
           renderValue={(v) => <>{v}</>}
         >
           <Select.ItemTemplate>{(item) => <>{item}</>}</Select.ItemTemplate>
@@ -342,7 +292,7 @@ describe("Select component", () => {
         <ConfigProvider clientName="test"><I18nProvider>
           <Select
           items={["red apple", "green apple", "banana"]}
-          getSearchText={(item) => item}
+          itemSearchText={(item) => item}
           renderValue={(v) => <>{v}</>}
         >
           <Select.ItemTemplate>{(item) => <>{item}</>}</Select.ItemTemplate>
@@ -368,7 +318,7 @@ describe("Select component", () => {
       });
     });
 
-    it("does not display search input when getSearchText is not provided", async () => {
+    it("does not display search input when itemSearchText is not provided", async () => {
       const { getByRole } = render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <Select items={["apple", "banana"]} renderValue={(v) => <>{v}</>}>
@@ -565,12 +515,12 @@ describe("Select component", () => {
   });
 
   describe("hiding handling", () => {
-    it("hides items where getIsHidden is true", async () => {
+    it("hides items where isItemHidden is true", async () => {
       const { getByRole } = render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <Select
           items={["apple", "banana", "cherry"]}
-          getIsHidden={(item) => item === "banana"}
+          isItemHidden={(item) => item === "banana"}
           renderValue={(v) => <>{v}</>}
         >
           <Select.ItemTemplate>{(item) => <>{item}</>}</Select.ItemTemplate>
@@ -598,7 +548,7 @@ describe("Select component", () => {
         <ConfigProvider clientName="test"><I18nProvider>
           <Select
           items={["apple", "banana", "cherry"]}
-          getIsHidden={(item) => item === "banana"}
+          isItemHidden={(item) => item === "banana"}
           value="banana"
           renderValue={(v) => <>{v}</>}
         >

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

@@ -1,61 +1,19 @@
 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 {
+  Select,
   SelectContext,
   type SelectContextValue,
-} from "../../../../src/components/form-control/select/SelectContext";
+} from "../../../../src/components/form-control/select/Select";
 
 // 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();
@@ -64,14 +22,12 @@ describe("SelectItem component", () => {
         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>
+          <Select.Item value="apple">사과</Select.Item>
         </TestProvider>
       ));
 
@@ -86,14 +42,12 @@ describe("SelectItem component", () => {
         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>
+          <Select.Item value="apple">사과</Select.Item>
         </TestProvider>
       ));
 
@@ -108,14 +62,12 @@ describe("SelectItem component", () => {
         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>
+          <Select.Item value="apple">사과</Select.Item>
         </TestProvider>
       ));
 
@@ -128,17 +80,15 @@ describe("SelectItem component", () => {
     it("sets aria-selected=true on selected item", () => {
       const mockContext: SelectContextValue = {
         multiple: () => false,
-        isSelected: (v) => v === "apple",
+        isSelected: (v: unknown) => 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>
+          <Select.Item value="apple">사과</Select.Item>
         </TestProvider>
       ));
 
@@ -155,16 +105,14 @@ describe("SelectItem component", () => {
         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>
+          <Select.Item value="apple" disabled>
             사과
-          </SelectItem>
+          </Select.Item>
         </TestProvider>
       ));
 

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

@@ -15,13 +15,13 @@ vi.mock("@solidjs/router", () => ({
   useNavigate: vi.fn(() => vi.fn()),
 }));
 
-import { Sidebar, useSidebarContext } from "../../../../src";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { Sidebar, useSidebar } from "../../../../src";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 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();
+  const { setToggle } = useSidebar();
    
   props.onCapture(setToggle);
   return null;
@@ -37,38 +37,6 @@ describe("Sidebar component", () => {
     vi.clearAllMocks();
   });
 
-  describe("basic rendering", () => {
-    it("displays children inside sidebar", () => {
-      const { getByText } = render(() => (
-        <ConfigProvider clientName="test">
-          <I18nProvider>
-            <Sidebar.Container>
-              <Sidebar>
-                <span>Sidebar content</span>
-              </Sidebar>
-            </Sidebar.Container>
-          </I18nProvider>
-        </ConfigProvider>
-      ));
-
-      expect(getByText("Sidebar content")).toBeTruthy();
-    });
-
-    it("renders as aside element", () => {
-      const { container } = render(() => (
-        <ConfigProvider clientName="test">
-          <I18nProvider>
-            <Sidebar.Container>
-              <Sidebar>Content</Sidebar>
-            </Sidebar.Container>
-          </I18nProvider>
-        </ConfigProvider>
-      ));
-
-      expect(container.querySelector("aside")).toBeTruthy();
-    });
-  });
-
   describe("open/closed state", () => {
     it("on desktop with toggle=false shows open state (translateX(0))", () => {
       mockCreateMediaQuery.mockReturnValue(() => true); // Desktop
@@ -146,91 +114,4 @@ describe("Sidebar component", () => {
       expect(sidebar.style.transform).toBe("translateX(0px)");
     });
   });
-
-  describe("aria attributes", () => {
-    it("has aria-hidden=false when open", () => {
-      mockCreateMediaQuery.mockReturnValue(() => true); // Desktop
-
-      const { container } = render(() => (
-        <ConfigProvider clientName="test">
-          <I18nProvider>
-            <Sidebar.Container>
-              <Sidebar>Content</Sidebar>
-            </Sidebar.Container>
-          </I18nProvider>
-        </ConfigProvider>
-      ));
-
-      // 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(() => (
-        <ConfigProvider clientName="test">
-          <I18nProvider>
-            <Sidebar.Container>
-              <Sidebar>Content</Sidebar>
-            </Sidebar.Container>
-          </I18nProvider>
-        </ConfigProvider>
-      ));
-
-      // 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(() => (
-        <ConfigProvider clientName="test">
-          <I18nProvider>
-            <Sidebar.Container>
-              <Sidebar>Content</Sidebar>
-            </Sidebar.Container>
-          </I18nProvider>
-        </ConfigProvider>
-      ));
-
-      // 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(() => (
-        <ConfigProvider clientName="test">
-          <I18nProvider>
-            <Sidebar.Container>
-              {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
-              <Sidebar class="my-custom-class">Content</Sidebar>
-            </Sidebar.Container>
-          </I18nProvider>
-        </ConfigProvider>
-      ));
-
-      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",
-      );
-    });
-  });
 });

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

@@ -15,13 +15,13 @@ vi.mock("@solidjs/router", () => ({
   useNavigate: vi.fn(() => vi.fn()),
 }));
 
-import { Sidebar, useSidebarContext } from "../../../../src";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { Sidebar, useSidebar } from "../../../../src";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 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();
+  const { setToggle } = useSidebar();
    
   props.onCapture(setToggle);
   return null;
@@ -38,20 +38,6 @@ describe("SidebarContainer component", () => {
     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
@@ -231,32 +217,4 @@ describe("SidebarContainer component", () => {
     });
   });
 
-  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

@@ -2,7 +2,7 @@ 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";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 // Mock pathname signal
@@ -61,56 +61,6 @@ describe("SidebarMenu", () => {
     ));
   };
 
-  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" }];
@@ -204,27 +154,4 @@ describe("SidebarMenu", () => {
     });
   });
 
-  describe("style merging", () => {
-    it("merges custom classes", () => {
-      const menus: AppMenu[] = [{ title: "Home", href: "/" }];
-
-      const { container } = render(() => (
-        <ConfigProvider clientName="test">
-          <I18nProvider>
-            <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>
-          </I18nProvider>
-        </ConfigProvider>
-      ));
-
-      expect(container.querySelector(".my-custom-class")).toBeTruthy();
-    });
-  });
 });

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

@@ -15,30 +15,6 @@ describe("SidebarUser", () => {
     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" />);
@@ -106,28 +82,4 @@ describe("SidebarUser", () => {
     });
   });
 
-  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();
-    });
-  });
 });