Welcome to today’s post.
Today I will be showing you how to use test coverage within an Angular application.
What is test coverage?
Test coverage is a quantitative measurement of the level of testing that your application has. It is a comparison of the number of methods and functions within any component compared against the number of corresponding unit tests. The amount of test coverage can be enforced with a tool karma coverage Istanbul reporter. In your package.json, look for the following package reference (in green):
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
Next, open karma.config.js and look for the following configuration key:
coverageIstanbulReporter: {
dir: require('path').join(__dirname, './coverage/angular-azure-app'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
If I want to enforce 70% code coverage, then I add the following thresholds key with the properties and values:
coverageIstanbulReporter: {
dir: require('path').join(__dirname, './coverage/angular-azure-app'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true,
thresholds: {
statements: 75,
lines: 75,
branches: 75,
functions: 75
}
},
To generate test coverage report, we can run the following command:
ng test --no-watch --code-coverage
What this does is run the test once without ending in a watching state (which is what karma does).
The resulting report will show a summary of the coverage for statements, branches, functions and lines and the percentage coverage:
After the coverage report has been run, a new folder \coverage will be created within the project folder:
To view the detailed report for each source code file, open the index.html file. The report should display nicely rendered as shown:
The green bars show the source files that have passed the minimum test coverage threshold, and the red bars show the source files that have failed to reach the minimum test coverage threshold.
To view a more detailed breakdown of coverage statistics, click on the source file hyperlink:
To view the actual source and the uncovered lines, click on the source file hyperlink:
The lines in red are the uncovered lines that do not have any related unit tests.
To enforce code coverage for every test, the following key/value will need to be added to angular.json within the options key:
"test": {
"options": {
…
"codeCoverage": true
}
}
As I have demonstrated, we can use a very useful feature that is available within the Angular development environment to allow developers and testers to keep track of their level of code test coverage.
In addition, as I will show in a future post, we will be able to include test coverage reports as part of the overall continuous integration build stage of our Angular application to determine how much of our code base covers test cases. This feeds back to developers to make them better at implementing test cases for their code. In addition, these reports give the test team an idea of how many test cases are covered and the stage the quality of code coverage is at.
That’s all for today’s post.
I hope you found this post useful and informative.
Andrew Halil is a blogger, author and software developer with expertise of many areas in the information technology industry including full-stack web and native cloud based development, test driven development and Devops.
