Code coverage report

A good way to understand the amount and the trends of unit tests coverage for your Angular project is through a code coverage report. 

In order to generate the report for your app, execute the following command from your project folder:

$ npx ng test --browsers ChromiumNoSandbox --watch=false --code-coverage

The resulting report will be created as HTML under a folder name coverage; execute the following command to view it in your browser:

$ npx http-server -c-1 -o -p 9875 ./coverage

Here's the folder-level sample coverage report generated by istanbul.js for LemonMart:

Istanbul code coverage report for LemonMart

You can drill down on a particular folder, like src/app/auth, and get a file-level report, as shown here:

Istanbul code coverage report for src/app/auth

You can further drill down to get line-level coverage for a given file, like cache.service.ts, as shown here:

Istanbul Code Coverage Report for cache.service.ts

In the preceding image you can see that lines 5, 12, 17-18 and 21-22 are not covered by any test. The I icon denotes that the if path was not taken. We can increase our code coverage by implementing unit tests that exercise the functions that are contained within CacheService. As an exercise, the reader should attempt to atleast cover one of these functions with a new unit test and observe the code coverage report change.

Ideally, your CI server configuration should generate and host the code coverage report with every test run in a readily accessible manner. Implement these commands as script in package.json and execute them in your CI pipeline. This configuration is left as an exercise for the reader.

Install http-server as a development dependency to your project.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.194.57