> 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 再实现一遍。