利用Angularjs测试引擎Karma进行自动化单元测试

Karma是Google用于angularjs框架单元测试的js引擎（javascript test runner ）， angular1 和angular2项目源码的单元测试都是基于karma和jasmine。

 karma 特性如下：

1. 在真实设备和浏览器中运行测试。无论在手机，平板，电脑或PhantomJS 都可以运行你的测试代码。

2. 远程控制。 从IDE或命令行控制整个测试流程，当你改变并保存了测试文件，karma就会运行全部测试。

3. 不依赖于特定测试框架。 你可以搭配Jasmine,Mocha, QUnit 等任意测试框架编写测试。

4. 项目开源.  https://github.com/karma-runner/karma

5. 便捷简单的调试。 可以直接在你的IDE 比如 WebStorm 或Google Chrome浏览器调试测试代码。

6. 持续集成。 可以简单的搭配Jenkins, Travis或Semaphore 进行持续集成。

 什么时候考虑使用Karma？

1. 你想在真实的浏览器中测试你的代码。

2. 你需要在多个环境中测试你的代码（桌面，平板，移动端浏览器）。

3. 你需要在本地开发时测试你的代码。

4. 你需要在持续集成服务器中执行你的测试代码。

5. 你需要在你每一次保存代码时跑测试。

6. 你喜欢使用命令行。

7. 你喜欢简单的测试，而不是被测试弄得痛苦不堪。

8. 你希望使用Istanbul自动生成测试报告。

9. 你希望用RequireJS 测试你的源码。

10.你需要单元测试的是跑在浏览器端的js代码，文章末尾简要说明了karma的工作原理， 如果需要测试nodejs， 至此可以直接关闭文章略过下文了：）

 开始使用Karma

1. 使用npm安装Karma和相应浏览器launcher,jasmine测试框架，代码覆盖率工具，如下

    "jasmine-core": "^2.5.2",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
    "karma-firefox-launcher": "^1.0.0",
    "karma-ie-launcher": "^1.0.0",
    "karma-jasmine": "^1.1.0",
    "karma-opera-launcher": "^1.0.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-safari-launcher": "^1.0.0",

2. 定义karma配置文件，有兴趣的可以看看angular 目录中以Karma开头的配置文件

module.exports = function (config) {
  config.set({

    // 基本目录
    basePath: '',

    // 使用的测试框架
    // 其他测试框架: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],

    // 需要加载的js文件， 下面是link类库和test目录下的测试文件
    files: [
      'dist/link.js',
      'test/**/*Spec.js'
    ],

    // 需要排除的文件
    exclude: [
    ],

    // 预处理器
    // 可用的预处理器: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {      // 利用Istanbul生成测试报告
      'dist/link.js': ['coverage']
    },

    // 可用的报表: https://npmjs.org/browse/keyword/karma-reporter
    // 代码覆盖率测试结果报表
    reporters: ['progress', 'coverage'],

    // web服务器端口
    port: 9876,

    // 报告和log输出颜色
    colors: true,

    // 日志级别
    // 可以配置为: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // 是否启用自动检查文件改动并运行测试
    autoWatch: true,

    // 需要启动的浏览器实例，下面是启动chrome
    // 可用的浏览器: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'/*'PhantomJS', 'Chrome', 'Firefox', 'IE', 'Safari', 'Opera'*/],

    // 是否至运行一次就结束
    singleRun: false,

    // 同时开启几个浏览器运行测试
    concurrency: Infinity,

    // 代码覆盖率报表结果配置
    coverageReporter: {
      type: 'html',
      dir: 'test/coverage/'
    }
  })
}

3. 运行karma start ,即可运行所有测试代码并生成测试报告,如下命令行运行结果和生成报告截图

测试报告如下：

4. 如何调试测试代码。

以上配置启动的浏览器实例为Chrome , 运行测试会自动打开chrome 浏览器 ， 如下，点击debug按钮即可进入一个空白的调试界面（其实已经加载了你希望加载的待测试代码和测试代码, 即配置文件中files配置项定义的文件，上面我们定义了需要加载dist目录下的link.js文件和test目录下以Spec名称结尾的js文件），打开浏览器开发者工具，选择Sources选项，展开base目录即可看到我们编写的测试代码并进行调试。

以上karma配置文件和测试代码见 https://github.com/leonwgc/link  ， 下载代码，运行npm install 安装好依赖后 运行npm test 或gulp test 即可启动测试并调试。 另外karma本身并不是一个测试框架，它需要搭配其他测试框架如Jasmine等进行单元测试，其工作原理是利用nodejs生成web服务器， 在所有与之连接的浏览器中通过iframe加载并执行测试代码，运行结果通过socket.io库实时报告给node处理并呈现于命令行。