# CommentBox 项目剖析

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

## 组件功能

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

![](/files/-M1NuZOlB3q4YoJDFxpS)

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

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

### 功能 2：留言列表

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

### 功能 3：嵌套评论

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

### 功能 4：回复框

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

![](/files/-M1NuZOnttBvmYJG1-oy)

## 技能要求

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

## 任务拆解

本项目分为 4 个任务：

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


---

# 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/01-project-analysis.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.