参考来源： 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>
新建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; } });
新建单元测试文件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); })); }); });
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