CommentBox 项目剖析

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

组件功能

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

功能 1：基础评论框

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

功能 2：留言列表

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

功能 3：嵌套评论

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

功能 4：回复框

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

技能要求

1. IDE 的快捷键操作，充分利用代码生成

2. 用 Cypress 编写 E2E 测试，驱动出组件拆分

3. 用 Jest 编写组件单元测试，驱动组件接口设计

4. 用 Storybook 验证组件样式，穷举 UI Stories

5. 保持！刻意练习的节奏，重复练习

任务拆解

本项目分为 4 个任务：

• 任务 1：Cypress E2E 测试

• 任务 2：测试驱动组件单元接口

• 任务 3：组件级别的快速反馈

• 任务 4：由外到内的前端 TDD