This is a testing framework agnostic in-browser Javascript coverage reporter. It works with CoverJS instrumented code. The UX and appearance of the report mimic Mocha's HTMLCov runner which only works with nodejs. JSCovReporter should work with any testing framework such as QUnit, Jasmine, Mocha, Buster or anything you use.
The files included here are borrowed from Mocha project and have been slightly modified to work with the HTML produced by this reporter and work well with Mocha's HTML runner, currently the only Mocha in-browser runner. This is what Mocha looks like when used with JSCovRepoter:
-
JSCovRepoter depends on Backbone (Tested with version 0.9.2) and Underscore (or Lodash). So make sure you include those in your HTML test runner file.
-
Download from this repository and include
reporter.js,reporter.cssandJSCovReporter.jsfiles in your runner. -
Your test runner body will need to contain this DOM, besides the one that your testing framework needs. Most likely you want these after the div for your framework, so that coverage appears after testing results:
<div id="coverage"></div>
<div id="menu"></div>You will first need to instrument your javascript code using CoverJS. Install it using nodejs npm package manager:
npm install coverjs
Add coverjs bin to your PATH and then do:
coverjs mylibrary.js --output instrumented
This will create an instrumenteddirectory, containing an instrumented mylibrary.js, these are the files you have to link in your HTML test runner.
When the testing suite is done, just create a JSCovReporter instance passing it CoverJS' global coverObject as coverObject argument:
if (typeof window.__$coverObject !== 'undefined') {
var reporter = new JSCovReporter({ coverObject: window.__$coverObject });
}In this case we are making sure coverObject exists, this way your runner will work with or without instrumented code.
For example in Mocha you can easily plug it in using run callback:
mocha.run(function () {
if (typeof window.__$coverObject !== 'undefined') {
var reporter = new JSCovReporter({ coverObject: window.__$coverObject });
}
});