摘要：稱(chēng)為測(cè)試用例，表示一個(gè)多帶帶的測(cè)試，是測(cè)試的最小單位。它使用的瀏覽器環(huán)境，通過(guò)事件監(jiān)聽(tīng)的方式檢測(cè)測(cè)試的執(zhí)行過(guò)程。前端的自動(dòng)化測(cè)試還需慢慢探索，任重而道遠(yuǎn)。前端技術(shù)交流群歡迎加入

npm i -g mocha

npm i chai -D  //斷言庫(kù)

比如有一個(gè)add函數(shù)

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

新建一個(gè)測(cè)試文件add.test.js(一般測(cè)試文件命名都是以被測(cè)文件后加.test后綴)
describe:稱(chēng)為"測(cè)試套件"（test suite），表示一組相關(guān)的測(cè)試。它是一個(gè)函數(shù)，第一個(gè)參數(shù)是測(cè)試套件的名稱(chēng)（"加法函數(shù)的測(cè)試"），第二個(gè)參數(shù)是一個(gè)實(shí)際執(zhí)行的函數(shù)。
it:稱(chēng)為"測(cè)試用例"（test case），表示一個(gè)多帶帶的測(cè)試，是測(cè)試的最小單位。

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

describe("add功能測(cè)試", function(){
  it("1 + 1 = 2", function(){
    expect(add(1, 1)).to.be.equal(2)  //斷言庫(kù)的用法
  })；
  it("返回值為數(shù)字", function(){
    expect(add(1, 1)).to.be.a("number")
  });
})

chai中的expect模塊的語(yǔ)法很接近自然語(yǔ)言的風(fēng)格，常見(jiàn)的有:

// 相等或不相等
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/);

以上方法可以很輕松的測(cè)試封裝的方法和模塊

在這里使用我自己的ajax庫(kù) baby-ajax
mocha-phantomjs:是一個(gè) 通過(guò) PhantomJS 執(zhí)行 mocha 瀏覽器環(huán)境測(cè)試的工具庫(kù)。它使用 PhantomJS 的瀏覽器環(huán)境，通過(guò)事件監(jiān)聽(tīng)的方式檢測(cè) mocha 測(cè)試的執(zhí)行過(guò)程。
mocha-phantomjs-core:是 mocha-phantomjs的核心依賴(lài)庫(kù)。作者將它多帶帶提取出來(lái)，是因?yàn)樗部梢灾С?SlimerJS。
SlimerJS :基于的 Gecko 內(nèi)核(Firefox)的與 PhantomJS 的 API 幾乎相同的工具，而且SlimerJS在執(zhí)行過(guò)程中默認(rèn)會(huì)啟動(dòng)有界面的瀏覽器窗體，可以看到整個(gè)執(zhí)行過(guò)程

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

在項(xiàng)目目錄下創(chuàng)建測(cè)試目錄

mocha init test

mocha會(huì)自己為我們創(chuàng)建測(cè)試模板，包含html，css，js

手動(dòng)引用mocha.js，chai.js,和自己的測(cè)試js

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

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

describe("get測(cè)試", function(done){
    Ajax.get("./data.json")
    .then(function(res){
        expect(res).to.have.include.keys("data","status") //返回值必須有兩個(gè)key，一個(gè)是data，一個(gè)是status
        done()
    }, function(){
         expect(res).to.have.include.keys("data","status")
         done()
    })
})

這樣就可以在node中模擬瀏覽器環(huán)境，從而可以獲取在瀏覽器中的對(duì)象，如window等

使用mocha配合chai以及mocha-phantomjs可以很方便的對(duì)函數(shù)的執(zhí)行進(jìn)行一步一步的監(jiān)控，數(shù)值的類(lèi)型做限定。但是如果一旦設(shè)計(jì)到業(yè)務(wù)邏輯的測(cè)試和UI的測(cè)試，可能就有點(diǎn)力不從心了，業(yè)務(wù)功能測(cè)試需要數(shù)據(jù)源的支撐，一味的使用假數(shù)據(jù)很難覆蓋異常情況；而UI的測(cè)試雖然可以借助jq的trigger來(lái)模擬用戶(hù)行為，但是這顯然是個(gè)巨大的任務(wù)量，首先要在測(cè)試目錄下的html寫(xiě)入需要測(cè)試的dom元素，再寫(xiě)測(cè)試邏輯?？赡芤粋€(gè)小時(shí)就完成的UI需要一天或者更長(zhǎng)的時(shí)間來(lái)寫(xiě)測(cè)試邏輯。