Vue項目自動化測試

在開發(fā)的過程中颓屑，除了代碼本身斤寂，測試也是重要的一環(huán)。大體來說揪惦，測試分為以下幾種類型：

單元測試
功能測試
性能測試
安全測試

單元測試工具 Karma

要使用 Karma 對代碼進行單元測試遍搞，首先需要安裝一系列的相關(guān)插件。我們來新建一個名為 myKarmDemo 的目錄器腋，并安裝相關(guān)的插件：

npm install karma-cli -g
npm install karma jasmine-core karma-jasmine karma-phantomjs-launcher -D

接下來對我們的工程進行初始化：

karma init

之后會彈出一些選項溪猿，其中包含了一些初始化的配置工作，使用上下方向鍵可以在配置項之間進行切換纫塌。我這里選擇使用 Jasmine 測試框架诊县，使用 PhantomJS 無界面瀏覽器，整體的配置選項如下：

myKarmDemo karma init
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> PhantomJS

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> 

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
> 

Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> no

Config file generated at "/home/charley/Desktop/myKarmDemo/karma.conf.js".

初始化完成之后措左，會在我們的項目中生成一個 karma.conf.js 文件依痊，這個文件就是 Karma 的配置文件。
配置文件比較簡單怎披，能夠比較輕松的看懂胸嘁，這里我對原始的配置文件進行簡單的修改，結(jié)果如下：

// Karma configuration
// Generated on Sun Oct 29 2017 21:45:27 GMT+0800 (CST)

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: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      "./src/**/*.js",
      "./test/**/*.spec.js",
    ],


    // list of files 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: false,


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


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

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

然后創(chuàng)建一個 src 目錄和一個 test 目錄凉逛，在其中分別創(chuàng)建 index.js 和 index.spec.js 文件缴渊。
我要做的測試內(nèi)容比較簡單，對 index.js 中的兩個函數(shù)（一個加法函數(shù)鱼炒，一個乘法函數(shù)）進行測試衔沼。
index.js 文件如下：

// 加法函數(shù)
function add(x){
    return function(y){
        return x + y;
    }
}
// 乘法函數(shù)
function multi(x){
    return function(y){
        return x * y + 1;
    }
}

index.spec.js 文件如下：

describe("運算功能單元測試",function(){
    it("加法函數(shù)測試",function(){
        var add5 = add(5)
        expect(add5(5)).toBe(10)
    });

    it("乘法函數(shù)測試",function(){
        var multi5 = multi(5)
        expect(multi5(5)).toBe(25)
    })
})

單測的代碼寫好后蝌借，就可以使用 karma start 來運行單元測試。由于我們的乘法代碼中有錯誤指蚁，因此測試結(jié)果是這樣的：

myKarmDemo karma start
29 10 2017 22:21:56.283:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
29 10 2017 22:21:56.287:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
29 10 2017 22:21:56.294:INFO [launcher]: Starting browser PhantomJS
29 10 2017 22:21:56.549:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket 0h6boaepSUMwG7l2AAAA with id 44948955
PhantomJS 2.1.1 (Linux 0.0.0) 運算功能單元測試 乘法函數(shù)測試 FAILED
        Expected 26 to be 25.
        test/index.spec.js:9:31
PhantomJS 2.1.1 (Linux 0.0.0): Executed 2 of 2 (1 FAILED) (0.048 secs / 0.002 secs)

將乘法函數(shù)的代碼改為正常菩佑，再次啟用 karma start 進行測試：

29 10 2017 22:23:08.670:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
29 10 2017 22:23:08.673:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
29 10 2017 22:23:08.685:INFO [launcher]: Starting browser PhantomJS
29 10 2017 22:23:08.940:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket pl_pZDcAK4rBTpr0AAAA with id 40770640
PhantomJS 2.1.1 (Linux 0.0.0): Executed 2 of 2 SUCCESS (0.045 secs / 0.001 secs)