@simplysm/solid 13.0.0-beta.6

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

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

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

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