karma入门学习整理

karma介绍

Karma是Testacular的新名字，在2012年google开源了Testacular，2013年Testacular更名为Karma。
Karma是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）。该工具可用于测试全部主流Web浏览器，也可集成到CI（Continuous integration）工具，也可和其余代码编辑器一块儿使用。这个测试工具的一个强大特性就是，它能够监控(Watch)文件的变化，而后自行执行，经过console.log显示测试结果。

安装karma

Karma依赖NodeJs和NPM包管理工具，安装前首先要确认存在node和npm（安装这里就不介绍了）

首先安装karma的cli工具karma-cli，有了cli工具才能够在全局执行karma命令

npm install karma-cli -g        // 安装karma的cli工具

新建一个目录来执行整个过程

$ mkdir karma-test

$ cd karma-test

生成package.json

$ npm init -y

安装karma

$ npm install --save-dev karma

初始化karma

$ karma init
// 选择测试框架，这里我选择jasmine
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

// 是否引入Require.js，不须要
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 

// 选择使用的浏览器，可使用无头浏览器PhantomJS,不过须要单独安装PhantomJS
// 这里也能够选择多个浏览器，测试用例将在多个浏览器里执行
// 这里我只选择了PhantomJS（键入空白执行下一步）
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.
> src/**/*.js
> test/**/*.js
14 10 2016 10:49:43.958:WARN [init]: There is no file matching this pattern.

>

// 上面指定的路径中须要排除在外的文件
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


Config file generated at "E:\demo\karma-test\karma.conf.js".

命令运行完成后，咱们能够看到在当前目录下生成了karma.conf.js文件。同时，根据咱们的配置状况，package.json里也多了一些依赖项。如个人package.json里，就多了

"devDependencies": {
    "karma-jasmine": "^1.1.2",
    "karma-phantomjs-launcher": "^1.0.4"
}

由于咱们选择的是使用jasmine框架和phantomjs,因此自动添加了这两个Karma依赖。

安装新增的依赖项

// 自动安装package.json新增的依赖项
$ npm install

// 安装jasmine框架
$ npm install jasmine-core --save-dev

编写第一个测试用例

建立一个 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 来运行单元测试。因为咱们的乘法代码中有错误，所以测试结果是这样的：

23 07 2018 15:28:06.122:INFO [watcher]: Changed file "E:/demo/karma-test/test/index.spec.js".
23 07 2018 15:28:06.334:INFO [watcher]: Changed file "E:/demo/karma-test/test/index.spec.js".
23 07 2018 15:28:06.570:INFO [watcher]: Changed file "E:/demo/karma-test/test/index.spec.js".
PhantomJS 2.1.1 (Windows 8 0.0.0) 运算功能单元测试 乘法函数测试 FAILED
        Expected 26 to be 25.
        <Jasmine>
        test/index.spec.js:9:31
        <Jasmine>
PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 2 of 2 (1 FAILED) (0.004 secs / 0.003 secs)
TOTAL: 1 FAILED, 1 SUCCESS

将乘法函数的代码改成正常，再次启用 karma start 进行测试：

23 07 2018 15:30:39.779:INFO [watcher]: Changed file "D:/test/karma-test/test/index.spec.js".
PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 2 of 2 SUCCESS (0.005 secs / 0.003 secs)
TOTAL: 2 SUCCESS

测试覆盖率

karma 的插件 karma-coverage 提供了测试代码覆盖率的支持。
首先你须要安装这个 Karma 插件，而后须要在配置文件的三个地方进行配置。

$ npm install karma-coverage --save-dev

修改karma.conf.js配置

// Karma configuration

module.exports = function(config) {
  config.set({
    ...
    // 这里配置哪些文件须要统计测试覆盖率，例如，若是你的全部代码文件都在 src文件夹中，你就须要以下配置。
    preprocessors: {
        'src/*.js': 'coverage'
    },
    // 新增 coverageReporter选项
    // 配置覆盖率报告的查看方式,type查看类型，可取值html、text等等，dir输出目录
    coverageReporter: {
        type: 'html',
        dir: 'coverage/'
    },

    // 添加配置报告选择
    reporters: ['progress','coverage'],
    
    ...
  })
}

再次执行karma start，咱们能看到生成了coverage目录，在浏览器中打开目录中的index.html咱们能看到覆盖率已经生成。