Output coverage report in Angular

Output coverage report in Angular

Angular seems to have a standard feature called karma that outputs a coverage report.

However, the default npm scripts command (ng test) does not output coverage.

ng test --code-coverage

When the command is executed, a folder named coverage is created in the same hierarchy as src, and the coverage report can be viewed in the specified format (e.g., html). (coverage/index.html)

Once the test run is complete, I would like auto-open in Chrome, but I am not sure if that functionality is available.

I am not sure if there is such a function, but nyc+mochawesome has it, so it may be possible depending on the settings in karma.conf.js.

karma.conf.js</h３>

The following are plug-ins configured by default in karma.conf.js.

plugins: [
require('karma-jasmine'),// Testing with karma and jasmine
require('karma-chrome-launcher'), // It will run the karma test in chrome.
require('karma-jasmine-html-reporter'),// It reports the results to debug.html.
require('karma-coverage-istanbul-reporter'),// coverageIstanbulReporterやreporterの設定ができる
require('@angular-devkit/build-angular/plugins/karma')// I'm not sure.
]

The default settings for coverageIstanbulReporter are as follows

coverageIstanbulReporter: {
  dir: require('path').join(__dirname, '../coverage'),
  reports: ['html', 'lcovonly'],
  fixWebpackSourcePaths: true
},

Add ‘text-summary’ to this.

coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../coverage'),
reports: ['html', 'lcovonly','text-summary'],
fixWebpackSourcePaths: true
},

A text-based coverage report will be output after test execution.

高橋