karma + jasmine 自动化测试

前端测试

1. Karma 安装

//安装
npm install -g karma
//测试安装是否成功
karma start

2. Karma + Jasmine 配置

需包含的modules
module 之间是存在依赖关系的，当安装了某个模块的同时，如果存在依赖关系则会同时自动下载相关的依赖包

• jasmine-core
• karma-jasmine

• 初始构建karma
  

  通过方向键选择相关内容

//执行karma初始化
> 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 a browser automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
>
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.
> yes

// Karma configuration
// Generated on Tue Sep 22 2015 14:13:42 GMT+0800 (中国标准时间)
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: [
    ],
    // 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: true,
    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],
    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false
  })
}

• 安装karma-jasmine

npm install karma-jasmine

• 业务逻辑文件 src.js

function reverse(name){
    return name.split("").reverse().join("");
}

• 测试代码文件 test.js

describe("A suite of basic functions", function() {
    it("reverse word",function(){
        expect("DCBA").toEqual(reverse("ABCD"));
    });
});

• 修改karma.conf.js配置文件
  

  配置files和exclude,指定配置文件和测试文件

module.exports = function (config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine'],
        files: ['*.js'],
        exclude: ['karma.conf.js'],
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        captureTimeout: 60000,
        singleRun: false
    });
};

• 启动测试

//如果不指定测试配置文件，则只能启动karma，并不知道将执行何种测试用例
karma start karma.conf.js

3. karma和istanbul代码覆盖率

在测试的同时，我们也需要了解，我们测试用例的代码覆盖率情况

需要的相关包

• jasmine-core
• karma
• karma-chrome-launcher
• karma-coverage
• karma-jasmine

• 安装 karma-coverage

npm install karma-coverage

• 安装 karma

npm install karma

• 安装 karma-chrome

npm install karma-chrome-launcher

• 修改karma.conf.js
  

  添加 coverage 相关配置

module.exports = function(config) {
   config.set({
        basePath: '',
        frameworks: ['jasmine'],
        files: ['*.js'],
        exclude: ['karma.conf.js'],
        reporters: ['progress','coverage'],// coverage新增配置内容
        preprocessors : {'src.js': 'coverage'},// coverage新增配置内容
        // coverage新增配置内容
        coverageReporter: {
            type : 'html',
            dir : 'coverage/'
        },
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        captureTimeout: 60000,
        singleRun: false
    });
}

• 执行测试

karma start karma.conf.js

在这里，覆盖报告是在正常的jasmine测试结果后分析得到的，所以和之前的执行是一样的。
当 jasmine 测试结束后，将在配置文件中设置的 dir : coverage/ doverage文件生成报告