Angular 2 angular-cli test coverage Detailed individual component base graphical test coverage reporting

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

Example

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
      }
    },


Got any Angular 2 Question?