@simplysm/solid 13.0.0-beta.6 → 13.0.1

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

@@ -1,171 +0,0 @@
-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 (Collapse 애니메이션용)
-    vi.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
-      cb(0);
-      return 0;
-    });
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  describe("렌더링", () => {
-    it("children을 렌더링", () => {
-      const { getByText } = render(() => (
-        <Sidebar.User>
-          <span>사용자 이름</span>
-        </Sidebar.User>
-      ));
-
-      expect(getByText("사용자 이름")).toBeTruthy();
-    });
-
-    it("menus가 없을 때 버튼에 aria-expanded 없음", () => {
-      const { container } = render(() => (
-        <Sidebar.User>
-          <span>사용자</span>
-        </Sidebar.User>
-      ));
-
-      const button = container.querySelector("button");
-      expect(button?.hasAttribute("aria-expanded")).toBe(false);
-    });
-
-    it("menus가 있을 때 버튼에 aria-expanded=false", () => {
-      const menus: SidebarUserMenu[] = [{ title: "로그아웃", onClick: () => {} }];
-
-      const { container } = render(() => (
-        <Sidebar.User menus={menus}>
-          <span>사용자</span>
-        </Sidebar.User>
-      ));
-
-      const button = container.querySelector("button");
-      expect(button?.getAttribute("aria-expanded")).toBe("false");
-    });
-  });
-
-  describe("클릭 동작", () => {
-    it("menus가 없을 때 클릭해도 드롭다운이 열리지 않음", () => {
-      const { container } = render(() => (
-        <Sidebar.User>
-          <span>사용자</span>
-        </Sidebar.User>
-      ));
-
-      const button = container.querySelector("button")!;
-      fireEvent.click(button);
-
-      // aria-expanded가 없거나 변경되지 않음
-      expect(button.hasAttribute("aria-expanded")).toBe(false);
-    });
-
-    it("menus가 있을 때 클릭으로 드롭다운 토글", () => {
-      const menus: SidebarUserMenu[] = [{ title: "로그아웃", onClick: () => {} }];
-
-      const { container } = render(() => (
-        <Sidebar.User menus={menus}>
-          <span>사용자</span>
-        </Sidebar.User>
-      ));
-
-      const button = container.querySelector("button")!;
-
-      // 초기 상태: 닫힘
-      expect(button.getAttribute("aria-expanded")).toBe("false");
-
-      // 첫 번째 클릭: 열림
-      fireEvent.click(button);
-      expect(button.getAttribute("aria-expanded")).toBe("true");
-
-      // 두 번째 클릭: 닫힘
-      fireEvent.click(button);
-      expect(button.getAttribute("aria-expanded")).toBe("false");
-    });
-  });
-
-  describe("메뉴 아이템 클릭", () => {
-    it("메뉴 아이템 클릭 시 onClick 호출", () => {
-      const onLogout = vi.fn();
-      const menus: SidebarUserMenu[] = [{ title: "로그아웃", onClick: onLogout }];
-
-      const { container, getByText } = render(() => (
-        <Sidebar.User menus={menus}>
-          <span>사용자</span>
-        </Sidebar.User>
-      ));
-
-      // 드롭다운 열기
-      const button = container.querySelector("button")!;
-      fireEvent.click(button);
-
-      // 메뉴 아이템 클릭
-      fireEvent.click(getByText("로그아웃"));
-
-      expect(onLogout).toHaveBeenCalledTimes(1);
-    });
-
-    it("메뉴 아이템 클릭 시 드롭다운 닫힘", () => {
-      const menus: SidebarUserMenu[] = [{ title: "프로필", onClick: () => {} }];
-
-      const { container, getByText } = render(() => (
-        <Sidebar.User menus={menus}>
-          <span>사용자</span>
-        </Sidebar.User>
-      ));
-
-      const button = container.querySelector("button")!;
-
-      // 드롭다운 열기
-      fireEvent.click(button);
-      expect(button.getAttribute("aria-expanded")).toBe("true");
-
-      // 메뉴 아이템 클릭
-      fireEvent.click(getByText("프로필"));
-
-      // 드롭다운 닫힘
-      expect(button.getAttribute("aria-expanded")).toBe("false");
-    });
-  });
-
-  describe("menus 유무에 따른 스타일", () => {
-    it("menus prop에 따라 스타일이 달라진다", () => {
-      const menus: SidebarUserMenu[] = [{ title: "로그아웃", onClick: () => {} }];
-
-      const { container: withoutMenus } = render(() => (
-        <Sidebar.User>
-          <span>사용자</span>
-        </Sidebar.User>
-      ));
-      const { container: withMenus } = render(() => (
-        <Sidebar.User menus={menus}>
-          <span>사용자</span>
-        </Sidebar.User>
-      ));
-
-      const buttonWithout = withoutMenus.querySelector("button")!;
-      const buttonWith = withMenus.querySelector("button")!;
-
-      expect(buttonWithout.className).not.toBe(buttonWith.className);
-    });
-  });
-
-  describe("스타일 병합", () => {
-    it("사용자 정의 class가 병합된다", () => {
-      const { container } = render(() => (
-        // eslint-disable-next-line tailwindcss/no-custom-classname
-        <Sidebar.User class="my-custom-class">
-          <span>사용자</span>
-        </Sidebar.User>
-      ));
-
-      expect(container.querySelector(".my-custom-class")).toBeTruthy();
-    });
-  });
-});

package/tests/directives/ripple.spec.tsx

@@ -1,130 +0,0 @@
-import { render, fireEvent } from "@solidjs/testing-library";
-import { describe, it, expect } from "vitest";
-import { Button } from "../../src/components/form-control/Button";
-
-describe("ripple directive", () => {
-  it("버튼 클릭 시 ripple indicator가 생성된다", () => {
-    const { getByRole } = render(() => <Button>Click</Button>);
-    const button = getByRole("button");
-
-    fireEvent.pointerDown(button, { clientX: 50, clientY: 25 });
-
-    const ripple = button.querySelector(".rounded-full");
-    expect(ripple).toBeTruthy();
-  });
-
-  it("disabled 버튼은 ripple이 생성되지 않는다", () => {
-    const { getByRole } = render(() => <Button disabled>Click</Button>);
-    const button = getByRole("button");
-
-    fireEvent.pointerDown(button, { clientX: 50, clientY: 25 });
-
-    const ripple = button.querySelector(".rounded-full");
-    expect(ripple).toBeFalsy();
-  });
-
-  it("pointerup 후 ripple의 opacity가 0이 된다", () => {
-    const { getByRole } = render(() => <Button>Click</Button>);
-    const button = getByRole("button");
-
-    fireEvent.pointerDown(button, { clientX: 50, clientY: 25 });
-
-    const ripple = button.querySelector(".rounded-full") as HTMLElement;
-    expect(ripple).toBeTruthy();
-
-    fireEvent.pointerUp(button);
-
-    expect(ripple.style.opacity).toBe("0");
-  });
-
-  it("빠른 연속 클릭 시 이전 ripple이 제거되고 새 ripple이 생성된다", () => {
-    const { getByRole } = render(() => <Button>Click</Button>);
-    const button = getByRole("button");
-
-    // 첫 번째 클릭
-    fireEvent.pointerDown(button, { clientX: 30, clientY: 15 });
-    const firstRipple = button.querySelector(".rounded-full");
-    expect(firstRipple).toBeTruthy();
-
-    // 두 번째 클릭 (다른 위치)
-    fireEvent.pointerDown(button, { clientX: 70, clientY: 35 });
-    const ripples = button.querySelectorAll(".rounded-full");
-
-    // 단일 ripple만 존재해야 함
-    expect(ripples.length).toBe(1);
-  });
-
-  it("첫 pointerdown 시 ripple container가 생성되고 overflow: hidden이 적용된다", () => {
-    const { getByRole } = render(() => <Button>Click</Button>);
-    const button = getByRole("button");
-
-    // pointerdown 전에는 ripple container 없음
-    expect(button.children.length).toBe(0); // 텍스트 노드만 있음
-
-    fireEvent.pointerDown(button, { clientX: 50, clientY: 25 });
-
-    // pointerdown 후에는 ripple container가 생성됨
-    expect(button.children.length).toBeGreaterThan(0);
-    const container = button.firstElementChild as HTMLElement;
-    expect(container).toBeTruthy();
-    expect(container.style.overflow).toBe("hidden");
-    // 부모 버튼의 overflow는 변경되지 않음
-    expect(button.style.overflow).not.toBe("hidden");
-  });
-
-  it("마우스를 누르고 있는 동안 ripple이 유지된다", () => {
-    const { getByRole } = render(() => <Button>Click</Button>);
-    const button = getByRole("button");
-
-    fireEvent.pointerDown(button, { clientX: 50, clientY: 25 });
-
-    const ripple = button.querySelector(".rounded-full") as HTMLElement;
-    expect(ripple).toBeTruthy();
-
-    // pointerup 없이 ripple이 유지되어야 함
-    // opacity가 여전히 1이어야 함 (fade out 시작 안 함)
-    expect(ripple.style.opacity).toBe("1");
-  });
-
-  it("다크모드용 ripple 클래스가 적용된다", () => {
-    const { getByRole } = render(() => <Button>Click</Button>);
-    const button = getByRole("button");
-
-    fireEvent.pointerDown(button, { clientX: 50, clientY: 25 });
-
-    const ripple = button.querySelector(".rounded-full") as HTMLElement;
-    expect(ripple).toBeTruthy();
-
-    // 라이트/다크 모드 모두 지원하는 클래스 확인
-    expect(ripple.classList.contains("bg-black/20")).toBe(true);
-    expect(ripple.classList.contains("dark:bg-white/20")).toBe(true);
-  });
-
-  it("pointerleave 시에도 ripple이 fade out된다", () => {
-    const { getByRole } = render(() => <Button>Click</Button>);
-    const button = getByRole("button");
-
-    fireEvent.pointerDown(button, { clientX: 50, clientY: 25 });
-
-    const ripple = button.querySelector(".rounded-full") as HTMLElement;
-    expect(ripple).toBeTruthy();
-
-    fireEvent.pointerLeave(button);
-
-    expect(ripple.style.opacity).toBe("0");
-  });
-
-  it("pointercancel 시에도 ripple이 fade out된다", () => {
-    const { getByRole } = render(() => <Button>Click</Button>);
-    const button = getByRole("button");
-
-    fireEvent.pointerDown(button, { clientX: 50, clientY: 25 });
-
-    const ripple = button.querySelector(".rounded-full") as HTMLElement;
-    expect(ripple).toBeTruthy();
-
-    fireEvent.pointerCancel(button);
-
-    expect(ripple.style.opacity).toBe("0");
-  });
-});

package/tests/helpers/createAppStructure.spec.tsx

@@ -1,338 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { createRoot, createSignal } from "solid-js";
-import type { Component } from "solid-js";
-import { createAppStructure, type AppStructureItem } from "../../src/helpers/createAppStructure";
-
-// 테스트용 더미 컴포넌트
-const DummyA: Component = () => null;
-const DummyB: Component = () => null;
-const DummyC: Component = () => null;
-const DummyD: Component = () => null;
-
-// 공통 테스트 구조
-function createTestItems(): AppStructureItem<string>[] {
-  return [
-    {
-      code: "home",
-      title: "홈",
-      children: [
-        {
-          code: "sales",
-          title: "영업",
-          modules: ["sales"],
-          children: [
-            {
-              code: "invoice",
-              title: "송장",
-              component: DummyA,
-              perms: ["use", "edit"] as ("use" | "edit")[],
-            },
-            {
-              code: "order",
-              title: "주문",
-              component: DummyB,
-              perms: ["use"] as ("use" | "edit")[],
-              requiredModules: ["sales", "erp"],
-            },
-          ],
-        },
-        {
-          code: "admin",
-          title: "관리",
-          children: [
-            {
-              code: "users",
-              title: "사용자",
-              component: DummyC,
-            },
-            {
-              code: "hidden",
-              title: "숨김",
-              component: DummyD,
-              isNotMenu: true,
-            },
-          ],
-        },
-      ],
-    },
-  ];
-}
-
-describe("createAppStructure", () => {
-  describe("routes", () => {
-    it("리프 아이템의 상대 경로를 추출한다", () => {
-      createRoot((dispose) => {
-        const result = createAppStructure({ items: createTestItems() });
-
-        expect(result.routes).toEqual([
-          { path: "/sales/invoice", component: DummyA },
-          { path: "/sales/order", component: DummyB },
-          { path: "/admin/users", component: DummyC },
-          { path: "/admin/hidden", component: DummyD },
-        ]);
-
-        dispose();
-      });
-    });
-
-    it("component가 없는 아이템은 라우트에 포함되지 않는다", () => {
-      createRoot((dispose) => {
-        const items: AppStructureItem<string>[] = [
-          {
-            code: "home",
-            title: "홈",
-            children: [{ code: "about", title: "소개" }],
-          },
-        ];
-
-        const result = createAppStructure({ items });
-        expect(result.routes).toEqual([]);
-
-        dispose();
-      });
-    });
-  });
-
-  describe("usableMenus", () => {
-    it("permRecord가 없으면 perms가 있는 리프는 숨겨지고 perms가 없는 리프만 표시된다", () => {
-      // permRecord 기본값이 {}이므로, perms에 "use"가 있는 아이템은
-      // permRecord[href + "/use"]가 undefined(falsy)가 되어 필터링됨
-      createRoot((dispose) => {
-        const result = createAppStructure({ items: createTestItems() });
-        const menus = result.usableMenus();
-
-        // 영업 하위 아이템(송장, 주문)은 모두 perms에 "use"가 있어 숨겨짐
-        // → 영업 그룹 자체도 자식이 없으므로 숨겨짐
-        // 관리 하위 아이템: 사용자(perms 없음)만 표시, 숨김(isNotMenu)은 제외
-        expect(menus).toHaveLength(1);
-        expect(menus[0].title).toBe("관리");
-        expect(menus[0].children).toHaveLength(1);
-        expect(menus[0].children![0].title).toBe("사용자");
-
-        dispose();
-      });
-    });
-
-    it("모든 권한이 부여되면 isNotMenu를 제외한 모든 메뉴가 표시된다", () => {
-      createRoot((dispose) => {
-        const [perms] = createSignal<Record<string, boolean>>({
-          "/home/sales/invoice/use": true,
-          "/home/sales/order/use": true,
-        });
-
-        const [modules] = createSignal<string[]>(["sales", "erp"]);
-
-        const result = createAppStructure({
-          items: createTestItems(),
-          usableModules: modules,
-          permRecord: perms,
-        });
-
-        const menus = result.usableMenus();
-
-        expect(menus).toHaveLength(2);
-        expect(menus[0].title).toBe("영업");
-        expect(menus[0].children).toHaveLength(2);
-        expect(menus[1].title).toBe("관리");
-        expect(menus[1].children).toHaveLength(1);
-        expect(menus[1].children![0].title).toBe("사용자");
-
-        dispose();
-      });
-    });
-
-    it("href가 올바른 전체 경로로 생성된다", () => {
-      createRoot((dispose) => {
-        const [perms] = createSignal<Record<string, boolean>>({
-          "/home/sales/invoice/use": true,
-          "/home/sales/order/use": true,
-        });
-
-        const [modules] = createSignal<string[]>(["sales", "erp"]);
-
-        const result = createAppStructure({
-          items: createTestItems(),
-          usableModules: modules,
-          permRecord: perms,
-        });
-
-        const menus = result.usableMenus();
-
-        expect(menus[0].children![0].href).toBe("/home/sales/invoice");
-        expect(menus[1].children![0].href).toBe("/home/admin/users");
-
-        dispose();
-      });
-    });
-
-    it("modules OR 필터링: 모듈이 없으면 해당 그룹이 숨겨진다", () => {
-      createRoot((dispose) => {
-        const [modules] = createSignal<string[]>(["erp"]);
-
-        const result = createAppStructure({
-          items: createTestItems(),
-          usableModules: modules,
-        });
-
-        const menus = result.usableMenus();
-        // sales 그룹은 modules: ["sales"]인데 usableModules에 "sales"가 없으므로 숨겨짐
-        expect(menus).toHaveLength(1);
-        expect(menus[0].title).toBe("관리");
-
-        dispose();
-      });
-    });
-
-    it("requiredModules AND 필터링: 모든 모듈이 있어야 표시된다", () => {
-      createRoot((dispose) => {
-        const [modules] = createSignal<string[]>(["sales"]);
-        const [perms] = createSignal<Record<string, boolean>>({
-          "/home/sales/invoice/use": true,
-          "/home/sales/order/use": true,
-        });
-
-        const result = createAppStructure({
-          items: createTestItems(),
-          usableModules: modules,
-          permRecord: perms,
-        });
-
-        const menus = result.usableMenus();
-        // sales 그룹은 modules: ["sales"]에 매칭되어 표시됨
-        // order는 requiredModules: ["sales", "erp"]인데 "erp"가 없으므로 숨겨짐
-        // invoice는 requiredModules가 없으므로 표시됨
-        expect(menus[0].children).toHaveLength(1);
-        expect(menus[0].children![0].title).toBe("송장");
-
-        dispose();
-      });
-    });
-
-    it("permRecord 필터링: use 권한이 없으면 숨겨진다", () => {
-      createRoot((dispose) => {
-        const [perms] = createSignal<Record<string, boolean>>({
-          "/home/sales/invoice/use": false,
-          "/home/sales/order/use": true,
-        });
-
-        const [modules] = createSignal<string[]>(["sales", "erp"]);
-
-        const result = createAppStructure({
-          items: createTestItems(),
-          usableModules: modules,
-          permRecord: perms,
-        });
-
-        const menus = result.usableMenus();
-        expect(menus[0].children).toHaveLength(1);
-        expect(menus[0].children![0].title).toBe("주문");
-
-        dispose();
-      });
-    });
-
-    it("perms가 없는 리프는 권한 체크 없이 항상 표시된다", () => {
-      createRoot((dispose) => {
-        const [perms] = createSignal<Record<string, boolean>>({});
-
-        const result = createAppStructure({
-          items: createTestItems(),
-          permRecord: perms,
-        });
-
-        const menus = result.usableMenus();
-        // permRecord가 빈 객체이므로 perms: ["use"]가 있는 아이템은 모두 숨겨짐
-        // perms가 없는 사용자(DummyC)만 표시됨
-        // 관리 그룹만 남음 (인덱스 0)
-        expect(menus).toHaveLength(1);
-        expect(menus[0].title).toBe("관리");
-        expect(menus[0].children![0].title).toBe("사용자");
-
-        dispose();
-      });
-    });
-
-    it("자식이 모두 필터링되면 그룹도 숨겨진다", () => {
-      createRoot((dispose) => {
-        const [perms] = createSignal<Record<string, boolean>>({
-          "/home/sales/invoice/use": false,
-          "/home/sales/order/use": false,
-        });
-
-        const [modules] = createSignal<string[]>(["sales", "erp"]);
-
-        const result = createAppStructure({
-          items: createTestItems(),
-          usableModules: modules,
-          permRecord: perms,
-        });
-
-        const menus = result.usableMenus();
-        // 영업 하위 아이템이 모두 권한 없음으로 필터링 → 영업 그룹도 숨겨짐
-        expect(menus).toHaveLength(1);
-        expect(menus[0].title).toBe("관리");
-
-        dispose();
-      });
-    });
-
-    it("usableModules가 변경되면 메뉴가 재계산된다", () => {
-      createRoot((dispose) => {
-        const [modules, setModules] = createSignal<string[] | undefined>(undefined);
-        const [perms] = createSignal<Record<string, boolean>>({
-          "/home/sales/invoice/use": true,
-          "/home/sales/order/use": true,
-        });
-
-        const result = createAppStructure({
-          items: createTestItems(),
-          usableModules: modules,
-          permRecord: perms,
-        });
-
-        // usableModules가 undefined이면 모듈 필터링 없음 → 전부 표시
-        expect(result.usableMenus()).toHaveLength(2);
-
-        // usableModules를 ["sales"]로 설정하면 order의 requiredModules 불충족
-        setModules(["sales"]);
-        expect(result.usableMenus()[0].title).toBe("영업");
-        expect(result.usableMenus()[0].children).toHaveLength(1);
-        expect(result.usableMenus()[0].children![0].title).toBe("송장");
-
-        dispose();
-      });
-    });
-  });
-
-  describe("usableFlatMenus", () => {
-    it("트리를 평탄화하여 titleChain과 href를 반환한다", () => {
-      createRoot((dispose) => {
-        const [perms] = createSignal<Record<string, boolean>>({
-          "/home/sales/invoice/use": true,
-          "/home/sales/order/use": true,
-        });
-
-        const [modules] = createSignal<string[]>(["sales", "erp"]);
-
-        const result = createAppStructure({
-          items: createTestItems(),
-          usableModules: modules,
-          permRecord: perms,
-        });
-
-        const flat = result.usableFlatMenus();
-
-        expect(flat).toContainEqual({
-          titleChain: ["영업", "송장"],
-          href: "/home/sales/invoice",
-        });
-        expect(flat).toContainEqual({
-          titleChain: ["관리", "사용자"],
-          href: "/home/admin/users",
-        });
-
-        dispose();
-      });
-    });
-  });
-});