换一种思路写代码，前端测试驱动开发模式(TDD)快速入门

什么是测试驱动开发模式

测试驱动开发（Test-Driven Development）是一种软件开发的思惟和方法，个人理解是它是一种开发的循环，先写测试代码，再用最小的代码实现这个测试，再继续写测试代码，继续用最小的代码实现。当实现全部的测试用例，代码也就完成了。

最近也在实践Tdd开发，和以前先开发，再自测的方向不一样，此次的开发顺序是， 文档--->测试用例--->代码--->测试经过--->下一个测试用例。这样作有如下优缺点：

优势

• 在开始能够比较明确本身要作什么，把错误暴露在整个开发流程比较靠前的位置，修改的成本也比较小
• 在以后对代码优化的过程当中，由于有测试代码的存在，能够更好的优化代码，优化完以后再执行一遍代码，而不用担忧优化过程当中又出错
• 经过测试代码，能够帮助理清楚程序中关键点
• 也更有利于以后的维护

缺点

• 加上测试的代码，会适当增长一些工做量
• 可能会测的不全面

整体来讲，若是对一些基数设施的建设，好比基础组件等，须要长期维护的项目，Tdd的应用，仍是利大于弊。

前端TDD开发环境的搭建

若是想应用Tdd的方法到前端的开发中，主要用到如下几个工具（工具的用法在后面介绍）：

mocha.js

mocha 主要提供了describe的语法，用来描述测试用例，而且把执行测试后的结果清楚的返回到终端上。
官网：mochajs.org
github: github.com/mochajs/moc…

chai.js

chai 主要提供了断言函数assert,用来断言和比较测试的结果和代码执行的结果。
官网: www.chaijs.com/
github: github.com/chaijs/chai
assert库方法文档：www.chaijs.com/api/assert/…

sinon.js

sinon 主要用来mock一些东西，好比能够用sinon mock一个假的函数，sinon也能够返回这个函数执行与否。
官网: sinonjs.org
github: github.com/sinonjs/

基础环境搭建

先npm init生成一个项目。 再执行如下安装语句：

npm install sinon moncha chai sinon-chai --save-dev
复制代码

创建一个test文件夹，能够把写测试用例的Js放在这个文件夹中， 为了能够方便执行单元测试，能够加一个npm scripts，在package.json的scripts中加入以下语句，表示使用mocha去执行test文件夹下的js测试：

"scripts":{
  "test": "mocha test/**/*.js"
}
复制代码

在test中创建一个js文件，在文件的中引入这些工具，为了链接sinon 和 chai,要使用到sinon-chai

const chai = require("chai")
const sinon = require("sinon")
const sinonChai = require("sinon-chai")
chai.use(sinonChai)
const assert = chai.assert // 从chai中引出assert
复制代码

如何实施TDD

如何写一个单元测试

首先咱们看一个简单的单元测试代码：

describe('测试navigateTo方法', ()=>{
  it("new router后存在navigateTo方法", ()=>{
    let newRouter = new VictRouter()
    assert.isFunction(newRouter.navigateTo)
  })
})
复制代码

• describe()表示测试的一个大范围，第一个参数是范围的名字，第二个是一个回调函数，其中能够放单元测试代码
• it()里写单元测试的代码，第一个参数仍是这个测试的名字，第二个回调函数中放入单元测试代码
• assert 就是断言代码执行后的结果是什么，好比这个例子中，由于要测试"实例化后存在navigateTo方法"，就断言new以后的实例包含navigateTo这个函数，因此用到了assert的isFunction的方法
• 写完以后运行npm run test, 就能看到测试的运行结果了，若是没有报错就是测试成功了

如何写多个单元测试代码：

直接在describe中加入多个it函数便可：

describe('测试navigateTo方法',()=>{
    it(`new router 后存在navigateTo方法`, ()=> {
      let newRouter = new VictRouter()
      assert.isFunction(newRouter[key])
    })
  it(`navigateTo的入参类型必须为object`, ()=>{
    let newRouter = new VictRouter()
    let badFn = function() { throw new newRouter[navigateTo]('1111')}
    assert.throws(badFn, 'this.commonDirectFn is not a function')
  })
})
复制代码

npm run test以后能够执行全部的测试

通常的测试思路

• 能够先从最简单的开始测试，好比存在某个方法，入参的类型等等
• 最好是先写测试用例，再写业务代码
• 用尽可能小的成本实现测试

善用throw抛出错误

在执行的代码中，特别在开始一些对入参的判断的代码，可使用throw出错误，再用assert捕获这个错误，这样能够比较方便的测试入参是否符合预期。可是使用assert.throws的时候，要用一个函数包装要测试的代码：

it(`navigateTo的入参类型必须为object`, ()=>{
    let newRouter = new VictRouter()
    let badFn = function() { throw new newRouter[navigateTo]('1111')} // 这里用一个函数包装
    assert.throws(badFn, 'this.commonDirectFn is not a function') // 再把包装后的函数传入throws
  })
复制代码

使用sinon模拟函数

若是须要模拟一个函数，能够用sinon去模拟，使用方法：sinon.fake()，而且课已经过这个sinon的called方法判断函数是否被执行。

let fn = sinon.fake() //生成一个模拟函数
assert(fn.called) //断言这个函数是否被执行
复制代码

小结

本文只是对Tdd的一个简单介绍，适用于快速入门。mocha,chai,sinon的一些高级的用法，还须要经过实践去学习。 另，本文只是对但纯js的测试，react,vue和小程序都有他们本身的ui测试的方案。 想经过本文，让你们能够简单了解Tdd，而且学到一种新的思路去写代码。