♻️
前端 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 提供支持
在本页
  • 任务目标
  • 下载脚手架代码库
  • 项目很容易,但是并不简单
  • 本次任务的练习要求
  • 额外推荐资料
  1. Coding
  2. 第一题:FizzBuzz 数字游戏

任务 0:练功前的热身

上一页什么是 FizzBuzz?下一页FizzBuzz 项目剖析

最后更新于5年前

Hi,你好,我是 JimmyLv 吕靖,这是你开始 前端 TDD 练习的第 0 天。(没错!作为一枚合格的程序员,我们的计数是从 0 开始的。😁)

今天我来跟你介绍第一个任务,很简单:首先,完全由自己来做一遍 FizzBuzz 这道题。

任务目标

如果这是你第一次接触测试驱动开发(TDD)方法,可能你需要先花一点时间学习:

  1. 怎么?

  2. 以及如何?

  3. 然后下载脚手架代码库开始实现 FizzBuzz 计算器。

下载脚手架代码库

为了完成任务,我会给你一个梯子:

  1. 看懂题目,开始编码之前先花 10 分钟拆解任务,把任务清单写下来;

  2. 计时,开始编码;

  3. 要求用 TDD 的方式实现:先写测试,后写代码;

  4. 注意这个题目有两阶段需求,第一阶段和第二阶段完成时分别看一下时间。

准备好的脚手架代码库,是其次:

git clone https://github.com/JimmyLv/tdd-fizzbuzz.git
cd tdd-fizzbuzz

yarn install #安装依赖
yarn test #运行测试

------

 PASS  src/dojo/fizzBuzz.test.js
  Test FizzBuzz
    ✓ should return 2 given 1 + 1 (1ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.478s, estimated 1s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

项目很容易,但是并不简单

借用诺兰电影《致命魔术》里的一句台词,

Its simple but not easy.

你现在需要做的是反复训练,我会在群里全程陪你。

本次任务的练习要求

我希望你关注以下这几个问题:

  • 做完整道题用了多长时间?

  • 代码质量怎么样?

  • TDD 的方式顺畅吗?

  • 实际做的步骤,和一开始拆分的任务是否相同?

额外推荐资料

这是一个 React 脚手架,不用担心,只要你会写 JavaScript function 函数,你就会写 React。甚至于,使用 TDD 的方式,就是最好的学习方式。我相信你在学习 TDD 的同时,就能学会 React,甚至有可能一不小心就爱上了 React。

当然,我还通过 CodeSandbox 的方式作为你的快速入口: (可能需要科学上网),帮助你去除设置开发环境的障碍,一键打开 Cloud IDE 即可开始编码,右边则是你的网站运行效果预览,比如:

CRA
https://codesandbox.io/s/github/JimmyLv/tdd-fizzbuzz
https://tdd-fizzbuzz.jimmylv.now.sh
深度解读 - TDD(测试驱动开发) - 简书
使用 Jest 编写单元测试
使用 Testing Library 来测试前端组件
Edit tdd-fizzbuzz
CodeSandbox 代码编辑