# CommentBox 项目剖析

CommentBox 留言板是一个非常常见的 UI 组件。评论组件可用于对事物的讨论，例如页面、博客文章、问题等等，对网站内容的反馈、评价和讨论。

## 组件功能

让我们渐进式得来迭代一个留言板组件，以 YouTube 为例：

![](https://2897586075-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LquCgGNObzQ8HY5Og1P%2F-M1NuYdz-gKpakD5Mcvb%2F-M1NuZOlB3q4YoJDFxpS%2Fyoutube-comments.jpg?generation=1583113456756837\&alt=media)

### 功能 1：基础评论框

一个最基本的评论框组件，带有作者头像、文本输入框，以及取消或评论操作按钮。

### 功能 2：留言列表

多个评论能够显示列表，并且包含列表数量和排序，并且每一条评论可以进行点赞或踩的操作。

### 功能 3：嵌套评论

评论可以嵌套，并且可以再次回复，保留 2 个层级，或可以支持无限层级的嵌套。

### 功能 4：回复框

回复评论框组件需要相同样式，想一想怎么复用呢？当然也需要支持自定义回复框。

![](https://2897586075-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LquCgGNObzQ8HY5Og1P%2F-M1NuYdz-gKpakD5Mcvb%2F-M1NuZOnttBvmYJG1-oy%2Fyoutube-comments-reply.jpg?generation=1583113456685958\&alt=media)

## 技能要求

1. IDE 的快捷键操作，充分利用代码生成
2. 用 Cypress 编写 E2E 测试，驱动出组件拆分
3. 用 Jest 编写组件单元测试，驱动组件接口设计
4. 用 Storybook 验证组件样式，穷举 UI Stories
5. 保持！刻意练习的节奏，重复练习

## 任务拆解

本项目分为 4 个任务：

* 任务 1：Cypress E2E 测试
* 任务 2：测试驱动组件单元接口
* 任务 3：组件级别的快速反馈
* 任务 4：由外到内的前端 TDD