大前端的自動化工廠（5）—— 基於Karma+Mocha+Chai的單元測試和接口測試

一. 前端自動化測試

大多數前端開發者對測試相關的知識是比較缺少的，一來是開發節奏很快，來不及寫，另外一方面團隊裏也配備了「人肉測試機」，徹底不必本身來。但隨着項目體量的增大，許多人維護同一份代碼，常常會出現有些函數莫名其妙地結果不對了，或者某個接口的入參變了，又或者哪位大哥把後端返回的數據結構給改了。天天工做的時間裏被拉來拉去幫人定位問題，結果花了不少時間卻發現大部分都是別人的鍋。每當遇到項目上線，那就更熱鬧了，跟着其餘「人肉測試機」你們一塊兒點點點......

不少團隊都有個通病，凡是出了問題，先往前端身上推，而後前端各類檢測排查，到最後是誰的鍋，誰呵呵一笑而後領走就完了，若是你也曾所以內心印下了不可勝數的草泥馬的馬蹄印，那我強烈建議你學習【前端自動化測試】相關的知識，或許你不會常常用到它，但在組內互懟和甩鍋的環節絕對能助你一臂之力。固然總有一天，你會發現測試的價值遠不止這樣。它對大型項目提供的可靠性保障是人力沒法比擬的。

前端很流行這樣一句話：若是你以爲單元測試沒什麼用，只能說明你作的項目不夠大。

二. 工具簡介

2.1 Karma

官方網址：https://karma-runner.github.io/2.0/index.html

Karma爲前端自動化測試提供了跨瀏覽器測試的能力，能夠自動在Chrome,Firefox,IE等主流瀏覽器依次跑完測試用例，同時也支持headless瀏覽器(入phantomJs)中運行測試用例。webpack+babel能夠主動爲想要適配的瀏覽器提供轉碼和墊片補丁引入能力，而Karma能夠爲最終的結果提供驗證能力。Karma的配置方式能夠閱讀《webpack4.0各個擊破(9)——Karma篇》進行了解。

2.2 Mocha

Mocha是前端自動化測試框架，測試框架須要解決兼容不一樣風格斷言庫，測試用例分組，同步異步測試架構，生命週期鉤子等框架級的能力。

• Mocha的基本語法

describe('我如今要測某一個頁面的幾個功能',function(){
    describe('如今要測XX功能',function(){
        it('某個變量的值應該是數字',function(){
            //寫斷言
        })
    });
     describe('如今要測YY功能',function(){
        it('某個數組長度應該不小於10',function(){
            //寫斷言
        })
    });
})

• 異步測試語法

describe('如今要測XX功能',function(){
    it('某個變量的值應該是數字',function(done){
        //寫斷言
        //手動調用done()表示異步結束，相似於Promise中的resolve
    })
});

• 不一樣風格的斷言庫

  支持should.js,expect.js及node核心斷言模塊assert等。

• 生命週期鉤子

  生命週期鉤子通常用來創建和清理環境或全局變量。

describe('hooks', function() {
  before(function() {
    // runs before all tests in this block
  });
  after(function() {
    // runs after all tests in this block
  });
  beforeEach(function() {
    // runs before each test in this block
  });
  afterEach(function() {
    // runs after each test in this block
  });
  // test cases
});

2.3 Chai

Chai是一個斷言庫合集，支持expect,assert,should斷言語法，非專業測試崗位其實不必深究，瞭解使用方法就能夠了。使用示例：

expect(bar).to.not.exist;//斷言變量bar不存在
expect(data).to.have.ownProperty('length');//斷言data有length屬性
expect(name).to.be.a('string');//斷言name是一個字符串
assert.equal(value1,value2);//斷言value1和value2相等
Tim.should.be.an.instanceof(Person);//斷言Tim是Person類的實例

上面的語法在引入了Chai後都是支持的，當斷言不成立時，結果報告中會給出明確標記。

三. 基於Chai的自動化單元測試

單元測試的原理並不算複雜，至關於另外編寫了一套程序，把業務邏輯中的腳本文件當作模塊引入，模擬其運行環境（例如須要的瀏覽器類型，全局變量等），而後使用一組或若干組覆蓋不一樣使用場景的參數來調用想要測試的函數單元，並判斷函數返回的結果是否和預期的相同。

簡單地說，自動化測試工具只是取代了一個照着Excel表格測試並記錄結果的人力資源。

測試用例文件的基本寫法：

var chai = require('chai');//引入斷言庫
var expect = chai.expect;//使用expect語法
//引用源代碼中的業務邏輯模塊；
var ColorFac = require('../../../../src/components/Example/colorFac');

describe("ColorFac Module Test", function () {
  it("should return a luminanced color", function () {
      //調用源代碼中業務邏輯模塊中的方法;
    var color = ColorFac.luminate("#fff", "-0.5");
      //編寫測試斷言
    expect(color).is.not.empty;
  });
});

單元測試報告：

使用Webpack + Karma + Mocha + Chai進行自動化測試（單元測試+代碼覆蓋率）的方法能夠查看《webpack4.0各個擊破(9)——Karma篇》。

四. 基於Chai-http的自動化接口測試

Chai-Http是基於Chai擴展的插件，可用於測試與http請求相關的邏輯代碼。開發中也能夠利用PostMan或是DocLever來管理接口並進行接口測試。接口測試的運行方式和單元測試很相似，區別在於測試用例的寫法。假設接口測試的用例都寫在/test/apis/apis.js中,配置方式以下：

Karma.api.conf.js:

var path = require('path');
module.exports = function(config) {
    config.set({
        files: [
            'test/apis/apis.js'
        ],
        // frameworks to use
        frameworks: ['mocha'],
        preprocessors: {
            // only specify one entry point
            // and require all tests in there
            'test/apis/apis.js': ['webpack']
        },
        reporters: ['mocha'],
        webpack: {
            mode: 'none',
        },
        webpackMiddleware: {
            noInfo: true
        },
        plugins: [
            require("karma-webpack"),
            require("karma-mocha"),
            require("karma-chai"),
            require("karma-chrome-launcher"),
            require("karma-mocha-reporter"),
        ],
        browsers: ['Chrome']
    });
};

/test/apis/apis.js：(測試用例的語義化很是明顯，代碼基本不須要解釋)。

var chai = require('chai');
var chaiHttp = require('chai-http');
var expect = chai.expect;
chai.use(chaiHttp);

//define address
const ADDRESS = "http://localhost:3001";
//open a http connection
var requester = chai.request(ADDRESS);
describe('列表服務APIS測試',function () {

    it('GET /healthmap/chart1 應該返回包含legendData字段的數據',function (done) {
        chai.request(ADDRESS).get('/healthmap/chart1')
        .end((err,res)=>{
            var data = JSON.parse(res.text);
            expect(res).to.have.status(200);
            expect(data.data).to.have.ownProperty('legendData');
            done();
        })
    });

    it('GET /operationdashboard/systemwarn 應該返回字符串',function (done) {
        chai.request(ADDRESS).get('/operationboard/systemwarn')
        .end((err,res)=>{
            var data = JSON.parse(res.text);
            expect(res).to.have.status(200);
            expect(data.data).to.be.a('String');
            done();
        })
    });
})

命令行裏啓動Karma跑一下接口測試，就能夠看到結果:

測試用例沒經過的接口全都被標記出來了，省心省力。