> For the complete documentation index, see [llms.txt](https://jimmylv.gitbook.io/tdd-frontend/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jimmylv.gitbook.io/tdd-frontend/coding/00-project-fizzbuzz/04-initial-practise-tdd-cycle.md).

# 任务 1：TDD 初体验

Hi，你好，我是 JimmyLv 吕靖，这是你开始 前端 TDD 练习的第 1 天，今天我来跟你介绍 FizzBuzz 的下一个任务。

很多第一次接触 TDD 的同学，不知道“测试驱动开发”到底应该怎么操作，特别是在前端。

## TDD 循环：红-绿-重构

![](/files/-M1ictY032bW24snxGw4)

五个步骤:

1. 快速新增一个测试
2. 运行所有的测试，发现新增的测试不能通过
3. 做一些小小的改动，尽快地让测试程序可运行
4. 运行所有的测试，并且全部通过
5. 重构代码，以消除重复设计，优化设计结构

## 我的演示视频

今天的任务是跟着我的步伐，来练习一下 TDD 的节奏。

[![](/files/-M1ictY2f7L0K7RG4aPk)](https://www.icloud.com/iclouddrive/0jGqwXA8J-QhACwBm8BvI-BOg#jimmylv-tdd-fizzbuzz-ui)

当然，😉 我也贴心得准备了百度网盘地址：

链接: <https://pan.baidu.com/s/1wItraTwXJ9Hytzg-JQSNYw>\
密码: 4rwq

看完后，It's your turn，开始自己演练吧！

打开计时器，看看自己演练的时间是多少呢？

## 本次任务的练习要求

1. 观看 FizzBuzz 的视频录像。（你可能需要不时暂停一下，想想为什么这么操作？）
2. 照着视频录像的过程，再由你自己亲自把 FizzBuzz 再实现一遍。


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://jimmylv.gitbook.io/tdd-frontend/coding/00-project-fizzbuzz/04-initial-practise-tdd-cycle.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.