前端測試框架mocha使用小結

安裝

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（歡迎加入）