|
|
@@ -0,0 +1,182 @@
|
|
|
+# Story 006.022: 小程序首页多规格商品集成测试
|
|
|
+
|
|
|
+## Status
|
|
|
+Approved
|
|
|
+
|
|
|
+## Story
|
|
|
+**As a** 小程序开发者，
|
|
|
+**I want** 对小程序首页的多规格商品加入购物车功能进行完整的集成测试，
|
|
|
+**so that** 能够确保在真实用户操作场景中，多规格商品从商品卡片点击到成功加入购物车的端到端流程稳定可靠，无集成问题
|
|
|
+
|
|
|
+## Acceptance Criteria
|
|
|
+1. 创建首页集成测试文件，测试多规格商品加入购物车完整流程
|
|
|
+2. 模拟用户点击商品卡片购物车图标、弹出规格选择器、选择规格、确认加入购物车的完整用户操作序列
|
|
|
+3. 验证购物车数量正确更新，商品实际添加到购物车
|
|
|
+4. 测试ID类型转换、数据传递、错误处理等边界情况
|
|
|
+5. 确保测试能够发现真实集成环境中的问题，而不仅仅是组件单元问题
|
|
|
+6. 现有商品卡片单元测试继续通过，无回归问题
|
|
|
+7. 测试代码符合项目测试规范，使用适当的模拟和断言
|
|
|
+
|
|
|
+## Tasks / Subtasks
|
|
|
+- [ ] **创建首页集成测试文件** (AC: 1, 2, 3, 4, 5)
|
|
|
+ - [ ] 创建目录 `mini/tests/unit/pages/index/`（如不存在）
|
|
|
+ - [ ] 创建文件 `mini/tests/unit/pages/index/index.test.tsx`
|
|
|
+ - [ ] 配置测试文件基本结构：导入、模拟设置、测试套件
|
|
|
+ - [ ] 遵循现有页面测试模式（参考cart/index.test.tsx和goods-detail/goods-detail.test.tsx）
|
|
|
+
|
|
|
+- [ ] **配置API模拟** (AC: 2, 3, 4)
|
|
|
+ - [ ] 模拟首页使用的API客户端：`goodsClient`和`advertisementClient`
|
|
|
+ - [ ] 模拟商品列表API响应，包含多规格商品数据（父商品+子商品列表）
|
|
|
+ - [ ] 模拟广告API响应，返回测试广告数据
|
|
|
+ - [ ] 模拟规格选择器API调用（获取子商品列表）
|
|
|
+ - [ ] 遵循API模拟规范，使用适当的模拟响应格式
|
|
|
+
|
|
|
+- [ ] **实现多规格商品加入购物车集成测试** (AC: 1, 2, 3, 4, 5)
|
|
|
+ - [ ] 测试1：单规格商品点击购物车图标直接添加到购物车
|
|
|
+ - [ ] 测试2：多规格商品点击购物车图标弹出规格选择器
|
|
|
+ - [ ] 测试3：在规格选择器中选择规格后成功添加到购物车
|
|
|
+ - [ ] 测试4：验证购物车数量正确更新
|
|
|
+ - [ ] 测试5：验证商品实际存在于购物车中
|
|
|
+ - [ ] 测试6：测试ID类型转换边界情况（字符串/数字ID）
|
|
|
+ - [ ] 测试7：测试错误处理场景（API失败、库存不足等）
|
|
|
+
|
|
|
+- [ ] **测试组件间集成和数据流** (AC: 4, 5)
|
|
|
+ - [ ] 验证商品卡片 → 规格选择器 → 首页处理函数 → 购物车上下文的数据传递
|
|
|
+ - [ ] 测试`parentGoodsId`字段正确设置和维护
|
|
|
+ - [ ] 测试规格选择后的商品信息正确性（价格、库存、名称）
|
|
|
+ - [ ] 验证购物车上下文正确接收和处理添加的商品
|
|
|
+
|
|
|
+- [ ] **确保测试质量和规范性** (AC: 6, 7)
|
|
|
+ - [ ] 遵循项目测试目录结构和命名规范
|
|
|
+ - [ ] 使用适当的模拟技术（Taro API模拟等）和真实的React Query配置
|
|
|
+ - [ ] 添加必要的清理和重置逻辑（`beforeEach`、`afterEach`）
|
|
|
+ - [ ] 运行现有商品卡片测试，确保无回归
|
|
|
+ - [ ] 运行新增的首页集成测试，确保全部通过
|
|
|
+
|
|
|
+## Dev Notes
|
|
|
+
|
|
|
+### 先前故事洞察
|
|
|
+- **故事21（小程序首页多规格商品加入购物车失败bug修复）**：
|
|
|
+ - 修复了ID类型不一致问题：商品卡片将数字ID转换为字符串，首页尝试解析字符串为数字
|
|
|
+ - 修复方案：使用`String(spec.id)`安全转换，支持数字和字符串ID类型
|
|
|
+ - 更新了`goods-card/index.tsx`中的`handleSpecConfirm`函数
|
|
|
+ - 更新了`pages/index/index.tsx`中的`handleAddCart`函数
|
|
|
+ - 添加了调试日志和错误处理
|
|
|
+- **关键要点**：集成测试需要验证ID类型转换逻辑的稳定性，确保修复后的代码在真实集成环境中正常工作
|
|
|
+
|
|
|
+### 数据模型
|
|
|
+- **商品数据结构** [Source: docs/prd/epic-006-parent-child-goods-multi-spec-support.md#数据库层面]
|
|
|
+ - 父商品：`spuId = 0`
|
|
|
+ - 子商品：`spuId > 0`（指向父商品ID）
|
|
|
+ - 父子关系通过`spuId`字段建立
|
|
|
+ - 商品列表API默认只返回父商品（`spuId = 0`）
|
|
|
+- **规格选择数据流**：
|
|
|
+ - 商品卡片传递`childGoodsIds`字段判断是否有规格选项
|
|
|
+ - 规格选择器通过`parentGoodsId`获取子商品列表
|
|
|
+ - 选择规格后返回子商品ID和数量
|
|
|
+ - 购物车使用子商品信息（ID、名称、价格、库存）
|
|
|
+
|
|
|
+### 组件规格
|
|
|
+- **首页组件** (`mini/src/pages/index/index.tsx`)：
|
|
|
+ - 使用`goodsClient`获取商品列表
|
|
|
+ - 使用`advertisementClient`获取广告数据
|
|
|
+ - 包含`handleAddCart`函数处理购物车添加逻辑
|
|
|
+ - 集成`GoodsList`组件显示商品列表
|
|
|
+ - 使用`useCart`钩子访问购物车上下文
|
|
|
+- **商品卡片组件** (`mini/src/components/goods-card/index.tsx`)：
|
|
|
+ - 支持多规格商品：`hasSpecOptions`属性
|
|
|
+ - 点击购物车图标弹出`GoodsSpecSelector`组件
|
|
|
+ - `handleSpecConfirm`函数处理规格选择确认
|
|
|
+ - 传递商品数据到父组件的`onAddCart`回调
|
|
|
+- **规格选择器组件** (`mini/src/components/goods-spec-selector/index.tsx`)：
|
|
|
+ - 通过`parentGoodsId`获取子商品列表
|
|
|
+ - 显示规格选项和数量选择
|
|
|
+ - `onConfirm`回调返回选择的规格信息
|
|
|
+- **购物车上下文** (`mini/src/contexts/CartContext.tsx`)：
|
|
|
+ - `addToCart`函数支持父子商品添加
|
|
|
+ - `CartItem`接口包含`parentGoodsId`字段
|
|
|
+ - 本地存储管理购物车状态
|
|
|
+
|
|
|
+### 文件位置
|
|
|
+- **新测试文件**：`mini/tests/unit/pages/index/index.test.tsx`
|
|
|
+- **相关组件文件**：
|
|
|
+ - `mini/src/pages/index/index.tsx` - 首页页面组件
|
|
|
+ - `mini/src/components/goods-card/index.tsx` - 商品卡片组件
|
|
|
+ - `mini/src/components/goods-spec-selector/index.tsx` - 规格选择器组件
|
|
|
+ - `mini/src/contexts/CartContext.tsx` - 购物车上下文
|
|
|
+- **现有测试参考**：
|
|
|
+ - `mini/tests/unit/pages/cart/index.test.tsx` - 购物车页面测试
|
|
|
+ - `mini/tests/unit/pages/goods-detail/goods-detail.test.tsx` - 商品详情页测试
|
|
|
+ - `mini/tests/unit/components/goods-card/goods-card.test.tsx` - 商品卡片单元测试
|
|
|
+
|
|
|
+### 测试要求
|
|
|
+- **测试框架**：Jest（小程序使用Jest，不是Vitest）[Source: docs/architecture/testing-strategy.md#小程序测试策略]
|
|
|
+- **测试位置**：`mini/tests/unit/pages/index/` [Source: docs/architecture/source-tree.md]
|
|
|
+- **API模拟规范**：
|
|
|
+ - 模拟`@/api`模块中的`goodsClient`和`advertisementClient`
|
|
|
+ - 使用适当的模拟响应格式，包含`status`、`json()`方法
|
|
|
+ - 遵循现有测试模式（参考商品卡片测试）
|
|
|
+- **Taro API模拟**：使用`~/__mocks__/taroMock`中的模拟函数
|
|
|
+- **React Query配置**：使用真实的`QueryClientProvider`包装测试组件，配置测试用`QueryClient`
|
|
|
+- **测试覆盖率**：集成测试重点验证端到端流程，非追求代码覆盖率
|
|
|
+
|
|
|
+### 技术约束
|
|
|
+- **多租户兼容性**：API模拟需要包含租户ID过滤（测试环境中可能简化）
|
|
|
+- **ID类型安全**：必须测试数字和字符串ID类型的转换和兼容性
|
|
|
+- **向后兼容性**：确保单规格商品功能不受影响
|
|
|
+- **性能考虑**：测试应快速运行，避免复杂异步操作
|
|
|
+
|
|
|
+### 项目结构对齐
|
|
|
+根据`docs/architecture/source-tree.md`中的项目结构：
|
|
|
+- 小程序测试文件位于`mini/tests/unit/`目录下
|
|
|
+- 页面测试文件位于`mini/tests/unit/pages/{page-name}/`目录中
|
|
|
+- 测试文件命名：`{component-name}.test.tsx`
|
|
|
+- 现有页面测试遵循此结构（cart、goods-detail等）
|
|
|
+- 需要创建`mini/tests/unit/pages/index/`目录
|
|
|
+
|
|
|
+## Testing
|
|
|
+### 测试标准和框架
|
|
|
+- **测试类型**：页面级别集成测试 [Source: docs/architecture/testing-strategy.md#集成测试]
|
|
|
+- **测试框架**：Jest + React Testing Library [Source: docs/architecture/testing-strategy.md#小程序测试策略]
|
|
|
+- **测试位置**：`mini/tests/unit/pages/index/index.test.tsx`
|
|
|
+- **API模拟**：模拟`@/api`模块，使用实际API响应结构
|
|
|
+- **Taro模拟**：使用项目现有的Taro模拟配置（`__mocks__/taroMock.ts`）
|
|
|
+- **组件模拟**：适度模拟第三方组件，优先使用真实组件
|
|
|
+
|
|
|
+### 测试策略
|
|
|
+- **端到端流程测试**：模拟完整用户操作序列，验证组件间集成
|
|
|
+- **边界条件测试**：测试ID类型转换、错误处理、库存不足等边界情况
|
|
|
+- **回归测试**：确保现有单规格商品功能不受影响
|
|
|
+- **数据流验证**：验证商品数据在组件间的正确传递
|
|
|
+
|
|
|
+### 测试环境配置
|
|
|
+- 使用真实的`QueryClientProvider`包装测试组件（必须使用真实Provider，不能模拟）
|
|
|
+- 配置测试用`QueryClient`实例支持测试环境
|
|
|
+- 模拟`useCart`钩子或使用真实`CartProvider`
|
|
|
+- 模拟`useAuth`钩子返回登录状态
|
|
|
+
|
|
|
+### 断言标准
|
|
|
+- 验证DOM元素显示和交互
|
|
|
+- 验证API调用次数和参数
|
|
|
+- 验证购物车状态更新
|
|
|
+- 验证错误提示显示
|
|
|
+- 验证规格选择器弹出和关闭
|
|
|
+
|
|
|
+## Change Log
|
|
|
+| Date | Version | Description | Author |
|
|
|
+|------|---------|-------------|--------|
|
|
|
+| 2025-12-16 | 1.0 | 初始故事创建，为小程序首页多规格商品加入购物车功能添加集成测试 | Bob (Scrum Master) |
|
|
|
+
|
|
|
+## Dev Agent Record
|
|
|
+*此部分由开发代理在实现过程中填写*
|
|
|
+
|
|
|
+### Agent Model Used
|
|
|
+
|
|
|
+### Debug Log References
|
|
|
+
|
|
|
+### Completion Notes List
|
|
|
+
|
|
|
+### File List
|
|
|
+
|
|
|
+## QA Results
|
|
|
+*此部分由QA代理在审查完成后填写*
|
yourname