@allbluecn/web-app 0.5.1 → 0.6.1

package/src/components/story/inline-editors/__tests__/dependency-type-select.test.tsx

@@ -0,0 +1,155 @@
+// 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/>.
+
+const MockResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+if (typeof globalThis.ResizeObserver === "undefined") {
+  (globalThis as any).ResizeObserver = MockResizeObserver;
+}
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { DependencyTypeSelect } from "../dependency-type-select";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string, vars?: Record<string, string>) =>
+      vars ? `${key}(${Object.values(vars).join(",")})` : key,
+  }),
+}));
+
+vi.mock("@/components/ui/tooltip", () => ({
+  TooltipProvider: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  Tooltip: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  TooltipContent: ({ children, ...props }: { children: React.ReactNode; side?: string; className?: string }) => (
+    <div data-tooltip="content" {...props}>
+      {children}
+    </div>
+  ),
+  TooltipTrigger: ({ asChild, children }: { asChild?: boolean; children: React.ReactNode }) =>
+    asChild ? children : <div>{children}</div>,
+}));
+
+vi.mock("@/lib/utils", () => ({
+  cn: (...args: string[]) => args.filter(Boolean).join(" "),
+}));
+
+function renderSelect(props: Partial<React.ComponentProps<typeof DependencyTypeSelect>>) {
+  return render(
+    <TooltipProvider>
+      <DependencyTypeSelect onChange={vi.fn()} {...props} />
+    </TooltipProvider>,
+  );
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("DependencyTypeSelect", () => {
+  describe("trigger variant", () => {
+    it("无 value 时显示 Waypoints 图标占位 + placeholder 文案", () => {
+      renderSelect({ variant: "trigger" });
+      expect(screen.getByRole("button", { name: "dependency.typePlaceholder" })).toBeInTheDocument();
+    });
+
+    it("有 value 时显示对应 option 的 label", () => {
+      renderSelect({ variant: "trigger", value: "blocking" });
+      expect(screen.getByRole("button", { name: "dependency.options.blocking" })).toBeInTheDocument();
+    });
+
+    it("受控 open：外部控制 Popover 开合", () => {
+      const onOpenChange = vi.fn();
+      renderSelect({ variant: "trigger", open: true, onOpenChange });
+      expect(screen.getByText("dependency.options.blocked_by")).toBeInTheDocument();
+
+      fireEvent.click(screen.getByText("dependency.options.blocking"));
+      expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it("非受控 open：点击 trigger 打开 Popover", async () => {
+      const onChange = vi.fn();
+      renderSelect({ variant: "trigger", onChange });
+      expect(screen.queryByText("dependency.options.blocked_by")).not.toBeInTheDocument();
+      fireEvent.click(screen.getByRole("button", { name: "dependency.typePlaceholder" }));
+      await waitFor(() => {
+        expect(screen.getByText("dependency.options.blocked_by")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("badge variant", () => {
+    it("有 value 时显示 badgeLabel + identifier 插值", () => {
+      renderSelect({ variant: "badge", value: "blocked_by", identifier: "AB-123" });
+      expect(screen.getByText("dependency.labels.blocked_by(AB-123)")).toBeInTheDocument();
+    });
+
+    it("有 currentIdentifier 时渲染含 tooltipLabel 的 TooltipContent", () => {
+      renderSelect({
+        variant: "badge",
+        value: "blocking",
+        identifier: "AB-456",
+        currentIdentifier: "AB-789",
+      });
+      expect(screen.getByText("dependency.tooltips.blocking(AB-456,AB-789)")).toBeInTheDocument();
+    });
+
+    it("无 currentIdentifier 时不渲染 TooltipContent", () => {
+      renderSelect({ variant: "badge", value: "finishes_before", identifier: "AB-001" });
+      expect(screen.getByText("dependency.labels.finishes_before(AB-001)")).toBeInTheDocument();
+      expect(screen.queryByText("dependency.tooltips.finishes_before")).not.toBeInTheDocument();
+    });
+
+    it("无 value 时显示 placeholder", () => {
+      renderSelect({ variant: "badge" });
+      expect(screen.getByText("dependency.typePlaceholder")).toBeInTheDocument();
+    });
+  });
+
+  describe("选项点击", () => {
+    it("点击 PopoverContent 内选项触发 onChange 并关闭 Popover", () => {
+      const onChange = vi.fn();
+      const onOpenChange = vi.fn();
+      renderSelect({ variant: "trigger", value: "blocked_by", onChange, onOpenChange, open: true });
+      const contentBtns = [...document.querySelectorAll("[role=dialog] button")];
+      expect(contentBtns.length).toBeGreaterThan(0);
+      fireEvent.click(contentBtns.find((b) => b.textContent?.includes("dependency.options.blocking"))!);
+      expect(onChange).toHaveBeenCalledWith("blocking");
+      expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it("已选中项显示 font-medium 标记", () => {
+      renderSelect({ variant: "trigger", value: "starts_after", open: true });
+      const checkedBtn = [...document.querySelectorAll("[role=dialog] button")].find(
+        (b) => b.textContent?.includes("dependency.options.starts_after") && b.className.includes("font-medium"),
+      );
+      expect(checkedBtn).toBeTruthy();
+    });
+  });
+
+  describe("分组", () => {
+    it("Popover 内含两个 optionGroups 标题", () => {
+      renderSelect({ variant: "trigger", open: true });
+      expect(screen.getByText("dependency.optionGroups.dependsOn")).toBeInTheDocument();
+      expect(screen.getByText("dependency.optionGroups.dependents")).toBeInTheDocument();
+    });
+  });
+});

package/src/components/story/inline-editors/__tests__/labels-editor.test.tsx

@@ -0,0 +1,155 @@
+// 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 { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { LabelsEditor } from "../labels-editor";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+vi.mock("@/lib/utils", () => ({
+  cn: (...args: string[]) => args.filter(Boolean).join(" "),
+}));
+
+vi.mock("@/lib/auth/auth-client", () => ({
+  useSession: () => ({ data: { user: { hasAiKey: true } } }),
+}));
+
+vi.mock("sonner", () => ({
+  toast: { error: vi.fn(), success: vi.fn() },
+}));
+
+const mocks = vi.hoisted(() => ({
+  suggestStoryLabelsFn: vi.fn(),
+  createLabelFn: vi.fn(),
+}));
+
+vi.mock("@/server/serverFns/story", () => ({
+  suggestStoryLabelsFn: mocks.suggestStoryLabelsFn,
+  createLabelFn: mocks.createLabelFn,
+}));
+
+const LABELS = [
+  { id: "l1", name: "性能", color: "#ef4444" },
+  { id: "l2", name: "安全", color: "#3b82f6" },
+];
+
+const DEFAULT_PROPS: React.ComponentProps<typeof LabelsEditor> = {
+  labelIds: [],
+  labels: LABELS,
+  onChange: vi.fn(),
+  variant: "button",
+  aiContext: { name: () => "优化登录速度" },
+};
+
+function renderEditor(overrides: Partial<React.ComponentProps<typeof LabelsEditor>> = {}) {
+  return render(
+    <TooltipProvider>
+      <LabelsEditor {...DEFAULT_PROPS} onChange={overrides.onChange ?? vi.fn()} {...overrides} />
+    </TooltipProvider>,
+  );
+}
+
+function openPopover(): HTMLElement {
+  const trigger = document.querySelector("button[data-slot=tooltip-trigger]")!;
+  fireEvent.click(trigger);
+  return document.querySelector("[data-slot=popover-content]")! as HTMLElement;
+}
+
+function withText(root: HTMLElement, text: string): HTMLElement {
+  const buttons = root.querySelectorAll("button");
+  for (const b of buttons) {
+    if (b.textContent?.includes(text)) {
+      return b as HTMLElement;
+    }
+  }
+  throw new Error(`button with text ${text} not found`);
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("LabelsEditor AI 入口", () => {
+  it("无 aiContext 时不渲染 AI 按钮", () => {
+    renderEditor({ aiContext: undefined });
+    const dialog = openPopover();
+    expect(dialog.textContent).not.toContain("aiGenerate");
+  });
+
+  it("有 aiContext 时 popover 内出现 AI 生成按钮", () => {
+    renderEditor();
+    const dialog = openPopover();
+    expect(dialog.textContent).toContain("aiGenerate");
+  });
+
+  it("生成后展示候选（已有 + 新），默认全选，应用时新标签懒创建并合并 onChange", async () => {
+    mocks.suggestStoryLabelsFn.mockResolvedValue({
+      existingLabels: [{ id: "l1", name: "性能", color: "#ef4444" }],
+      newNames: ["登录"],
+    });
+    mocks.createLabelFn.mockResolvedValue({ id: "l-new", name: "登录", color: "#10b981" });
+    const onChange = vi.fn();
+    renderEditor({ onChange });
+
+    const dialog = openPopover();
+    fireEvent.click(withText(dialog, "aiGenerate"));
+
+    await waitFor(() => {
+      expect(mocks.suggestStoryLabelsFn).toHaveBeenCalledTimes(1);
+    });
+    const call = mocks.suggestStoryLabelsFn.mock.calls[0][0] as any;
+    expect(call.data.name).toBe("优化登录速度");
+
+    await waitFor(() => {
+      expect(screen.getByText("登录")).toBeTruthy();
+    });
+
+    fireEvent.click(withText(document.querySelector("[data-slot=popover-content]")!, "aiApply"));
+    await waitFor(() => {
+      expect(mocks.createLabelFn).toHaveBeenCalledWith({ data: { name: "登录" } });
+      expect(onChange).toHaveBeenCalledWith(["l1", "l-new"]);
+    });
+  });
+
+  it("生成失败展示错误态且可重试", async () => {
+    mocks.suggestStoryLabelsFn.mockRejectedValueOnce(new Error("AI 标签输出解析失败"));
+    renderEditor();
+
+    const dialog = openPopover();
+    fireEvent.click(withText(dialog, "aiGenerate"));
+    await waitFor(() => {
+      expect(document.querySelector("[data-slot=popover-content]")!.textContent).toContain("aiFailed");
+    });
+
+    mocks.suggestStoryLabelsFn.mockResolvedValue({ existingLabels: [], newNames: [] });
+    fireEvent.click(withText(document.querySelector("[data-slot=popover-content]")!, "aiRegenerate"));
+    await waitFor(() => {
+      expect(mocks.suggestStoryLabelsFn).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  it("name 为空时不发请求", () => {
+    renderEditor({ aiContext: { name: () => "  " } });
+    const dialog = openPopover();
+    fireEvent.click(withText(dialog, "aiGenerate"));
+    expect(mocks.suggestStoryLabelsFn).not.toHaveBeenCalled();
+  });
+});

package/src/components/story/inline-editors/__tests__/priority-editor.test.tsx

@@ -0,0 +1,173 @@
+// 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/>.
+
+const MockResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+if (typeof globalThis.ResizeObserver === "undefined") {
+  (globalThis as any).ResizeObserver = MockResizeObserver;
+}
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { PriorityEditor } from "../priority-editor";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+vi.mock("@/lib/utils", () => ({
+  cn: (...args: string[]) => args.filter(Boolean).join(" "),
+}));
+
+function renderEditor(props: Partial<React.ComponentProps<typeof PriorityEditor>>) {
+  return render(
+    <TooltipProvider>
+      <PriorityEditor value="medium" onChange={vi.fn()} {...props} />
+    </TooltipProvider>,
+  );
+}
+
+function getPopoverDialog() {
+  return document.querySelector("[role=dialog]") as HTMLElement | null;
+}
+
+function getOptionButtons() {
+  const dialog = getPopoverDialog();
+  if (!dialog) return [];
+  return [...dialog.querySelectorAll("button")];
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("PriorityEditor", () => {
+  it("chip variant 渲染当前 priority 的 label", () => {
+    renderEditor({ value: "high" });
+    expect(screen.getByText("priority.high")).toBeInTheDocument();
+  });
+
+  it("urgent 状态渲染对应 chip", () => {
+    renderEditor({ value: "urgent" });
+    expect(screen.getByText("priority.urgent")).toBeInTheDocument();
+  });
+
+  it("none 状态渲染对应 chip", () => {
+    renderEditor({ value: "none" });
+    expect(screen.getByText("priority.none")).toBeInTheDocument();
+  });
+
+  it("点击 chip 打开 Popover 显示所有可选 priority", () => {
+    render(
+      <TooltipProvider>
+        <PriorityEditor value="medium" onChange={vi.fn()} />
+      </TooltipProvider>,
+    );
+    fireEvent.click(screen.getByText("priority.medium"));
+    expect(getPopoverDialog()).not.toBeNull();
+    const buttons = getOptionButtons();
+    expect(buttons.map((b) => b.textContent)).toEqual(
+      expect.arrayContaining([
+        expect.stringContaining("priority.urgent"),
+        expect.stringContaining("priority.high"),
+        expect.stringContaining("priority.medium"),
+        expect.stringContaining("priority.low"),
+        expect.stringContaining("priority.none"),
+      ]),
+    );
+  });
+
+  it("点击不同 priority 触发 onChange 并关闭 Popover", () => {
+    const onChange = vi.fn();
+    render(
+      <TooltipProvider>
+        <PriorityEditor value="medium" onChange={onChange} />
+      </TooltipProvider>,
+    );
+    fireEvent.click(screen.getByText("priority.medium"));
+    expect(getPopoverDialog()).not.toBeNull();
+    const buttons = getOptionButtons();
+    const urgentBtn = buttons.find((b) => b.textContent?.includes("priority.urgent"));
+    fireEvent.click(urgentBtn!);
+    expect(onChange).toHaveBeenCalledWith("urgent");
+    expect(getPopoverDialog()).toBeNull();
+  });
+
+  it("已选中的 priority 在 Popover 中带 Check 图标（active 类）", () => {
+    render(
+      <TooltipProvider>
+        <PriorityEditor value="low" onChange={vi.fn()} />
+      </TooltipProvider>,
+    );
+    fireEvent.click(screen.getByText("priority.low"));
+    expect(getPopoverDialog()).not.toBeNull();
+    const checkedBtn = getOptionButtons().find((b) => {
+      return b.textContent?.includes("priority.low") && b.className.includes("font-medium");
+    });
+    expect(checkedBtn).toBeTruthy();
+  });
+
+  describe("multi 模式", () => {
+    it("selected 为空时显示当前 priority 的 chip", () => {
+      renderEditor({ mode: "multi", selected: [] });
+      expect(screen.getByText("priority.medium")).toBeInTheDocument();
+    });
+
+    it("selected 有值时渲染对应 priority 的多个 chip", () => {
+      renderEditor({ mode: "multi", selected: ["high", "urgent"], onMultiChange: vi.fn() });
+      expect(screen.getByText("priority.high")).toBeInTheDocument();
+      expect(screen.getByText("priority.urgent")).toBeInTheDocument();
+    });
+
+    it("点击 multi 选项触发 onMultiChange 而非 onChange", () => {
+      const onChange = vi.fn();
+      const onMultiChange = vi.fn();
+      render(
+        <TooltipProvider>
+          <PriorityEditor
+            value="medium"
+            mode="multi"
+            selected={["medium"]}
+            onChange={onChange}
+            onMultiChange={onMultiChange}
+          />
+        </TooltipProvider>,
+      );
+      fireEvent.click(screen.getByText("priority.medium"));
+      expect(getPopoverDialog()).not.toBeNull();
+      const buttons = getOptionButtons();
+      const targetBtn = buttons.find((b) => b.textContent?.includes("priority.high"));
+      fireEvent.click(targetBtn!);
+      expect(onMultiChange).toHaveBeenCalledWith("high");
+      expect(onChange).not.toHaveBeenCalled();
+      expect(getPopoverDialog()).not.toBeNull();
+    });
+  });
+
+  it("variant=button 时渲染 InlineTrigger（无 chip 边框）", () => {
+    renderEditor({ variant: "button", value: "urgent" });
+    expect(screen.getByText("priority.urgent")).toBeInTheDocument();
+    const chip = screen.getByText("priority.urgent").closest("span.border-border");
+    expect(chip).toBeNull();
+  });
+});

package/src/components/story/inline-editors/__tests__/state-editor.test.tsx

@@ -0,0 +1,174 @@
+// 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/>.
+
+const MockResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+if (typeof globalThis.ResizeObserver === "undefined") {
+  (globalThis as any).ResizeObserver = MockResizeObserver;
+}
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { StateEditor } from "../state-editor";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+vi.mock("@/lib/utils", () => ({
+  cn: (...args: string[]) => args.filter(Boolean).join(" "),
+}));
+
+function renderEditor(props: Partial<React.ComponentProps<typeof StateEditor>>) {
+  return render(
+    <TooltipProvider>
+      <StateEditor value="todo" onChange={vi.fn()} {...props} />
+    </TooltipProvider>,
+  );
+}
+
+function getPopoverDialog() {
+  return document.querySelector("[role=dialog]") as HTMLElement | null;
+}
+
+function getOptionButtons() {
+  const dialog = getPopoverDialog();
+  if (!dialog) return [];
+  return [...dialog.querySelectorAll("button")];
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("StateEditor", () => {
+  it("chip variant 渲染当前 state 的 label 作为 chip", () => {
+    renderEditor({ value: "in_progress" });
+    expect(screen.getByText("state.in_progress")).toBeInTheDocument();
+  });
+
+  it("todo 状态渲染对应 chip", () => {
+    renderEditor({ value: "todo" });
+    expect(screen.getByText("state.todo")).toBeInTheDocument();
+  });
+
+  it("backlog 状态渲染对应 chip", () => {
+    renderEditor({ value: "backlog" });
+    expect(screen.getByText("state.backlog")).toBeInTheDocument();
+  });
+
+  it("点击 chip 打开 Popover 显示所有可选 state", async () => {
+    render(
+      <TooltipProvider>
+        <StateEditor value="todo" onChange={vi.fn()} />
+      </TooltipProvider>,
+    );
+    fireEvent.click(screen.getByText("state.todo"));
+    expect(getPopoverDialog()).not.toBeNull();
+    const buttons = getOptionButtons();
+    expect(buttons.map((b) => b.textContent)).toEqual(
+      expect.arrayContaining([
+        expect.stringContaining("state.backlog"),
+        expect.stringContaining("state.todo"),
+        expect.stringContaining("state.in_progress"),
+        expect.stringContaining("state.done"),
+        expect.stringContaining("state.cancelled"),
+      ]),
+    );
+  });
+
+  it("点击不同 state 触发 onChange 并关闭 Popover", async () => {
+    const onChange = vi.fn();
+    render(
+      <TooltipProvider>
+        <StateEditor value="todo" onChange={onChange} />
+      </TooltipProvider>,
+    );
+    fireEvent.click(screen.getByText("state.todo"));
+    expect(getPopoverDialog()).not.toBeNull();
+    const buttons = getOptionButtons();
+    const doneBtn = buttons.find((b) => b.textContent?.includes("state.done"));
+    fireEvent.click(doneBtn!);
+    expect(onChange).toHaveBeenCalledWith("done");
+    expect(getPopoverDialog()).toBeNull();
+  });
+
+  it("已选中的 state 在 Popover 中带 Check 图标（active 类）", () => {
+    render(
+      <TooltipProvider>
+        <StateEditor value="done" onChange={vi.fn()} />
+      </TooltipProvider>,
+    );
+    fireEvent.click(screen.getByText("state.done"));
+    expect(getPopoverDialog()).not.toBeNull();
+    const checkedBtn = getOptionButtons().find((b) => {
+      return b.textContent?.includes("state.done") && b.className.includes("font-medium");
+    });
+    expect(checkedBtn).toBeTruthy();
+  });
+
+  describe("multi 模式", () => {
+    it("selected 为空时显示当前 state 的 chip", () => {
+      renderEditor({ mode: "multi", selected: [] });
+      expect(screen.getByText("state.todo")).toBeInTheDocument();
+    });
+
+    it("selected 有值时渲染对应 state 的多个 chip", () => {
+      renderEditor({ mode: "multi", selected: ["todo", "in_progress"], onMultiChange: vi.fn() });
+      expect(screen.getByText("state.todo")).toBeInTheDocument();
+      expect(screen.getByText("state.in_progress")).toBeInTheDocument();
+    });
+
+    it("点击 multi 选项触发 onMultiChange 而非 onChange", () => {
+      const onChange = vi.fn();
+      const onMultiChange = vi.fn();
+      render(
+        <TooltipProvider>
+          <StateEditor
+            value="todo"
+            mode="multi"
+            selected={["todo"]}
+            onChange={onChange}
+            onMultiChange={onMultiChange}
+          />
+        </TooltipProvider>,
+      );
+      fireEvent.click(screen.getByText("state.todo"));
+      expect(getPopoverDialog()).not.toBeNull();
+      const buttons = getOptionButtons();
+      const targetBtn = buttons.find((b) => b.textContent?.includes("state.in_progress"));
+      fireEvent.click(targetBtn!);
+      expect(onMultiChange).toHaveBeenCalledWith("in_progress");
+      expect(onChange).not.toHaveBeenCalled();
+      expect(getPopoverDialog()).not.toBeNull();
+    });
+  });
+
+  it("variant=button 时渲染 InlineTrigger（无 chip 边框）", () => {
+    renderEditor({ variant: "button", value: "todo" });
+    expect(screen.getByText("state.todo")).toBeInTheDocument();
+    // InlineTrigger 走 Button，外层无 chip 边框（span.border-border 不存在）
+    const chip = screen.getByText("state.todo").closest("span.border-border");
+    expect(chip).toBeNull();
+  });
+});