# 第五题：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](/files/-M4rUduRgNqsszk8NVvB)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jimmylv.gitbook.io/tdd-frontend/coding/01-project-shoppingcart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.