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
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**测试状态:** ✅ 测试文件已创建
|
|||
|
|
**下一步:** 安装依赖并运行测试
|