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

npm i -g mocha

npm i chai -D  //斷言庫

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

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

新建一個測試文件add.test.js(一般測試文件命名都是以被測文件后加.test后綴)
describe:稱為"測試套件"（test suite），表示一組相關(guān)的測試。它是一個函數(shù)，第一個參數(shù)是測試套件的名稱（"加法函數(shù)的測試"），第二個參數(shù)是一個實際執(zhí)行的函數(shù)。
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("返回值為數(shù)字", 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庫 baby-ajax
mocha-phantomjs:是一個 通過 PhantomJS 執(zhí)行 mocha 瀏覽器環(huán)境測試的工具庫。它使用 PhantomJS 的瀏覽器環(huán)境，通過事件監(jiān)聽的方式檢測 mocha 測試的執(zhí)行過程。
mocha-phantomjs-core:是 mocha-phantomjs的核心依賴庫。作者將它多帶帶提取出來，是因為它也可以支持 SlimerJS。
SlimerJS :基于的 Gecko 內(nèi)核(Firefox)的與 PhantomJS 的 API 幾乎相同的工具，而且SlimerJS在執(zhí)行過程中默認會啟動有界面的瀏覽器窗體，可以看到整個執(zhí)行過程

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

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

mocha init test

mocha會自己為我們創(chuàng)建測試模板，包含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中模擬瀏覽器環(huán)境，從而可以獲取在瀏覽器中的對象，如window等

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