You've already forked iFlow-Settings-Editor-GUI
文档 更新:补充测试框架和相关文档
This commit is contained in:
77
AGENTS.md
77
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 })` 深度监听
|
||||
|
||||
Reference in New Issue
Block a user