某些開源項(xiàng)目上會(huì)有個(gè)coverage 圖標(biāo)福荸，這個(gè)圖標(biāo)所展示的就是當(dāng)前項(xiàng)目中測(cè)試代碼的覆蓋率瓤介。
自動(dòng)化測(cè)試在很多開發(fā)者認(rèn)知上是否定的毯欣，我以前也是這么認(rèn)為岩馍。 經(jīng)過對(duì) GridManager.js集成自動(dòng)化測(cè)試粱檀， 個(gè)人感觸如下:
代碼質(zhì)量提升明顯， 這是不用論證的迫像。
集成自動(dòng)化測(cè)試的過程中劈愚，可以發(fā)現(xiàn)很多隱性BUG和優(yōu)化點(diǎn)。
版本更新時(shí)闻妓，各功能塊之間的依賴所產(chǎn)生的錯(cuò)誤機(jī)率降低菌羽。
當(dāng)測(cè)試覆蓋率到了一定階段的時(shí)候，總是想看下當(dāng)前的覆蓋率是多少由缆。 這個(gè)時(shí)候就需要依賴一些工具注祖，我選擇使用的是codecov猾蒂。 選擇codecov的原因是，我在與@haoju.zheng合作開發(fā)的 jTool 中用的就是codecov, 所以本著好的不如熟的原則在 GridManager.js 中繼續(xù)使用是晨。
由于我當(dāng)時(shí)主要負(fù)責(zé)功能實(shí)現(xiàn)肚菠， @haoju.zheng 負(fù)責(zé)自動(dòng)化測(cè)試。所以在使用中還是存在了一些感觸罩缴，在此記錄下蚊逢。
安裝依賴包
npm install codecov --save-dev
npm install karma-coverage --save-dev
在 package.json 中的 script 配置項(xiàng)中增加啟動(dòng)命令
"scripts": {
"report-coverage": "codecov"
}
在.travis.yml 中的 script 配置項(xiàng)中增加啟動(dòng)命令
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 時(shí)卻出現(xiàn)異常箫章。 最終由@haoju.zheng提醒烙荷， 使用插件進(jìn)行解決。
安裝webpack測(cè)試覆蓋率工具 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
});
}
安裝依賴包
@拭目以待
個(gè)人站點(diǎn)：www.lovejavascript.com
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895)：How To Make Love
《野生前端工程師》專輯中所有文章均為@拭目以待 原創(chuàng)檬寂，轉(zhuǎn)載請(qǐng)注明出處终抽。
