# 第五题：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](https://usehooks.com/)
* [常用且高质量的 Umi Hooks](https://hooks.umijs.org/zh-CN/hooks/async)
* [学习更多好用的 React Hooks — 👍](https://github.com/streamich/react-use)
* 私人收藏 React Hook 模板代码 

![React Hook Snippets](https://2897586075-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LquCgGNObzQ8HY5Og1P%2F-M4rUd-FCTGyLmu0v6eh%2F-M4rUduRgNqsszk8NVvB%2Freact-hook-snippets.png?generation=1586847725008600\&alt=media)