文档 更新:补充测试框架和相关文档

This commit is contained in:
2026-04-18 03:34:07 +08:00
parent 2a43b8a838
commit 400e617528

View File

@@ -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 })` 深度监听