单元测试——没有窗口.__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-mocha-phantomjs
• gulp-istanbul

客户端

• 、
• 摩卡

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-istanbul

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