Angular CLI - Code Coverage

This chapter will discuss the Angular CLI Code Coverage, including a detailed introduction, syntax, usage, and an example that shows how to use it in an Angular application.

What is Code Coverage in Angular?

In Angular development, the CLI provides a metric (standard of measurement) called Code Coverage when you run the unit test. It is used to measure how many parts (or percentage) of your Angular codebase are executed by running the unit or integration test. It is also known as Test Coverage.

Usage! The main purpose of Code Coverage is to provide coverage reports that helps you identify areas of your codebase that may not be tested by your unit tests.

Syntax

To generate a coverage report run the following command in the root of your Angular project −

ng test --no-watch --code-coverage

Here,

• ng test: It is used to run a unit test in your Angular application.
• --no-watch: It is disable the watch mode. In watch mode the tests are automatically re-run whenever any changes detects in your code.
• --code-coverage: This flag generates a "code coverage" report for your unit tests.

If you want to create code-coverage reports whenever you test your codebase by running a unit or integration test, set the following option in the Angular CLI configuration file, i.e. angular.json:

"test": {
  "options": {
    "codeCoverage": true
  }
}

Example

The following example shows how to generate a code-coverage report in your Angular application by running a unit test −

ng test --no-watch --code-coverage

Once the above code runs successfully, it will generate the following coverage report:

✔ Browser application bundle generation complete.
21 03 2025 10:35:24.588:INFO [karma-server]: Karma v6.4.4 server started at http://localhost:9876/
21 03 2025 10:35:24.591:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
21 03 2025 10:35:24.609:INFO [launcher]: Starting browser Chrome
21 03 2025 10:35:25.652:INFO [Chrome 134.0.0.0 (Windows 10)]: Connected on socket V0y20VWrmDZ4YAdqAAAB with id 24384158
Chrome 134.0.0.0 (Windows 10): Executed 3 of 3 SUCCESS (0.111 secs / 0.09 secs)
TOTAL: 3 SUCCESS

=============================== Coverage summary ===============================
Statements   : 100% ( 3/3 )
Branches     : 100% ( 0/0 )
Functions    : 100% ( 0/0 )
Lines        : 100% ( 2/2 )

When the testing is complete, the above command creates a /coverage folder within your project directory. Expand the coverage folder and open the index.html file to see a report with your source code and code coverage values.

The output of the index.html will be look like this: