Angular 2 Detailed individual component base graphical test coverage reporting


if you want to see component's individual coverage of tests follow these steps.

  1. npm install --save-dev karma-teamcity-reporter

  2. Add `require('karma-teamcity-reporter')` to list of plugins in karma.conf.js
  3. ng test --code-coverage --reporters=teamcity,coverage-istanbul

note that list of reporters is comma-separated, as we have added a new reporter, teamcity.

after running this command you can see the folder coverage in your dir and open index.html for a graphical view of test coverage.

enter image description here

You can also set the coverage threshold that you want to achieve, in karma.conf.js, like this.

coverageIstanbulReporter: {
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true,
      thresholds: {
        statements: 90,
        lines: 90,
        branches: 90,
        functions: 90