利用Karma进行前端单元测试
单元测试在程序开发过程中，起到很重要的作用。一般来说，单元测试的作用有：
- 使代码可以放心修改和重构；
- 迫使程序员从调用者而不是实现者的角度设计软件模块；
- 迫使程序员将软件模块写得易于测试和调用，从而有利于解耦；
- 测试本身可作为被测代码的用法说明，从而替代了一部分文档功能。
在前端开发中，测试常常是被忽略。但随着前端工程化的推广，单元测试也越来越受到重视了。
Karma简介
Karma是由Google团队开发的一套前端测试运行框架。它不同于测试框架（Mocha，Jasmine，QUnit等），运行在这些测试框架之上。Karma是一直作为一个Test Runner而存在的。该工具可用于测试所有主流Web浏览器，也可集成到 CI （Continuous integration）工具，也可和其他代码编辑器一起使用。
Karma 可以在不同的桌面或移动设备浏览器上，或在持续集成的服务器上测试 JavaScript 代码。Karma 支持 Chrome、ChromeCanary、 Safari、Firefox、 IE、Opera、 PhantomJS，知道如何捕获浏览器正使用的默认路径，这些路径可能在启动器配置文件被忽视（overridden）。Karma 就是一个可以和多重测试框架协作的测试执行过程管理工具，它有针对Jasmine、 Mocha 和AngularJS 的适配器，它也可以与 Jenkins 或 Travis 整合，用于执行持续集成测试。
什么时候使用Karma
- 在真实浏览器里测试
- 在多种浏览器里进行测试（包括桌面、移动）
- 在本地开发环境执行测试
- 想在持续集成CI内运行测试
- 想在每次保存代码时，自动执行测试
- 热衷于terminal小黑屏
- 不想陷入令人厌烦的测试生活
- 想使用Istanbul自动生成coverage报告
- 想在源码中使用RequireJS
karma的基本运行过程：
- Karma启动一个web服务器，生成包含js源代码和js测试脚本的页面；
- 运行浏览器加载页面，并显示测试的结果；
- 如果开启检测，则当文件有修改时，执行继续执行以上过程。
Karma的安装配置
初始项目结构
karma-starter
├── src
├── index.js
├── test
├── package.json
index.js的内容如下
function checkNum(num) {
if (typeof num === 'number') {
return true
} else {
return false
}
}
function checkString(str) {
if (typeof str === 'string') {
return true
} else {
return false
}
}
exports.checkNum = checkNum
exports.checkString = checkString
安装Karma环境
为了方便搭建Karma环境，我们可以全局安装karma-cli来帮我们初始化测试环境：
npm i -g karma-cli
然后在项目中安装karma包
npm i --save-dev karma
在实际项目中，有事会需要用到Webpack和ES6，所以接下来将Webpack和Babel集成进Karma环境中。
安装karma-webpack
npm i --save-dev karma-webpack
安装babel
npm i --save-dev babel-loader babel-core babel-preset-es2015
安装好Karma覆盖率工具
npm i --save-dev karma-coverage
安装babel-plugin-istanbul
webpack会加入一些代码，影响了代码的Coverage。如果我们引入了一些其它的库，比如jquery之类的，将源代码和库代码打包在一起后，覆盖率会更难看。这样的Coverage就没有了参考的价值。需要安装插件
npm i --save-dev babel-plugin-istanbul
接下来在工程目录中运行karma init来进行测试环境初始化，并按照指示一步步完成。这里使用jasmine测试框架，PhantomJS作为代码运行的环境（也可以选择其他浏览器作为运行环境，比如Chrome，IE等）。最后在项目中生成karma.conf.js文件。至此就搭建好了Karma运行环境。
运行Karma
在test目录里编写一个简单的测试脚本，我们使用的是jasmine测试框架，具体的api可以参考jasmine api，内容如下
const Code = require('../src/index')
describe('index.js: ', () => {
it('checkNum() should work fine.', () => {
expect(Code.checkNum(1)).toBe(true)
expect(Code.checkNum('1')).toBe(false)
})
})
describe('index.js: ', () => {
it('checkString() should work fine.', () => {
expect(Code.checkString("aaa")).toBe(true)
expect(Code.checkString(2)).toBe(false)
expect(Code.checkString(' ')).toBe(true)
})
})
然后在项目根目录下运行karma start命令,我们可以看到运行的结果如下
可以看到，运行的结果显示测试成功。
同时，因为我们之前设置了监控文件的修改，所以当我们修改源文件或者测试脚本的时候，Karma会自动帮我们再次运行，无需我们手动操作。
在目录下生成coverage目录，里面有本次测试的覆盖报告。打开后的结果如下
最后附上示例项目地址:karma-starter
