What's the right way to configure Angular 9 e2e cobertura coverage reports?

Question

We need to have cobertura style coverage reports in our Angular 9 application. I'm trying to configure our end to end tests to generate such reports. I installed karma-coverage-istanbul-reporter v 2.1.0 and added the following configuration to karma.conf.js

plugins: [
    ...
    require('@angular-devkit/build-angular/plugins/karma')
],
client: {
  clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
  dir: require('path').join(__dirname, './coverage/OurProject'),
  reports: ['html', 'lcovonly', 'text-summary', 'cobertura'],
  fixWebpackSourcePaths: true
},

However in our package.json file, when I add --codeCoverage=true options

{
  ...
  "version": "0.0.0",
  "scripts": {
    ...
    "lint": "ng lint",
    "e2e": "npm run install-puppeteer && ng e2e --codeCoverage=true"
  },

I get the following error when running the npm run e2e ...

Unknown option: '--codeCoverage'

What's the right way to configure our e2e tests to generate cobertura coverage reports?

Answer 1

The approach you are trying to use applies for Unit testing for which karma is used. But --codeCoverage option is not available with e2e. For e2e test we use protractor in angular. For that you could use something like protractor-istanbul-plugin

It can be included in your protractor.conf.js like below :-

plugins : [{
      path: 'node_modules/protractor-istanbul-plugin'
    }]

It will create a coverage folder after your e2e test run. to see its html report use command :-

istanbul report --include=coverage/*.json

For more details visit :- https://www.npmjs.com/package/protractor-istanbul-plugin