> For the complete documentation index, see [llms.txt](https://jimmylv.gitbook.io/tdd-frontend/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jimmylv.gitbook.io/tdd-frontend/coding/00-project-bookshelf.md).

# 第四题：Bookshelf 魔法书架

## 副本简介

Bookshelf 书架是一个非常常见的真实业务场景。通过对书本（可理解为商品）操作的多次练习，帮助学员掌握 TDD 在前端开发中的运用，养成刻意拆分组件的习惯。

![Bookshelf 书架](/files/-Lz0BcoBZXxENOH4yjV-)

## 副本挑战

1. 掌握由外到内的测试驱动开发节奏
2. 练习前端组件拆分与单向数据流管理
3. 至少练习 3 遍 Bookshelf 题目
4. 能在 1 小时内完成 Bookshelf 题目

## 时长限制

**4 小时**

| 总时长 | 任务 1     | 任务 2        | 任务 3      | 任务 4          |
| --- | -------- | ----------- | --------- | ------------- |
| 任务  | API 契约测试 | Redux 数据流测试 | 组件化与数据流管理 | 简化 Redux 项目结构 |
| 4h  | 1h       | 1h          | 1h        | 1h            |

## 副本奖励

* 集成 Redux，数据 model 层面的测试 `redux-saga-test-plan`
* 学习 Jest Mock API 及异步测试方法 (`mock()` `fn()` `spyOn()`)
* API 契约测试，利用 Pact 简化**前后端集成**开发策略
* selectors 与 `useSelector`，最简单的纯 JavaScript 逻辑单测
* services 层测试，直接 mock 数据返回，API 请求则留给契约测试
* 完善测试策略，utils，也是最简单的纯 JavaScript 单元测试

## BOSS 掉落

* [Acceptance Test Driven Development with React.epub](https://leanpub.com/build-react-app-with-atdd)
* [验收测试驱动开发介绍（ATDD）](https://www.jianshu.com/p/0389360ac58f)