集成测试覆盖率工具 codecov

codecov,karma,coverage

拭目以待 发布于

某些开源项目上会有个coverage 图标,这个图标所展示的就是当前项目中测试代码的覆盖率。


      自动化测试在很多开发者认知上是否定的,我以前也是这么认为。 经过对 GridManager.js 集成自动化测试, 个人感触如下:

  1. 代码质量提升明显, 这是不用论证的。

  2. 集成自动化测试的过程中,可以发现很多隐性BUG和优化点。

  3. 版本更新时,各功能块之间的依赖所产生的错误机率降低。


       当测试覆盖率到了一定阶段的时候,总是想看下当前的覆盖率是多少。 这个时候就需要依赖一些工具,我选择使用的是codecov。 选择codecov的原因是,我在与 @haoju.zheng 合作开发的 jTool 中用的就是codecov, 所以本着好的不如熟的原则在 GridManager.js 中继续使用。

      由于我当时主要负责功能实现, @haoju.zheng 负责自动化测试。所以在使用中还是存在了一些感触,在此记录下。

安装依赖包

npm install codecov --save-dev 
npm install karma-coverage --save-dev

在 package.json 中的 script 配置项中增加启动命令

"scripts": {
   "report-coverage": "codecov"
}

在.travis.yml 中的 script 配置项中增加启动命令

script:
  - npm test
  - npm run report-coverage

配置 karmar.conf.js

browserify karmar.conf.js 完整配置

module.exports = function(config) {
	config.set({
		frameworks: ['browserify', 'jasmine-ajax', 'jasmine'],
		files: [
			'src/**/*.js',
			'test/**/*_spec.js'
		],
		preprocessors: {
			'test/**/*.js': ['jshint', 'browserify'],
			'src/**/*.js': ['jshint', 'browserify', 'coverage']
		},
		browsers: ['PhantomJS'],
		browserify: {
			debug: true,
			bundleDelay: 2000 // Fixes "reload" error messages, YMMV!
		},
		reporters: ['progress', 'coverage'],
		// optionally, configure the reporter
		coverageReporter: {
			reporters: [
				// generates ./coverage/lcov.info
				{type:'lcovonly', subdir: '.'},
				// generates ./coverage/coverage-final.json
				{type:'json', subdir: '.'},
			]
		},
		singleRun: true,
		concurrency: Infinity
	});
};

        上面的配置方式为 jTool.js 中使用到的方式, 然而在配置 GridManager.js 时却出现异常。 最终由 @haoju.zheng 提醒, 使用插件进行解决


安装webpack测试覆盖率工具 istanbul-instrumenter-loader (https://github.com/webpack-contrib/istanbul-instrumenter-loader)

npm install istanbul-instrumenter-loader --save-dev

webpack karmar.conf.js 完整配置

var path = require('path');
module.exports = function (config) {
	config.set({
		basePath: '',
		frameworks: ['jasmine'],
		files: [
			'test/*_test.js'
		],
		exclude: ['karma.conf.js'],
		port: 9876,
		colors: true,
		singleRun: true,
		logLevel: config.LOG_INFO,
		autoWatch: true,
		browsers: ['PhantomJS'],
		captureTimeout: 60000,
		reporters: ['progress', 'coverage'],
		preprocessors: {
			'test/*_test.js': ['webpack']
		},
		// optionally, configure the reporter
		coverageReporter: {
			reporters: [
				// generates ./coverage/lcov.info
				{type:'lcovonly', subdir: '.'},
				// generates ./coverage/coverage-final.json
				{type:'json', subdir: '.'}
			]
		},
		webpack: {
			module: {
				loaders:[
					{
						test: /.js?$/,
						loaders: ['babel?{"presets":["es2015"]}'],
						exclude: /(node_modules|bower_components)/,
						include: [path.join(__dirname, 'src'), path.join(__dirname, 'test')]
					},
					{
						test:/.css$/,
						loader:'style-loader!css-loader',
						exclude: /(node_modules|bower_components)/,
						include: [path.join(__dirname, 'src/css')]
					},
					{
						test: /.(woff|woff2)(?v=d+.d+.d+)?$/,
						loader: 'url?limit=15000&mimetype=application/font-woff&prefix=fonts',
						exclude: /(node_modules|bower_components)/,
						include: [path.join(__dirname, 'src')]
					},
					{
						test: /.ttf(?v=d+.d+.d+)?$/,
						loader: 'url?limit=15000&mimetype=application/octet-stream&prefix=fonts',
						exclude: /(node_modules|bower_components)/,
						include: [path.join(__dirname, 'src')]
					},
					{
						test: /.eot(?#w+)?$/,
						loader: 'url?limit=15000&mimetype=application/vnd.ms-fontobject&prefix=fonts',
						exclude: /(node_modules|bower_components)/,
						include: [path.join(__dirname, 'src')]
					},
					{
						test: /.svg(#w+)?$/,
						loader: 'url?limit=15000&mimetype=image/svg+xml&prefix=fonts',
						exclude: /(node_modules|bower_components)/,
						include: [path.join(__dirname, 'src')]
					}
				],
				postLoaders: [{
					test: /.js$/,
					loader: 'istanbul-instrumenter',
					exclude: /node_modules|_spec.js$/,
					include: [path.join(__dirname, './src')]
				}]
			}

		},
		concurrency: Infinity
	});
}


完整项目请查看