♻️
前端 TDD(测试驱动开发)
  • README
  • 总-课程目标
  • 总-课程安排
  • Coding
    • 第一题:FizzBuzz 数字游戏
      • 什么是 FizzBuzz?
      • 任务 0:练功前的热身
      • FizzBuzz 项目剖析
      • 任务 1:TDD 初体验
      • 任务 2:先利其器
      • 任务 3:再撸一遍
      • FizzBuzz 项目总结
      • 附录 1:Jest 测试基础及要点
      • 附录 2:Testing Library 组件测试基础
    • 第二题:MarsRover 火星车
      • 任务 1:Tasking 任务分解
      • 火星车实战
      • 火星车 Tasking 任务分解
      • 任务 2:MarsRover 实战演练
      • MarsRover Coding 演示
      • 任务 3:MarsRover 练习
      • MarsRover 项目总结
    • 第三题:CommentBox 留言板
      • CommentBox 项目剖析
      • 任务 1:Cypress E2E 测试
      • 任务 2:测试驱动组件单元接口
      • 任务 3:组件级别的快速反馈
      • 任务 4:由外到内的前端 TDD
      • CommentBox 项目总结
    • 第四题:Bookshelf 魔法书架
      • Bookshelf 项目剖析
      • 任务 1:练习 API 契约测试
      • 任务 2:组件化与数据流管理
      • 任务 3:Redux 数据流测试
      • 任务 4:简化 Redux 项目结构
      • Bookshelf 项目总结
      • 附录 1:什么才是真正的 RESTful 架构?
      • 附录 2:【译】Redux 和 命令模式
      • 附录 3:【译】什么是 Flux 架构?(兼谈 DDD 和 CQRS)
    • 第五题:ShoppingCart 购物车
      • ShoppingCart 项目剖析
      • React 哲学:Thinking in React
      • 任务 1:任务分解 - 驱动组件树拆分
      • 任务 2:综合应用 - 驱动组件接口设计
      • 任务 3:综合应用 - 驱动数据流管理
      • 任务 4:综合应用 - 驱动组件样式开发
      • ShoppingCart 项目总结
由 GitBook 提供支持
在本页
  • TDD 循环:红-绿-重构
  • 我的演示视频
  • 本次任务的练习要求
  1. Coding
  2. 第一题:FizzBuzz 数字游戏

任务 1:TDD 初体验

上一页FizzBuzz 项目剖析下一页任务 2:先利其器

最后更新于5年前

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

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

TDD 循环:红-绿-重构

五个步骤:

  1. 快速新增一个测试

  2. 运行所有的测试,发现新增的测试不能通过

  3. 做一些小小的改动,尽快地让测试程序可运行

  4. 运行所有的测试,并且全部通过

  5. 重构代码,以消除重复设计,优化设计结构

我的演示视频

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

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

看完后,It's your turn,开始自己演练吧!

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

本次任务的练习要求

  1. 观看 FizzBuzz 的视频录像。(你可能需要不时暂停一下,想想为什么这么操作?)

  2. 照着视频录像的过程,再由你自己亲自把 FizzBuzz 再实现一遍。

链接: 密码: 4rwq

https://pan.baidu.com/s/1wItraTwXJ9Hytzg-JQSNYw