Code coverage is a measure we use to describe the degree to which the code has been covered using tests. It gives a degree of confidence based on the percentage of the code that's been tested. Code coverage measures the percentage of lines of code that have been tested, the percentage of functions that have been tested, the percentage of statements that have been tested, and whether all the branches of code have been tested.
The Angular CLI supports code coverage out of the box. We can use the code-coverage flag and check the results. Let's run it by using the following command:
> ng test --code-coverage
After the preceding code runs all the tests, you will see a code coverage report on the console:
=============================== Coverage summary ===============================
Statements : 89.74% ( 35/39 )
Branches : 100% ( 2/2 )
Functions : 76.92% ( 10/13 )
Lines : 90.63% ( 29/32 )
================================================================================
TOTAL: 11 SUCCESS
TOTAL: 11 SUCCESS
All of these percentages give developers confidence about the code they are writing. In addition, we can add thresholds to our code coverage so that if we do not meet any particular percentage for code coverage, our tests fail. This is helpful in the continuous integration and continuous deployment of code. If our test coverage drops, our build fails, and our code does not go into production.
Let's add the threshold in the karma.conf.js file to our application's src folder:
module.exports = function (config) {
config.set({
...
coverageIstanbulReporter: {
...
thresholds: {
global: {
statements: 80,
branches: 80,
functions: 90,
lines: 80
}
}
},
...
});
};
In the preceding code block, we added the thresholds functions value as 90, which is way higher than the code coverage report that we got when we ran the code coverage previously, which was 76.92:
=============================== Coverage summary ===============================
Statements : 89.74% ( 35/39 )
Branches : 100% ( 2/2 )
Functions : 76.92% ( 10/13 )
Lines : 90.63% ( 29/32 )
================================================================================
18 04 2019 22:21:40.189:ERROR [reporter.coverage-istanbul]: Coverage for functions (76.92%) does not meet global threshold (90%)
TOTAL: 11 SUCCESS
TOTAL: 11 SUCCESS
Here, we need to set reasonable thresholds for our code coverage so that it does not fail. If you change it back to 75 and run it, the build will not fail. Different projects will need to have different thresholds. Open source projects and libraries need to have very high code coverage, for example, over 95%. However, enterprise applications and other applications might have around 75-85% code coverage, which is a good percentage.
We may also want to update the Karma config so that it runs in ChromeHeadless instead of the Chrome browser. Let's update the settings in the karma.config.js file, like so:
module.exports = function (config) {
config.set({
...
browsers: ['ChromeHeadless'],
...
});
};
The preceding code helps in running the test on the CLI itself, and not open in the browser, which makes it simpler to test. Unless the user wants to debug the test, this is a better option.