14 · 测试策略与质量守卫

// vitest.config.ts（test 块与 monaco 别名，原文）
export default defineConfig({
  // 组件层测试要 import .vue，必须挂上 Vue 插件（vite.config.ts 里的插件不会自动继承）
  plugins: [vue()],
  resolve: {
    alias: [
      {
        // monaco-editor 的 package.json **只有 module 字段**（没有 main / exports / types），
        // vitest 的 SSR 式解析因此拿不到包入口，报
        // "Failed to resolve import \"monaco-editor\""。dev / build 走 Vite 客户端解析，
        // 本就能落到 module，无需此别名。
        // 替身而非真实模块：真实 monaco 是 3.7MB 的 ESM 图，内联转换会让单个用例文件从 ~2s
        // 涨到 ~21s；且 jsdom 没有 Worker，真实 Monaco 在测试里本来也无法工作。
        // 用带 $ 的正则而非字符串：字符串别名按前缀匹配，会把
        // `monaco-editor/esm/vs/.../xxx.worker?worker` 这类子路径一并改写坏。
        find: /^monaco-editor$/,
        replacement: fileURLToPath(new URL('./src/test/monaco-module-stub.ts', import.meta.url)),
      },
      { find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
    ],
  },
  test: {
    environment: 'node',
    // 静音 jsdom 未实现 canvas 的噪音（内部有环境守卫，node 下安全）
    setupFiles: ['src/test/setup.ts'],
    include: ['src/**/*.{test,spec}.ts'],
    // 排除 SFC：组件本身不是测试文件，测试写在 *.dom.test.ts 里 import 它们
    exclude: ['**/*.vue', 'node_modules', 'dist', '.playwright-mcp'],
    // 只有组件层测试（*.dom.test.ts）才加载 jsdom
    environmentMatchGlobs: [['src/**/*.dom.test.ts', 'jsdom']],
    server: {
      deps: {
        inline: ['xiaoye-ui', 'element-plus'],
      },
    },
  },
})

// src/test/setup.ts（原文，三段合并展示）
if (typeof HTMLCanvasElement !== 'undefined') {
  HTMLCanvasElement.prototype.getContext = (() =>
    null) as unknown as HTMLCanvasElement['getContext']
}

if (typeof Element !== 'undefined' && !Element.prototype.scrollIntoView) {
  Element.prototype.scrollIntoView = () => {}
}

if (typeof globalThis.ResizeObserver === 'undefined') {
  class ResizeObserverStub {
    observe(): void {}
    unobserve(): void {}
    disconnect(): void {}
  }
  globalThis.ResizeObserver = ResizeObserverStub as unknown as typeof ResizeObserver
}

// src/test/monaco-module-stub.ts（节选）
/** 编辑器实例替身：所有方法均为无害空实现 */
const editorInstanceStub = {
  dispose: () => {},
  onDidChangeModelContent: () => disposable,
  getValue: () => '',
  setValue: () => {},
  getModel: () => null,
  setModel: () => {},
  updateOptions: () => {},
  focus: () => {},
  layout: () => {},
}

export const editor = {
  create: () => editorInstanceStub,
  defineTheme: () => {},
  setTheme: () => {},
  setModelLanguage: () => {},
  getModels: () => [],
}

// src/test/helpers.ts（节选）
export const MONACO_STUB = defineComponent({
  name: 'MonacoCodeEditor',
  props: { modelValue: { type: String, default: '' } },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    return () =>
      h('textarea', {
        class: 'monaco-stub',
        value: props.modelValue,
        onInput: (event: Event) =>
          emit('update:modelValue', (event.target as HTMLTextAreaElement).value),
      })
  },
})

// src/config/tools/tool-registry.test.ts（节选）
  it('router 中登记了每一条工具路由（无 404 路径）', () => {
    const missing = [...toolRoutePaths].filter((p) => !routerPaths.has(p))
    expect(
      missing,
      `以下工具路由未在 router/routes/tools.ts 中登记：${missing.join(', ')}`
    ).toEqual([])
  })

  it('catalog link 集合与 TOOL_ROUTE_PATHS path 集合完全一致', () => {
    expect([...catalogLinks].sort()).toEqual([...toolRoutePaths].sort())
  })

  it('每个工具都有对应的组件映射（缺映射会导致工具页白屏）', () => {
    const missing = allTools.filter((tool) => !toolComponents[tool.id]).map((tool) => tool.id)
    expect(missing, `以下工具缺少组件映射：${missing.join(', ')}`).toEqual([])
  })

// src/router/routes/redirects.test.ts（节选）
  it('至少存在 1 条重定向（防止本文件被误删后守卫静默失效）', () => {
    expect(redirectRoutes.length).toBeGreaterThan(0)
  })

  it('每条重定向都指向真实存在的路由（不把用户送去 404）', () => {
    const broken: string[] = []
    for (const route of redirectRoutes) {
      const target = typeof route.redirect === 'string' ? route.redirect : ''
      if (!target) {
        broken.push(`${route.path} → (空)`)
        continue
      }
      if (!realPaths.has(norm(target))) {
        broken.push(`${route.path} → ${target}`)
      }
    }
    expect(broken, `以下重定向目标不存在：${broken.join(', ')}`).toEqual([])
  })

  it('重定向之间不重复', () => {
    const paths = redirectRoutes.map((route) => norm(String(route.path)))
    expect(new Set(paths).size).toBe(paths.length)
  })

// src/assets/fonts/icon-subset.test.ts（节选）
const ICON_NAME_PATTERN = /(?<![A-Za-z0-9_-])(?:ms|material-symbols):([a-z0-9_-]+)/g

  it('扫描正则不吃普通 CSS 文本：items:center 不算图标名', () => {
    // 回归样本：注释/样式里的 "align-items:center" 含前缀+center 拼接子串，
    // 无左边界时会被当成图标名而要求烘焙（曾逼停整条测试流水线）
    const sample = '/* align-items:center */ .x { color: red } icon="ms:image"'
    const names = [...sample.matchAll(ICON_NAME_PATTERN)].map((m) => m[1].replace(/-/g, '_'))
    expect(names).toEqual(['image'])
  })

  it('源码中出现的图标名都已烘焙进子集字体', () => {
    const missing = [...usedIcons.keys()].filter((name) => !baked.has(name)).sort()
    expect(
      missing,
      `以下图标未包含在子集字体中，会在页面上退化成文字：\n  ${missing.join('\n  ')}\n` +
        `请运行 \`pnpm icons:build\` 重新生成子集。`
    ).toEqual([])
  })

// src/generated/tool-pinyin-index.test.ts（节选）
  it('catalog 中每个工具都有拼音索引', () => {
    const missing = allTools.filter((t) => !toolPinyinIndex[t.id])
    expect(missing.map((t) => t.id), '缺少索引的工具，请运行 pnpm pinyin:build').toEqual([])
  })

  it('无过期键：索引不包含 catalog 已删除的工具', () => {
    const ids = new Set(allTools.map((t) => t.id))
    const stale = Object.keys(toolPinyinIndex).filter((id) => !ids.has(id))
    expect(stale, '过期索引条目，请运行 pnpm pinyin:build').toEqual([])
  })

// src/views/tools/allToolPages.dom.test.ts（节选）
const SKIP: Record<string, string> = {
  'dev-screen-recorder': 'jsdom 无真实 canvas 2d context（需 node-canvas）',
}

  it('工具数量与组件映射数量一致', () => {
    expect(allTools.length).toBeGreaterThan(100)
    expect(allTools.length).toBe(Object.keys(toolComponents).length)
  })

  for (const tool of allTools) {
    if (SKIP[tool.id]) {
      it.skip(`${tool.id} —— 跳过：${SKIP[tool.id]}`, () => {
        /* 留档：明确列出未覆盖项，避免"看起来全绿其实有洞" */
      })
      continue
    }

    it(`${tool.id} 能挂载并渲染出内容`, async () => {
      const loader = toolComponents[tool.id]
      expect(loader, `${tool.id} 缺少组件映射`).toBeTruthy()
      const module = (await loader!()) as unknown as { default: never }

      // Monaco 在 jsdom 下不可用，打成 textarea；其余页面不受影响
      const result = await mountAtRoute(module.default, tool.link, {
        global: { stubs: { MonacoCodeEditor: MONACO_STUB } },
      })
      wrapper = result.wrapper

      expect(wrapper.exists()).toBe(true)
      expect(wrapper.html().length, `${tool.id} 渲染结果为空`).toBeGreaterThan(0)
    }, 60000)
  }