Vue项目自动化测试

在开发的过程中，除了代码本身，测试也是重要的一环。大体来说，测试分为以下几种类型：

单元测试
功能测试
性能测试
安全测试

单元测试工具 Karma

要使用 Karma 对代码进行单元测试，首先需要安装一系列的相关插件。我们来新建一个名为 myKarmDemo 的目录，并安装相关的插件：

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 的配置文件。
配置文件比较简单，能够比较轻松的看懂，这里我对原始的配置文件进行简单的修改，结果如下：

// 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
  })
}

然后创建一个 src 目录和一个 test 目录，在其中分别创建 index.js 和 index.spec.js 文件。
我要做的测试内容比较简单，对 index.js 中的两个函数（一个加法函数，一个乘法函数）进行测试。
index.js 文件如下：

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

index.spec.js 文件如下：

describe("运算功能单元测试",function(){
    it("加法函数测试",function(){
        var add5 = add(5)
        expect(add5(5)).toBe(10)
    });

    it("乘法函数测试",function(){
        var multi5 = multi(5)
        expect(multi5(5)).toBe(25)
    })
})

单测的代码写好后，就可以使用 karma start 来运行单元测试。由于我们的乘法代码中有错误，因此测试结果是这样的：

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) 运算功能单元测试 乘法函数测试 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)

将乘法函数的代码改为正常，再次启用 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)