@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/testcase/__tests__/table-view.test.tsx

@@ -1,328 +0,0 @@
-// 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/>.
-
-// 任务 9 TDD：表格视图列定义（identifier/title/type/priority/state/automation/
-// story 链接/assignee/updatedAt）+ 视图切换 list↔table 保持筛选 + 保存视图
-// →切换→默认视图（内置 __default__ 口径，不落库）生效。serverFn 全 mock。
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
-
-vi.mock("@tanstack/react-start", () => ({
-  useServerFn: (fn: unknown) => fn,
-}));
-
-// 表格 story 链接列用 router Link：测试环境无 router 上下文，替身直通渲染；
-// 任务 10 起 list-view 链上 peek 面板还需 useNavigate
-const { mockNavigate } = vi.hoisted(() => ({ mockNavigate: vi.fn() }));
-vi.mock("@tanstack/react-router", () => ({
-  Link: ({ children }: { children?: React.ReactNode }) => <a>{children}</a>,
-  useNavigate: () => mockNavigate,
-}));
-
-// 任务 10 起 list-view 挂 Peek 面板 → 复用 story-panel-header 的 PeekMode，其
-// import 链拉进 story serverFn（createServerFn 需 tanstackStart 插件编译），Proxy 全量 mock
-vi.mock("@/server/serverFns/story", () => ({
-  get(target: Record<string, unknown>, prop: string | symbol) {
-    if (typeof prop === "symbol") return undefined;
-    if (!(prop in target)) target[prop] = vi.fn();
-    return target[prop];
-  },
-}));
-
-
-// 任务 21 起 AI 生成按钮改接 ai/generate-dialog（内部 useFeature 拉进 billing
-// serverFn 链），同款裁剪：直通渲染裁掉整棵子树
-vi.mock("@/components/testcase/ai/generate-dialog", () => ({
-  GenerateTestCasesButton: () => null,
-}));
-
-// 虚拟化桩：jsdom 无布局，返回全量虚拟 items（断言行渲染契约）
-vi.mock("@tanstack/react-virtual", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("@tanstack/react-virtual")>();
-  return {
-    ...actual,
-    useVirtualizer: (opts: Parameters<typeof actual.useVirtualizer>[0]) => ({
-      getVirtualItems: () =>
-        Array.from({ length: opts.count }, (_, i) => ({ index: i, key: i, start: i * 44, size: 44 })),
-      getTotalSize: () => opts.count * 44,
-      measure: () => {},
-    }),
-  };
-});
-
-const serverFns = vi.hoisted(() => ({
-  listTestCasesFn: vi.fn(),
-  listGroupsFn: vi.fn(),
-  listFoldersFn: vi.fn(),
-  listFilterViewsFn: vi.fn(),
-  createFilterViewFn: vi.fn(),
-  updateFilterViewFn: vi.fn(),
-  deleteFilterViewFn: vi.fn(),
-}));
-vi.mock("@/server/serverFns/testcase/testcase-crud", () => ({
-  listTestCasesFn: serverFns.listTestCasesFn,
-  createTestCaseFn: vi.fn(),
-  updateTestCaseFn: vi.fn(),
-  archiveTestCaseFn: vi.fn(),
-  deleteTestCaseFn: vi.fn(),
-}));
-vi.mock("@/server/serverFns/testcase/testcase-groups", () => ({
-  listGroupsFn: serverFns.listGroupsFn,
-}));
-vi.mock("@/server/serverFns/testcase/testcase-folders", () => ({
-  listFoldersFn: serverFns.listFoldersFn,
-  createFolderFn: vi.fn(),
-  renameFolderFn: vi.fn(),
-  deleteFolderFn: vi.fn(),
-  reorderFolderFn: vi.fn(),
-}));
-vi.mock("@/server/serverFns/testcase/testcase-filter-views", () => ({
-  listFilterViewsFn: serverFns.listFilterViewsFn,
-  createFilterViewFn: serverFns.createFilterViewFn,
-  updateFilterViewFn: serverFns.updateFilterViewFn,
-  deleteFilterViewFn: serverFns.deleteFilterViewFn,
-}));
-
-// 任务 13 起列表页壳引入测试计划 serverFn（圈选入口）：本文件不测计划链路，空实现保模块求值
-vi.mock("@/server/serverFns/testcase/plans", () => ({
-  listPlansFn: vi.fn(() => Promise.resolve({ items: [] })),
-  addCasesToPlanFn: vi.fn(),
-}));
-
-import { TestCaseListView } from "../list-view";
-import type { TestCaseSummary } from "@/server/serverFns/testcase/types";
-
-const makeCase = (over: Partial<TestCaseSummary> & { id: string }): TestCaseSummary => ({
-  sequenceId: 1,
-  identifier: "PERF-TC1",
-  projectId: "p1",
-  folderId: null,
-  storyId: null,
-  title: `用例 ${over.id}`,
-  precondition: null,
-  steps: { steps: [{ order: 1, action: "操作", expected: "结果" }] },
-  type: "functional",
-  priority: "p1",
-  state: "approved",
-  version: 1,
-  automation: "none",
-  aiGenerated: false,
-  assignee: null,
-  createdBy: { id: "u1", username: "alice", email: "e", avatarConfig: null, bgShape: null, bgColor: null },
-  archived: false,
-  createdAt: "2026-01-01T00:00:00.000Z",
-  updatedAt: "2026-01-02T00:00:00.000Z",
-  ...over,
-});
-
-const page1 = [
-  makeCase({ id: "c1", title: "登录成功跳转仪表盘", storyId: "s1" }),
-  makeCase({ id: "c2", identifier: "PERF-TC2", title: "支付超时提示", automation: "e2e" }),
-];
-
-const projects = [{ id: "p1", name: "独立需求", displayId: "STORY", icon: "box" }];
-
-/** listFilterViewsFn 行 fixture（TestCaseFilterViewDTO，日期已转 ISO） */
-const makeViewDto = (over: Record<string, unknown>) => ({
-  id: "tv1",
-  name: "冒烟视图",
-  description: null,
-  icon: "flag",
-  projectId: null,
-  filters: { state: "approved" },
-  displayOptions: { groupBy: "state", view: "list" },
-  sortOrder: 0,
-  createdAt: "2026-01-01T00:00:00.000Z",
-  updatedAt: "2026-01-01T00:00:00.000Z",
-  ...over,
-});
-
-/** 视图选择器弹层内容（Base UI portal 到 body，走 data-slot 定位） */
-function popoverButtons(): HTMLButtonElement[] {
-  const dialog = document.querySelector('[data-slot="popover-content"]');
-  if (!dialog) return [];
-  return [...dialog.querySelectorAll("button")] as HTMLButtonElement[];
-}
-
-async function openSelector() {
-  // 上一个弹层的关闭动画/卸载可能未完成：先等 content 卸载，再点触发器，
-  // 否则点击落在仍挂载的弹层上会把即将打开的弹层又切换关闭
-  await waitFor(() => {
-    expect(document.querySelector('[data-slot="popover-content"]')).toBeNull();
-  });
-  fireEvent.click(screen.getAllByRole("button", { name: /默认视图|冒烟视图|我的视图/ })[0]!);
-  await waitFor(() => {
-    expect(document.querySelector('[data-slot="popover-content"]')).not.toBeNull();
-  });
-}
-
-async function clickPopoverItem(text: string) {
-  await waitFor(() => {
-    const btn = popoverButtons().find((b) => b.textContent?.includes(text));
-    expect(btn).toBeDefined();
-    fireEvent.click(btn!);
-  });
-}
-
-beforeEach(() => {
-  vi.clearAllMocks();
-  serverFns.listTestCasesFn.mockResolvedValue({ items: page1, nextCursor: null });
-  serverFns.listGroupsFn.mockResolvedValue({ groups: [] });
-  serverFns.listFoldersFn.mockResolvedValue({ folders: [] });
-  serverFns.listFilterViewsFn.mockResolvedValue([]);
-  serverFns.createFilterViewFn.mockImplementation(
-    ({ data }: { data: { name: string } }) =>
-      Promise.resolve(makeViewDto({ id: "tv2", name: data.name })),
-  );
-});
-
-afterEach(() => {
-  cleanup();
-});
-
-describe("TestCaseListView 表格视图（规格 A3）", () => {
-  it("表格视图渲染九列齐全 + 行数据（automation/story 链接/updatedAt）", async () => {
-    render(<TestCaseListView projects={projects} initialFolders={[]} initialUsers={[]} />);
-    await waitFor(() => {
-      expect(screen.getByText("PERF-TC1")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByRole("button", { name: "表格" }));
-
-    for (const header of ["标识符", "标题", "类型", "优先级", "状态", "自动化", "需求", "负责人", "更新时间"]) {
-      expect(await screen.findByText(header)).toBeInTheDocument();
-    }
-    // 行数据：标题两行 + automation label + story 链接列（有 storyId 显示链接，无则 —）
-    expect(screen.getByText("登录成功跳转仪表盘")).toBeInTheDocument();
-    expect(screen.getByText("支付超时提示")).toBeInTheDocument();
-    expect(screen.getAllByText("未自动化").length).toBeGreaterThan(0);
-    expect(screen.getByText("E2E")).toBeInTheDocument();
-    // 未指派负责人列兜底（两条用例 assignee 均 null，复用行内编辑「未指定」文案）
-    expect(screen.getAllByText("未指定").length).toBe(2);
-  });
-
-  it("列表↔表格切换保持筛选（不重置不重拉）", async () => {
-    serverFns.listFilterViewsFn.mockResolvedValue([makeViewDto({})]);
-    render(<TestCaseListView projects={projects} initialFolders={[]} initialUsers={[]} />);
-    await waitFor(() => {
-      expect(screen.getByText("PERF-TC1")).toBeInTheDocument();
-    });
-
-    // 应用保存视图（filters.state=approved + displayOptions.groupBy=state）
-    await openSelector();
-    await clickPopoverItem("冒烟视图");
-    await waitFor(() => {
-      expect(serverFns.listTestCasesFn).toHaveBeenCalledWith({
-        data: expect.objectContaining({ state: "approved" }),
-      });
-    });
-    // displayOptions.groupBy 应用：分组计数带同一筛选
-    expect(serverFns.listGroupsFn).toHaveBeenCalledWith({
-      data: expect.objectContaining({ groupBy: "state", state: "approved" }),
-    });
-
-    // 切到表格再切回列表：筛选保持（无丢筛选的重拉）
-    fireEvent.click(screen.getByRole("button", { name: "表格" }));
-    expect(await screen.findByText("标识符")).toBeInTheDocument();
-    fireEvent.click(screen.getByRole("button", { name: /列表/ }));
-    await waitFor(() => {
-      expect(screen.getByText("PERF-TC1")).toBeInTheDocument();
-    });
-    const unfilteredCalls = serverFns.listTestCasesFn.mock.calls.filter(
-      (c) => (c[0] as { data: { state?: string } }).data.state === undefined,
-    );
-    // 只有首渲拉取不带筛选；视图应用与两次切换后仍带 state=approved
-    expect(unfilteredCalls).toHaveLength(1);
-  });
-});
-
-describe("TestCaseListView 保存筛选视图", () => {
-  it("保存当前筛选为新视图（键集收敛）→ 应用 → 切回默认视图（内置口径）生效", async () => {
-    serverFns.listFilterViewsFn.mockResolvedValue([makeViewDto({})]);
-    render(<TestCaseListView projects={projects} initialFolders={[]} initialUsers={[]} />);
-    await waitFor(() => {
-      expect(screen.getByText("PERF-TC1")).toBeInTheDocument();
-    });
-
-    // ① 应用保存视图，使当前筛选非空
-    await openSelector();
-    await clickPopoverItem("冒烟视图");
-    await waitFor(() => {
-      expect(serverFns.listTestCasesFn).toHaveBeenCalledWith({
-        data: expect.objectContaining({ state: "approved" }),
-      });
-    });
-
-    // ② 保存当前筛选为新视图：filters 键集收敛 + displayOptions 快照
-    // （mock 先更新：保存成功后 handleCreateViewSubmit 立即重拉视图列表，
-    // 服务端会返回含新建视图的全量列表，mock 需在同一时点就绪）
-    serverFns.listFilterViewsFn.mockResolvedValue([
-      makeViewDto({}),
-      makeViewDto({
-        id: "tv2",
-        name: "我的视图",
-        filters: { state: "approved", priority: "p1" },
-        displayOptions: { groupBy: "none", view: "table" },
-      }),
-    ]);
-    await openSelector();
-    await clickPopoverItem("创建视图");
-    const nameInput = await screen.findByPlaceholderText("视图名称");
-    fireEvent.change(nameInput, { target: { value: "我的视图" } });
-    fireEvent.click(screen.getByRole("button", { name: "保存" }));
-    await waitFor(() => {
-      expect(serverFns.createFilterViewFn).toHaveBeenCalledWith({
-        data: expect.objectContaining({
-          name: "我的视图",
-          filters: expect.objectContaining({ state: "approved" }),
-          displayOptions: expect.objectContaining({ groupBy: "state", view: "list" }),
-        }),
-      });
-    });
-
-    // ③ 应用新视图（displayOptions.view=table 随视图生效）
-    await openSelector();
-    await clickPopoverItem("我的视图");
-    await waitFor(() => {
-      expect(screen.getByText("标识符")).toBeInTheDocument(); // table 视图随 displayOptions.view 切入
-    });
-    await waitFor(() => {
-      expect(serverFns.listTestCasesFn).toHaveBeenLastCalledWith({
-        data: expect.objectContaining({ state: "approved", priority: "p1" }),
-      });
-    });
-
-    // ④ 切回内置默认视图：filters/groupBy/view 全部复位（不落库口径）
-    await openSelector();
-    await clickPopoverItem("默认视图");
-    await waitFor(() => {
-      expect(screen.getByText("PERF-TC1")).toBeInTheDocument(); // 回到列表视图
-    });
-    expect(screen.queryByText("标识符")).not.toBeInTheDocument();
-    const unfilteredCalls = serverFns.listTestCasesFn.mock.calls.filter(
-      (c) => {
-        const data = (c[0] as { data: { state?: string; priority?: string } }).data;
-        return data.state === undefined && data.priority === undefined;
-      },
-    );
-    // 首渲 + 默认视图应用各一次；默认视图后的所有调用不得再带筛选
-    expect(unfilteredCalls.length).toBeGreaterThanOrEqual(2);
-    const lastCall = serverFns.listTestCasesFn.mock.calls.at(-1) as [{ data: Record<string, unknown> }];
-    expect(lastCall[0].data.state).toBeUndefined();
-    expect(lastCall[0].data.priority).toBeUndefined();
-  });
-});

package/src/components/testcase/plans/add-to-plan-bar.tsx

@@ -1,64 +0,0 @@
-// 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/>.
-
-// 用例列表多选批处理条（任务 13 圈选入口，照 bug-list batch-toolbar 最小裁剪）：
-// 已选计数 + 「加入计划」+ 清除选择。选中数 >0 时浮现于工具栏下方。
-import { BrushCleaning, ClipboardList } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { m } from "@/paraglide/messages.js";
-
-interface AddToPlanBarProps {
-  selectedCount: number;
-  busy?: boolean;
-  onAddToPlan: () => void;
-  onClearSelection: () => void;
-}
-
-export function AddToPlanBar({ selectedCount, busy, onAddToPlan, onClearSelection }: AddToPlanBarProps) {
-  if (selectedCount === 0) return null;
-  return (
-    <div data-testid="add-to-plan-bar" className="flex h-9 shrink-0 items-center gap-2 rounded-md border border-border bg-background px-3">
-      <span className="shrink-0 text-xs text-muted-foreground">
-        {m.testcase_plan_batch_selected({ count: selectedCount })}
-      </span>
-      <div className="mx-1 h-4 w-px bg-border" />
-      <Button size="sm" className="h-7 gap-1.5" disabled={busy} onClick={onAddToPlan}>
-        <ClipboardList className="size-3.5" />
-        {m.testcase_plan_batch_addToPlan()}
-      </Button>
-      <Tooltip>
-        <TooltipTrigger
-          render={
-            <Button
-              variant="ghost"
-              size="icon"
-              aria-label={m.testcase_plan_batch_clear()}
-              className="size-7 text-muted-foreground hover:text-foreground"
-              onClick={onClearSelection}
-            />
-          }
-        >
-          <BrushCleaning className="size-4" />
-        </TooltipTrigger>
-        <TooltipContent side="top" className="text-xs">
-          {m.testcase_plan_batch_clear()}
-        </TooltipContent>
-      </Tooltip>
-    </div>
-  );
-}

package/src/components/testcase/table/columns.tsx

@@ -1,170 +0,0 @@
-// 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/>.
-
-// 表格视图列定义（仿 story/columns 同名件）：TanStack Table v9 features + 列集。
-// 九列：identifier/title/type/priority/state/automation/story 链接/assignee/updatedAt。
-// 状态/优先级展示复用行内编辑器导出的色板常量（单一事实源）。
-import {
-  columnPinningFeature,
-  columnSizingFeature,
-  columnVisibilityFeature,
-  createSortedRowModel,
-  rowSortingFeature,
-  sortFns,
-  tableFeatures,
-  type ColumnDef,
-} from "@tanstack/react-table";
-import { Link } from "@tanstack/react-router";
-import { Link2 } from "lucide-react";
-import { UserAvatar } from "@/components/shared-kit";
-import type { TestCaseSummary } from "@/server/serverFns/testcase/types";
-import { priorityLabel, stateLabel, typeLabel } from "../filters";
-import { TEST_CASE_PRIORITY_COLOR } from "../inline-editors/priority-editor";
-import { TEST_CASE_STATE_META } from "../inline-editors/state-editor";
-import { m } from "@/paraglide/messages.js";
-
-const AUTOMATION_LABEL_FNS: Record<string, () => string> = {
-  none: m.testcase_automation_none,
-  unit: m.testcase_automation_unit,
-  e2e: m.testcase_automation_e2e,
-  both: m.testcase_automation_both,
-};
-
-function formatDate(iso: string): string {
-  const d = new Date(iso.slice(0, 10));
-  return `${d.getFullYear()}/${String(d.getMonth() + 1).padStart(2, "0")}/${String(d.getDate()).padStart(2, "0")}`;
-}
-
-export const testCaseTableFeatures = tableFeatures({
-  rowSortingFeature,
-  columnPinningFeature,
-  columnSizingFeature,
-  columnVisibilityFeature,
-  sortFns,
-  sortedRowModel: createSortedRowModel(),
-});
-
-export function createTestCaseColumns(): ColumnDef<typeof testCaseTableFeatures, TestCaseSummary>[] {
-  return [
-    {
-      accessorKey: "identifier",
-      header: m.testcase_column_identifier(),
-      size: 110,
-      cell: ({ row }) => (
-        <span className="font-mono text-xs text-muted-foreground">{row.original.identifier}</span>
-      ),
-    },
-    {
-      accessorKey: "title",
-      header: m.testcase_column_title(),
-      size: 240,
-      cell: ({ row }) => (
-        <span className="truncate font-medium">{row.original.title}</span>
-      ),
-    },
-    {
-      accessorKey: "type",
-      header: m.testcase_column_type(),
-      size: 90,
-      cell: ({ row }) => (
-        <span className="text-xs">{typeLabel(row.original.type)}</span>
-      ),
-    },
-    {
-      accessorKey: "priority",
-      header: m.testcase_column_priority(),
-      size: 80,
-      cell: ({ row }) => (
-        <span className={`inline-flex items-center rounded-sm border border-border px-1.5 py-0.5 text-xs font-medium ${TEST_CASE_PRIORITY_COLOR[row.original.priority]}`}>
-          {priorityLabel(row.original.priority)}
-        </span>
-      ),
-    },
-    {
-      accessorKey: "state",
-      header: m.testcase_column_state(),
-      size: 110,
-      cell: ({ row }) => {
-        const meta = TEST_CASE_STATE_META[row.original.state];
-        const Icon = meta.icon;
-        return (
-          <span className="inline-flex items-center gap-1 text-xs">
-            <Icon className={`size-3 ${meta.color}`} />
-            <span className={meta.color}>{stateLabel(row.original.state)}</span>
-          </span>
-        );
-      },
-    },
-    {
-      accessorKey: "automation",
-      header: m.testcase_column_automation(),
-      size: 90,
-      cell: ({ row }) => (
-        <span className="text-xs text-muted-foreground">
-          {AUTOMATION_LABEL_FNS[row.original.automation]?.() ?? row.original.automation}
-        </span>
-      ),
-    },
-    {
-      id: "story",
-      header: m.testcase_column_story(),
-      size: 70,
-      cell: ({ row }) => {
-        const storyId = row.original.storyId;
-        if (!storyId) return <span className="text-xs text-muted-foreground">—</span>;
-        return (
-          <Link
-            to="/stories/$storyId"
-            params={{ storyId }}
-            onClick={(e) => e.stopPropagation()}
-            aria-label={m.testcase_column_story()}
-            className="inline-flex items-center text-muted-foreground transition-colors hover:text-primary"
-          >
-            <Link2 className="size-3.5" />
-          </Link>
-        );
-      },
-    },
-    {
-      id: "assignee",
-      header: m.testcase_column_assignee(),
-      size: 140,
-      cell: ({ row }) => {
-        const a = row.original.assignee;
-        if (!a) return <span className="text-xs text-muted-foreground">{m.testcase_inline_notSelected()}</span>;
-        return (
-          <div className="flex items-center gap-2">
-            <UserAvatar
-              avatarConfig={a.avatarConfig}
-              bgShape={a.bgShape as "circle" | "rounded" | "square" | null}
-              bgColor={a.bgColor}
-              name={a.username}
-              size="sm"
-            />
-            <span className="text-xs">{a.username}</span>
-          </div>
-        );
-      },
-    },
-    {
-      accessorKey: "updatedAt",
-      header: m.testcase_column_updatedAt(),
-      size: 100,
-      cell: ({ row }) => <span className="text-xs">{formatDate(row.original.updatedAt)}</span>,
-    },
-  ];
-}