1. 介绍

karma 用于编写 单元测试 脚本的工具，并且可以生成可视化的报表及测试覆盖率。

2. 安装

官方文档-安装

# 安装 Karma
$ npm install karma --save-dev
# 安装项目需要的插件
$ npm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev
# 全局的命令行工具
$ npm install -g karma-cli

karma-jasmine：断言库（目前比较流行的）

用 yarn 也可以，随意

安装好 karma 之后需要先进行初始化

官方文档-init

$ karma init

1. 选择断言库，这里选择常用的 jasmine，也可以选择其他你熟悉的；
   
2. 是否需要 requireJs，这个已经很老了，我们用 node 自带的 commonJs 就可以，选择 no
   
3. 选择浏览器，我们一般都是在终端上运行测试代码，是不用看页面的，所以这里选择一个无头浏览器（就是没有可视化界面的浏览器），PhantomJS
   
4. 匹配本地的测试文件，可以先不选，稍后在配置文件中配置，直接回撤
   
5. 选择排除哪些文件，也先跳过
   
6. 观察本地文件更新，先选择 no
   

然后我们就会看到生成了一个 karma 的配置文件

3. 轻松时刻

然后我们就可以开始干我们最熟悉的事儿了，写代码😄

先创建好目录结构，这里模拟一下真实的项目结构

我们创建一个 math.js 和一个 utils.spec.js

math.js

window.MathUtil = {
    add: function(a) {
        if (a === 1) return a + 2;
        else return a + 1;
    }
}

utils.spec.js

describe('工具函数测试', function() {
    it('add(1)', function() {
        expect(window.MathUtil.add(1)).toBe(3);
    })
})

注意 karma 不支持 es6 ，有 es6 语法会报错

然后我们需要将这两个文件引入，因为你要告诉 karma 要测试哪些文件，和你的的测试代码在哪里

我们打开之前生成的 karma 配置文件：karma.conf.js

找到 files ，配置如下

...
files: [
    './src/assets/scripts/utils/**/*.js', './tests/unit/**/*.spec.js',
],
...
// 这个参数需要改为 true，不然在执行测试用例时看不到效果
singleRun: true

启动测试

$ karma start

这里报了一个错误，提示没有找到 PhantomJS 无头浏览器，安装一下即可

# 用 yarn 不太好装
$ yarn add karma-phantomjs-launcher -D
$ yarn add phantomjs -D
# 实在不行可以用 cnpm
$ cnpm install karma-phantomjs-launcher
$ cnpm install phantomjs

再来执行一次

下面已经打印出了结果

TOTAL: 1 SUCCESS

没有错误就代表全部测试通过

4. 保证测试覆盖率

我们的函数不可能只有一种情况，比如我们写的 math.js 的 add 方法

window.MathUtil = {
    add: function(a) {
        if (a === 1) return a + 2;
        else return a + 1;
    }
}

我们还没有测试到参数 a 不等于 1 的情况，怎样来自动检查我们测试用例的覆盖率呢？

karma-coverage

安装

$ npm install karma karma-coverage --save-dev

创建一个用来存放报表的文件夹

./docs

配置 karma.conf.js

...
preprocessors: {
    './src/assets/scripts/utils/**/*.js': ['coverage'],
    './tests/unit/**/*.spec.js': ['coverage'],
},
reporters: ['progress', 'coverage'],
// 用来生成报表
coverageReporter: {
    type : 'html',
    dir : 'docs/coverage/'
}

然后我们再来执行一下

$ karma start

然后会在 docs 中生成报表文件

打开 index.html

然后我们看到 src/assets/scripts/utils 并没有覆盖全，进入 math.js 看一下

karma 已经给我们标出了没有覆盖到到代码

然后我们把 a !== 1 的情况加一下

util.spec.js

describe('工具函数测试', function() {
    it('add(1)', function() {
        expect(window.MathUtil.add(1)).toBe(3);
        expect(window.MathUtil.add(2)).toBe(3);
    })
})

然后再执行一下

$ karma start

over!