Welcome to today’s post.
Today I will be showing you how to use test coverage within an Angular application. And it is, believe me, one of the most useful features that comes with the Angular development environment.
In many posts previously I have given overviews of unit testing within not only front-end Angular applications, but also unit testing in backend applications, such as with ASP.NET Core applications.
On Angular applications I have covered unit testing Angular user interface components. I have also covered the unit testing of Angular service components.
In addition, I showed how end to end test Angular applications.
On backend applications, I started with showing how to unit test .NET Core applications. I then showed how to unit test a file uploader API, then used in-memory data providers to unit test .NET Core applications.
In all the above unit tests, one aspect I didn’t cover was how much code coverage our unit tests covered for our application source, which is what I will be explaining how is done for Angular applications in the next section.
Near the end of this post, I will explain how code coverage can be improved by you not just in your Angular applications, but with applications written with other development tools including .NET Core.
Test Coverage in Angular Applications
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
}
},
I will next show how to generate a test coverage report based on the above application configurations of the coverage reporter.
Generation of Test Coverage Reports in Angular
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.
One thing I mentioned earlier in the post was I asked the question: how to improve code quality?
The answer to that is to use code refactoring.
I explain this my other post where I explain how to use code refactoring to improve code quality.
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.
