Today we're going to show you how to set up code coverage in your Angular project.

If you set up code coverage you will have a realistic understanding of how solid your code is.

And when you test right... you will sleep tight.

By configuring and using the Angular code coverage tool you will consistently ship a stable product.

First of all, code coverage is a percentage of the code that gets tested when we run our suite of Angular tests.

The higher the code coverage result suggests your code base has a lower chance of undetected software bugs - compared to a program with low code coverage.

Some of the benefits of code coverage are:

• Catch bugs before they catch you.
• Refactor your code with confidence.
• A badge of professionalism and quality work.

So let's learn how to use Angular's code coverage tools.

Step 1: Run the code coverage

For a quick start we'll use the code coverage option when running the test.

Like this.

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

And you should see a code coverage summary when the testing is finished.

You will notice that the summary has 4 main parts.

• Statements
• Branches
• Functions
• Lines

Here’s what the four metrics mean:

1. Statements: These are individual instructions in your code that perform an action. Like assigning a variable. Calling a function. And so forth.
2. Branches: These are the conditional branches (e.g., if, else, switch) tested.
3. Functions: The percentage of functions or methods tested.
4. Lines: The percentage of individual lines of code tested.

In my case:

• Most statements are tested (85.71%).
• All branches are tested (100%).
• No functions are tested (0%).
• Most lines are tested (83.33%).

Step 2: Inspect the coverage folder

You'll notice that the --code-coverage flag also generated a folder coverage/project-name.

Inside this folder is an index.html file that we'll open in the browser for a deeper understanding of what parts of our code is being tested.

You should see a report like this in the browser.

👇 👇 👇

You can click on a file to get detailed information about how much of a specific code file is being tested or not.

Step 3: Configure automated code coverage reports

Now that we've looked at our code coverage reports how about we set up a way to be able to quickly see a code coverage report?

To do this, we're going to set up a code coverage badge in our README file. This will let us see at a quick glance how much of the code in our repository is currently tested.

ng generate config karma

We will add a JSON reporter to the reporters array.

reporters: [
    { type: 'html' },
    { type: 'text-summary' },
    { type: 'json' }
]

Then install the badge generator

npm i coverage-badges-cli --save-dev

And then, we'll generate our badge using an NPM test script.

"test": "ng test --no-watch --code-coverage && coverage-badges --output ./badges/coverage-badge.svg --source ./coverage/<project-name>/coverage-final.json" 

And there you have it.

When we use npm run test we automatically get a generated badge of the test results.

Till next time,

Daniel Kreider - Angular Consultant & Developer