@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/bug/__tests__/fix-request-race.test.tsx

@@ -0,0 +1,396 @@
+// 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/>.
+
+// 任务 36（三期 BUG 线 PR-11）：requestBugFix 竞态守卫 + 批量条 Shell 换壳 busy +
+// navTitle 滚动渐显阈值。断言面（简报步骤 1 + 控制者补充）：
+// ① 竞态守卫：发起 AI 修复后立即切换 bug（实例卸载 / bugId 变更两形态），旧响应
+//   resolve 后不 toast 不 setState——「已发起」提示不得弹在切换后的 BUG 上
+//   （守卫 = seq + bugIdRef + unmountedRef 三重校验）
+// ② 对照组：bug 未切换时响应正常 toast（证明守卫没有误杀正常链路）
+// ③ 批量进行中（busy=true）：归档/删除按钮 disabled，容器为共享 Shell sticky 条
+//   （testcase 任务 28 换壳先例同构）
+// ④ navTitle：data-slot=bug-detail-scroll 滚动越阈值（严格 >8）渐显、回顶渐隐
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { TooltipProvider } from "@/components/ui/tooltip";
+
+// 整详情挂载拉起 lazy 编辑器等异步面，放宽用例超时（bug-detail-collab 同款）
+vi.setConfig({ testTimeout: 30_000 });
+
+// ---------------------------------------------------------------------------
+// mock（vi.mock 提升：真实 serverFn / toast / session 均不参与）
+// ---------------------------------------------------------------------------
+
+const h = vi.hoisted(() => ({
+  requestBugFixFn: vi.fn(),
+  updateBugFn: vi.fn(),
+  archiveBugFn: vi.fn(),
+  deleteBugFn: vi.fn(),
+  toastSuccess: vi.fn(),
+  toastError: vi.fn(),
+  toastWarning: vi.fn(),
+  useSession: vi.fn(),
+}));
+
+vi.mock("@/server/serverFns/bug", () => h);
+vi.mock("@/components/ui/toast", () => ({
+  toast: {
+    success: h.toastSuccess,
+    error: h.toastError,
+    warning: h.toastWarning,
+    info: vi.fn(),
+    loading: vi.fn(),
+  },
+}));
+vi.mock("@/components/shared-kit/auth/auth-client", () => ({
+  useSession: h.useSession,
+}));
+vi.mock("@/lib/collab/provider", () => ({
+  getOrCreateProvider: vi.fn(),
+}));
+// BugPanelHeader 的关闭 Link（路由组件无 RouterProvider 上下文，peek-modes 同款替身）
+vi.mock("@tanstack/react-router", () => ({
+  useNavigate: () => vi.fn(),
+  Link: ({ to, ...rest }: { to?: string } & React.ComponentProps<"a">) => (
+    <a {...rest} href={to} />
+  ),
+}));
+
+// 非本任务被测面：详情子分区替身（bug-detail-collab.test 同款）
+vi.mock("@/components/bug/detail/props-section", () => ({
+  PropsSection: () => <div data-testid="props-section-stub" />,
+}));
+vi.mock("@/components/bug/detail/reproduce-steps-view", () => ({
+  ReproduceStepsView: () => <div data-testid="repro-steps-stub" />,
+}));
+vi.mock("@/components/bug/detail/error-context", () => ({
+  ErrorContext: () => null,
+}));
+vi.mock("@/components/bug/detail/events-timeline", () => ({
+  EventsTimeline: () => null,
+}));
+vi.mock("@/components/bug/detail/repro-report-card", () => ({
+  ReproReportCard: () => null,
+}));
+vi.mock("@/components/bug/detail/fix-timeline", () => ({
+  FixTimeline: () => null,
+}));
+vi.mock("@/components/bug/detail/regression-section", () => ({
+  RegressionSection: () => null,
+}));
+vi.mock("@/components/bug/detail/activity-tabs", () => ({
+  ActivityTabs: () => null,
+}));
+vi.mock("@/components/tiptap/notion-like", () => ({
+  NotionDocEditor: () => <div data-testid="notion-editor-stub" />,
+}));
+
+import { BugDetailBody } from "../detail/bug-detail-body";
+import { BugPanelHeader } from "../bug-panel-header";
+import { BugBatchToolbar } from "../views/bug-list/batch-toolbar";
+import type { BugDetail } from "../types";
+
+const bugRow = (over: Partial<BugDetail> = {}): BugDetail => ({
+  id: "bg-1",
+  identifier: "PRJ-B1",
+  sequenceId: 1,
+  title: "旧标题",
+  description: JSON.stringify({ html: "<p>描述</p>", markdown: "描述" }),
+  state: "open",
+  severity: "medium",
+  source: "manual",
+  env: null,
+  url: null,
+  totalCount: 1,
+  firstOccurAt: "2026-01-01T12:00:00.000Z",
+  lastOccurAt: "2026-01-01T12:00:00.000Z",
+  archived: false,
+  projectId: "pr-1",
+  storyId: null,
+  story: null,
+  assignee: null,
+  createdBy: { id: "u-1", username: "甲", email: "a@x", avatarConfig: null, bgShape: null, bgColor: null },
+  labels: [],
+  boardOrder: 0,
+  createdAt: "2026-01-01T12:00:00.000Z",
+  updatedAt: "2026-01-02T12:00:00.000Z",
+  reproduceSteps: null,
+  fingerprint: null,
+  userAgent: null,
+  stackSummary: null,
+  repoHints: null,
+  archivedAt: null,
+  updatedBy: null,
+  screenshotBlobId: null,
+  ...over,
+});
+
+/** 消费方同构挂载：peek/路由均 key={bug.id}（换 id 强制重建） */
+function BugDetailHarness({ bug }: { bug: BugDetail }) {
+  return <BugDetailBody key={bug.id} bug={bug} users={[]} labels={[]} onBugUpdate={vi.fn()} />;
+}
+
+function renderDetail(bug: BugDetail) {
+  return render(
+    <TooltipProvider>
+      <BugDetailHarness bug={bug} />
+    </TooltipProvider>,
+  );
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  h.updateBugFn.mockResolvedValue({ bug: {}, activities: [] });
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+// ---------------------------------------------------------------------------
+// ① requestBugFix 竞态守卫
+// ---------------------------------------------------------------------------
+
+describe("requestBugFix 竞态守卫", () => {
+  it("发起修复后切换 bug（实例卸载）：旧响应 resolve 不 toast", async () => {
+    let resolve!: (v: { status: string }) => void;
+    h.requestBugFixFn.mockImplementationOnce(
+      () => new Promise<{ status: string }>((r) => { resolve = r; }),
+    );
+    const { rerender } = renderDetail(bugRow());
+    fireEvent.click(await screen.findByTestId("request-fix-button"));
+    expect(h.requestBugFixFn).toHaveBeenCalledWith({ data: { bugId: "bg-1" } });
+
+    // 立即切换 bug（key={bug.id}：旧详情实例卸载，unmountedRef 置位）
+    rerender(
+      <TooltipProvider>
+        <BugDetailHarness bug={bugRow({ id: "bg-2", identifier: "PRJ-B2", title: "新 BUG" })} />
+      </TooltipProvider>,
+    );
+    await act(async () => {
+      resolve({ status: "created" });
+    });
+    expect(h.toastSuccess).not.toHaveBeenCalled();
+    expect(h.toastWarning).not.toHaveBeenCalled();
+    expect(h.toastError).not.toHaveBeenCalled();
+  });
+
+  it("发起修复后切换 bug（实例复用、bugId 变更）：旧响应 resolve 不 toast", async () => {
+    let resolve!: (v: { status: string }) => void;
+    h.requestBugFixFn.mockImplementationOnce(
+      () => new Promise<{ status: string }>((r) => { resolve = r; }),
+    );
+    // 不带 key 渲染：换 bug 时实例复用（防御性路径，bugIdRef 校验）
+    const { rerender } = render(
+      <TooltipProvider>
+        <BugDetailBody bug={bugRow()} users={[]} labels={[]} onBugUpdate={vi.fn()} />
+      </TooltipProvider>,
+    );
+    fireEvent.click(await screen.findByTestId("request-fix-button"));
+
+    rerender(
+      <TooltipProvider>
+        <BugDetailBody
+          bug={bugRow({ id: "bg-2", identifier: "PRJ-B2", title: "新 BUG" })}
+          users={[]}
+          labels={[]}
+          onBugUpdate={vi.fn()}
+        />
+      </TooltipProvider>,
+    );
+    await act(async () => {
+      resolve({ status: "created" });
+    });
+    expect(h.toastSuccess).not.toHaveBeenCalled();
+    expect(h.toastWarning).not.toHaveBeenCalled();
+    expect(h.toastError).not.toHaveBeenCalled();
+  });
+
+  it("对照：bug 未切换时响应正常 toast（守卫不误杀正常链路）", async () => {
+    h.requestBugFixFn.mockResolvedValueOnce({ status: "created" });
+    renderDetail(bugRow());
+    fireEvent.click(await screen.findByTestId("request-fix-button"));
+    await waitFor(() => expect(h.toastSuccess).toHaveBeenCalledOnce());
+  });
+
+  // 任务 37 回补（任务 36 审查 Important）：同 tick 双击时 `if (fixRequesting) return`
+  // 的 state 守卫拦不住（闭包内仍是旧值），唯 seq 序号可判旧——两次发起分别
+  // resolve，断言旧响应按 seq 丢弃（仅一次 toast + 按钮态只由最新请求回置）
+  it("同 tick 双击：旧 seq 响应按序丢弃，仅最新请求 toast 并回置按钮", async () => {
+    const resolvers: Array<(v: { status: string }) => void> = [];
+    h.requestBugFixFn.mockImplementation(
+      () => new Promise<{ status: string }>((r) => { resolvers.push(r); }),
+    );
+    renderDetail(bugRow());
+    const button = await screen.findByTestId("request-fix-button");
+    // 同 tick 两次 dispatchEvent：均在 React flush 前执行（state 守卫双放行）
+    act(() => {
+      button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+    expect(h.requestBugFixFn).toHaveBeenCalledTimes(2);
+
+    // 旧 seq（第 1 次）先 resolve：按序丢弃——不 toast、不回置（按钮仍禁用）
+    await act(async () => {
+      resolvers[0]({ status: "created" });
+    });
+    expect(h.toastSuccess).not.toHaveBeenCalled();
+    expect((screen.getByTestId("request-fix-button") as HTMLButtonElement).disabled).toBe(true);
+
+    // 最新 seq（第 2 次）resolve：一次 toast + 按钮回置
+    await act(async () => {
+      resolvers[1]({ status: "created" });
+    });
+    await waitFor(() => expect(h.toastSuccess).toHaveBeenCalledOnce());
+    await waitFor(() =>
+      expect((screen.getByTestId("request-fix-button") as HTMLButtonElement).disabled).toBe(false),
+    );
+  });
+
+  it("同 tick 双击且旧请求 reject：catch 分支 stale 守卫不弹错误 toast", async () => {
+    const resolvers: Array<(v: { status: string }) => void> = [];
+    const rejecters: Array<(e: Error) => void> = [];
+    h.requestBugFixFn.mockImplementation(
+      () =>
+        new Promise<{ status: string }>((resolve, reject) => {
+          resolvers.push(resolve);
+          rejecters.push(reject);
+        }),
+    );
+    renderDetail(bugRow());
+    const button = await screen.findByTestId("request-fix-button");
+    act(() => {
+      button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+    expect(h.requestBugFixFn).toHaveBeenCalledTimes(2);
+
+    // 旧 seq（第 1 次）reject：catch 内 stale() 为真——不弹错误 toast
+    await act(async () => {
+      rejecters[0](new Error("网络中断"));
+    });
+    expect(h.toastError).not.toHaveBeenCalled();
+    expect((screen.getByTestId("request-fix-button") as HTMLButtonElement).disabled).toBe(true);
+
+    // 最新 seq 正常完成：成功 toast 恰一次，错误 toast 全程为零
+    await act(async () => {
+      resolvers[1]({ status: "created" });
+    });
+    await waitFor(() => expect(h.toastSuccess).toHaveBeenCalledOnce());
+    expect(h.toastError).not.toHaveBeenCalled();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// ② 批量条 Shell 换壳 + busy 接线
+// ---------------------------------------------------------------------------
+
+const batchProps = {
+  selectedCount: 2,
+  totalLoaded: 5,
+  allSelected: false,
+  selectedIds: ["bg-1", "bg-2"],
+  users: [],
+  labels: [],
+  onToggleAll: vi.fn(),
+  onArchive: vi.fn(),
+  onDelete: vi.fn(),
+  onBulkUpdate: vi.fn(),
+  onClearSelection: vi.fn(),
+};
+
+describe("BugBatchToolbar 共享 Shell 换壳 + busy", () => {
+  it("容器为共享 Shell sticky 条（sticky bottom-0），busy=true 时归档/删除按钮 disabled", () => {
+    const { container } = render(
+      <TooltipProvider>
+        <BugBatchToolbar {...batchProps} busy />
+      </TooltipProvider>,
+    );
+    const bar = container.querySelector("div.sticky");
+    expect(bar).not.toBeNull();
+    expect(bar!.className).toContain("bottom-0");
+    expect((screen.getByRole("button", { name: "归档" }) as HTMLButtonElement).disabled).toBe(true);
+    expect((screen.getByRole("button", { name: "删除" }) as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it("busy=false 时归档/删除按钮可用（对照）", () => {
+    render(
+      <TooltipProvider>
+        <BugBatchToolbar {...batchProps} busy={false} />
+      </TooltipProvider>,
+    );
+    expect((screen.getByRole("button", { name: "归档" }) as HTMLButtonElement).disabled).toBe(false);
+    expect((screen.getByRole("button", { name: "删除" }) as HTMLButtonElement).disabled).toBe(false);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// ③ navTitle 滚动渐显阈值
+// ---------------------------------------------------------------------------
+
+describe("BugPanelHeader navTitle 滚动渐显", () => {
+  it("scrollTop 严格 >8 渐显（opacity-100）、阈值内与回顶渐隐（opacity-0）", () => {
+    const { getByTestId, container, unmount } = render(
+      <TooltipProvider>
+        <BugPanelHeader bugId="bg-1" identifier="PRJ-B1" navTitle="PRJ-B1 旧标题" />
+      </TooltipProvider>,
+    );
+    // 滚动源须在 header 所在面板根内（scope 校验同真实 peek/路由结构：
+    // header 与 BugDetailBody 共享面板根）
+    const slot = document.createElement("div");
+    slot.dataset.slot = "bug-detail-scroll";
+    container.appendChild(slot);
+    const title = getByTestId("bug-nav-title");
+    expect(title.className).toContain("opacity-0");
+
+    const setScrollTop = (v: number) => {
+      Object.defineProperty(slot, "scrollTop", { value: v, configurable: true });
+      fireEvent.scroll(slot);
+    };
+    // 阈值内（=8 不渐显）
+    setScrollTop(8);
+    expect(title.className).toContain("opacity-0");
+    // 越阈值渐显
+    setScrollTop(9);
+    expect(title.className).toContain("opacity-100");
+    expect(title.className).not.toContain("opacity-0");
+    // 回顶渐隐
+    setScrollTop(0);
+    expect(title.className).toContain("opacity-0");
+
+    slot.remove();
+    unmount();
+  });
+
+  it("非 bug-detail-scroll 滚动源不触发渐显（capture 监听的 slot 过滤）", () => {
+    const { getByTestId, container, unmount } = render(
+      <TooltipProvider>
+        <BugPanelHeader bugId="bg-1" identifier="PRJ-B1" navTitle="PRJ-B1 旧标题" />
+      </TooltipProvider>,
+    );
+    // story 滚动源（跨模块 capture 监听不串扰）
+    const other = document.createElement("div");
+    other.dataset.slot = "story-detail-scroll";
+    container.appendChild(other);
+    const title = getByTestId("bug-nav-title");
+    Object.defineProperty(other, "scrollTop", { value: 100, configurable: true });
+    fireEvent.scroll(other);
+    expect(title.className).toContain("opacity-0");
+    other.remove();
+    unmount();
+  });
+});