没有 window.__coverage__ 对象是由 istanbul + phantomJS 创建的

Question

我正在尝试使用以下堆栈进行客户端测试， 然而，伊斯坦布尔似乎除了生成规范文件外，并没有做太多事情。

我试过以下各种示例：

here, here and here

然而，无论我做什么，伊斯坦布尔似乎都没有创建 window.__coverage__ object and I'm unable to parse the output due to this.

的内存引用

gulpfile.js 下显示的 pre-test 任务确实生成了一些时髦的检测文件，这些文件似乎没有任何作用或去任何地方。

请指教

任务配置

• gulp
• gulp-mocha-phantomjs
• gulp-伊斯坦布尔

客户端

• 诗乃
• 摩卡

gulpfile.js

gulp.task('pre-test', function () {
    return gulp.src(['tests/ar.config.js'])
    // Covering files
        .pipe(istanbul())
        // Write the covered files to a temporary directory
        .pipe(gulp.dest('coverage/'));
});

gulp.task('test', ['inject', 'pre-test'], function () { return gulp .src('index.html', {read: false}) .pipe(mochaPhantomJS( { reporter: 'spec', phantomjs: { hooks: 'mocha-phantomjs-istanbul', coverageFile: './coverage/coverage.json' } })) .pipe(istanbul.writeReports()) });

mocha-phantomjs-伊斯坦布尔

var system = require('system');
var fs = require('fs');

function collectCoverage(page) {
    // istanbul stores coverage in global.__coverage__
    var coverage = page.evaluate(function () {
        return window.__coverage__;
    });

    // fail gracefully when we don't have coverage
    if (!coverage) {
        console.log("no coverage found!")
        return;
    }

    // read coverageFile from mocha-phantomjs args
    var phantomOpts = JSON.parse(system.args[system.args.length - 1]);
    var coverageFile = phantomOpts.coverageFile || 'coverage/coverage.json';

    // write coverage to file
    var json = JSON.stringify(coverage);
    fs.write(coverageFile, json);
}

// beforeStart and afterEnd hooks for mocha-phantomjs
module.exports = {
    afterEnd: function (runner) {
        collectCoverage(runner.page);
    }
};

输出

...
✓ test x
✓ test y
✓ test z

----------|----------|----------|----------|----------|----------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
----------|----------|----------|----------|----------|----------------|
----------|----------|----------|----------|----------|----------------|
All files |      100 |      100 |      100 |      100 |                |
----------|----------|----------|----------|----------|----------------|


=============================== Coverage summary ===============================
Statements   : 100% ( 0/0 )

Answer 1

所以最终在一些修补之后，我意识到我正在覆盖我的测试文件而不是我正在测试的源文件。

gulpfile.js

var gulp = require('gulp');
var inject = require('gulp-inject');
var istanbul = require('gulp-istanbul');
var mochaPhantomJS = require('gulp-mocha-phantomjs');
var istanbulReport = require('gulp-istanbul-report');

gulp.task('instrument', function () {
    return gulp.src(['src/js/**/*.js'])
        // Covering files
        .pipe(istanbul({
            coverageVariable: '__coverage__'
        }))
        // instrumented files will go here
        .pipe(gulp.dest('coverage/'))
});

gulp.task('test', ['instrument', 'inject'], function () {
    return gulp
        .src('index.html', {read: false})
        .pipe(mochaPhantomJS({
            reporter: ["spec"],
            phantomjs: {
                useColors: true,
                hooks: 'mocha-phantomjs-istanbul',
                coverageFile: './coverage/coverage.json'
            }
        }))
        .on('finish', function () {
            gulp.src("./coverage/coverage.json")
                .pipe(istanbulReport({
                    reporters: ['text', 'html']
                }))
        });
});

var paths = {
    "javascript": ["coverage/**/*.js"],
    tests: ["tests/**/*.js"]
};

gulp.task('inject', ['instrument'], function (cb) {
    return gulp.src('index.html')
        .pipe(inject(
            gulp.src(paths.javascript,{read: false}), {
                relative: true
            }))
        .pipe(inject(
            gulp.src(paths.tests, {read: false}), {
                relative: true,
                starttag: "<!-- inject:tests:js -->"
            }))
        .pipe(gulp.dest('.'))
});

我写了以下内容 post 解释了我试图实现的测试方法的完整过程，如果有人想听听所有这些背后的理论：

http://blog.silicak.es/2016-07-07-testing-browser-gulp-phantomJS-mocha-istanbul