@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/bug/__tests__/date-and-lightbox.test.tsx

@@ -0,0 +1,96 @@
+// 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/>.
+
+// 任务 37（三期 BUG 线 PR-11 收尾）：简报两断言——
+// ① 日期 chip 行内短格式归一：单值/between 均经 i18n key（zh「M月D日」），
+//   不再是 date-fns 硬编码 MM/dd（设计 §5.2：行内短格式 = i18n key）
+// ② 详情截图 lightbox：点击缩略图开 Dialog（role=dialog 含大图 img），
+//   Esc 关闭（禁原生 dialog 规约，同 harness/image-lightbox 模式）
+// 测试 locale 为 zh（setup.ts overwriteGetLocale）
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent, within, waitFor } from "@testing-library/react";
+import { TooltipProvider } from "@/components/ui/tooltip";
+
+import { AppliedFilters, type FilterCondition } from "../filters";
+import { ErrorContext } from "../detail/error-context";
+
+function renderApplied(conditions: FilterCondition[]) {
+  return render(
+    <TooltipProvider>
+      <AppliedFilters conditions={conditions} onRemove={() => {}} onClearAll={() => {}} />
+    </TooltipProvider>,
+  );
+}
+
+function renderErrorContext() {
+  return render(
+    <TooltipProvider>
+      <ErrorContext
+        bugId="bg-1"
+        title="TypeError: boom"
+        stack={null}
+        url="https://app.example.com/page"
+        userAgent="Mozilla/5.0"
+        env="prod"
+        screenshotBlobId="blob-1"
+      />
+    </TooltipProvider>,
+  );
+}
+
+describe("日期 chip 行内短格式（i18n key 归一）", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("单值 chip 经 bug_inline_date_short 渲染（10月1日），不再是 MM/dd", () => {
+    renderApplied([{ id: "d1", property: "createdDate", operator: "is", value: "2026-10-01" }]);
+    expect(screen.getByText("10月1日")).toBeInTheDocument();
+    // 归一前的硬编码格式不得残留（可证伪断言）
+    expect(screen.queryByText("10/01")).not.toBeInTheDocument();
+  });
+
+  it("between 范围 chip 经共享 i18n key 渲染（9月1日 ~ 9月30日）", () => {
+    renderApplied([
+      { id: "d2", property: "lastOccurAt", operator: "between", value: "2026-09-01,2026-09-30" },
+    ]);
+    expect(screen.getByText("9月1日 ~ 9月30日")).toBeInTheDocument();
+    expect(screen.queryByText("09/01 ~ 09/30")).not.toBeInTheDocument();
+  });
+});
+
+describe("详情截图 lightbox", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("点击缩略图开 Dialog（role=dialog 含大图 img），Esc 关闭", async () => {
+    renderErrorContext();
+    const thumbnail = screen.getByTestId("bug-screenshot-thumbnail");
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+
+    fireEvent.click(thumbnail);
+    const dialog = await screen.findByRole("dialog");
+    const img = within(dialog).getByRole("img");
+    expect(img.getAttribute("src")).toContain("/api/bugs/screenshot");
+    expect(img.getAttribute("src")).toContain(encodeURIComponent("blob-1"));
+    expect(img.className).toContain("object-contain");
+
+    fireEvent.keyDown(dialog, { key: "Escape" });
+    await waitFor(() => expect(screen.queryByRole("dialog")).not.toBeInTheDocument());
+  });
+});

package/src/components/bug/__tests__/export-entry.test.tsx

@@ -0,0 +1,217 @@
+// 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/>.
+
+// 任务 45（BUG-F CSV）：「更多」菜单导出入口启用——与 testcase 侧 export-entry
+// 同构抽查。归档视图（projectId=__archived__）原样透传给 exportBugsFn（服务端
+// 直达 buildListWhere 成员圈定）。
+import { act } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { TooltipProvider } from "@/components/ui/tooltip";
+
+const H = vi.hoisted(() => ({
+  exportBugsFn: vi.fn(),
+  toastWarning: vi.fn(),
+  toastErrorFn: vi.fn(),
+}));
+
+vi.mock("@/components/project/create-project-dialog", () => ({
+  CreateProjectDialog: () => null,
+}));
+vi.mock("@/server/serverFns/bug/bug-export", () => ({
+  exportBugsFn: H.exportBugsFn,
+}));
+vi.mock("@/components/ui/toast", () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: H.toastWarning,
+    info: vi.fn(),
+    loading: vi.fn(),
+    message: vi.fn(),
+    dismiss: vi.fn(),
+    promise: vi.fn(),
+  },
+}));
+vi.mock("@/lib/toast-error", () => ({ toastError: H.toastErrorFn }));
+
+import { BugToolbar, type BugFilters } from "../bug-toolbar";
+
+const CSV =
+  "\uFEFF标识,标题,状态,严重级别,来源,负责人,标签,发生次数,最近发生\r\nWEB-BUG1,白屏,open,critical,manual,alice,\"登录,P0\",3,2026-01-01T00:00:00.000Z";
+
+const PROJECTS = [
+  { id: "proj_1", name: "项目A", displayId: "PA", icon: "folder" },
+];
+
+function renderToolbar(overrides: Partial<React.ComponentProps<typeof BugToolbar>> = {}) {
+  return render(
+    <TooltipProvider>
+      <BugToolbar
+        filters={{ projectId: "proj_1", search: "白屏" } as BugFilters}
+        filterConditions={[{ id: "b1", property: "severity", operator: "is", value: "critical" }]}
+        onFilterChange={vi.fn()}
+        onFilterConditionsChange={vi.fn()}
+        projects={PROJECTS}
+        users={[]}
+        labels={[]}
+        total={42}
+        onCreateClick={vi.fn()}
+        {...overrides}
+      />
+    </TooltipProvider>,
+  );
+}
+
+/** 菜单项查询：portal 异步挂载，waitFor 内按 menuitem 过滤 */
+const menuItem = (label: string) =>
+  waitFor(() => {
+    const item = screen
+      .getAllByText(label)
+      .map((el) => el.closest('[role="menuitem"]'))
+      .find(Boolean);
+    if (!item) throw new Error(`菜单项「${label}」未挂载`);
+    return item;
+  });
+
+describe("BugToolbar CSV 导出入口（任务 45，testcase 同构）", () => {
+  let clickedAnchors: HTMLAnchorElement[];
+  let createObjectURLMock: ReturnType<typeof vi.fn>;
+  let revokeObjectURLMock: ReturnType<typeof vi.fn>;
+  const savedUrlMethods: { create?: unknown; revoke?: unknown } = {};
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    clickedAnchors = [];
+    createObjectURLMock = vi.fn(() => "blob:mock-url");
+    revokeObjectURLMock = vi.fn();
+    savedUrlMethods.create = (URL as unknown as Record<string, unknown>).createObjectURL;
+    savedUrlMethods.revoke = (URL as unknown as Record<string, unknown>).revokeObjectURL;
+    (URL as unknown as Record<string, unknown>).createObjectURL = createObjectURLMock;
+    (URL as unknown as Record<string, unknown>).revokeObjectURL = revokeObjectURLMock;
+    vi.spyOn(HTMLElement.prototype, "click").mockImplementation(function mockClick(this: HTMLElement) {
+      if (this instanceof HTMLAnchorElement) clickedAnchors.push(this as HTMLAnchorElement);
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+    const urlRecord = URL as unknown as Record<string, unknown>;
+    urlRecord.createObjectURL = savedUrlMethods.create;
+    urlRecord.revokeObjectURL = savedUrlMethods.revoke;
+    vi.unstubAllGlobals();
+  });
+
+  it("菜单项启用，点击调 exportBugsFn（scope/筛选/搜索透传）并触发 Blob 下载", async () => {
+    H.exportBugsFn.mockResolvedValue({ csv: CSV, truncated: false });
+    const user = userEvent.setup();
+    renderToolbar();
+    await user.click(screen.getByRole("button", { name: "更多" }));
+
+    const item = await menuItem("导出 CSV");
+    expect(item.hasAttribute("data-disabled")).toBe(false);
+    expect(item.textContent).not.toContain("即将上线");
+
+    await user.click(item);
+    await waitFor(() => expect(H.exportBugsFn).toHaveBeenCalledTimes(1));
+    // 归档视图特殊值原样透传（服务端直达 buildListWhere）；其余=当前筛选/搜索 + locale
+    expect(H.exportBugsFn).toHaveBeenCalledWith({
+      data: {
+        projectId: "proj_1",
+        filters: JSON.stringify([{ id: "b1", property: "severity", operator: "is", value: "critical" }]),
+        search: "白屏",
+        locale: "zh",
+      },
+    });
+
+    expect(createObjectURLMock).toHaveBeenCalledTimes(1);
+    const blob = createObjectURLMock.mock.calls[0]![0] as Blob;
+    expect(blob).toBeInstanceOf(Blob);
+    expect(blob.type).toBe("text/csv;charset=utf-8");
+    // jsdom Blob.text() 解码会剥 BOM（BOM 前缀断言在 server/__tests__/csv-export.test.ts）
+    expect(await blob.text()).toContain('"登录,P0"');
+    expect(await blob.text()).toContain("2026-01-01T00:00:00.000Z");
+    await waitFor(() => expect(clickedAnchors.length).toBe(1));
+    expect(clickedAnchors[0]!.download).toMatch(/^bugs-\d{8}\.csv$/);
+    expect(revokeObjectURLMock).toHaveBeenCalledWith("blob:mock-url");
+    expect(H.toastWarning).not.toHaveBeenCalled();
+  });
+
+  it("归档视图：projectId=__archived__ 原样透传", async () => {
+    H.exportBugsFn.mockResolvedValue({ csv: CSV, truncated: false });
+    const user = userEvent.setup();
+    renderToolbar({ filters: { projectId: "__archived__", search: undefined } });
+    await user.click(screen.getByRole("button", { name: "更多" }));
+    await user.click(await menuItem("导出 CSV"));
+    await waitFor(() => expect(H.exportBugsFn).toHaveBeenCalledTimes(1));
+    expect(H.exportBugsFn).toHaveBeenCalledWith({
+      data: {
+        projectId: "__archived__",
+        filters: JSON.stringify([{ id: "b1", property: "severity", operator: "is", value: "critical" }]),
+        search: undefined,
+        locale: "zh",
+      },
+    });
+  });
+
+  it("truncated=true 时 toast 提示「已导出前 20000 行」", async () => {
+    H.exportBugsFn.mockResolvedValue({ csv: CSV, truncated: true });
+    const user = userEvent.setup();
+    renderToolbar();
+    await user.click(screen.getByRole("button", { name: "更多" }));
+    await user.click(await menuItem("导出 CSV"));
+    await waitFor(() => expect(H.toastWarning).toHaveBeenCalledTimes(1));
+    expect(H.toastWarning.mock.calls[0]![0]).toMatch(/20000/);
+  });
+
+  it("失败 toastError 兜底且 busy 复位可再次导出（行为级调用计数）", async () => {
+    H.exportBugsFn.mockRejectedValue(new Error("网络错误"));
+    const user = userEvent.setup();
+    renderToolbar();
+    await user.click(screen.getByRole("button", { name: "更多" }));
+    await user.click(await menuItem("导出 CSV"));
+    await waitFor(() => expect(H.toastErrorFn).toHaveBeenCalledTimes(1));
+    expect(createObjectURLMock).not.toHaveBeenCalled();
+    // 失败复位后可重试：行为级断言——收敛式重试点击直至第二次调用发生（零
+    // DOM disabled 渲染时序依赖，同 testcase 侧根除方案）。每轮自愈两种瞬态：
+    // 菜单未开 → 重开；项仍挂 pointer-events:none（Base UI 弹层开启初瞬）→
+    // 等+重试
+    await act(async () => {});
+    await waitFor(
+      async () => {
+        const item = screen
+          .queryAllByText("导出 CSV")
+          .map((el) => el.closest('[role="menuitem"]'))
+          .find(Boolean);
+        if (!item) {
+          await user.click(screen.getByRole("button", { name: "更多" }));
+          throw new Error("菜单未开，已重开待重试");
+        }
+        try {
+          await user.click(item);
+        } catch {
+          throw new Error("菜单项瞬态不可交互，待重试");
+        }
+        expect(H.exportBugsFn).toHaveBeenCalledTimes(2);
+      },
+      { timeout: 3000 },
+    );
+    expect(H.toastErrorFn).toHaveBeenCalledTimes(2);
+  });
+});

package/src/components/bug/__tests__/filters-compat.test.tsx

@@ -0,0 +1,157 @@
+// 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-3 任务 12）：bug 切换共享
+// createFiltersModule 前先对现组件断言「改造前」的渲染输出，切换后同一
+// 断言零改动通过 = 存量视图（bug_filter_views.filters Json）反序列化后的
+// 胶囊数与值渲染（状态/严重度/来源色 chip、指派人头像、日期短格式——任务 37
+// 起行内短格式归一为 i18n key「M月D日」，原 MM/DD 契约由本门同步换锁）
+// 逐项一致。fixture 与 list-kit/filters/__tests__/types.test.ts 的 bug
+// 9 字段形状同源（id 沿用旧 generateConditionId 的 bfc_ 前缀）。
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { AppliedFilters, BugFilterToggle, type FilterCondition } from "../filters";
+import type { UserBrief } from "@/components/story/types";
+
+const FIXTURE: FilterCondition[] = [
+  { id: "bfc_1", property: "title", operator: "contains", value: "超时" },
+  { id: "bfc_2", property: "state", operator: "is", value: "open" },
+  { id: "bfc_3", property: "severity", operator: "is_not", value: "low" },
+  { id: "bfc_4", property: "assigneeId", operator: "is_not_empty", value: "" },
+  { id: "bfc_5", property: "labelId", operator: "is_any_of", value: "lb1,lb2" },
+  { id: "bfc_6", property: "source", operator: "is", value: "manual" },
+  { id: "bfc_7", property: "env", operator: "is", value: "prod" },
+  { id: "bfc_8", property: "createdDate", operator: "on_or_after", value: "2026-10-01" },
+  { id: "bfc_9", property: "lastOccurAt", operator: "between", value: "2026-09-01,2026-09-30" },
+];
+
+const USERS: UserBrief[] = [
+  { id: "u1", username: "张三", email: "z@t.dev", avatarConfig: null, bgShape: null, bgColor: null },
+];
+
+const LABELS = [
+  { id: "lb1", name: "前端", color: "#ff0000" },
+  { id: "lb2", name: "后端", color: "#00ff00" },
+];
+
+function renderApplied(conditions: FilterCondition[], props: Partial<React.ComponentProps<typeof AppliedFilters>> = {}) {
+  return render(
+    <TooltipProvider>
+      <AppliedFilters
+        conditions={conditions}
+        onRemove={() => {}}
+        onClearAll={() => {}}
+        users={USERS}
+        labels={LABELS}
+        {...props}
+      />
+    </TooltipProvider>,
+  );
+}
+
+describe("BUG 筛选存量视图兼容（AppliedFilters 渲染契约）", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("9 字段存量 fixture：胶囊数 = 条件数，含清除全部按钮", () => {
+    const { container } = renderApplied(FIXTURE);
+    const capsules = container.querySelectorAll("span.h-7.items-center.rounded-full");
+    expect(capsules).toHaveLength(9);
+    expect(screen.getByText("清除所有结果")).toBeInTheDocument();
+  });
+
+  it("状态/严重度/来源色 chip：色 token 与文案照旧（STATE_COLOR/SEVERITY_COLOR/SOURCE_COLOR）", () => {
+    renderApplied(FIXTURE);
+
+    const stateChip = screen.getByText("待处理");
+    expect(stateChip.className).toContain("bg-blue-500/15");
+    expect(stateChip.className).toContain("text-blue-600");
+
+    const severityChip = screen.getByText("较低");
+    expect(severityChip.className).toContain("bg-muted");
+    expect(severityChip.className).toContain("text-muted-foreground");
+
+    const sourceChip = screen.getByText("手动");
+    expect(sourceChip.className).toContain("bg-muted");
+    expect(sourceChip.className).toContain("text-muted-foreground");
+  });
+
+  it("指派人头像 chip：无 avatarConfig 时首字母 fallback + username 文本", () => {
+    renderApplied([{ id: "bfc_a1", property: "assigneeId", operator: "is", value: "u1" }]);
+    expect(screen.getByText("张三")).toBeInTheDocument();
+    const initial = screen.getByText("张");
+    expect(initial.className).toContain("rounded-full");
+  });
+
+  it("指派人 __none__ chip：未指派 + muted 前景", () => {
+    renderApplied([{ id: "bfc_a2", property: "assigneeId", operator: "is", value: "__none__" }]);
+    const chip = screen.getByText("未指派");
+    expect(chip.className).toContain("text-muted-foreground");
+  });
+
+  it("is_not_empty 胶囊无值段（不渲染未指派/头像）", () => {
+    renderApplied(FIXTURE);
+    expect(screen.queryByText("未指派")).not.toBeInTheDocument();
+    expect(screen.queryByText("张三")).not.toBeInTheDocument();
+  });
+
+  it("标签 chip：色点 backgroundColor + 标签名", () => {
+    const { container } = renderApplied(FIXTURE);
+    expect(screen.getByText("前端")).toBeInTheDocument();
+    expect(screen.getByText("后端")).toBeInTheDocument();
+    const dot = container.querySelector('span[style="background-color: rgb(255, 0, 0);"]');
+    expect(dot).not.toBeNull();
+  });
+
+  it("文本字段（title/env）原样渲染不拆分", () => {
+    renderApplied(FIXTURE);
+    expect(screen.getByText("超时")).toBeInTheDocument();
+    expect(screen.getByText("prod")).toBeInTheDocument();
+  });
+
+  it("日期 chip：单值/between 均经 i18n 短格式（10月1日 / 9月1日 ~ 9月30日，任务 37 归一）", () => {
+    renderApplied(FIXTURE);
+    expect(screen.getByText("10月1日")).toBeInTheDocument();
+    expect(screen.getByText("9月1日 ~ 9月30日")).toBeInTheDocument();
+    // 归一前硬编码 MM/dd 不得残留
+    expect(screen.queryByText("10/01")).not.toBeInTheDocument();
+  });
+
+  it("空条件不渲染", () => {
+    const { container } = renderApplied([]);
+    expect(container.querySelector("span.h-7")).toBeNull();
+  });
+});
+
+describe("BUG 筛选开关（FilterToggle 渲染契约）", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("aria-label 筛选 + 激活计数 badge", () => {
+    const { container } = render(
+      <TooltipProvider>
+        <BugFilterToggle visible={false} conditions={FIXTURE} onToggle={() => {}} />
+      </TooltipProvider>,
+    );
+    expect(screen.getByRole("button", { name: "筛选" })).toBeInTheDocument();
+    const badge = container.querySelector("span.rounded-full");
+    expect(badge?.textContent).toBe("9");
+  });
+});