Code coverage for angular 2

Question

How do you find the code coverage for angular 2 code? Is there any plugin for vs code editor or webstorm that I can use? I am using Jasmine and Karma for unit testing of my code.

Answer 1

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

Answer 2

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.

Answer 3

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.