AngularJS unit test report / coverage report

参考来源： http://www.cnblogs.com/vipyoumay/p/5331787.html

这篇是学习基于Angularjs的nodejs平台的单元测试报告和覆盖率报告。用到的都是现有的工具，只是一些配置的地方需要注意。

环境前提：

1. nodejs 安装(https://nodejs.org/en/download/)

步骤：

1. npm init 创建一个nodejs工程。

2. 使用以下npm install 命令下载node modules, 然后在package.json的scripts节点添加start命令如下：

npm install angular -D
npm install angular-mocks -D
npm install jasmine-core -D
npm install karma -D
npm install karma-chrome-launcher -D
npm install karma-coverage -D
npm install karma-html-reporter -D
npm install karma-jasmine -D

  "scripts": {"test": "karma start karma.conf.js"
  },

注： karma-chrome-launcher可以替换成你想要的其他浏览器，每个浏览器都有配套的karma luancher插件（http://karma-runner.github.io/1.0/config/configuration-file.html）

3. 创建一个以Angularjs为框架的demo做为测试的站点，只是为了测试用，不用太复杂。

新建html/index.html

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>index</title>

</head>
<body>
<div ng-controller="indexCtrl">
    <input type="text" ng-model="a" value="0">
    +
    <input type="text" ng-model="b" value="0">
    =<span id='result'>{{add(a,b)}}</span>
</div>
</body>
</html>
<script src="../node_modules/angular/angular.min.js"></script>
<script src="../node_modules/angular-mocks/angular-mocks.js"></script>
<script src="../js/index.js"></script>

index.html

新建js/index.js

var angular = window.angular

var app = angular.module('app', []); 
app.controller('indexCtrl', function($scope) {
        $scope.add = function (a, b) {
            if(a&&b) {
                return Number(a) + Number(b)
            }
            return 0;
        },
        $scope.minus = function(a, b) {
            if(a&&b) {
                return Number(a) - Number(b)
            }
            return 0;
        }
});

index.js

新建单元测试文件unittest/index-test.js

'use strict';
describe('app', function () {
    beforeEach(module('app'));
    describe('indexCtrl', function () {
        it('add 测试', inject(function ($controller) {
            var $scope = {};
            //spec body
            var indexCtrl = $controller('indexCtrl', {$scope: $scope});
            expect(indexCtrl).toBeDefined();
            expect($scope.add(2, 3)).toEqual(5);
            expect($scope.add(null, null)).toEqual(0);
        }));
        it('minus 测试', inject(function ($controller) {
            var $scope = {};
            //spec body
            var indexCtrl = $controller('indexCtrl', {$scope: $scope});
            expect(indexCtrl).toBeDefined();
            expect($scope.minus(3, 2)).toEqual(1);
            expect($scope.minus(null, null)).toEqual(0);
        }));
    });
});

index-test.js

4. 新建karma.conf.js文件，然后配置如下：

// Karma configuration
// Generated on Thu Jun 29 2017 13:30:09 GMT+0800 (China Standard Time)

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

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: './',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
        'node_modules/angular/angular.min.js',
        'node_modules/angular-mocks/angular-mocks.js',
        'js/*.js',
        'unittest/*.js'
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress', 'html', 'coverage'],


    // 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
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity,

    plugins: [
            'karma-chrome-launcher',
            'karma-jasmine',
            'karma-html-reporter',
            'karma-coverage'
        ],

    htmlReporter: {
      outputDir: 'report/', // where to put the reports  
      templatePath: null, // set if you moved jasmine_template.html 
      focusOnFailures: true, // reports show failures on start 
      namedFiles: false, // name files instead of creating sub-directories 
      pageTitle: null, // page title for reports; browser info by default 
      urlFriendlyName: false, // simply replaces spaces with _ for files/dirs 
      reportName: 'html', // report summary filename; browser info by default 
            
    },

    coverageReporter: {
           type: 'html',
           dir: 'report/coverage'
       },

    preprocessors: {'js/*.js': ['coverage']}
  })
}

files: 选择浏览器要导入的文件

reporters: 添加'html', 'coverage' 用以生成单元测报告和覆盖率测试报告

singleRun: 设置为ture, karma会在测试结束后自动关闭浏览器

plugins: 导入我们需要的四个插件

htmlReporter: 配置html报告的存放位置

coverageReporter: 配置覆盖率报告的存放位置

preprocessors: 添加要测试的js文件位置以及'coverage'标志。

配置全部完成，项目目录结构如下：

unitTest
|- html
    |-- index.html
|- js
    |-- index.js
|- unittest
    |-- index-test.js
|- report
    |- html  //存放单元测试报告
    |- coverage  //存放覆盖率报告
karma.conf.js
package.json

执行命令npm test就会在report目录下产生html格式的报告了

参考文档： http://karma-runner.github.io/1.0/config/configuration-file.html