@simplysm/solid 13.0.0-beta.6 → 13.0.1

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

@@ -1,190 +0,0 @@
-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

@@ -1,203 +0,0 @@
-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

@@ -1,213 +0,0 @@
-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();
-    });
-  });
-});