@simplysm/solid 13.0.0-beta.6

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

@@ -0,0 +1,190 @@
+import { render } from "@solidjs/testing-library";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { createSignal } from "solid-js";
+
+// 미디어 쿼리 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()),
+}));
+
+// usePersisted mock - 테스트에서 상태를 제어할 수 있도록
+let mockToggle: ReturnType<typeof createSignal<boolean>>;
+vi.mock("../../../../src/hooks/usePersisted", () => ({
+  usePersisted: () => {
+    return mockToggle;
+  },
+}));
+
+import { Sidebar, useSidebarContext } from "../../../../src";
+
+describe("Sidebar 컴포넌트", () => {
+  beforeEach(() => {
+    mockCreateMediaQuery.mockReturnValue(() => true); // 데스크탑 모드
+    mockToggle = createSignal(false);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("기본 렌더링", () => {
+    it("children이 사이드바 내부에 표시된다", () => {
+      const { getByText } = render(() => (
+        <Sidebar.Container>
+          <Sidebar>
+            <span>사이드바 콘텐츠</span>
+          </Sidebar>
+        </Sidebar.Container>
+      ));
+
+      expect(getByText("사이드바 콘텐츠")).toBeTruthy();
+    });
+
+    it("aside 요소로 렌더링된다", () => {
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <Sidebar>Content</Sidebar>
+        </Sidebar.Container>
+      ));
+
+      expect(container.querySelector("aside")).toBeTruthy();
+    });
+  });
+
+  describe("열림/닫힘 상태", () => {
+    it("데스크탑에서 toggle=false일 때 열림 상태 (translateX(0))", () => {
+      mockCreateMediaQuery.mockReturnValue(() => true); // 데스크탑
+      mockToggle = createSignal(false);
+
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <Sidebar>Content</Sidebar>
+        </Sidebar.Container>
+      ));
+
+      const sidebar = container.querySelector("aside") as HTMLElement;
+      expect(sidebar.style.transform).toBe("translateX(0px)");
+    });
+
+    it("데스크탑에서 toggle=true일 때 닫힘 상태 (translateX(-100%))", () => {
+      mockCreateMediaQuery.mockReturnValue(() => true); // 데스크탑
+      mockToggle = createSignal(true);
+
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <Sidebar>Content</Sidebar>
+        </Sidebar.Container>
+      ));
+
+      const sidebar = container.querySelector("aside") as HTMLElement;
+      expect(sidebar.style.transform).toBe("translateX(-100%)");
+    });
+
+    it("모바일에서 toggle=false일 때 닫힘 상태 (translateX(-100%))", () => {
+      mockCreateMediaQuery.mockReturnValue(() => false); // 모바일
+      mockToggle = createSignal(false);
+
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <Sidebar>Content</Sidebar>
+        </Sidebar.Container>
+      ));
+
+      const sidebar = container.querySelector("aside") as HTMLElement;
+      expect(sidebar.style.transform).toBe("translateX(-100%)");
+    });
+
+    it("모바일에서 toggle=true일 때 열림 상태 (translateX(0))", () => {
+      mockCreateMediaQuery.mockReturnValue(() => false); // 모바일
+      mockToggle = createSignal(true);
+
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <Sidebar>Content</Sidebar>
+        </Sidebar.Container>
+      ));
+
+      const sidebar = container.querySelector("aside") as HTMLElement;
+      expect(sidebar.style.transform).toBe("translateX(0px)");
+    });
+  });
+
+  describe("aria 속성", () => {
+    it("열림 상태일 때 aria-hidden=false", () => {
+      mockCreateMediaQuery.mockReturnValue(() => true); // 데스크탑, 열림
+      mockToggle = createSignal(false);
+
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <Sidebar>Content</Sidebar>
+        </Sidebar.Container>
+      ));
+
+      const sidebar = container.querySelector("aside");
+      expect(sidebar?.getAttribute("aria-hidden")).toBe("false");
+    });
+
+    it("닫힘 상태일 때 aria-hidden=true", () => {
+      mockCreateMediaQuery.mockReturnValue(() => false); // 모바일, 닫힘
+      mockToggle = createSignal(false);
+
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <Sidebar>Content</Sidebar>
+        </Sidebar.Container>
+      ));
+
+      const sidebar = container.querySelector("aside");
+      expect(sidebar?.getAttribute("aria-hidden")).toBe("true");
+    });
+
+    it("닫힘 상태일 때 inert 속성이 설정된다", () => {
+      mockCreateMediaQuery.mockReturnValue(() => false); // 모바일, 닫힘
+      mockToggle = createSignal(false);
+
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <Sidebar>Content</Sidebar>
+        </Sidebar.Container>
+      ));
+
+      const sidebar = container.querySelector("aside");
+      expect(sidebar?.hasAttribute("inert")).toBe(true);
+    });
+  });
+
+  describe("스타일 병합", () => {
+    it("사용자 정의 class가 병합된다", () => {
+      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 사용", () => {
+    it("SidebarContainer 외부에서 useSidebarContext 사용 시 에러 발생", () => {
+      const TestComponent = () => {
+        useSidebarContext();
+        return <div>Test</div>;
+      };
+
+      expect(() => render(() => <TestComponent />)).toThrow(
+        "useSidebarContext는 SidebarContainer 내부에서만 사용할 수 있습니다",
+      );
+    });
+  });
+});

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

@@ -0,0 +1,203 @@
+import { render, fireEvent } from "@solidjs/testing-library";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { createSignal } from "solid-js";
+
+// 미디어 쿼리 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()),
+}));
+
+// usePersisted mock - 테스트에서 상태를 제어할 수 있도록
+let mockToggle: ReturnType<typeof createSignal<boolean>>;
+vi.mock("../../../../src/hooks/usePersisted", () => ({
+  usePersisted: () => {
+    return mockToggle;
+  },
+}));
+
+import { Sidebar } from "../../../../src";
+
+describe("SidebarContainer 컴포넌트", () => {
+  beforeEach(() => {
+    mockCreateMediaQuery.mockReturnValue(() => true); // 데스크탑 모드
+    mockToggle = createSignal(false);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("기본 렌더링", () => {
+    it("children이 컨테이너 내부에 표시된다", () => {
+      const { getByText } = render(() => (
+        <Sidebar.Container>
+          <span>콘텐츠</span>
+        </Sidebar.Container>
+      ));
+
+      expect(getByText("콘텐츠")).toBeTruthy();
+    });
+  });
+
+  describe("padding-left 처리", () => {
+    it("데스크탑에서 열림 상태일 때 padding-left 적용", () => {
+      mockCreateMediaQuery.mockReturnValue(() => true); // 데스크탑
+      mockToggle = createSignal(false); // toggle=false → 데스크탑에서 열림
+
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <div>Content</div>
+        </Sidebar.Container>
+      ));
+
+      const containerEl = container.firstElementChild as HTMLElement;
+      expect(containerEl.style.paddingLeft).toBe("16rem");
+    });
+
+    it("데스크탑에서 닫힘 상태일 때 padding-left 없음", () => {
+      mockCreateMediaQuery.mockReturnValue(() => true); // 데스크탑
+      mockToggle = createSignal(true); // toggle=true → 데스크탑에서 닫힘
+
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <div>Content</div>
+        </Sidebar.Container>
+      ));
+
+      const containerEl = container.firstElementChild as HTMLElement;
+      expect(containerEl.style.paddingLeft).toBe("");
+    });
+
+    it("모바일에서는 padding-left 없음", () => {
+      mockCreateMediaQuery.mockReturnValue(() => false); // 모바일
+      mockToggle = createSignal(false);
+
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <div>Content</div>
+        </Sidebar.Container>
+      ));
+
+      const containerEl = container.firstElementChild as HTMLElement;
+      expect(containerEl.style.paddingLeft).toBe("");
+    });
+  });
+
+  describe("backdrop 렌더링", () => {
+    it("모바일에서 열림 상태일 때 backdrop이 렌더링된다", () => {
+      mockCreateMediaQuery.mockReturnValue(() => false); // 모바일
+      mockToggle = createSignal(true); // toggle=true → 모바일에서 열림
+
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <div>Content</div>
+        </Sidebar.Container>
+      ));
+
+      const backdrop = container.querySelector('[role="button"][aria-label="사이드바 닫기"]');
+      expect(backdrop).toBeTruthy();
+    });
+
+    it("모바일에서 닫힘 상태일 때 backdrop이 렌더링되지 않는다", () => {
+      mockCreateMediaQuery.mockReturnValue(() => false); // 모바일
+      mockToggle = createSignal(false); // toggle=false → 모바일에서 닫힘
+
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <div>Content</div>
+        </Sidebar.Container>
+      ));
+
+      const backdrop = container.querySelector('[role="button"][aria-label="사이드바 닫기"]');
+      expect(backdrop).toBeFalsy();
+    });
+
+    it("데스크탑에서는 backdrop이 렌더링되지 않는다", () => {
+      mockCreateMediaQuery.mockReturnValue(() => true); // 데스크탑
+      mockToggle = createSignal(false); // 열림 상태
+
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <div>Content</div>
+        </Sidebar.Container>
+      ));
+
+      const backdrop = container.querySelector('[role="button"][aria-label="사이드바 닫기"]');
+      expect(backdrop).toBeFalsy();
+    });
+  });
+
+  describe("backdrop 클릭 이벤트", () => {
+    it("backdrop 클릭 시 사이드바가 닫힌다", () => {
+      mockCreateMediaQuery.mockReturnValue(() => false); // 모바일
+      mockToggle = createSignal(true); // 열림 상태
+
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <Sidebar>Sidebar Content</Sidebar>
+          <div>Content</div>
+        </Sidebar.Container>
+      ));
+
+      const backdrop = container.querySelector('[role="button"][aria-label="사이드바 닫기"]') as HTMLElement;
+      expect(backdrop).toBeTruthy();
+
+      fireEvent.click(backdrop);
+
+      // toggle이 false로 변경되었는지 확인
+      expect(mockToggle[0]()).toBe(false);
+    });
+
+    it("backdrop에서 Escape 키 누르면 사이드바가 닫힌다", () => {
+      mockCreateMediaQuery.mockReturnValue(() => false); // 모바일
+      mockToggle = createSignal(true); // 열림 상태
+
+      const { container } = render(() => (
+        <Sidebar.Container>
+          <Sidebar>Sidebar Content</Sidebar>
+          <div>Content</div>
+        </Sidebar.Container>
+      ));
+
+      const backdrop = container.querySelector('[role="button"][aria-label="사이드바 닫기"]') as HTMLElement;
+      expect(backdrop).toBeTruthy();
+
+      fireEvent.keyDown(backdrop, { key: "Escape" });
+
+      expect(mockToggle[0]()).toBe(false);
+    });
+  });
+
+  describe("스타일 병합", () => {
+    it("사용자 정의 class가 병합된다", () => {
+      const { container } = render(() => (
+        // eslint-disable-next-line tailwindcss/no-custom-classname
+        <Sidebar.Container class="my-custom-class">
+          <div>Content</div>
+        </Sidebar.Container>
+      ));
+
+      const containerEl = container.firstElementChild as HTMLElement;
+      expect(containerEl.classList.contains("my-custom-class")).toBe(true);
+    });
+
+    it("사용자 정의 style이 병합된다", () => {
+      const { container } = render(() => (
+        <Sidebar.Container style={{ "background-color": "red" }}>
+          <div>Content</div>
+        </Sidebar.Container>
+      ));
+
+      const containerEl = container.firstElementChild as HTMLElement;
+      expect(containerEl.style.backgroundColor).toBe("red");
+    });
+  });
+});

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

@@ -0,0 +1,213 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, fireEvent } from "@solidjs/testing-library";
+import { Router } from "@solidjs/router";
+import { Sidebar, type SidebarMenuItem } 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("/"); // pathname 초기화
+    vi.spyOn(window, "open").mockImplementation(mockWindowOpen);
+    // requestAnimationFrame mock (Collapse 애니메이션용)
+    vi.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 0;
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  const renderWithRouter = (menus: SidebarMenuItem[]) => {
+    return render(() => (
+      <Router base="" root={(props) => props.children}>
+        {[
+          {
+            path: "*",
+            component: () => <Sidebar.Menu menus={menus} />,
+          },
+        ]}
+      </Router>
+    ));
+  };
+
+  describe("렌더링", () => {
+    it("메뉴 아이템을 렌더링", () => {
+      const menus: SidebarMenuItem[] = [
+        { title: "대시보드", href: "/dashboard" },
+        { title: "설정", href: "/settings" },
+      ];
+
+      const { getByText } = renderWithRouter(menus);
+
+      expect(getByText("대시보드")).toBeTruthy();
+      expect(getByText("설정")).toBeTruthy();
+    });
+
+    it("MENU 헤더를 표시", () => {
+      const menus: SidebarMenuItem[] = [{ title: "홈", href: "/" }];
+
+      const { getByText } = renderWithRouter(menus);
+
+      expect(getByText("MENU")).toBeTruthy();
+    });
+
+    it("중첩 메뉴를 렌더링", () => {
+      const menus: SidebarMenuItem[] = [
+        {
+          title: "설정",
+          children: [
+            { title: "프로필", href: "/settings/profile" },
+            { title: "보안", href: "/settings/security" },
+          ],
+        },
+      ];
+
+      const { getByText } = renderWithRouter(menus);
+
+      expect(getByText("설정")).toBeTruthy();
+    });
+
+    it("아이콘이 있는 메뉴를 렌더링", () => {
+      const MockIcon = (props: { class?: string }) => <svg data-testid="mock-icon" class={props.class} />;
+
+      const menus: SidebarMenuItem[] = [{ title: "대시보드", href: "/dashboard", icon: MockIcon }];
+
+      const { container } = renderWithRouter(menus);
+
+      expect(container.querySelector("[data-testid='mock-icon']")).toBeTruthy();
+    });
+  });
+
+  describe("링크 동작", () => {
+    it("내부 링크 클릭 시 SPA 라우팅", () => {
+      const menus: SidebarMenuItem[] = [{ title: "대시보드", href: "/dashboard" }];
+
+      const { getByText } = renderWithRouter(menus);
+
+      fireEvent.click(getByText("대시보드"));
+
+      expect(mockNavigate).toHaveBeenCalledWith("/dashboard");
+    });
+
+    it("외부 링크 클릭 시 새 탭에서 열기", () => {
+      const menus: SidebarMenuItem[] = [{ title: "외부 링크", href: "https://example.com" }];
+
+      const { getByText } = renderWithRouter(menus);
+
+      fireEvent.click(getByText("외부 링크"));
+
+      expect(mockWindowOpen).toHaveBeenCalledWith("https://example.com", "_blank", "noopener,noreferrer");
+    });
+  });
+
+  describe("펼침/접힘 동작", () => {
+    it("자식 있는 메뉴 클릭 시 펼침 토글", () => {
+      const menus: SidebarMenuItem[] = [
+        {
+          title: "설정",
+          children: [{ title: "프로필", href: "/settings/profile" }],
+        },
+      ];
+
+      const { getByText, container } = renderWithRouter(menus);
+
+      // 초기 상태: 접힘
+      const listItem = container.querySelector("[data-list-item]") as HTMLElement;
+      expect(listItem.getAttribute("aria-expanded")).toBe("false");
+
+      // 클릭 후: 펼침
+      fireEvent.click(getByText("설정"));
+      expect(listItem.getAttribute("aria-expanded")).toBe("true");
+    });
+  });
+
+  describe("pathname 반응성", () => {
+    it("pathname과 일치하는 메뉴의 부모가 자동으로 펼쳐짐", () => {
+      // 초기 pathname을 중첩 메뉴 경로로 설정
+      setMockPathname("/settings/profile");
+
+      const menus: SidebarMenuItem[] = [
+        { title: "대시보드", href: "/dashboard" },
+        {
+          title: "설정",
+          children: [
+            { title: "프로필", href: "/settings/profile" },
+            { title: "보안", href: "/settings/security" },
+          ],
+        },
+      ];
+
+      const { container } = renderWithRouter(menus);
+
+      // "설정" 메뉴가 자동으로 펼쳐져야 함
+      const settingsItem = container.querySelectorAll("[data-list-item]")[1] as HTMLElement;
+      expect(settingsItem.getAttribute("aria-expanded")).toBe("true");
+    });
+
+    it("pathname 변경 시 해당 경로의 부모 메뉴가 펼쳐짐", () => {
+      const menus: SidebarMenuItem[] = [
+        { title: "대시보드", href: "/dashboard" },
+        {
+          title: "설정",
+          children: [{ title: "프로필", href: "/settings/profile" }],
+        },
+      ];
+
+      const { container } = renderWithRouter(menus);
+
+      // 초기 상태: 설정 메뉴 접힘
+      const settingsItem = container.querySelectorAll("[data-list-item]")[1] as HTMLElement;
+      expect(settingsItem.getAttribute("aria-expanded")).toBe("false");
+
+      // pathname 변경
+      setMockPathname("/settings/profile");
+
+      // 설정 메뉴가 펼쳐져야 함
+      expect(settingsItem.getAttribute("aria-expanded")).toBe("true");
+    });
+  });
+
+  describe("스타일 병합", () => {
+    it("사용자 정의 class가 병합된다", () => {
+      const menus: SidebarMenuItem[] = [{ title: "홈", 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();
+    });
+  });
+});