🧪 Testing (单元测试 & E2E 测试)

[chen201724]

概述

为项目添加测试基础设施，覆盖核心像素处理逻辑和关键用户流程。

背景

当前项目零测试覆盖。随着功能增加（自定义调色板、批量处理等），没有测试保障会导致回归风险越来越高。

任务清单

基础设施

• 集成 Vitest 作为单元测试框架
• 集成 @testing-library/react 用于组件测试
• 配置 canvas mock（jsdom 不支持 Canvas API，需要 jest-canvas-mock 或类似方案）
• 添加 npm test 和 npm run test:coverage 脚本
• CI 中添加测试步骤（GitHub Actions）

单元测试（优先级高）

• utils/mosaic.ts — applyMosaic() 各参数组合
  • 不同 pixelSize 输出尺寸正确
  • grayscale / color / palette 三种模式
  • 5 种 shape 不抛错
• utils/mosaic.ts — processFrame() 正确处理 ImageData
• utils/gif.ts — parseGif() 解析已知 GIF 文件
• utils/gif.ts — encodeGif() 输出有效 GIF

组件测试

• 文件上传流程：拖拽 / 点击上传后 canvas 渲染
• 参数调整后画布更新
• 下载按钮生成正确文件

E2E 测试（stretch goal）

• 使用 Playwright 覆盖核心流程：上传 → 调参 → 下载
• 视觉回归测试：截图对比

技术方案

npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom

验收标准

• npm test 可以运行并通过
• 核心 utils 测试覆盖率 > 80%
• CI pipeline 中测试失败会阻止合并