# 第四题：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)


---

# 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/00-project-bookshelf.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.