前端测试驱动开发模式(TDD)快速入门
来源：http://www.ltesting.net
测试驱动开发（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，并且学到一种新的思路去写代码。
星云测试
http://www.teststars.cc
奇林软件
http://www.kylinpet.com
联合通测
http://www.quicktesting.net