monocart-coverage-reports

Monocart Coverage Reports

Code coverage tool to generate V8 or Istanbul coverage reports.

Preview Reports

• V8
• V8 Esbuild
• V8 Rollup
• V8 lcov.info
• V8 Node env
• V8 Node Inspector
• V8 Minify
• V8 to Istanbul
• Istanbul
• Integration with Monocart Reporter - Playwright test report

Usage

const CoverageReport = require('monocart-coverage-reports');
const options = {
    outputDir: './coverage-reports',
    reports: "v8"
}
const coverageReport = new CoverageReport(options);
await coverageReport.add(coverageData1);
await coverageReport.add(coverageData2);
const coverageResults = await coverageReport.generate();
console.log(coverageResults.summary);

• example v8
• example istanbul

Default Options

• lib/default/options.js

Multiple Reports

V8 reports

• v8 (html)
• v8-json

Istanbul reports

• clover
• cobertura
• html
• html-spa
• json
• json-summary
• lcov
• lcovonly
• none
• teamcity
• text
• text-lcov
• text-summary

const CoverageReport = require('monocart-coverage-reports');
const options = {
    outputDir: './coverage-reports',
    reports: [
        ['v8'],
        ['html', {
            subdir: 'istanbul'
        }],
        ['json', {
            file: 'my-json-file.json'
        }],
        'lcovonly'
    ]
}
const coverageReport = new CoverageReport(options);

Multiprocessing Support

The data will be added to [outputDir]/.cache, and the cache will be removed after reports generated.

• sub process 1

const CoverageReport = require('monocart-coverage-reports');
const options = require('path-to/same-options.js');
const coverageReport = new CoverageReport(options);
await coverageReport.add(coverageData1);

• sub process 2

const CoverageReport = require('monocart-coverage-reports');
const options = require('path-to/same-options.js');
const coverageReport = new CoverageReport(options);
await coverageReport.add(coverageData2);

• main process

// after all sub processes finished
const CoverageReport = require('monocart-coverage-reports');
const options = require('path-to/same-options.js');
const coverageReport = new CoverageReport(options);
const coverageResults = await coverageReport.generate();
console.log(coverageResults.summary);

Compare Reports

	Istanbul	V8	V8 to Istanbul
Instrumenting code	Required	No	No
Coverage data	Istanbul (Object)	V8 (Array)	V8 (Array)
Output	Istanbul reports	V8 reports	Istanbul reports
- Bytes	❌	✅	❌
- Statements	✅	❌	☑️❔
- Branches	✅	☑️❔	☑️❔
- Functions	✅	✅	✅
- Lines	✅	✅	✅
- Execution counts	✅	✅	✅
CSS coverage	❌	✅	✅
Minified code	❌	✅	❌

❔ - Partial or conditional support

Compare Workflows

• Istanbul Workflows

  • 1, Only for source code: instrumenting code with babel-plugin-istanbul，see webpack.config-istanbul.js, or using nyc.
  • 2, Collecting coverage data from browser window.__coverage__ or from node global.__coverage__, see example.
  • 3, Generating coverage report.

• V8 Workflows

  • 1, For any runtime code: nothing to do. For source code: building code with development mode and sourcemap support, see webpack.config-v8.js.
  • 2, Collecting coverage data with Chromium Coverage API, see example.
  • 3, Generating coverage report.

Chromium Coverage API

• V8 coverage report - Native support for JavaScript code coverage to V8. (Chromium only)
• Puppeteer Coverage Class
• Playwright Coverage Class
• DevTools Protocol for Coverage

Node.js V8 Coverage Report for Server Side

There are two ways to collect native V8 coverage data and generate coverage report:

• Using Node.js env NODE_V8_COVERAGE=dir

  • 1, Before running your Node.js application, set env NODE_V8_COVERAGE=dir. After the application runs and exits, the coverage data will be saved to the dir directory in JSON file format.
  • 2, Read the json file(s) from the dir and generate coverage report. see example:

  cross-env NODE_V8_COVERAGE=.temp/v8-coverage node ./test/test-node-env.js && node ./test/generate-node-report.js

• Using Inspector API

  • 1, Connecting to the V8 inspector and enable V8 coverage.

   const inspector = require('inspector');
   const startV8Coverage = async () => {
       const session = new inspector.Session();
       session.connect();
       await session.post('Profiler.enable');
       await session.post('Profiler.startPreciseCoverage', {
           callCount: true,
           detailed: true
       });
       return session;
   };
  

  • 2, Taking coverage data and adding to the report after your application runs.

   const takeV8Coverage = (session) => {
       return new Promise((resolve) => {
           session.post('Profiler.takePreciseCoverage', (error, coverage) => {
               if (error) {
                   console.log(error);
                   resolve();
                   return;
               }
               resolve(coverage.result);
           });
       });
   };
   const coverageList = await takeV8Coverage(session);
   // filter node internal files
   coverageList = coverageList.filter((entry) => entry.url && !entry.url.startsWith('node:'));
   await new CoverageReport(coverageOptions).add(coverageList);
  

  • 3, Generating coverage report. see example: ./test/test-node-ins.js

   await new CoverageReport(coverageOptions).generate();
  

Using entryFilter and sourceFilter to filter the results for V8 report

When you add coverage data with Chromium Coverage API, it actually contains the data of all entry files, for example:

1, dist/main.js
2, dist/vendor.js
3, dist/something-else.js

We can use entryFilter to filter the entry files. For example, we should remove vendor.js and something-else.js if they are not in our coverage scope.

1, dist/main.js

When inline or linked sourcemap exists to the entry file, the source files will be extracted from the sourcemap for the entry file, and the entry file will be removed if logging is not debug.

1, src/index.js
2, src/components/app.js
3, node_modules/dependency/dist/dependency.js

We can use sourceFilter to filter the source files. For example, we should remove dependency.js if it is not in our coverage scope.

1, src/index.js
2, src/components/app.js

Example:

const coverageOptions = {
    entryFilter: (entry) => entry.url.indexOf("main.js") !== -1,
    sourceFilter: (sourcePath) => sourcePath.search(/src\//) !== -1
};

Istanbul Coverage

• Istanbul coverage report - Instrumenting source codes and generating coverage reports
• babel-plugin-istanbul
• istanbul-reports
• Code Coverage Introduction

Thanks

• Special thanks to @edumserrano