某些开源项目上会有个coverage 图标，这个图标所展示的就是当前项目中测试代码的覆盖率。
自动化测试在很多开发者认知上是否定的，我以前也是这么认为。 经过对 GridManager.js集成自动化测试， 个人感触如下:
代码质量提升明显， 这是不用论证的。
集成自动化测试的过程中，可以发现很多隐性BUG和优化点。
版本更新时，各功能块之间的依赖所产生的错误机率降低。
当测试覆盖率到了一定阶段的时候，总是想看下当前的覆盖率是多少。 这个时候就需要依赖一些工具，我选择使用的是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 中使用到的方式， 然而在配置 GridManager.js 时却出现异常。 最终由@haoju.zheng提醒， 使用插件进行解决。
安装webpack测试覆盖率工具 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
});
}
安装依赖包
@拭目以待
个人站点：www.lovejavascript.com
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895)：How To Make Love
《野生前端工程师》专辑中所有文章均为@拭目以待 原创，转载请注明出处。
