Code coverage for angular 2
If you want to see general testing coverage statistics than of course in Angular CLI, you can simply type and see the bottom of the command line window
ng test --cc // or --code-coverage
result:
if you want to see individual component testing coverage, follow these steps.
-
npm install --save-dev karma-teamcity-reporter
-
Add
require('karma-teamcity-reporter')
to the plugins list in the karma.conf.js file -
ng test --code-coverage --reporters=teamcity,coverage-istanbul
note that the list of reporters is comma separated as we have added a new reporter, teamcity.
after running this command, you can see a folder coverage
in your directory and open index.html
for a graphical representation of the test coverage.
You can also set the coverage threshold that you want to achieve karma.conf.js
, like this.
coverageIstanbulReporter: {
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true,
thresholds: {
statements: 90,
lines: 90,
branches: 90,
functions: 90
}
},
source to share
Install dependencies first.
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 start the server that will display your report.
http-server -c-1 -o -p 9875 ./coverage
You should see something like this:
I wrote a blog post about this here .
source to share
I have struggled with this. The solution I found was
ng test --code-coverage
But make sure the reporter is specified in the karma.conf.js file (I am using 'coverage-istanbul')
eg. reporters: ['coverage-istanbul']
The coverage report will be in a directory called "coverage" in the root directory.
source to share