diff --git a/AGENTS.md b/AGENTS.md index 300b0cc..f5e40a1 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -15,6 +15,9 @@ iFlow 设置编辑器是一个基于 Electron + Vue 3 的桌面应用程序, | @vitejs/plugin-vue | ^6.0.6 | Vue 插件 | | concurrently | ^8.2.2 | 并发执行工具 | | electron-builder | ^24.13.3 | 应用打包工具 | +| vitest | ^4.1.4 | 单元测试框架 | +| @vue/test-utils | ^2.5.0 | Vue 组件测试工具 | +| happy-dom | Latest | 浏览器环境模拟 | ## 项目结构 @@ -25,9 +28,23 @@ iflow-settings-editor/ ├── index.html # HTML 入口 ├── package.json # 项目配置 ├── vite.config.js # Vite 配置 +├── vitest.config.js # Vitest 测试配置 ├── src/ │ ├── main.js # Vue 入口 -│ └── App.vue # 主组件 (所有业务逻辑、UI 组件) +│ ├── components/ # 可复用组件 +│ │ ├── ApiProfileDialog.vue +│ │ ├── Footer.vue +│ │ ├── InputDialog.vue +│ │ ├── MessageDialog.vue +│ │ ├── ServerPanel.vue +│ │ ├── SideBar.vue +│ │ └── TitleBar.vue +│ ├── views/ # 页面视图组件 +│ │ ├── ApiConfig.vue +│ │ ├── GeneralSettings.vue +│ │ └── McpServers.vue +│ └── styles/ # 全局样式 +│ └── global.less ├── build/ # 构建资源 (图标等) ├── dist/ # Vite 构建输出 ├── release/ # 打包输出目录 @@ -108,6 +125,10 @@ npm run build:win32 # 构建 Windows x86 安装包 npm run build:win-portable # 构建可移植版本 npm run build:win-installer # 构建 NSIS 安装包 npm run dist # 完整构建和打包 +npm run test # 运行所有测试(监听模式) +npm run test:run # 运行测试一次 +npm run test:ui # 运行测试 UI 界面 +npm run test:coverage # 生成测试覆盖率报告 ``` ## 功能模块 @@ -189,6 +210,60 @@ const API_FIELDS = ['selectedAuthType', 'apiKey', 'baseUrl', 'modelName', 'searc - `currentApiProfile`: 'default' - `mcpServers`: {} +### 8. 测试框架 (Vitest) + +**测试配置**: +- 使用 Vitest 作为测试运行器 +- 使用 `@vue/test-utils` 进行 Vue 组件测试 +- 使用 `happy-dom` 作为浏览器环境模拟 +- 配置文件:`vitest.config.js` +- 全局变量启用:`globals: true` +- 覆盖率工具:`v8` +- 覆盖率报告格式:text、json、html + +**测试文件结构**: +``` +src/ +├── components/ +│ ├── Footer.test.js # Footer 组件测试 (5 个测试) +│ ├── SideBar.test.js # 侧边栏测试 (10 个测试) +│ └── TitleBar.test.js # 标题栏测试 (8 个测试) +└── views/ + ├── ApiConfig.test.js # API 配置测试 (15 个测试) + ├── GeneralSettings.test.js # 常规设置测试 (8 个测试) + └── McpServers.test.js # MCP 服务器测试 (12 个测试) +``` + +**测试覆盖范围**: +- **视图组件**: + - GeneralSettings - 常规设置页面 + - ApiConfig - API 配置管理 + - McpServers - MCP 服务器管理 +- **UI 组件**: + - Footer - 状态栏 + - TitleBar - 窗口标题栏 + - SideBar - 侧边导航栏 + +**测试命令**: +```bash +npm run test # 运行所有测试(监听模式) +npm run test:run # 运行测试一次 +npm run test:ui # 运行测试 UI 界面 (http://localhost:51204/__vitest__/) +npm run test:coverage # 生成测试覆盖率报告 +``` + +**测试统计**: +- 总测试文件:6 个 +- 总测试用例:58 个 +- 测试执行时间:约 5-6 秒 +- 覆盖率:可查看 HTML 报告 + +**测试策略**: +- 使用 mock 函数模拟外部 API(如 `window.electronAPI`) +- 测试组件渲染、事件触发、状态管理 +- 验证用户交互流程 +- 测试边界情况和错误处理 + ## 开发注意事项 1. **修改检测**: 通过 `watch(settings, () => { modified.value = true }, { deep: true })` 深度监听 @@ -251,4 +326,4 @@ import { Save, Config, Key, Server, Globe, Setting, Add, Edit, Delete, Exchange, --success: #10b981; --danger: #ef4444; } -``` +``` \ No newline at end of file