没有窗口.__ coverage__对象是由istanbul + phantomJS创建的

Question

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

我尝试过以下各种示例：

here，here和here

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

的内存参考

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

请告知

任务配置

• 吞
• 吞-摩卡phantomjs
• 吞-伊斯坦布尔

客户端

• 兴农
• 摩卡

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()) });

摩卡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('.'))
});

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

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