第五题：ShoppingCart 购物车

副本简介

现在，终极大 boss 来了！你将要实现一个电商网站的 ShoppingCart 购物车，用于商品购买时的计算和结账，以及 B 端后台的商品管理（上架/下架），包含用户登陆。

副本挑战

1. 掌握由外到内的前端测试驱动开发节奏；

2. 熟练掌握多维度的测试覆盖及其测试重点

3. 刻意练习前端组件拆分与单向数据流管理

4. 至少练习 3 遍 CommentBox 组件开发

5. 能在 1 小时内完成 CommentBox 题目

力求掌握：

• 以终为始：每次编码明确需求目标，明晰用户行为验收路径；

• 任务分解：实例化需求产出测试用例，框定需求范围减少浪费；

• 自动化测试：让机器给予你最及时的反馈，提供功能回归保障；

• 持续重构：调整程序代码改善软件的质量、性能，快速响应变化。

时长限制

4 小时

总时长	任务 1	任务 2	任务 3	任务 4
任务	任务分解 - 驱动组件树拆分	综合应用 - 驱动组件接口设计	综合应用 - 驱动数据流管理	综合应用 - 驱动组件样式开发
4h	1h	1h	1h	1h

副本奖励

• 从需求出发 BDD，ATDD，SpecByExample, UserStory

• 完整的 TDD 实例，完成页面 UI 拆分和组件开发，Visual Testing

• 多种用户角色参与，全流程的「商品管理 + 购物车购买」测试路径

• 建立在充分覆盖且运行快速的自动化测试基础上的持续集成/持续交付

BOSS 掉落

• useHooks - Easy to understand React Hook recipes
• 常用且高质量的 Umi Hooks
• 学习更多好用的 React Hooks — 👍
• 私人收藏 React Hook 模板代码

React Hook Snippets