Prechádzať zdrojové kódy

docs(stories): 更新故事004.003测试部分按照小程序mini规范

- 更新测试部分,按照小程序mini测试规范编写
- 添加小程序mini测试规范要点:Jest框架、Taro API模拟、测试文件结构等
- 更新测试任务,具体化小程序测试文件创建要求
- 提供测试数据管理示例和测试文件结构示例
- 更新变更日志记录版本1.1

🤖 Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
yourname 1 mesiac pred
rodič
commit
3b7b954600

+ 176 - 25
docs/stories/004.003.integrate-credit-payment.story.md

@@ -53,12 +53,12 @@ Draft
   - [ ] 调用额度查询API获取用户欠款信息
   - [ ] 设计欠款信息显示样式(总额度、已用额度、可用额度、欠款金额)
 
-- [ ] **编写集成测试** (AC: 1, 2, 3, 4, 5, 6, 7)
-  - [ ] **支付流程测试**:测试额度支付完整流程
-  - [ ] **额度恢复测试**:测试结账、取消订单、退款时的额度恢复
-  - [ ] **额度检查测试**:测试额度为0用户无法使用额度支付
-  - [ ] **并发测试**:测试额度支付与微信支付的并行工作
-  - [ ] **欠款显示测试**:测试小程序个人中心欠款信息显示
+- [ ] **按照小程序mini规范编写测试** (AC: 1, 2, 3, 4, 5, 6, 7)
+  - [ ] **支付页面额度支付单元测试**:在 `mini/tests/unit/pages/payment/` 创建测试文件,测试额度支付选项
+  - [ ] **个人中心欠款显示单元测试**:在 `mini/tests/unit/pages/profile/` 创建测试文件,测试欠款信息显示
+  - [ ] **额度支付流程集成测试**:在 `mini/tests/integration/` 创建 `credit-payment-flow.test.tsx`,测试完整支付流程
+  - [ ] **额度恢复集成测试**:在 `mini/tests/integration/` 创建 `credit-balance-restore.test.tsx`,测试额度恢复逻辑
+  - [ ] **更新现有测试文件**:检查现有支付相关测试,确保与额度支付兼容
 
 - [ ] **验证模块间集成** (AC: 7)
   - [ ] 验证订单模块与额度模块的集成
@@ -105,6 +105,18 @@ Draft
 10. **表单验证**: 为Zod schema字段添加中文错误消息,使用`z.coerce.number()`支持类型转换
 11. **组件集成**: 信用额度管理对话框已集成到用户管理UI包中
 
+### 小程序mini测试规范要点
+1. **测试框架差异**: mini使用Jest,其他包使用Vitest
+2. **Taro API模拟**: 必须使用 `jest.mock('@tarojs/taro', ...)` 模拟Taro API
+3. **测试文件结构**: 遵循 `mini/tests/unit/` 和 `mini/tests/integration/` 目录结构
+4. **模块映射**: 使用Jest配置中的 `moduleNameMapper` 进行路径映射
+5. **React Query包装**: 集成测试需要使用 `QueryClientProvider` 包装组件
+6. **异步测试**: 使用 `waitFor()` 处理异步操作和状态更新
+7. **测试数据工厂**: 创建可复用的测试数据工厂函数
+8. **API模拟**: 使用 `jest.mock()` 模拟API客户端调用
+9. **测试命名**: 使用中文描述测试行为,遵循 `describe` + `it` 格式
+10. **覆盖率要求**: 单元测试 ≥ 80%,集成测试 ≥ 60%
+
 ### 数据模型设计 [Source: docs/prd/epic-004-credit-payment.md#数据库设计]
 **credit_balance_mt表结构**:
 ```sql
@@ -211,34 +223,173 @@ CREATE TABLE credit_balance_log_mt (
 - 具体的额度恢复幂等性实现示例
 
 ## Testing
-### 测试标准 [Source: architecture/testing-strategy.md]
-- **测试文件位置**: 各包的`tests/`目录下
-- **单元测试位置**: `tests/unit/**/*.test.tsx`
-- **集成测试位置**: `tests/integration/**/*.test.tsx`
-- **测试框架**: Vitest + Testing Library + React Testing Library
+### 小程序mini测试规范 [Source: mini/jest.config.js 和现有测试文件]
+- **测试框架**: Jest + Testing Library (mini使用Jest,其他包使用Vitest)
+- **测试文件位置**: `mini/tests/` 目录下
+- **单元测试位置**: `mini/tests/unit/**/*.test.tsx`
+- **集成测试位置**: `mini/tests/integration/**/*.test.tsx`
+- **测试环境**: jsdom (模拟浏览器环境)
+- **模块映射**:
+  - `^@/(.*)$` → `mini/src/$1`
+  - `^~/(.*)$` → `mini/tests/$1`
+  - `^@tarojs/taro$` → `mini/tests/__mocks__/taroMock.ts`
 - **覆盖率要求**: 单元测试 ≥ 80%,集成测试 ≥ 60%
-- **测试模式**: 使用测试数据工厂模式,避免硬编码测试数据
-- **API模拟**: 使用MSW或Vitest的mock功能模拟API调用
+- **测试命名**: 使用 `describe` + `it` 或 `test` 格式,中文描述测试行为
 
-### 测试策略要求
+### 测试策略要求 (按照小程序mini规范)
 - **单元测试**: 验证单个组件功能、hooks逻辑、工具函数
-- **集成测试**: 验证API集成、权限控制、组件间协作
-- **支付流程测试**: 测试额度支付完整流程,包括额度检查、扣减、订单创建
+  - 使用 `jest.mock()` 模拟Taro API和外部依赖
+  - 使用 `fireEvent` 或 `userEvent` 模拟用户交互
+  - 使用 `screen.getByText()` / `getByTestId()` 等查询方法
+  - 使用 `expect().toBeDefined()` / `toHaveBeenCalled()` 等断言
+
+- **集成测试**: 验证完整用户流程和API集成
+  - 使用 `QueryClientProvider` 包装React Query组件
+  - 使用 `waitFor()` 处理异步操作
+  - 模拟完整的API调用链
+  - 验证用户交互流程和状态变化
+
+- **支付流程测试**: 测试额度支付完整流程
+  - 模拟支付页面组件,添加"额度支付"选项
+  - 测试额度检查逻辑:额度为0时禁用选项
+  - 测试额度支付选择逻辑
+  - 测试额度扣减API调用
+  - 测试支付成功后的状态更新
+
 - **额度恢复测试**: 测试结账、取消订单、退款时的额度恢复逻辑
-- **并发测试**: 测试额度支付与微信支付的并行工作
-- **错误处理测试**: 测试各种错误场景和异常情况(额度不足、额度为0等)
-- **幂等性测试**: 测试额度恢复的幂等性,防止重复恢复
+  - 模拟取消订单流程,验证额度恢复调用
+  - 模拟退款处理流程,验证额度恢复调用
+  - 测试额度恢复的幂等性:同一订单只能恢复一次
+
+- **错误处理测试**: 测试各种错误场景
+  - 额度不足时的错误提示
+  - 额度为0时的支付选项禁用
+  - API调用失败时的错误处理
+  - 网络异常时的降级处理
+
+### 测试数据管理 (按照小程序mini规范)
+- **Taro API模拟**: 使用 `mini/tests/__mocks__/taroMock.ts` 模拟Taro API
+  ```typescript
+  // 示例:模拟Taro API
+  jest.mock('@tarojs/taro', () => ({
+    default: {
+      navigateTo: jest.fn(),
+      showToast: jest.fn(),
+      showModal: jest.fn(),
+      getStorageSync: jest.fn(),
+      setStorageSync: jest.fn(),
+    },
+  }))
+  ```
+
+- **API客户端模拟**: 使用 `jest.mock()` 模拟API客户端
+  ```typescript
+  // 示例:模拟额度查询API
+  jest.mock('@/api', () => ({
+    creditBalanceClient: {
+      $get: jest.fn(() => Promise.resolve({
+        status: 200,
+        json: () => Promise.resolve({
+          totalLimit: 1000,
+          usedAmount: 200,
+          availableAmount: 800,
+          isEnabled: true
+        })
+      }))
+    }
+  }))
+  ```
+
+- **React Query包装**: 集成测试需要使用 `QueryClientProvider`
+  ```typescript
+  const createTestQueryClient = () => new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false }
+    }
+  })
+
+  const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={createTestQueryClient()}>
+      {children}
+    </QueryClientProvider>
+  )
+  ```
+
+- **测试数据工厂**: 创建可复用的测试数据
+  ```typescript
+  // 示例:创建测试用户额度数据
+  export function createTestCreditBalance(overrides = {}) {
+    return {
+      totalLimit: 1000,
+      usedAmount: 200,
+      availableAmount: 800,
+      isEnabled: true,
+      userId: 1,
+      tenantId: 1,
+      ...overrides
+    }
+  }
+
+  // 不同额度状态
+  const normalCredit = createTestCreditBalance() // 正常额度
+  const zeroCredit = createTestCreditBalance({ totalLimit: 0, availableAmount: 0 }) // 额度为0
+  const insufficientCredit = createTestCreditBalance({ totalLimit: 100, usedAmount: 80, availableAmount: 20 }) // 额度不足
+  ```
+
+### 测试文件结构示例
+```
+mini/tests/
+├── __mocks__/
+│   ├── taroMock.ts          # Taro API模拟
+│   ├── styleMock.js         # 样式文件模拟
+│   └── fileMock.js          # 文件资源模拟
+├── unit/
+│   ├── pages/
+│   │   └── payment/
+│   │       ├── index.test.tsx           # 支付页面单元测试
+│   │       └── credit-payment.test.tsx  # 额度支付功能测试
+│   └── components/
+│       └── credit-balance-display.test.tsx  # 额度显示组件测试
+└── integration/
+    └── credit-payment-flow.test.tsx     # 额度支付流程集成测试
+```
 
-### 测试数据管理
-- 使用测试数据工厂模式创建测试数据
-- 模拟API响应,避免真实API调用
-- 使用唯一标识符确保测试数据隔离
-- 模拟用户认证和权限状态
-- 创建测试用户额度数据(不同额度状态:正常、额度为0、额度不足)
+### 具体测试任务 (按照小程序mini规范)
+- [ ] **创建支付页面额度支付单元测试** (AC: 1, 3, 7)
+  - [ ] 在 `mini/tests/unit/pages/payment/` 创建测试文件
+  - [ ] 模拟支付页面组件,添加"额度支付"选项
+  - [ ] 测试额度为0时禁用额度支付选项
+  - [ ] 测试额度支付选择逻辑
+  - [ ] 测试与微信支付选项的并行工作
+
+- [ ] **创建个人中心欠款显示单元测试** (AC: 6)
+  - [ ] 在 `mini/tests/unit/pages/profile/` 创建测试文件
+  - [ ] 模拟个人中心页面,添加欠款信息显示
+  - [ ] 测试额度查询API调用
+  - [ ] 测试欠款信息正确显示(总额度、已用额度、可用额度)
+
+- [ ] **创建额度支付流程集成测试** (AC: 1, 2, 3, 4, 7)
+  - [ ] 在 `mini/tests/integration/` 创建 `credit-payment-flow.test.tsx`
+  - [ ] 模拟完整额度支付流程:选择商品 → 选择额度支付 → 确认支付
+  - [ ] 测试额度检查、扣减、订单创建完整流程
+  - [ ] 测试支付成功后的状态更新和页面跳转
+
+- [ ] **创建额度恢复集成测试** (AC: 5)
+  - [ ] 在 `mini/tests/integration/` 创建 `credit-balance-restore.test.tsx`
+  - [ ] 模拟取消订单流程,验证额度恢复调用
+  - [ ] 模拟退款处理流程,验证额度恢复调用
+  - [ ] 测试额度恢复的幂等性
+
+- [ ] **更新现有测试文件** (AC: 7)
+  - [ ] 检查现有支付相关测试,确保与额度支付兼容
+  - [ ] 更新订单相关测试,支持额度支付类型
+  - [ ] 确保所有测试通过,无回归问题
 
 ## Change Log
 | Date | Version | Description | Author |
 |------|---------|-------------|--------|
+| 2025-12-04 | 1.1 | 更新测试部分,按照小程序mini测试规范编写 | Bob (Scrum Master) |
 | 2025-12-04 | 1.0 | 初始故事创建 | Bob (Scrum Master) |
 
 ## Dev Agent Record