集成测试覆盖率工具 codecov

@拭目以待：集成测试覆盖率工具 codecov

Codecov

某些开源项目上会有个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 中使用到的方式， 然而在配置 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
    });
}

安装依赖包

• webpack + karma + codecov
• browserify + karma + codecov

@拭目以待

个人站点：www.lovejavascript.com
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895)：How To Make Love

《野生前端工程师》专辑中所有文章均为@拭目以待 原创，转载请注明出处。