> 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-commentbox.md).

# 第三题：CommentBox 留言板

## 副本简介

CommentBox 留言板是一个非常常见的 UI 组件。通过对简单组件的多次练习，帮助你掌握 TDD 在前端开发中的运用，养成刻意拆分组件的习惯。

## 副本挑战

1. 掌握前端多维度测试与 TDD 的基本步骤
2. 至少练习 3 遍 CommentBox 组件开发
3. 能在 1 小时内完成 CommentBox 题目

## 时长限制

**6 小时**

| 总时长 | 任务 1    | 任务 2            | 任务 3      | 任务 4           |
| --- | ------- | --------------- | --------- | -------------- |
| 任务  | Cypress | Testing Library | Storybook | Outside-In TDD |
| 6h  | 2h      | 1h              | 1h        | 2h             |

## 副本奖励

* 掌握 E2E 级别 Cypress 更直观的 UI TDD 测试路径
* 熟悉单元级别 Testing Library 的行为测试方法与理念
* 由外至内，完整的前端测试驱动开发 (TDD) “套路”
* 掌握视觉级别 TDD 验证，重构到 Storybook，穷举 UI Stories
* UI 重构的挑战：视觉测试，而不是基于 className 或 style 的测试

## BOSS 掉落

1. [Cypress E2E Cheat Sheet.pdf](/tdd-frontend/coding/00-project-commentbox.md)
2. [Testing Library Cheat Sheet.pdf](/tdd-frontend/coding/00-project-commentbox.md)
3. [Visual Testing Handbook.pdf](https://github.com/JimmyLv/tdd-frontend/tree/d820c2162f278476e9d5f0543895a35cd6efd73d/assets/visual%20testing%20handbook.pdf)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://jimmylv.gitbook.io/tdd-frontend/coding/00-project-commentbox.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.