装置

npm i -g mocha

npm i chai -D  //断言库

模块测试

比方有一个add函数

//add.js
function add(a, b){
  return a + b
}
module.exports = add

新建一个测试文件add.test.js(平常测试文件定名都是以被测文件后加.test后缀)
describe:称为”测试套件”（test suite），示意一组相干的测试。它是一个函数，第一个参数是测试套件的称号（”加法函数的测试”），第二个参数是一个现实实行的函数。
it:称为”测试用例”（test case），示意一个零丁的测试，是测试的最小单元。

// add.test.js
var add = require("./add.js")
var expect = require("chai").expect;

describe("add功用测试", function(){
  it("1 + 1 = 2", function(){
    expect(add(1, 1)).to.be.equal(2)  //断言库的用法
  })；
  it("返回值为数字", function(){
    expect(add(1, 1)).to.be.a("number")
  });
})

chai中的expect模块的语法很靠近自然语言的作风，罕见的有:

// 相称或不相称
expect(4 + 5).to.be.equal(9);
expect(4 + 5).to.be.not.equal(10);
expect(foo).to.be.deep.equal({ bar: 'baz' });

// 布尔值为true
expect('everthing').to.be.ok;
expect(false).to.not.be.ok;

// typeof
expect('test').to.be.a('string');
expect({ foo: 'bar' }).to.be.an('object');
expect(foo).to.be.an.instanceof(Foo);

// include
expect([1,2,3]).to.include(2);
expect('foobar').to.contain('foo');
expect({ foo: 'bar', hello: 'universe' }).to.include.keys('foo');

// empty
expect([]).to.be.empty;
expect('').to.be.empty;
expect({}).to.be.empty;

// match
expect('foobar').to.match(/^foo/);

以上要领能够很轻松的测试封装的要领和模块

基于浏览器的测试，如ajax

在这里运用我本身的ajax库
baby-ajax

mocha-phantomjs:是一个 经由历程 PhantomJS 实行 mocha 浏览器环境测试的东西库。它运用 PhantomJS 的浏览器环境，经由历程事宜监听的体式格局检测 mocha 测试的实行历程。

mocha-phantomjs-core:是 mocha-phantomjs的中心依靠库。作者将它零丁提取出来，是因为它也能够支持 SlimerJS。

SlimerJS :基于的 Gecko 内核(Firefox)的与 PhantomJS 的 API 险些雷同的东西，而且SlimerJS在实行历程当中默许会启动有界面的浏览器窗体，能够看到全部实行历程

npm i baby-ajax mocha-phantomjs-core mocha-phantomjs -D

在项目目次下建立测试目次

mocha init test

mocha会本身为我们建立测试模板，包括html，css，js

手动援用mocha.js，chai.js,和本身的测试js

//ajax.test.js
var Ajax = require('../example/static/ajax.js');
var expect = require('chai').expect;

expect(Ajax).to.be.an('object');

describe("get测试", function(done){
    Ajax.get("./data.json")
    .then(function(res){
        expect(res).to.have.include.keys("data","status") //返回值必须有两个key，一个是data，一个是status
        done()
    }, function(){
         expect(res).to.have.include.keys("data","status")
         done()
    })
})

如许就能够在node中模仿浏览器环境，从而能够猎取在浏览器中的对象，如window等

总结

运用mocha合营chai以及mocha-phantomjs能够很轻易的对函数的实行举行一步一步的监控，数值的范例做限制。然则假如一旦设想到营业逻辑的测试和UI的测试，能够就有点力不从心了，营业功用测试须要数据源的支持，一味的运用假数据很难掩盖异常情况；而UI的测试虽然能够借助jq的trigger来模仿用户行动，然则这显然是个庞大的任务量，起首要在测试目次下的html写入须要测试的dom元素，再写测试逻辑。能够一个小时就完成的UI须要一天或许更长的时候来写测试逻辑。

前端UI的自动化测试还需逐步探究，任重而道远。

前端技术交流群：709397872（迎接到场）