# 模型参数配置 - 端到端测试

## 测试环境设置

### 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
```

---

**测试状态:** ✅ 测试文件已创建
**下一步:** 安装依赖并运行测试