@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/bug/__tests__/board-view.test.tsx

@@ -0,0 +1,350 @@
+// 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/>.
+
+// BUG 看板视图（UI 对齐三期 PR-10 任务 33）。测试策略与 testcase board-view.test
+// / 共享层 kanban-board-view.test 同口径：jsdom 不模拟 dnd-kit 真拖——
+// 跨列拖拽语义走 resolveDropCommit 纯函数 + board-view 导出的 buildBoardConfig
+// 接线（组件内部 onDropToColumn 即由它构建），mock updateBugFn 断言 patch；
+// 渲染级仅结构 / 点击断言。
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+vi.mock("@tanstack/react-start", () => ({
+  useServerFn: (fn: unknown) => fn,
+}));
+
+const { toast, updateBugFn } = vi.hoisted(() => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+    info: vi.fn(),
+    warning: vi.fn(),
+    loading: vi.fn(),
+    message: vi.fn(),
+    dismiss: vi.fn(),
+    promise: vi.fn(),
+  },
+  updateBugFn: vi.fn(),
+}));
+vi.mock("@/components/ui/toast", () => ({ toast }));
+vi.mock("@/server/serverFns/bug", () => ({
+  updateBugFn,
+}));
+
+import {
+  commitDropDecision,
+  resolveDropCommit,
+} from "@/components/shared-kit/list-kit/kanban/drop-commit";
+import type { ReorderEntry } from "@/components/shared-kit/list-kit/kanban/drop-commit";
+import {
+  BugBoardView,
+  buildBoardConfig,
+  toGroupFieldPatch,
+} from "../views/board-view";
+import type { BugBoardViewProps } from "../views/board-view";
+import type { BugListItem } from "../types";
+import { STATE_COLOR } from "@/shared/bug/constants";
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+/* ------------------------------------------------------------------ */
+/* 夹具                                                                    */
+/* ------------------------------------------------------------------ */
+
+let seq = 0;
+function makeBug(overrides: Partial<BugListItem> & { id: string }): BugListItem {
+  seq += 1;
+  return {
+    identifier: `PRJ-B${seq}`,
+    title: `缺陷标题 ${seq}`,
+    description: null,
+    state: "open",
+    severity: "medium",
+    source: "manual",
+    env: null,
+    url: null,
+    totalCount: 1,
+    firstOccurAt: "2026-01-01T00:00:00.000Z",
+    lastOccurAt: "2026-01-01T00:00:00.000Z",
+    archived: false,
+    projectId: "p1",
+    storyId: null,
+    story: null,
+    assignee: null,
+    createdBy: {
+      id: "u1",
+      username: "alice",
+      email: "a@x.com",
+      avatarConfig: null,
+      bgShape: null,
+      bgColor: null,
+    },
+    labels: [],
+    boardOrder: 0,
+    createdAt: "2026-01-01T00:00:00.000Z",
+    updatedAt: "2026-01-01T00:00:00.000Z",
+    ...overrides,
+  };
+}
+
+function buildProps(
+  overrides: Partial<BugBoardViewProps> = {},
+): BugBoardViewProps & Pick<import("../views/board-view").BoardConfigDeps, "updateBug"> {
+  return {
+    columns: { open: [makeBug({ id: "b1" })], closed: [] },
+    groupBy: "state",
+    properties: ["state", "severity", "assignee"],
+    users: [],
+    onOpenBug: vi.fn(),
+    onPatchBug: vi.fn(),
+    onReorder: vi.fn<(orders: ReorderEntry[]) => Promise<void>>().mockResolvedValue(undefined),
+    // 组件内同一接线：updateBug → updateBugFn({ data: input })
+    updateBug: (input) => updateBugFn({ data: input }),
+    ...overrides,
+  };
+}
+
+/* ------------------------------------------------------------------ */
+/* ① labels 分组列禁拖（必带①，设计 §7.1 复审 P2-6）                          */
+/* ------------------------------------------------------------------ */
+
+describe("labels 分组列禁拖", () => {
+  it("groupBy=labels：columnDroppable 恒 false；state/severity/assignee 恒 true", () => {
+    const labelsConfig = buildBoardConfig(buildProps({ groupBy: "labels", columns: {} }));
+    expect(labelsConfig.columnDroppable).toBeDefined();
+    expect(labelsConfig.columnDroppable?.("标签A")).toBe(false);
+    expect(labelsConfig.columnDroppable?.("__any__")).toBe(false);
+
+    for (const dim of ["state", "severity", "assignee"] as const) {
+      const config = buildBoardConfig(buildProps({ groupBy: dim, columns: {} }));
+      expect(config.columnDroppable?.("x")).toBe(true);
+    }
+  });
+
+  it("labels 列的 drop 决策被忽略（notDroppable），提交管线只回滚不落库", async () => {
+    const b1 = makeBug({ id: "b1", labels: [{ id: "l1", name: "标签A", color: "#f00" }] });
+    const config = buildBoardConfig(buildProps({ groupBy: "labels", columns: { "标签A": [b1], "标签B": [] } }));
+
+    const decision = resolveDropCommit({
+      activeId: `标签A::${b1.id}`,
+      activeContainer: "标签A",
+      overContainer: "标签B",
+      nextValue: { "标签A": [], "标签B": [b1] },
+      columnDroppable: config.columnDroppable,
+    });
+    expect(decision).toEqual({ kind: "ignore", reason: "notDroppable" });
+
+    const previousValue = { "标签A": [b1], "标签B": [] };
+    const setColumns = vi.fn();
+    await commitDropDecision({
+      decision,
+      previousValue,
+      setColumns,
+      onDropToColumn: config.onDropToColumn,
+    });
+    // 只回滚（拖拽途中可能已乐观移入禁拖列），不落库
+    expect(setColumns).toHaveBeenCalledWith(previousValue);
+    expect(updateBugFn).not.toHaveBeenCalled();
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* ② 分组维度字段自动隐藏：groupBy=severity 时卡片不渲染 SeverityEditor       */
+/* ------------------------------------------------------------------ */
+
+describe("分组维度字段自动隐藏", () => {
+  it("groupBy=severity：卡片不含严重度编辑器（「中等」文案只在列头），状态编辑器照常渲染", () => {
+    // 列数据按 severity 维度组织：列 key = severity 值
+    render(
+      <BugBoardView
+        {...buildProps({
+          groupBy: "severity",
+          columns: { medium: [makeBug({ id: "b1", severity: "medium" })], low: [] },
+        })}
+      />,
+    );
+
+    // 列头照常显示严重度列名
+    expect(screen.getByText("中等")).toBeTruthy();
+    // 卡片内不再渲染 SeverityEditor（其触发器含严重度 label「中等」）
+    const card = screen.getByTestId("bug-board-card");
+    expect(within(card).queryByText("中等")).toBeNull();
+    // 非分组维度的行内编辑器不受影响：StateEditor 触发器含状态 label「待处理」
+    expect(within(card).getByText("待处理")).toBeTruthy();
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* ③ 拖拽失败还原（接线级：复用共享 commitDropDecision 回滚管线口径）           */
+/* ------------------------------------------------------------------ */
+
+describe("拖拽失败还原", () => {
+  it("跨列 move 落库失败：乐观列回滚 previousValue + 立即权威刷新 + 错误 toast", async () => {
+    const b1 = makeBug({ id: "b1", state: "open" });
+    updateBugFn.mockRejectedValue(new Error("network down"));
+    const onRefresh = vi.fn();
+    const config = buildBoardConfig(
+      buildProps({ columns: { open: [b1], closed: [] }, onRefresh }),
+    );
+
+    const decision = resolveDropCommit({
+      activeId: `open::${b1.id}`,
+      activeContainer: "open",
+      overContainer: "closed",
+      nextValue: { open: [], closed: [b1] },
+    });
+    expect(decision.kind).toBe("move");
+
+    const previousValue = { open: [b1], closed: [] };
+    const setColumns = vi.fn();
+    await commitDropDecision({
+      decision,
+      previousValue,
+      setColumns,
+      onDropToColumn: config.onDropToColumn,
+      onRefresh,
+    });
+
+    // 失败回滚：乐观列恢复 + 立即权威刷新（900ms 延迟刷新不执行）
+    expect(setColumns).toHaveBeenCalledWith(previousValue);
+    expect(onRefresh).toHaveBeenCalledTimes(1);
+    expect(toast.error).toHaveBeenCalled();
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* 跨列拖拽落库接线：patch 映射 + updateBugFn 调用面                            */
+/* ------------------------------------------------------------------ */
+
+describe("跨列拖拽落库接线", () => {
+  it("toGroupFieldPatch：state/severity/assignee 三维列 key → patch 映射；labels 无映射", () => {
+    expect(toGroupFieldPatch("state", "fixed")).toEqual({ state: "fixed" });
+    expect(toGroupFieldPatch("severity", "critical")).toEqual({ severity: "critical" });
+    // 未指派哨兵与 deriveBugGroupKeyFromListRow 的 assignee 归并口径一致（unassigned）
+    expect(toGroupFieldPatch("assignee", "unassigned")).toEqual({ assigneeId: null });
+    expect(toGroupFieldPatch("assignee", "u9")).toEqual({ assigneeId: "u9" });
+    expect(toGroupFieldPatch("labels", "l1")).toEqual({});
+  });
+
+  it("resolveDropCommit 跨列决策经 board-view 接线触发 updateBugFn（patch 字段=state 新值）", async () => {
+    const b1 = makeBug({ id: "b1", state: "open" });
+    // 前序用例的 mockRejectedValue 会跨 clearAllMocks 存留，此处显式覆盖为成功
+    updateBugFn.mockResolvedValue({ ...b1, state: "closed" });
+    const onPatchBug = vi.fn();
+
+    const config = buildBoardConfig(
+      buildProps({ columns: { open: [b1], closed: [] }, onPatchBug }),
+    );
+
+    const decision = resolveDropCommit({
+      activeId: `open::${b1.id}`,
+      activeContainer: "open",
+      overContainer: "closed",
+      nextValue: { open: [], closed: [b1] },
+    });
+    expect(decision.kind).toBe("move");
+
+    await commitDropDecision({
+      decision,
+      previousValue: { open: [b1], closed: [] },
+      setColumns: vi.fn(),
+      onDropToColumn: config.onDropToColumn,
+    });
+
+    expect(updateBugFn).toHaveBeenCalledTimes(1);
+    expect(updateBugFn).toHaveBeenCalledWith({
+      data: { bugId: b1.id, state: "closed" },
+    });
+    // 乐观收敛回调：行内编辑/peek/列表缓存同步（group 触发字段由 paged core refresh）
+    expect(onPatchBug).toHaveBeenCalledWith(b1.id, { state: "closed" });
+  });
+
+  it("列内 reorder 决策不触发 updateBugFn（分组字段零 patch，排序走 onReorder）", async () => {
+    const b1 = makeBug({ id: "b1" });
+    const b2 = makeBug({ id: "b2" });
+    const onReorder = vi.fn().mockResolvedValue(undefined);
+    const config = buildBoardConfig(
+      buildProps({ columns: { open: [b1, b2], closed: [] }, onReorder }),
+    );
+
+    const decision = resolveDropCommit({
+      activeId: `open::${b2.id}`,
+      activeContainer: "open",
+      overContainer: "open",
+      nextValue: { open: [b2, b1], closed: [] },
+    });
+    expect(decision.kind).toBe("reorder");
+
+    await commitDropDecision({
+      decision,
+      previousValue: { open: [b1, b2], closed: [] },
+      setColumns: vi.fn(),
+      onDropToColumn: config.onDropToColumn,
+      manualOrder: { onReorder },
+    });
+
+    expect(updateBugFn).not.toHaveBeenCalled();
+    // manualOrder 接线：目标列全列索引 → reorderBugsFn（list-view 接线）
+    expect(onReorder).toHaveBeenCalledWith([
+      { id: "b2", boardOrder: 0 },
+      { id: "b1", boardOrder: 1 },
+    ]);
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* 列 meta：state/severity 色相 tint（colorToken 派生）                        */
+/* ------------------------------------------------------------------ */
+
+describe("列 meta tint", () => {
+  it("state 列 tint 由 colorToken bg-* 色族派生（color-mix 实色）；无色相 token 回落中性", () => {
+    const config = buildBoardConfig(buildProps({ groupBy: "state" }));
+    const openTint = config.columnMeta("open")?.tint;
+    // open 的 colorToken 是 bg-blue-500/15 → tint 基色 var(--color-blue-500)
+    expect(STATE_COLOR.open).toContain("bg-blue-500");
+    expect(openTint?.backgroundColor).toContain("var(--color-blue-500)");
+
+    // closed/wontfix 的 colorToken 是 bg-muted → 中性浅底（语义类，无行内色）
+    const closedTint = config.columnMeta("closed")?.tint;
+    expect(closedTint?.className).toContain("bg-muted");
+    expect(closedTint?.backgroundColor).toBeUndefined();
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* 列尾加载更多：点击回传列 key（onLoadMoreColumn 接线）                       */
+/* ------------------------------------------------------------------ */
+
+describe("列尾加载更多接线", () => {
+  it("点击「加载更多」回传所在列 key", async () => {
+    const onLoadMoreColumn = vi.fn();
+    render(<BugBoardView {...buildProps({ onLoadMoreColumn })} />);
+
+    const buttons = screen.getAllByText("加载更多");
+    expect(buttons).toHaveLength(2);
+    await userEvent.click(buttons[0]!);
+    expect(onLoadMoreColumn).toHaveBeenCalledWith("open");
+
+    await userEvent.click(buttons[1]!);
+    expect(onLoadMoreColumn).toHaveBeenCalledWith("closed");
+  });
+});

package/src/components/bug/__tests__/bug-list-loading-defer.test.tsx

@@ -0,0 +1,85 @@
+// 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/>.
+
+// 首载动画延迟门控（follow-up A）：isLoading=true 但 400ms 内不出现
+// 「加载数据中…」动画，超时后才出现；空态不受门控（快请求直接见数据/空态）。
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { cleanup, render, screen, act } from "@testing-library/react";
+
+// createServerFn 需 tanstackStart 插件编译（vitest 无该插件），显式空实现保模块求值
+vi.mock("@/server/serverFns/bug", () => ({
+  bulkArchiveBugsFn: vi.fn(),
+  bulkDeleteBugsFn: vi.fn(),
+  bulkUpdateBugsFn: vi.fn(),
+}));
+// 行/组头/批量工具栏裁掉（各自重 import 链），本文件只测壳层 loading 门控
+vi.mock("../views/bug-list/row", () => ({ BugListRow: () => null }));
+vi.mock("../views/bug-list/group", () => ({
+  BugGroupHeader: () => null,
+  BugGroupTailRow: () => null,
+}));
+vi.mock("../views/bug-list/batch-toolbar", () => ({ BugBatchToolbar: () => null }));
+
+import { BugList } from "../views/bug-list";
+import { DEFAULT_BUG_DISPLAY_OPTIONS } from "../display/types";
+
+// jsdom 无 ResizeObserver（@tanstack/react-virtual 观察滚动容器需要）
+class NoopResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+const baseProps = {
+  groups: [],
+  displayFilters: DEFAULT_BUG_DISPLAY_OPTIONS,
+  users: [],
+  labels: [],
+  onRefresh: () => {},
+  onPatchBug: () => {},
+  onOpenBug: () => {},
+};
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  vi.stubGlobal("ResizeObserver", NoopResizeObserver);
+});
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+  vi.unstubAllGlobals();
+});
+
+describe("BugList 首载动画延迟（follow-up A）", () => {
+  it("首载在途 400ms 内不渲染「加载数据中…」，超时后出现", async () => {
+    render(<BugList {...baseProps} isLoading />);
+    await act(async () => {}); // flush effects（deferred 初始 false）
+    expect(screen.queryByText("加载数据中…")).not.toBeInTheDocument();
+
+    act(() => {
+      vi.advanceTimersByTime(400);
+    });
+    expect(screen.getByText("加载数据中…")).toBeInTheDocument();
+  });
+
+  it("isLoading=false 时空态立即渲染，不受延迟门控", () => {
+    render(<BugList {...baseProps} isLoading={false} />);
+    expect(screen.getByText("暂无 BUG")).toBeInTheDocument();
+    expect(screen.queryByText("加载数据中…")).not.toBeInTheDocument();
+  });
+});

package/src/components/bug/__tests__/bug-toolbar.test.tsx

@@ -30,6 +30,11 @@ vi.mock("@/components/project/create-project-dialog", () => ({
   CreateProjectDialog: () => null,
 }));
 
+// CSV 导出 serverFn（任务 45 起工具栏 import 该模块）：壳断言文件裁掉重依赖链
+vi.mock("@/server/serverFns/bug/bug-export", () => ({
+  exportBugsFn: vi.fn(),
+}));
+
 import { BugToolbar, type BugFilters } from "../bug-toolbar";
 import { FILTER_FIELD_CONFIGS } from "../filters";
 
@@ -111,7 +116,8 @@ describe("BugToolbar", () => {
     renderToolbar();
     const toggle = screen.getByRole("button", { name: "筛选" });
     fireEvent.click(toggle);
-    expect(await screen.findByText("添加条件")).toBeInTheDocument();
+    // 共享工厂的筛选行含桌面/窄屏两处添加入口（@max-[640px] 响应式切换），故用 All 复数查询
+    expect((await screen.findAllByText("添加条件")).length).toBeGreaterThan(0);
   });
 
   it("FilterCondition property 选项恰为规格 §5.2 字段集", () => {

package/src/components/bug/__tests__/comment-reactions.test.tsx

@@ -0,0 +1,182 @@
+// 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/>.
+
+// 任务 39（三期 BUG 线 PR-12）：BUG 评论级表情回应 UI。断言面（简报步骤 1 两断言
+// + 控制者补充的乐观更新机制）：
+// ① chips 渲染聚合：emoji + count，reacted（mine）chip 高亮（aria-pressed=true）
+// ② 点击 chip 调 toggleBugCommentReactionFn 后乐观增减：未表态立即 +1 并高亮、
+//    已表态立即 -1（减到 0 chip 移除），serverFn 权威聚合返回后覆盖
+// ③ 失败回滚 + toast.error（乐观态不残留）
+// ④ hover 快捷按钮与 picker（mock 替身）onPick 走同一 toggle 链路
+// story 死代码教训（reaction-bar 零消费者 / comment-item handleReaction 无 JSX
+// 调用点）：本测试直接渲染 CommentReactions 组件本体，接线面由 comment-item
+// 的 JSX 调用保证（本仓 tsc + 本测试共同锁住组件存在性）。
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act, cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import type { ReactionGroup } from "@/components/story/types";
+
+// ---------------------------------------------------------------------------
+// mock（vi.mock 提升：真实 serverFn / toast / emoji-picker-react 均不参与）
+// ---------------------------------------------------------------------------
+
+const h = vi.hoisted(() => ({
+  toggleBugCommentReactionFn: vi.fn(),
+  toastError: vi.fn(),
+}));
+
+vi.mock("@/server/serverFns/bug", () => ({
+  toggleBugCommentReactionFn: h.toggleBugCommentReactionFn,
+}));
+
+vi.mock("@/components/ui/toast", () => ({
+  toast: {
+    success: vi.fn(),
+    error: h.toastError,
+    warning: vi.fn(),
+    info: vi.fn(),
+    loading: vi.fn(),
+  },
+}));
+
+// emoji-picker-react 全量网格不适合 jsdom（story-collab.test 同款替身策略），
+// stub 暴露 onPick 触发口验证 picker 路径
+vi.mock("@/components/shared-kit/comments/emoji-picker", () => ({
+  EmojiPicker: ({
+    children,
+    onPick,
+  }: {
+    children: React.ReactNode;
+    onPick: (emoji: string) => void;
+  }) => (
+    <span data-testid="emoji-picker-stub" onClick={() => onPick("🔥")}>
+      {children}
+    </span>
+  ),
+}));
+
+import { CommentReactions } from "../detail/comment-reactions";
+
+// ---------------------------------------------------------------------------
+// fixtures（listCommentsFn 聚合形状：aggregateReactions 的返回值）
+// ---------------------------------------------------------------------------
+
+const BASE_GROUPS: ReactionGroup[] = [
+  { emoji: "👍", count: 2, userIds: ["u1", "u2"], reacted: false },
+  { emoji: "🎉", count: 1, userIds: ["me"], reacted: true },
+];
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe("CommentReactions", () => {
+  it("评论下方 chips 渲染聚合：emoji+count，mine（reacted）高亮 aria-pressed", () => {
+    render(<CommentReactions commentId="c1" reactions={BASE_GROUPS} />);
+
+    const thumb = screen.getByTestId("reaction-chip-👍");
+    const party = screen.getByTestId("reaction-chip-🎉");
+
+    // emoji + count 聚合渲染
+    expect(thumb).toHaveTextContent("2");
+    expect(party).toHaveTextContent("1");
+    // mine 高亮：reacted=true → aria-pressed=true；未表态 chip 为 false
+    expect(thumb).toHaveAttribute("aria-pressed", "false");
+    expect(party).toHaveAttribute("aria-pressed", "true");
+    // 按 count 降序排序（story chips 同款：多表态在前）
+    expect(thumb.compareDocumentPosition(party) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
+  it("点击未表态 chip 调 toggle serverFn 后乐观 +1 高亮，权威聚合返回后覆盖", async () => {
+    let resolveFn!: (groups: ReactionGroup[]) => void;
+    h.toggleBugCommentReactionFn.mockImplementationOnce(
+      () =>
+        new Promise<ReactionGroup[]>((resolve) => {
+          resolveFn = resolve;
+        }),
+    );
+
+    render(<CommentReactions commentId="c1" reactions={BASE_GROUPS} />);
+    fireEvent.click(screen.getByTestId("reaction-chip-👍"));
+
+    // 乐观：serverFn 未返回前立即 +1 且高亮
+    const optimistic = screen.getByTestId("reaction-chip-👍");
+    expect(optimistic).toHaveTextContent("3");
+    expect(optimistic).toHaveAttribute("aria-pressed", "true");
+    expect(h.toggleBugCommentReactionFn).toHaveBeenCalledWith({
+      data: { commentId: "c1", emoji: "👍" },
+    });
+
+    // 权威聚合返回后覆盖（仍是 3，保持高亮）
+    await act(async () => {
+      resolveFn([
+        { emoji: "👍", count: 3, userIds: ["u1", "u2", "me"], reacted: true },
+        BASE_GROUPS[1]!,
+      ]);
+    });
+    expect(screen.getByTestId("reaction-chip-👍")).toHaveTextContent("3");
+    expect(screen.getByTestId("reaction-chip-👍")).toHaveAttribute("aria-pressed", "true");
+  });
+
+  it("点击已表态 chip 乐观 -1，减到 0 chip 移除", async () => {
+    // 权威结果：🎉 被撤销后只剩 👍
+    h.toggleBugCommentReactionFn.mockResolvedValueOnce([BASE_GROUPS[0]!]);
+
+    render(<CommentReactions commentId="c1" reactions={BASE_GROUPS} />);
+    fireEvent.click(screen.getByTestId("reaction-chip-🎉"));
+
+    // 乐观：1 → 0，chip 立即移除
+    expect(screen.queryByTestId("reaction-chip-🎉")).toBeNull();
+
+    // 权威聚合返回后仍无 🎉 chip
+    await act(async () => {});
+    expect(screen.queryByTestId("reaction-chip-🎉")).toBeNull();
+    // 未被操作的 👍 chip 不受影响
+    expect(screen.getByTestId("reaction-chip-👍")).toHaveTextContent("2");
+  });
+
+  it("toggle 失败回滚乐观态 + toast.error", async () => {
+    h.toggleBugCommentReactionFn.mockRejectedValueOnce(new Error("网络错误"));
+
+    render(<CommentReactions commentId="c1" reactions={BASE_GROUPS} />);
+    // hover 快捷 ❤️（不在聚合中）→ 乐观新增 chip
+    fireEvent.click(within(screen.getByTestId("quick-reactions")).getByRole("button", { name: "❤️" }));
+
+    expect(screen.getByTestId("reaction-chip-❤️")).toHaveTextContent("1");
+
+    await act(async () => {});
+    // 回滚：chip 消失，错误提示弹出
+    expect(screen.queryByTestId("reaction-chip-❤️")).toBeNull();
+    expect(h.toastError).toHaveBeenCalledTimes(1);
+  });
+
+  it("picker onPick 走同一 toggle 链路（乐观新增）", async () => {
+    h.toggleBugCommentReactionFn.mockResolvedValueOnce([
+      ...BASE_GROUPS,
+      { emoji: "🔥", count: 1, userIds: ["me"], reacted: true },
+    ]);
+
+    render(<CommentReactions commentId="c1" reactions={BASE_GROUPS} />);
+    fireEvent.click(screen.getByTestId("emoji-picker-stub"));
+
+    expect(h.toggleBugCommentReactionFn).toHaveBeenCalledWith({
+      data: { commentId: "c1", emoji: "🔥" },
+    });
+    expect(screen.getByTestId("reaction-chip-🔥")).toHaveTextContent("1");
+    await act(async () => {});
+  });
+});