使用Karma+istanbul来测量基于AngularJS构建的产品的覆盖率

3 年 ago
雅, 悟
2 minutes

通过参考官方页面的各种信息并阅读他人的帖子，我能够对AngularJS的基本知识有了相当的了解。通过测试，我重新认识到Angular的优点以及构建符合UJS的机制，能够使得开发变得轻松，并且可以将HTML页面变得丰富多彩。

我一直以来都反复阐述过Angular易于进行测试的优点。这一次，我将进一步在一篇关于测试的文章中离开Angular，而是总结代码覆盖率的测量方法。

如果像 Angular 一样引入了一种易于编写测试的框架，并将制造阶段变为测试优先，编写测试代码以一定程度上保证产品质量，但归根结底，编写测试代码的仍然是人。有时，测试代码可能会出现问题或遗漏，这是无法避免的。

为了不让测试代码变得毫无意义，测试代码的维护是必不可少的。

作为防止进入无意义的情况和便于维护测试代码的方法之一，通常的TDD测试运行器提供了一种检查测试与产品代码的覆盖范围的手段。幸运的是，Karma也提供了一种测量覆盖率的方法。

在项目开始时引入衡量产品代码测试覆盖率的机制是一项非常重要的措施，因为它在维护测试以提高质量时起到不可或缺的作用。

我第一个AngularJS项目的事后总结：JohnMunsch.com
http://johnmunsch.com/2013/09/22/我第一个AngularJS项目的事后总结/

因为上述文章简单明了地描述了步骤，所以我参考它在Angular教程的第五步骤中进行了代码覆盖率测试，并将测试步骤和结果记录在报告中。

1. 安装Karma

如果正在进行Angular的教程，则不需要执行以下操作来安装Karma。

npm install -g karma

安装用于覆盖率测量的模块。

我们将安装一个名为karma-coverage的模块，而不是安装istanbul。
这将安装一组必要的模块，用于包括istanbul在内的覆盖率计算。

npm install karma-coverage --save-dev

3. 安装 angular-mocks.js

如果您已经在进行教程，那么这个是不必要的。因为有app/lib/angular-mocks.js。
关于bower的安装，需要在配置了git的环境下进行。
(当我在本地操作时，是通过SourceTree启动的终端来执行的。)

npm install bower
bower install angular-mocks --save-dev

我还在学习中，尽管有一些方便的工具如Grunt和Yoemon，我还是选择了原始安装。

重新创建karma.conf.js

由于直接使用Tutorial的第5步”config/karma.conf.js”会导致出现问题，因此请按照以下步骤一一创建。

karma init

请根据执行环境的要求进行设置，以便创建config文件。为了创建config文件，您将被要求回答几个问题。下面是config文件的示例。

// Karma configuration
// Generated on Wed Dec 18 2013 03:00:59 GMT+0900 (譚ｱ莠ｬ (讓呎ｺ匁凾))

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

    // base path, that will be used to resolve files and exclude
    basePath: '',


    // frameworks to use
    frameworks: ['jasmine'],

    // list of files / patterns to load in the browser
    files: [
      'app/lib/angular/angular.js',
      'app/lib/angular/angular-*.js',
      'bower_components/angular-mocks/angular-mocks.js',
      'app/js/*.js',
      'test/unit/*Spec.js',
    ],

    // list of files to exclude
    exclude: [
    'app/lib/angular/angular-scenario.js'
    ],

    // 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, currently available:
    // - Chrome
    // - ChromeCanary
    // - Firefox
    // - Opera (has to be installed with `npm install karma-opera-launcher`)
    // - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`)
    // - PhantomJS
    // - IE (only Windows; has to be installed with `npm install karma-ie-launcher`)
    browsers: ['Chrome'],

    // If browser does not capture in given timeout [ms], kill it
    captureTimeout: 60000,

    preprocessors: { 'app/js/**/*.js': 'coverage' },
    // test results reporter to use
    // possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
    reporters: ['progress', 'coverage'],

    // Continuous Integration mode
    // if true, it capture browsers, run tests and exit
    singleRun: false
  });
};

在这个设置中，重点在于files指令参考了config/karma.conf.js，目标仅为UnitTest。然而，由于e2e测试的方法与之不同，所以会失败。
另外，config/karma.conf.js中有plugins指令，但是移动它会触发”没有注册coverage模块！”的错误，所以这部分是不必要的。

创建一个目录以输出coverage报告。

覆盖率测量结果的报告将放置在与应用程序目录相同的层级上。

4. 启动业力

使用以下命令启动karma。

karma init

如果没有发生错误，那么在浏览器启动后，应该会创建一些目录和文件，您可以查看 coverage 目录。在我的环境中，以下文件集被输出。

$ ls coverage　| cat
Chrome 31.0.1650 (Windows Vista)
coverage-Chrome 31.0.1650 (Windows Vista)-20131218_032855.json

在不是上述JSON文件的目录中，已经创建了一个HTML文件。
通过浏览器打开该文件，您可以查看代码覆盖率测量结果。

顺便提一下，在教程的第5个步骤-“checkout”完成后，测试结果不会全部显示为绿色，而是会呈现以下结果。

テスト失敗時.png

然后，修正后的结果如下所示。

テスト成功時.png

看到不可思议并且全部是绿色的状态时，会感到欣慰，之前的疲劳也会以某种方式减轻（因为绿色代表和平与宁静）。
由于与电脑打交道的工作会积累压力，所以在精神健康方面，我认为创建测验、衡量覆盖率以实现全部是绿色的文化是非常重要的。

我已经通过结合Angular和Karma+istanbul报告了测试覆盖率计量的方法，如上所述。

以下是其他参考:
使用Karma和CoffeeScript进行Angular.js代码覆盖率测试的方法
http://stackoverflow.com/questions/16582633/angular-js-code-coverage-using-karma-w-coffeescript

JS代码覆盖率测量
https://github.com/yahoo/istanbul

bannerAds