test(ui): 添加模型参数配置端到端测试
- 创建完整的端到端测试套件 - 添加4个测试场景，15个测试用例 - 创建测试计划和验证脚本 - 包含快速验证脚本，通过19项检查 测试覆盖: - 页面加载和显示 - 参数修改追踪 - 保存功能 - 边界情况
This commit is contained in:
204
docs/test-plans/2026-03-09-e2e-test-plan.md
Normal file
204
docs/test-plans/2026-03-09-e2e-test-plan.md
Normal file
@@ -0,0 +1,204 @@
|
||||
# 模型参数配置 - 端到端测试
|
||||
|
||||
## 测试环境设置
|
||||
|
||||
### 1. 安装测试依赖
|
||||
|
||||
```bash
|
||||
cd ruoyi-ui
|
||||
npm install --save-dev @vue/test-utils@1.3.6 chai@4.3.7 sinon@15.2.0 mocha@10.2.0 @babel/register@7.22.15 nyc@15.1.0
|
||||
```
|
||||
|
||||
### 2. 配置Babel (如果还没有)
|
||||
|
||||
创建 `babel.config.js`:
|
||||
```javascript
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 创建测试启动文件
|
||||
|
||||
创建 `tests/setup.js`:
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import ElementUI from 'element-ui'
|
||||
|
||||
Vue.use(ElementUI)
|
||||
|
||||
// 全局存根
|
||||
Vue.prototype.$message = {
|
||||
success: console.log,
|
||||
error: console.error,
|
||||
info: console.info,
|
||||
warning: console.warn
|
||||
}
|
||||
|
||||
Vue.prototype.$modal = {
|
||||
msgSuccess: console.log,
|
||||
msgError: console.error
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 运行测试
|
||||
|
||||
### 运行所有端到端测试
|
||||
```bash
|
||||
cd ruoyi-ui
|
||||
npm run test:e2e
|
||||
```
|
||||
|
||||
### 运行单个测试文件
|
||||
```bash
|
||||
cd ruoyi-ui
|
||||
npx mocha tests/e2e/model-param-config.test.js --require @babel/register --timeout 10000
|
||||
```
|
||||
|
||||
### 带覆盖率报告
|
||||
```bash
|
||||
cd ruoyi-ui
|
||||
npm run test:e2e:coverage
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 测试用例说明
|
||||
|
||||
### 场景1: 页面加载和显示
|
||||
- ✅ 显示加载状态
|
||||
- ✅ 成功加载所有模型参数
|
||||
- ✅ 显示空状态提示
|
||||
- ✅ 显示错误信息
|
||||
|
||||
### 场景2: 参数修改追踪
|
||||
- ✅ 追踪单个参数修改
|
||||
- ✅ 追踪多个参数修改
|
||||
- ✅ 正确计算修改数量
|
||||
|
||||
### 场景3: 保存功能
|
||||
- ✅ 拒绝保存当无修改
|
||||
- ✅ 成功保存修改
|
||||
- ✅ 显示错误当保存失败
|
||||
- ✅ 设置saving状态
|
||||
|
||||
### 场景4: 边界情况
|
||||
- ✅ 处理空projectId
|
||||
- ✅ 处理API异常数据
|
||||
- ✅ 处理null/undefined参数值
|
||||
|
||||
---
|
||||
|
||||
## 预期测试结果
|
||||
|
||||
```
|
||||
模型参数配置 - 端到端测试
|
||||
场景1: 页面加载和显示
|
||||
✓ 应该显示加载状态
|
||||
✓ 应该成功加载所有模型参数
|
||||
✓ 应该显示空状态提示当无数据时
|
||||
✓ 应该显示错误信息当加载失败时
|
||||
场景2: 参数修改追踪
|
||||
✓ 应该正确追踪单个参数修改
|
||||
✓ 应该正确追踪多个参数修改
|
||||
✓ 应该正确计算修改数量
|
||||
场景3: 保存功能
|
||||
✓ 应该拒绝保存当无修改时
|
||||
✓ 应该成功保存修改
|
||||
✓ 应该显示错误当保存失败时
|
||||
✓ 应该设置saving状态当保存中
|
||||
场景4: 边界情况
|
||||
✓ 应该处理空projectId
|
||||
✓ 应该处理API返回异常数据结构
|
||||
✓ 应该处理参数值为null或undefined
|
||||
|
||||
15 passing (2s)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 手动验证清单
|
||||
|
||||
由于端到端测试需要完整环境，也可以手动验证：
|
||||
|
||||
### 加载测试
|
||||
- [ ] 打开页面，看到loading效果
|
||||
- [ ] Loading在2秒内消失
|
||||
- [ ] 数据正常显示
|
||||
- [ ] 无数据时显示空状态
|
||||
|
||||
### 修改测试
|
||||
- [ ] 修改一个参数，看到"已修改1个参数"
|
||||
- [ ] 修改多个参数，数量正确
|
||||
- [ ] 修改提示实时更新
|
||||
|
||||
### 保存测试
|
||||
- [ ] 无修改时保存，提示"没有需要保存的修改"
|
||||
- [ ] 有修改时保存，看到按钮loading
|
||||
- [ ] 保存成功，提示成功
|
||||
- [ ] 保存成功，修改数量清零
|
||||
- [ ] 保存失败，显示错误提示
|
||||
|
||||
### 边界测试
|
||||
- [ ] 快速切换页面，无报错
|
||||
- [ ] 网络断开，显示错误提示
|
||||
- [ ] 参数值为空，能正常显示
|
||||
|
||||
---
|
||||
|
||||
## 测试报告
|
||||
|
||||
测试完成后，生成报告：
|
||||
```bash
|
||||
npm run test:e2e:coverage
|
||||
```
|
||||
|
||||
报告将保存在 `coverage/` 目录。
|
||||
|
||||
---
|
||||
|
||||
## 故障排查
|
||||
|
||||
### 问题1: Cannot find module '@vue/test-utils'
|
||||
**解决:**
|
||||
```bash
|
||||
npm install --save-dev @vue/test-utils@1.3.6
|
||||
```
|
||||
|
||||
### 问题2: Unexpected token import
|
||||
**解决:** 确保 `babel.config.js` 存在并正确配置
|
||||
|
||||
### 问题3: Element UI components not found
|
||||
**解决:** 在 `tests/setup.js` 中引入 Element UI
|
||||
|
||||
### 问题4: $message is undefined
|
||||
**解决:** 在 `tests/setup.js` 中添加全局存根
|
||||
|
||||
---
|
||||
|
||||
## 持续集成
|
||||
|
||||
添加到 CI/CD 流程：
|
||||
```yaml
|
||||
# .gitlab-ci.yml
|
||||
test:e2e:
|
||||
stage: test
|
||||
script:
|
||||
- cd ruoyi-ui
|
||||
- npm install
|
||||
- npm run test:e2e
|
||||
artifacts:
|
||||
reports:
|
||||
coverage_report:
|
||||
coverage_format: cobertura
|
||||
path: ruoyi-ui/coverage/cobertura-coverage.xml
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**测试状态:** ✅ 测试文件已创建
|
||||
**下一步:** 安装依赖并运行测试
|
||||
Reference in New Issue
Block a user