@allbluecn/web-app 0.5.0 → 0.6.0

package/src/components/shared/__tests__/lucide-icon-picker.test.tsx

@@ -0,0 +1,197 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Star } from "lucide-react";
+import { LucideIconByName } from "@/components/shared/lucide-icon-picker/lucide-icon-by-name";
+import { IconPickerPanel } from "@/components/shared/lucide-icon-picker/panel";
+import { LucideIconPicker } from "@/components/shared/lucide-icon-picker";
+import { CURATED_ICONS } from "@/components/shared/lucide-icon-picker/curated-icons";
+import { pushRecentIcon, getRecentIcons } from "@/components/shared/lucide-icon-picker/icon-data";
+
+describe("LucideIconByName", () => {
+  it("有效 name 渲染对应图标（jsdom 下 data-icon 属性不可靠，以 width 断言）", () => {
+    const { container } = render(<LucideIconByName name="star" size={20} />);
+    const svg = container.querySelector("svg");
+    expect(svg).toBeTruthy();
+    expect(svg?.getAttribute("width")).toBe("20");
+    expect(svg?.innerHTML).toContain("<path");
+  });
+
+  it("精选外/未知 name 渲染 fallback（默认 Circle 占位）", () => {
+    const { container } = render(<LucideIconByName name="not-exist-icon" />);
+    const svg = container.querySelector("svg");
+    expect(svg).toBeTruthy();
+    expect(svg?.innerHTML).toContain("<circle");
+  });
+
+  it("undefined name 渲染 fallback", () => {
+    const { container } = render(<LucideIconByName />);
+    expect(container.querySelector("svg")).toBeTruthy();
+  });
+
+  it("自定义 fallback 优先于默认占位", () => {
+    render(
+      <LucideIconByName name="not-exist" fallback={<Star data-testid="fb" />} />
+    );
+    expect(screen.getByTestId("fb")).toBeTruthy();
+  });
+
+  it("className 透传", () => {
+    const { container } = render(
+      <LucideIconByName name="star" className="text-primary" />
+    );
+    expect(container.querySelector("svg")?.getAttribute("class")).toContain(
+      "text-primary"
+    );
+  });
+});
+
+describe("IconPickerPanel", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  it("渲染搜索框 + 全部图标网格；无最近记录时不显示最近使用小节", async () => {
+    render(<IconPickerPanel onPick={vi.fn()} />);
+    expect(
+      screen.getByRole("textbox", { name: /搜索/ })
+    ).toBeTruthy();
+    // tab 按钮已移除
+    expect(screen.queryByRole("button", { name: /最近使用/ })).toBeNull();
+    expect(screen.queryByRole("button", { name: /全部图标/ })).toBeNull();
+    // 无最近记录：不显示"最近使用"小节标题，网格 = 精选总数
+    expect(screen.queryByText(/最近使用/)).toBeNull();
+    expect(screen.getByText(/全部图标/)).toBeTruthy();
+    const cells = await screen.findAllByRole("button", { name: /^icon-cell-/ });
+    expect(cells.length).toBe(CURATED_ICONS.length);
+  });
+
+  it("英文搜索过滤 + Enter 选中第一个结果", async () => {
+    const onPick = vi.fn();
+    render(<IconPickerPanel onPick={onPick} />);
+    const input = screen.getByRole("textbox", { name: /搜索/ });
+    await userEvent.type(input, "kanban{Enter}");
+    expect(onPick).toHaveBeenCalledWith("folder-kanban");
+  });
+
+  it("中文搜索过滤并点击选中", async () => {
+    const onPick = vi.fn();
+    render(<IconPickerPanel onPick={onPick} />);
+    await userEvent.type(
+      screen.getByRole("textbox", { name: /搜索/ }),
+      "星标"
+    );
+    const cells = screen.getAllByRole("button", { name: /^icon-cell-/ });
+    expect(cells.length).toBeGreaterThanOrEqual(1);
+    await userEvent.click(cells[0]);
+    expect(onPick).toHaveBeenCalledWith("star");
+  });
+
+  it("无结果显示空态", async () => {
+    render(<IconPickerPanel onPick={vi.fn()} />);
+    await userEvent.type(
+      screen.getByRole("textbox", { name: /搜索/ }),
+      "zzzz不存在"
+    );
+    expect(screen.getByText(/未找到匹配的图标/)).toBeTruthy();
+    expect(screen.queryAllByRole("button", { name: /^icon-cell-/ })).toEqual([]);
+  });
+
+  it("有最近记录时同页显示最近使用小节（上下排列，总数 = 精选数 + 最近数）", async () => {
+    pushRecentIcon("star");
+    pushRecentIcon("clock");
+    render(<IconPickerPanel onPick={vi.fn()} />);
+    expect(screen.getByText(/最近使用/)).toBeTruthy();
+    expect(screen.getByText(/全部图标/)).toBeTruthy();
+    const cells = await screen.findAllByRole("button", { name: /^icon-cell-/ });
+    expect(cells.length).toBe(CURATED_ICONS.length + 2);
+  });
+
+  it("value 对应 cell 有选中态标识", async () => {
+    render(<IconPickerPanel value="star" onPick={vi.fn()} />);
+    const cell = screen.getByRole("button", { name: "icon-cell-star" });
+    expect(cell.getAttribute("data-selected")).toBe("true");
+  });
+});
+
+describe("LucideIconPicker（Popover 包装）", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    vi.stubGlobal(
+      "ResizeObserver",
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      }
+    );
+  });
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("不传 children 时渲染内置微笑触发按钮（未选择占位）", async () => {
+    render(<LucideIconPicker value={undefined} onChange={vi.fn()} />);
+    const trigger = screen.getByRole("button", { name: /选择图标/ });
+    expect(trigger.querySelector("svg")?.getAttribute("class")).toContain(
+      "lucide-smile"
+    );
+  });
+
+  it("内置触发按钮在选择后回显所选图标", async () => {
+    render(<LucideIconPicker value="clock" onChange={vi.fn()} />);
+    const trigger = screen.getByRole("button", { name: /选择图标/ });
+    expect(trigger.querySelector("svg")?.getAttribute("class")).toContain(
+      "lucide-clock"
+    );
+  });
+
+  it("渲染 trigger，点击后打开面板（lazy 加载完成）", async () => {
+    render(
+      <LucideIconPicker value="star" onChange={vi.fn()}>
+        <button type="button">选图标</button>
+      </LucideIconPicker>
+    );
+    await userEvent.click(screen.getByRole("button", { name: "选图标" }));
+    expect(
+      await screen.findByRole("button", { name: "icon-cell-star" })
+    ).toBeTruthy();
+  });
+
+  it("点击图标触发 onChange 并关闭弹窗、写入最近使用", async () => {
+    const onChange = vi.fn();
+    render(
+      <LucideIconPicker value={undefined} onChange={onChange}>
+        <button type="button">选图标</button>
+      </LucideIconPicker>
+    );
+    await userEvent.click(screen.getByRole("button", { name: "选图标" }));
+    await userEvent.click(
+      await screen.findByRole("button", { name: "icon-cell-clock" })
+    );
+    expect(onChange).toHaveBeenCalledWith("clock");
+    await waitFor(() =>
+      expect(
+        screen.queryByRole("button", { name: "icon-cell-clock" })
+      ).toBeNull()
+    );
+    expect(getRecentIcons()).toEqual(["clock"]);
+  });
+});