# 第三题：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](https://jimmylv.gitbook.io/tdd-frontend/coding/00-project-commentbox)
2. [Testing Library Cheat Sheet.pdf](https://jimmylv.gitbook.io/tdd-frontend/coding/00-project-commentbox)
3. [Visual Testing Handbook.pdf](https://github.com/JimmyLv/tdd-frontend/tree/d820c2162f278476e9d5f0543895a35cd6efd73d/assets/visual%20testing%20handbook.pdf)