HTML report : progress bars messed up

[BenjaminBini]

When I run istanbul with gulp-istanbul, the progress bars in the HTML report are not fully filled whereas the coverage is 80%. This does not happen when I run istanbul standalone. An issue was opened on gulp-istanbul repo but the repo owner said that they are not doing any special handling and an issue should be opened here, so here I am.

Here is the issue on gulp-istanbul repo https://github.com/SBoudrias/gulp-istanbul/issues/80.

[niln1]

This HTML reporter looks beautiful, is it a custom theme?

[gotwarlost]

it is the theme that has replaced the old one. Use istanbul 0.4.x

[gotwarlost]

@tmcw - any explanation for the issue? See the related issue in the link above for a better screenshot.

[tmcw]

I'll try to replicate this - @BenjaminBini any chance you can put the generated results online, and narrow down what browser exhibits this glitch?

[BenjaminBini]

There you go : http://static.bini.io/coverage-glitch/

It happens on all browsers apparently.

[tmcw]

I am very puzzled by how this turned out: this html report has px instead of % in the coverage bars: it's correctly % in https://github.com/gotwarlost/istanbul/blob/master/lib/report/html.js#L84 and in the demo pages I had generated for the redesign http://macwright-org-tmp.s3.amazonaws.com/lcov-report-1/index.html Also just re-ran istanbul master and can't replicate the problem there, either.

Any chance this file is postprocessed by something?

[BenjaminBini]

I generated it with gulp-istanbul and they say they don't do anything : https://github.com/SBoudrias/gulp-istanbul/issues/80. If i run standalone instanbul on my project I do have % width for the bars.

[tmcw]

Is there anything else in your gulp pipeline after the istanbul generation?

[BenjaminBini]

Nope, here is the task I call.

gulp.task('test-server', ['pre-test'], function() {
  return gulp.src(SERVER_TEST_SRC)
    .pipe(mocha())
    .pipe(istanbul.writeReports({
        reporters: ['lcov', 'json', 'text', 'text-summary', 'html']
      })
    );
});

gulp.task('pre-test', function() {
  return gulp.src(['server/**/*.js'])
    // Covering files
    .pipe(istanbul())
    // Force `require` to return covered files
    .pipe(istanbul.hookRequire());
});

[perrydt]

I just finished dealing with the same issue, only I luckily had two projects and only one was having this problem, so I was able to compare them.

It seems to be caused in part by gulp-istanbul depending on istanbul-threshold-checker, which uses an old version of istanbul (0.3.*). gulp-istanbul tries to work around this by ordering its require()s but it still ends up breaking if you have your own module deps in the wrong order in your gulpfile. For me, it was because I was also using isparta and had the imports in this order:

import {Instrumenter} from 'isparta'
import istanbul from 'gulp-istanbul'

reversing these fixed the issue:

import istanbul from 'gulp-istanbul'
import {Instrumenter} from 'isparta'

So fiddling with your module import/require order may fix this.

[JamesMGreene]

I ran into the same issue using Grunt with grunt-not-constantinople/grunt-istanbul and grunt-istanbul-coverage. The latter was using istanbul@0.3.x, which somehow messed up the report generation for the former. For the short-term fix, I just asked them to update.

Honestly, it seems more like a Node require bug, perhaps related to the shift to flatter node_modules folders in npm@3.