# DesignerCEP 测试文档

## 📋 测试概述

本测试套件包含完整的前后端测试，覆盖：
- **后端API测试** (Pytest)
- **前端组件测试** (Vitest)
- **端到端集成测试** (E2E)

---

## 🎯 测试目标

### 后端测试覆盖
- ✅ 管理员配置API (功能/VIP/签到配置)
- ✅ 功能使用API (核心扣费逻辑)
- ✅ 签到API (签到/日历/历史)
- ✅ 用户资料API
- ✅ 统计API

### 前端测试覆盖
- ✅ HomePage组件
- ✅ Profile组件
- ✅ CheckIn组件
- ✅ 用户交互流程

### 集成测试覆盖
- ✅ 用户完整使用流程
- ✅ 管理员配置流程
- ✅ VIP功能测试

---

## 🚀 快速开始

### 1. 后端测试

#### 环境准备
```bash
cd tests/backend
pip install -r requirements.txt
```

#### 配置测试数据库
复制 `.env.example` 为 `.env` 并配置：
```env
TEST_DB_HOST=localhost
TEST_DB_USER=root
TEST_DB_PASSWORD=your_password
TEST_DB_NAME=designercep_test
TEST_API_URL=https://backend.aidg168.uk/api/v1
```

#### 运行测试
```bash
# Windows
run_tests.bat

# Linux/Mac
chmod +x run_tests.sh
./run_tests.sh

# 或直接运行pytest
pytest -v
```

#### 查看覆盖率报告
测试完成后，打开 `htmlcov/index.html` 查看代码覆盖率。

---

### 2. 前端测试

#### 环境准备
```bash
cd Designer
npm install
```

#### 配置Vitest
前端项目已配置 Vitest，无需额外配置。

#### 运行测试
```bash
# 运行所有测试
npm run test

# 监听模式
npm run test:watch

# 生成覆盖率报告
npm run test:coverage
```

#### 单独运行某个测试文件
```bash
npx vitest tests/frontend/HomePage.test.ts
```

---

### 3. 集成测试

#### 运行E2E测试
```bash
cd tests/integration
python e2e_test.py
```

**注意**: 集成测试需要：
1. 后端服务正常运行
2. 数据库已完成迁移
3. 测试用户已创建

---

## 📊 测试文件结构

```
tests/
├── backend/                  # 后端测试
│   ├── conftest.py          # Pytest配置和fixtures
│   ├── test_admin_config.py # 管理员配置测试
│   ├── test_feature.py      # 功能使用测试
│   ├── test_checkin.py      # 签到功能测试
│   ├── test_user_profile.py # 用户资料测试
│   ├── test_stats.py        # 统计功能测试
│   ├── requirements.txt     # Python依赖
│   └── run_tests.bat        # Windows测试脚本
│
├── frontend/                 # 前端测试
│   ├── HomePage.test.ts     # 首页组件测试
│   ├── Profile.test.ts      # 个人中心测试
│   └── CheckIn.test.ts      # 签到页面测试
│
├── integration/              # 集成测试
│   └── e2e_test.py          # 端到端测试
│
└── README.md                 # 测试说明文档
```

---

## 🧪 测试用例详解

### 后端测试

#### 1. 管理员配置测试 (`test_admin_config.py`)
```python
class TestFeaturesConfig:
    - test_get_features_config()        # 获取功能配置列表
    - test_create_feature_config()      # 创建新功能
    - test_update_feature_config()      # 更新功能配置
    - test_delete_feature_config()      # 删除功能配置
    - test_update_nonexistent_feature() # 更新不存在的功能

class TestVIPConfig:
    - test_get_vip_config()            # 获取VIP配置
    - test_update_vip_config()         # 更新VIP配置

class TestCheckInConfig:
    - test_get_checkin_config()        # 获取签到配置
    - test_create_checkin_config()     # 创建签到档位
    - test_update_checkin_config()     # 更新签到档位
```

#### 2. 功能使用测试 (`test_feature.py`)
```python
class TestFeatureUsage:
    - test_use_feature_normal_user()       # 普通用户使用功能
    - test_use_feature_insufficient_points() # 积分不足
    - test_use_feature_vip_user_with_quota() # VIP用户使用配额
    - test_use_disabled_feature()          # 使用已禁用功能
    - test_use_nonexistent_feature()       # 不存在的功能
```

#### 3. 签到测试 (`test_checkin.py`)
```python
class TestDailyCheckIn:
    - test_first_checkin()                 # 首次签到
    - test_duplicate_checkin()             # 重复签到
    - test_consecutive_checkin_calculation() # 连续天数计算
    - test_broken_consecutive_checkin()    # 中断连续签到
    - test_vip_multiplier()                # VIP倍数
```

### 前端测试

#### 1. HomePage测试 (`HomePage.test.ts`)
```typescript
describe('HomePage', () => {
  - it('应该正确渲染组件')
  - it('应该显示欢迎信息')
  - it('应该显示正确的积分数量')
  - it('应该显示VIP状态')
  - it('点击功能卡片应该调用使用功能API')
  - it('积分不足时应该显示错误提示')
})
```

#### 2. Profile测试 (`Profile.test.ts`)
```typescript
describe('Profile', () => {
  - it('应该显示用户基本信息')
  - it('应该显示统计数据卡片')
  - it('应该能够编辑资料')
  - it('应该显示积分历史列表')
})
```

#### 3. CheckIn测试 (`CheckIn.test.ts`)
```typescript
describe('CheckIn', () => {
  - it('应该显示签到状态')
  - it('未签到时应该显示签到按钮')
  - it('点击签到按钮应该调用签到API')
  - it('应该显示签到日历')
  - it('应该显示签到历史记录')
})
```

---

## 🔧 测试工具和技术

### 后端测试技术栈
- **Pytest**: Python测试框架
- **Requests**: HTTP客户端
- **PyMySQL**: 数据库连接
- **pytest-cov**: 代码覆盖率
- **pytest-html**: HTML测试报告

### 前端测试技术栈
- **Vitest**: Vue3测试框架
- **@vue/test-utils**: Vue组件测试工具
- **jsdom**: DOM环境模拟

---

## 📝 编写新测试

### 后端测试示例

```python
def test_your_api(test_user):
    """测试你的API"""
    # 1. 准备数据
    request_data = {
        'username': test_user['username'],
        'param': 'value'
    }
    
    # 2. 调用API
    response = requests.post(
        f"{API_BASE_URL}/your/endpoint",
        json=request_data
    )
    
    # 3. 断言结果
    assert response.status_code == 200
    data = response.json()
    assert data['code'] == 200
    assert data['data']['field'] == expected_value
```

### 前端测试示例

```typescript
it('应该测试你的功能', async () => {
  // 1. Mock API
  ;(axios.get as any).mockResolvedValue({
    data: { code: 200, data: mockData }
  })
  
  // 2. 挂载组件
  const wrapper = mount(YourComponent)
  await new Promise(resolve => setTimeout(resolve, 100))
  
  // 3. 断言
  expect(wrapper.text()).toContain('期望文本')
})
```

---

## ⚠️ 注意事项

### 1. 测试数据隔离
- 后端测试使用独立的测试数据库
- 每个测试用例结束后自动回滚数据
- 测试用户名以 `test_` 开头

### 2. 异步操作
```python
# 后端：等待数据库更新
time.sleep(1)

# 前端：等待组件更新
await new Promise(resolve => setTimeout(resolve, 100))
```

### 3. 测试环境变量
确保测试环境不会影响生产数据：
```env
ENV=test
DB_NAME=designercep_test
API_URL=https://test.backend.aidg168.uk
```

### 4. Mock外部依赖
```typescript
// Mock axios
vi.mock('axios')

// Mock router
vi.mock('vue-router', () => ({
  useRouter: () => mockRouter
}))
```

---

## 📈 测试覆盖率目标

| 模块 | 目标覆盖率 | 当前状态 |
|------|-----------|---------|
| 后端API | > 80% | ✅ 已达标 |
| 前端组件 | > 70% | ✅ 已达标 |
| 集成测试 | 核心流程全覆盖 | ✅ 已达标 |

---

## 🐛 问题排查

### 后端测试失败

**问题1**: 数据库连接失败
```
解决: 检查 .env 配置，确保测试数据库存在
```

**问题2**: API返回500错误
```
解决: 检查后端服务是否正常运行
```

### 前端测试失败

**问题1**: 组件挂载失败
```
解决: 检查是否正确Mock了所有依赖
```

**问题2**: 异步断言失败
```
解决: 增加等待时间或使用 waitFor()
```

---

## 📊 CI/CD集成

### GitHub Actions示例

```yaml
name: Tests

on: [push, pull_request]

jobs:
  backend-tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Set up Python
        uses: actions/setup-python@v2
      - name: Install dependencies
        run: |
          cd tests/backend
          pip install -r requirements.txt
      - name: Run tests
        run: pytest -v --cov

  frontend-tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v2
      - name: Install dependencies
        run: |
          cd Designer
          npm install
      - name: Run tests
        run: npm run test
```

---

## ✅ 测试检查清单

### 提交代码前
- [ ] 所有测试通过
- [ ] 新功能已添加测试
- [ ] 测试覆盖率达标
- [ ] 无eslint/pylint警告

### 发布前
- [ ] 运行完整测试套件
- [ ] 运行E2E集成测试
- [ ] 检查测试报告
- [ ] 验证关键流程

---

## 📚 参考资料

- [Pytest文档](https://docs.pytest.org/)
- [Vitest文档](https://vitest.dev/)
- [Vue Test Utils](https://test-utils.vuejs.org/)
- [Testing Best Practices](https://testingjavascript.com/)

---

**测试是质量的保证！** 🎯