10-01 · 单测策略：114 个 spec 的分工

// vitest.config.ts:1-21
import { defineConfig } from "vitest/config";
import vue from "@vitejs/plugin-vue";
import { workspaceAlias } from "./scripts/config/aliases";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: workspaceAlias
  },
  test: {
    environment: "jsdom",
    globals: true,
    setupFiles: ["./vitest.setup.ts"],
    exclude: [
      "tests/e2e/**",
      "node_modules/**",
      "**/node_modules/**",
      "dist/**"
    ]
  }
});

// vitest.setup.ts:1-21
import { defineComponent, h } from "vue";
import { vi } from "vitest";

// 全局 mock @iconify/vue，解决 mdi.ts 使用 addCollection 的问题
vi.mock("@iconify/vue", () => ({
  Icon: defineComponent({
    name: "MockIconifyIcon",
    inheritAttrs: false,
    props: {
      icon: {
        type: String,
        required: true
      }
    },
    setup(props, { attrs }) {
      return () => h("svg", { ...attrs, "data-icon": props.icon });
    }
  }),
  addCollection: vi.fn()
}));

// packages/xiaoye-primitives/__tests__/use-overlay-stack.spec.ts:8-26
// useOverlayStack 内部注册 onBeforeUnmount，需要挂在真实组件实例上
function mountWithOverlayStack() {
  const host = document.createElement("div");
  document.body.appendChild(host);

  let entry: ReturnType<typeof useOverlayStack> | undefined;
  const Host = defineComponent({
    setup() {
      entry = useOverlayStack();
      return () => h("div");
    }
  });

  const app = createApp(Host);
  app.mount(host);
  mountedApps.push(app);

  return { entry: entry! };
}

// packages/xiaoye-primitives/__tests__/use-overlay-stack.spec.ts:35-82
describe("useOverlayStack zIndex 响应式", () => {
  it("打开前预读 -1，openLayer 后 computed 立即更新", () => {
    const { entry } = mountWithOverlayStack();

    expect(entry.zIndex.value).toBe(-1);

    entry.openLayer();
    expect(entry.zIndex.value).toBeGreaterThan(0);

    entry.closeLayer();
    expect(entry.zIndex.value).toBe(-1);
  });

  it("close 后 reopen 拿到更大的新 zIndex（computed 不残留旧缓存）", () => {
    const { entry } = mountWithOverlayStack();

    entry.openLayer();
    const firstZIndex = entry.zIndex.value;

    entry.closeLayer();
    entry.openLayer();

    expect(entry.zIndex.value).toBeGreaterThan(firstZIndex);
  });

  it("isTopMost 语义保持：只有已打开且位于栈顶的 entry 为 true", () => {
    const first = mountWithOverlayStack();
    const second = mountWithOverlayStack();

    // 未打开的 entry 恒为 false
    expect(first.entry.isTopMost()).toBe(false);
    expect(second.entry.isTopMost()).toBe(false);

    first.entry.openLayer();
    expect(first.entry.isTopMost()).toBe(true);

    second.entry.openLayer();
    expect(first.entry.isTopMost()).toBe(false);
    expect(second.entry.isTopMost()).toBe(true);

    second.entry.closeLayer();
    expect(first.entry.isTopMost()).toBe(true);
    expect(second.entry.isTopMost()).toBe(false);

    first.entry.closeLayer();
    expect(first.entry.isTopMost()).toBe(false);
  });
});

// packages/xiaoye-primitives/__tests__/use-floating-visibility.spec.ts:1-19
import { describe, expect, it } from "vitest";
import { useFloatingVisibility } from "../src/composables/use-floating-visibility";

describe("useFloatingVisibility isLeaveAnimating 守卫", () => {
  it("关闭动画期间（isLeaveAnimating 为 true）toggle 不应重新打开面板", () => {
    const floating = useFloatingVisibility({
      isLeaveAnimating: () => true
    });

    floating.open();
    expect(floating.visible.value).toBe(true);

    // 模拟真实浏览器：关闭后离开动画尚未结束
    floating.close();
    expect(floating.visible.value).toBe(false);

    floating.toggle();
    expect(floating.visible.value).toBe(false);
  });

// packages/components/button/__tests__/button.spec.ts:59-100
  it("会归一化互斥的视觉 props，并只保留 link 语义", () => {
    const wrapper = mount(XyButton, {
      props: {
        plain: true,
        text: true,
        link: true,
        bg: true
      }
    });

    expect(wrapper.classes()).toContain("is-link");
    expect(wrapper.classes()).not.toContain("is-plain");
    expect(wrapper.classes()).not.toContain("is-text");
    expect(wrapper.classes()).not.toContain("is-has-bg");
  });

  it("会在开发态提示冲突 props 和缺失的 icon-only 可访问名称", () => {
    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});

    mount(XyButton, {
      props: {
        plain: true,
        text: true,
        link: true,
        bg: true,
        circle: true,
        icon: "mdi:plus"
      }
    });

    expect(warn).toHaveBeenCalledWith(
      expect.stringContaining("`plain`、`text`、`link` 同时传入时会按 `link > text > plain` 归一化。")
    );
    expect(warn).toHaveBeenCalledWith(
      expect.stringContaining("`bg` 仅在 `text` 模式下生效。")
    );
    expect(warn).toHaveBeenCalledWith(
      expect.stringContaining("纯图标按钮需要提供 `aria-label` 或 `aria-labelledby`。")
    );

    warn.mockRestore();
  });

// packages/components/button/__tests__/button.spec.ts:184-204
  it("支持非 button 标签的键盘触发语义", async () => {
    const wrapper = mount(XyButton, {
      props: {
        tag: "div"
      },
      slots: {
        default: "自定义按钮"
      }
    });

    await wrapper.trigger("keydown", {
      key: "Enter"
    });
    await wrapper.trigger("keydown", {
      key: " "
    });

    expect(wrapper.attributes("role")).toBe("button");
    expect(wrapper.attributes("tabindex")).toBe("0");
    expect(wrapper.emitted("click")).toHaveLength(2);
  });

// packages/components/select/__tests__/select.spec.ts:94-112
  it("支持键盘选择高亮项", async () => {
    const wrapper = mountSelect(XySelect, {
      attachTo: document.body,
      props: {
        options: [
          { label: "管理员", value: "admin" },
          { label: "成员", value: "member" }
        ]
      }
    });

    const trigger = wrapper.find(".xy-select__trigger");

    await trigger.trigger("keydown", { key: "ArrowDown" });
    await trigger.trigger("keydown", { key: "ArrowDown" });
    await trigger.trigger("keydown", { key: "Enter" });

    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual(["member"]);
  });

// packages/components/select/__tests__/select.spec.ts:483-512
  it("在可搜索模式下支持键盘关闭下拉", async () => {
    const wrapper = mountSelect(XySelect, {
      attachTo: document.body,
      props: {
        searchable: true,
        options: [
          { label: "管理员", value: "admin" },
          { label: "成员", value: "member" },
          { label: "访客", value: "guest" }
        ]
      }
    });

    await wrapper.find(".xy-select__trigger").trigger("click");

    const searchInput = document.body.querySelector(
      ".xy-select__search input"
    ) as HTMLInputElement | null;

    if (!searchInput) {
      throw new Error("missing search input");
    }

    searchInput.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
    await nextTick();
    await nextTick();

    expect(document.body.querySelector(".xy-select__dropdown")).toBeNull();
    expect(wrapper.emitted("blur")).toBeTruthy();
  });

// packages/components/message/__tests__/message.spec.ts:91-133
  it("支持 beforeClose 拦截程序化关闭", async () => {
    const beforeClose = vi.fn((done: (cancel?: boolean) => void) => done(true));
    const handle = XyMessage({
      message: "待拦截消息",
      duration: 0,
      beforeClose
    });

    await flushMessage();

    handle.close();
    await flushMessage();

    expect(beforeClose).toHaveBeenCalledTimes(1);
    expect(getMessages()).toHaveLength(1);
  });

  it("支持 groupKey + render 合并富内容消息", async () => {
    const first = XyMessage({
      render: () => h("strong", { class: "render-node" }, "同步进行中"),
      groupKey: "sync-task",
      grouping: true,
      duration: 0
    });

    await flushMessage();

    const second = XyMessage({
      render: () => h("strong", { class: "render-node" }, "同步完成"),
      groupKey: "sync-task",
      grouping: true,
      type: "success",
      duration: 0
    });

    await flushMessage();

    expect(second).toBe(first);
    expect(getMessages()).toHaveLength(1);
    expect(document.body.querySelector(".render-node")?.textContent).toBe("同步完成");
    expect(document.body.querySelector(".xy-message__badge")?.textContent).toBe("2");
    expect(document.body.querySelector(".xy-message--success")).not.toBeNull();
  });

// packages/components/charts/__tests__/charts.spec.ts:6-21
const echartsCoreMock = vi.hoisted(() => {
  const chart = {
    setOption: vi.fn(),
    showLoading: vi.fn(),
    hideLoading: vi.fn(),
    resize: vi.fn(),
    dispose: vi.fn(),
    on: vi.fn()
  };

  return {
    chart,
    init: vi.fn(() => chart),
    use: vi.fn()
  };
});

// packages/components/charts/__tests__/charts.spec.ts:88-131
vi.mock("echarts/core", () => ({
  init: echartsCoreMock.init,
  use: echartsCoreMock.use
}));

vi.mock("echarts/charts", () => ({
  LineChart: echartsModuleTokens.LineChart,
  BarChart: echartsModuleTokens.BarChart,
  PieChart: echartsModuleTokens.PieChart,
  ScatterChart: echartsModuleTokens.ScatterChart,
  RadarChart: echartsModuleTokens.RadarChart,
  GaugeChart: echartsModuleTokens.GaugeChart,
  FunnelChart: echartsModuleTokens.FunnelChart
}));

vi.mock("echarts/components", () => ({
  AriaComponent: echartsModuleTokens.AriaComponent,
  AxisPointerComponent: echartsModuleTokens.AxisPointerComponent,
  DataZoomComponent: echartsModuleTokens.DataZoomComponent,
  DataZoomInsideComponent: echartsModuleTokens.DataZoomInsideComponent,
  DataZoomSliderComponent: echartsModuleTokens.DataZoomSliderComponent,
  DatasetComponent: echartsModuleTokens.DatasetComponent,
  GridComponent: echartsModuleTokens.GridComponent,
  LegendComponent: echartsModuleTokens.LegendComponent,
  MarkAreaComponent: echartsModuleTokens.MarkAreaComponent,
  MarkLineComponent: echartsModuleTokens.MarkLineComponent,
  MarkPointComponent: echartsModuleTokens.MarkPointComponent,
  PolarComponent: echartsModuleTokens.PolarComponent,
  RadarComponent: echartsModuleTokens.RadarComponent,
  TitleComponent: echartsModuleTokens.TitleComponent,
  ToolboxComponent: echartsModuleTokens.ToolboxComponent,
  TransformComponent: echartsModuleTokens.TransformComponent
}));

vi.mock("echarts/features", () => ({
  LabelLayout: echartsModuleTokens.LabelLayout,
  UniversalTransition: echartsModuleTokens.UniversalTransition
}));

vi.mock("echarts/renderers", () => ({
  CanvasRenderer: echartsModuleTokens.CanvasRenderer,
  SVGRenderer: echartsModuleTokens.SVGRenderer
}));

// packages/components/video-player/__tests__/video-player.spec.ts:5-37
const videoMock = vi.hoisted(() => ({
  on: vi.fn(),
  src: vi.fn(),
  load: vi.fn(),
  play: vi.fn(),
  pause: vi.fn(),
  dispose: vi.fn(),
  constructor: vi.fn(() => ({
    on: videoMock.on,
    src: videoMock.src,
    load: videoMock.load,
    play: videoMock.play,
    pause: videoMock.pause,
    dispose: videoMock.dispose
  }))
}));

vi.mock("video.js", () => ({
  default: videoMock.constructor
}));

describe("XyVideoPlayer", () => {
  it("挂载时初始化 player，并转发基本事件绑定", () => {
    const wrapper = mount(XyVideoPlayer, {
      props: {
        sources: [{ src: "/demo.mp4", type: "video/mp4" }]
      }
    });

    expect(videoMock.constructor).toHaveBeenCalledTimes(1);
    expect(videoMock.on).toHaveBeenCalled();
    expect(wrapper.emitted("init")).toHaveLength(1);
  });

// packages/components/upload/__tests__/upload.spec.ts:8-44
vi.stubGlobal(
  "URL",
  Object.assign(globalThis.URL, {
    createObjectURL: vi.fn(() => `blob:mock-${Math.random()}`),
    revokeObjectURL: vi.fn()
  })
);

describe("XyUpload", () => {
  it("支持 fileList 双向绑定和上传成功", async () => {
    const wrapper = mount(XyUpload, {
      props: {
        fileList: [],
        httpRequest: () => Promise.resolve({ ok: true })
      }
    });

    const input = wrapper.find('input[type="file"]');
    const file = new File(["hello"], "avatar.png", { type: "image/png" });

    Object.defineProperty(input.element, "files", {
      configurable: true,
      value: [file]
    });

    await input.trigger("change");
    await nextTick();
    await flushPromises();

    const latestFiles = wrapper.emitted("update:fileList")?.at(-1)?.[0] as
      | Array<{ status?: string }>
      | undefined;

    expect(latestFiles).toHaveLength(1);
    expect(latestFiles?.[0]?.status).toBe("success");
    expect(wrapper.text()).toContain("avatar.png");
  });

// node_modules/vitest/dist/chunks/test.CTcmp4Su.js:2393-2394（节选）
    if (isPresent.requestAnimationFrame) {
        timers.requestAnimationFrame = _global.requestAnimationFrame;
    }
// node_modules/vitest/dist/chunks/test.CTcmp4Su.js:3628（节选）
        const toFake = Object.keys(this._fakeTimers.timers).filter((timer) => timer !== "nextTick" && timer !== "queueMicrotask");

column/2-08-Playground-源码级联调.md                        （首次引 vitest.config.ts 全文）
column/4-03-标准组件解剖-类型层-视图层-逻辑层三件套.md       （三件套结构，测试同构的对象分层）
column/4-05-浮层体系上-三态状态机与全局浮层栈.md            （引 use-overlay-stack.spec 8-26/35-82）
column/4-11-命令式服务上-message治理术.md                   （引 message.spec 91-133）
column/6-17-Form-校验编排.md                                （validate 聚合收束欠账的立案处）
column/6-19-Upload-文件队列.md                              （httpRequest 依赖注入与四态状态机）
column/7-02-Message-命令式消息治理.md                       （双 setTimeout 样本与 beforeClose 时序）
column/7-08-Loading-指令与服务双注册.md                     （引 setup 的 data-icon 契约）
column/7-14-Dropdown-键盘导航.md                            （键位断言欠账的立案处）
column/8-02-Countdown-定时器治理.md                         （toFake 含 rAF 的考据出处）
column/8-06-Scheduler-fullcalendar集成.md                   （真实依赖派的样本）
column/8-10-Pagination-页码窗口.md                          （窗口边界欠账的立案处）
column/9-27-SavedViewTabs-保存视图.md                       （受控分支欠账的立案处）
column/9-31-DetailPanel-详情浮层.md                         （close 委托欠账的立案处）
column/10-02-类型夹具-@ts-expect-error负向断言.md           （下一篇：编译期契约的看守）