wkc
fb537ac0f2
- 创建完整的端到端测试套件 - 添加4个测试场景，15个测试用例 - 创建测试计划和验证脚本 - 包含快速验证脚本，通过19项检查 测试覆盖: - 页面加载和显示 - 参数修改追踪 - 保存功能 - 边界情况
205 lines
4.1 KiB
Markdown
205 lines
4.1 KiB
Markdown
# 模型参数配置 - 端到端测试
|
||
|
||
## 测试环境设置
|
||
|
||
### 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
|
||
```
|
||
|
||
---
|
||
|
||
**测试状态:** ✅ 测试文件已创建
|
||
**下一步:** 安装依赖并运行测试
|