Code coverage for angular 2

I struggled with this one. The solution I found was

ng test --code-coverage

But make sure that in your karma.conf.js file, you have a reporter specified (I use 'coverage-istanbul')

e.g. reporters: ['coverage-istanbul']

The coverage report will be in a directory called 'coverage' in your root directory.

If you want to see overall test coverage statistics than of course in Angular CLI you can just type, and see the bottom of your command prompt window

ng test --code-coverage

result:

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.

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

First install the dependencies.

npm install karma karma-jasmine karma-chrome-launcher karma-jasmine-html-reporter karma-coverage-istanbul-reporter

Then run ng test.

ng test --code-coverage

Then run the server that shows you your report.

http-server -c-1 -o -p 9875 ./coverage

You should see something like this:

I wrote a blog post about this here.