單元測試（二）

前言

上次談了用 chai 和 chai-spies 來進行單元測試，可是這種測試方法存在着一些不方便之處，每次改動代碼以後都須要刷新瀏覽器，打開開發者工具，來查看有沒有報錯。

那麼，有沒有一種方法，使這些流程自動化，自動將測試的結果輸出到某個可見的地方（例如：終端）？此次就來嘗試完成這個過程。

用到的工具

此次咱們須要用到：

• Karma：卡瑪是一個測試運行器，它能夠呼起瀏覽器，加載測試腳本，而後運行測試用例。
• Mocha：摩卡是一個單元測試框架/庫，它能夠用來寫測試用例。
• Sinon：西農是一個 spy / stub / mock 庫，用以輔助測試。

安裝

執行下面的命令安裝工具。別一個一個地看包名了，全都安裝就完事了。

npm i -D karma karma-chrome-launcher karma-mocha karma-sinon-chai mocha sinon sinon-chai karma-chai karma-chai-spies

配置 Karma

新建一個 karma.conf.js，並將下面的內容複製進去。

module.exports = function(config) {
  config.set({
    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',
    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha', 'sinon-chai'],
    client: {
      chai: {
        includeStack: true
      }
    },

    // list of files / patterns to load in the browser
    files: ['dist/**/*.test.js', 'dist/**/*.test.css'],

    // list of files / patterns to exclude
    exclude: [],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {},

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],

    // web server port
    port: 9876,

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['ChromeHeadless'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  });
};
複製代碼

重寫測試用例

新建一個 test 文件夾，並在裏面創建一個 button.test.js 的文件，接下來將在這個文件裏面重寫測試用例。

const expect = chai.expect;
import Vue from 'vue';
import Button from '../src/button';

Vue.config.productionTip = false;
Vue.config.devtools = false;

describe('Button', () => {
  it('存在.', () => {
    expect(Button).to.be.ok;
  });

  it('能夠接受 color 做爲類名', () => {
    const div = document.createElement('div');
    document.body.appendChild(div);
    const Constructor = Vue.extend(Button);
    const vm = new Constructor({
      propsData: {
        color: 'red'
      }
    }).$mount(div);
    const element = vm.$el;
    //我斷言這個生成的 button 有一個類名叫 'red' 爲真
    expect(element.classList.contains('red')).to.eq(true);
    vm.$el.remove();
    vm.$destroy();
  });

  it('點擊 button 觸發 click 事件', () => {
    const Constructor = Vue.extend(Button);
    const vm = new Constructor({
      propsData: {
        color: 'red'
      }
    }).$mount();
    //間諜函數
    const callback = sinon.fake();
    vm.$on('click', callback);
    vm.$el.click();
    expect(callback).to.have.been.called;
  });
});
複製代碼

和以前的測試用例相似，就稍微改變告終構。

建立測試腳本

爲了方便啓動，咱們將啓動命令寫到 package.json 裏面。

"scripts": {
     "dev-test": "parcel watch test/* --no-cache & karma start",
     "test": "parcel build test/* --no-cache --no-minify && karma start --single-run"
 }
複製代碼

談談兩個命令中的兩個參數的意義。

• --no-cache ： 這是在用 parcel 打包過程當中遇到的坑，若是不加這個參數，就會用到以前打包的緩存，有可能會出錯。
• --no-minify ： 另外一個坑，不加這個參數，組件中的 <slot></slot> 標籤打包時會被忽略掉，會形成頁面錯誤。

使用

運行一次查看結果

若是隻想看看測試用例的結果就運行下面的命令。 npm run test

從圖中的運行結果能夠看出，在輸入這個命令以後，會進行組件打包、讀取測試用例文件、開啓服務器、啓動瀏覽器、運行測試用例等等一系列操做，最後將運行結果輸出。圖中顯示一共有3個測試，經過了3個，也就是測試用例所有經過。

監測測試結果

若是想隨時地監測測試用例文件的運行結果就用這個命令。 npm run dec-test

它啓動以後，會先輸入當前測試用例的運行結果，而後進行監測，當測試用例文件發送變化時，它就會再一次的運行並輸入結果。

咱們嘗試將測試顏色做爲類名的測試改一下。

it('能夠接受 color 做爲類名', () => {
    const div = document.createElement('div');
    document.body.appendChild(div);
    const Constructor = Vue.extend(Button);
    const vm = new Constructor({
      propsData: {
        color: 'black'
      }
    }).$mount(div);
    const element = vm.$el;
    //我斷言這個生成的 button 有一個類名叫 'red' 爲真
    expect(element.classList.contains('red')).to.eq(true);
    vm.$el.remove();
    vm.$destroy();
  });
複製代碼

來看看終端有什麼變化。

這裏咱們看到又運行了一次測試用例，顯示有一個測試失敗了，也就是咱們剛剛改的那一個。

咱們能夠利用這個功能，來協助咱們來寫測試用例。

如何更自動化？

雖然咱們如今可以在本地開啓監聽服務，隨時檢查測試用例的經過狀況，可是仍是要手動地開啓服務。

那麼，有沒有一種辦法，在雲端自動進行測試呢？下次來說講將代碼上傳至 Github 後，利用雲服務自動測試代碼，並將結果通知給咱們。