monocart-coverage-reports

Monocart Coverage Reports

Code coverage tool to generate V8 or Istanbul coverage reports.

Preview Reports

• V8
• 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 report
  • v8
  • 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
Input	Istanbul (Object)	V8 (Array)	V8 (Array)
Output	Istanbul HTML report	V8 HTML report	Istanbul HTML report
Indicators	Covered Lines, Branches, Statements and Functions, Execution Counts	Covered Bytes, Lines❔, Execution Counts	Covered Lines, Branches❔, Statements and Functions❔, Execution Counts
CSS coverage	❌	✅	✅
Minified code	N/A	✅	❌
Code formatting	N/A	✅	❌

❔ - 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__, 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

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