# 第三题：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: 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-commentbox.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.