template-10550/docs/frontend-multi-spec-test.md

前端多规格功能测试指南

功能概述

已完成商品详情页多规格功能集成，包括：

• 规格数据加载
• 规格选择器组件
• 购物车支持SKU信息
• 立即购买支持SKU信息

测试步骤

1. 准备测试数据

在后端创建一个多规格商品，包含：

• 基础商品信息
• 规格组：颜色(红色、蓝色)、尺寸(S、M、L)
• 对应的SKU数据

2. 商品详情页测试

1. 访问商品详情页：/shop/goodsDetail/index?id={商品ID}
2. 检查是否正确加载：
   • 商品基本信息
   • 商品图片轮播
   • 价格显示

3. 规格选择测试

1. 点击"加入购物车"按钮
2. 应该弹出规格选择器
3. 检查规格选择器内容：
   • 商品图片和基本信息
   • 规格组显示(颜色、尺寸)
   • 规格值选项
   • 数量选择器

4. 规格交互测试

1. 选择不同规格组合
2. 检查：
   • SKU价格更新
   • 库存数量更新
   • 不可选规格置灰
   • 数量限制(不超过库存)

5. 加入购物车测试

1. 选择完整规格
2. 设置购买数量
3. 点击确定
4. 检查：
   • 成功提示
   • 购物车数量更新
   • 购物车页面显示规格信息

6. 立即购买测试

1. 点击"立即购买"按钮
2. 选择规格和数量
3. 点击确定
4. 检查是否正确跳转到订单确认页

预期行为

单规格商品

• 直接加入购物车/立即购买
• 不显示规格选择器

多规格商品

• 必须选择规格才能操作
• 显示规格选择器
• 根据选择更新价格和库存

数据流验证

1. API调用检查

打开浏览器开发者工具，检查以下API调用：

GET /shop/shop-goods/{id}           // 商品详情
GET /shop/shop-goods-spec?goodsId={id}  // 商品规格
GET /shop/shop-goods-sku?goodsId={id}   // 商品SKU

2. 购物车数据检查

检查本地存储中的购物车数据：

// 在浏览器控制台执行
JSON.parse(localStorage.getItem('cart_items') || '[]')

应该包含SKU信息：

[{
  "goodsId": 123,
  "name": "测试商品",
  "price": "99.00",
  "image": "...",
  "quantity": 2,
  "skuId": 456,
  "specInfo": "颜色:红色|尺寸:L",
  "addTime": 1640995200000
}]

常见问题排查

1. 规格选择器不显示

• 检查 specs 数组是否有数据
• 检查 showSpecSelector 状态
• 检查API返回数据格式

2. SKU匹配失败

• 检查规格值字符串格式
• 检查SKU数据中的 sku 字段格式
• 确认规格名称排序一致性

3. 价格不更新

• 检查SKU数据中的 price 字段
• 检查 selectedSku 状态更新
• 确认价格显示逻辑

4. 库存显示错误

• 检查SKU数据中的 stock 字段
• 检查库存为0时的处理逻辑
• 确认数量选择器的最大值限制

调试技巧

1. 控制台日志

在关键位置添加日志：

console.log('Specs loaded:', specs);
console.log('SKUs loaded:', skus);
console.log('Selected SKU:', selectedSku);

2. React DevTools

使用React DevTools检查组件状态：

• GoodsDetail组件的state
• SpecSelector组件的props和state

3. 网络面板

检查API请求和响应：

• 请求参数是否正确
• 响应数据格式是否符合预期
• 是否有错误状态码

性能优化建议

1. 数据预加载: 考虑在商品详情加载时同时加载规格数据
2. 缓存策略: 对规格数据进行适当缓存
3. 懒加载: 规格选择器可以考虑懒加载
4. 防抖处理: 规格选择时的价格更新可以添加防抖

后续优化方向

1. 规格图片: 支持规格值对应的商品图片
2. 规格预设: 支持默认选中某个规格组合
3. 批量操作: 支持批量添加不同规格的商品
4. 规格搜索: 在规格较多时支持搜索功能