Html report broken

[jmdobry]

nyc appears to correctly report code coverage when it prints to the console:

But when I then run nyc report --reporter=html the generated html report is useless:

The code in that image is executed hundreds of times during the tests, but the html report shows nothing.

I feel like I'm missing something, perhaps related to source maps. You can see that the source file under test is dist/js-data.js. dist/js-data.js.map is available, but the source map seems to be ignored, as nyc doesn't split the report up for the individual files that were bundled into dist/js-data.js.

Steps to reproduce:

1. git clone https://github.com/js-data/js-data.git
2. cd js-data
3. git checkout v3
4. npm install
5. npm test
6. npm run html-report
7. open coverage/index.html

Thanks for any help. I'd love to get coverage reporting for the individual source files, in addition to an html report that tells me which lines I still need to cover.

[jmdobry]

Okay, my problem is that I'm transpiling and bundling my sources before running the tests, instead of letting ava transpile my sources.

[jamestalmage]

@jmdobry

Your best bet is to transpile with source-maps (either embedded our external .map linked files).

If you don't want to deploy source-maps, transpile to protectDir/build with embedded source-maps, and use those for testing, transpile to projectDir/lib for deploying (without source-maps). I usually do it this way anyways, and add projectDir/build to .gitignore - that way the dist folder only gets updated when I do a version bump. This keeps diff noise down.

[jamestalmage]

Closing. Feel free to open another issue if you think there's something nyc can do to make this less painful.

[jmdobry]

This is what I ended up with:

"babel": {
  "presets": [
    "es2015",
    "stage-0"
  ]
},
"ava": {
  "babel": "inherit",
  "files": [
    "test/**/*.js"
  ],
  "source": [
    "src/**/*.js"
  ],
  "require": [
    "babel-register"
  ]
},

Which now gives me coverage reporting for individual source files. However, at the very first occurence of a "not covered branch" in the html report, the css paints the entire rest of the page yellow.

[jamestalmage]

Try adding sourceMaps: "inline" to the babel portion of the config.

[jmdobry]

Didn't make a difference. If I inspect the html, the first occurrence of a "not covered branch" starts with:

<span class="branch-1 cbranch-no" title="branch not covered">

Instead of that span closing at the end of the not covered code, it continues and the entire rest of the page's html is nested under that span, and is therefore painted yellow because of the cbranch-no class.

[jamestalmage]

Hmm. That almost seems like an istanbul issue. I'm not sure how our source-map remapping could impact that.

[jmdobry]

I guess it's not a big deal, it just forces me to add coverage from the top of the file on down.

[jamestalmage]

I guess it's not a big deal, it just forces me to add coverage from the top of the file on down.

It should be fixed. Either in istanbul or here.

[jamestalmage]

@jmdobry - Can you create a minimal reproduction on GItHub that @novemberborn and I can clone and play with.

[jmdobry]

There may already be an open issue: gotwarlost/istanbul#557

[bcoe]

@jmdobry closing in favor of #266

[bcoe]

@jmdobry give this a spin:

https://github.com/bcoe/nyc#use-babel-plugin__coverage__-for-better-es6es7-support

we've released better support for ES6/ES7 coverage using the coverage instrumentation library.

[jmdobry]

I'll give it a try