Publishing Merged Code Coverage Report of Nx Workspace in Azure CI Pipeline

If you are working on Nx Monorepo workspace and have many angular projects. And if you are using Azure CI/CD Pipeline then you might aware that there is no inbuilt azure task which will combine all of your code coverage xml. Therefore, the only workaround is you must consolidated all code coverage reports in one and publish that merged one only.

What is Code Coverage Report in Azure CI Pipeline

Code coverage helps you determine the proportion of your project’s code that is actually being tested by tests such as unit tests. To increase your confidence of the code changes, and guard effectively against bugs Learn More…

Reviewing the code coverage result helps to identify code path(s) that are not covered by the tests. This information is important to improve the test collateral over time by reducing the test debt.

You can see at file level in azure pipeline

Azure devops does not merge multiple code coverage reports

At present, the code coverage reporting functionality provided by this task is limited and it does not merge coverage data. If you provide multiple files as input to the task, only the first match is considered. If you use multiple publish code coverage tasks in the pipeline, the summary and report is shown for the last task. Any previously uploaded data is ignored. Learn more…

However, Azure Devops supports merging multiple test results and display out of the box. Check Publish Test Results Nx Monorepo Angular Azure Pipelines article to learn more.

Installing Cobertura-merge npm package

At this time Azure Pipeline only support showing code coverage using Cobertura or JaCoCo coverage formats only. I am using Cobertura in order to publish code coverage.

cobertura-merge is the npm package is a Utility to merge multiple cobertura xml files into one. I will use this npm package to merge my all code-coverage files.

Installing Glob npm package

We have nested code-coverage files so, I want to search all of the file path. Therefore, I am installing glob npm package to do that for me. Glob npm package: Matches files using the patterns the shell uses, like stars and stuff.

Folder structure of multiple code coverage files

Since I have a Nrwl.Nx monorepo which has angular apps and libs. And when I run the test using --codeCoverage=true then it creates the cobertura-coverage.xml files. Read [Publish Code Coverage Nx Monorepo Angular in Azure Pipelines] to learn how to publish code coverage to azure pipeline.

Notice, I have coverage files from applications (apps) and libraries (libs)

Finding all Coverage File paths

We need to get the path of each cobertura-coverage.xml file.

Lets create a merge-codecoverage.js JavaScript file to search all xml files we will use glob npm package.

Debugging JavaScript in VS Code

Read this article to learn How to debug Node.JS Code in VsCode

Move All Cobertura Coverage Xml to Merge Folder

Install fs-extra which will help us to copy all of the coverage file in merge folder and then we will user cobertura-merge npm package to crate single merged-cobertura-coverage.xml file.

Merging All Cobertura Coverage Xml to Single Report

We will create merged-cobertura-coverage.xml which is combined of all of the report files.

In order to merge all of them we need below script.

Running the cobertura-merge script

Merged file created inside the merged folder

Merged cobertura-coverage.xml file

Here is the JavaScript for merging code coverage files.

Updating Azure Pipeline to publish code coverage

Use below task to publish merged code coverage report in azure pipeline.

Identify How many projects are affected

I changed the logging.service.ts in branding service. Which is used by both apps.

Run nx affected:dep-graph --base=main

Running azure pipeline for nx monorepo

Now lets run the azure pipeline and see if we can see the 3 projects code coverage is shown in merged fashion.

See 3 tests are running in azure pipeline

publishing code coverage in azure pipeline

Notice it published the code coverage report for all 3 projects.

Excluding files from code coverage

I want to exclude the src folder root files from code coverage. We dont want to show test.ts or polyfills.ts coverage report.

Go to workspace.json file and identify your project names and in the test configuration insert code coverage exclude file list like below screenshot.

Now run nx run cutepuppies-client:test --codeCoverage=true

Now notice we do not have src folder files code coverage.

Lets do this exclude for all of our project’s test configuration.

Showing Project Names in Merged Code Coverage Report

Notice, I have code coverage from below projects.

I want to show the project names in the Code Coverage Report of Azure pipeline. Therefore, we will update the JavaScript code to put correct project name per code coverage file in our merged code coverage xml file. Like Below:

I need to generate & run below cobertura merge script to create correct merged code coverage file with project names.

Change the merge code coverage in JavaScript

Running Azure pipeline & Showing Nx Monorepo All Projects Code Coverage

Now you must call the above JavaScript from azure-pipelines.yml file.

🏃 Run your pipeline

💯 Showing Code Coverage percentages

:hugging_face: Notice now we see our code coverage per application and the correct file names.

Become full stack developer 💻

If you want to become full stack developer and grow your carrier as new software developer or Lead Developer/Architect. Consider subscribing to our full stack development training programs. We have All-Access Monthly membership plans and you will get unlimited access to all of our video courses, slides, source code & Monthly video calls.

  • Please subscribe to All-Access Membership PRO plan to access current and future angular, node.js and related courses.
  • Please subscribe to All-Access Membership ELITE plan to get everything from PRO plan. Additionally, you will get access to monthly live Q&A video call with Rupesh and you can ask doubts/questions and get more help, tips and tricks.

You bright future is waiting for you so visit today FullstackMaster and allow me to help you to board on your dream software company as a Developer,Architect or Lead Engineer role.

💖 Say 👋 to me!

Originally published at https://rupeshtiwari.github.io on February 1, 2021.

--

--

--

I am a Senior Software Architect, mentor & successful PluralSight Author, professionally I am an expert at Angular, Express, Node.JS, Object Oriented Design but with a particular focus on Service Oriented Architecture, DDD, MEAN stack and Asp.Net.

Recommended from Medium

Through the Wall

Request Load Distribution in Kubernetes and AWS

The arrival of the Programmer-Archeologist

My frequently used Git commands that are unpopular

What’s The Big Deal With Big — O?

Easiest way to build GUI’s using Python

Reduce Cost and Increase Productivity with Value Added IT Services from buzinessware — {link} -

Unit and Integration tests in JPA access layer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rupesh Kumar Tiwari

Rupesh Kumar Tiwari

Pluralsight Author, Developer and Trainer. I help students and professionals to become Full Stack Software Developer in less than a Year.

More from Medium

GRPC - .NetCore Tutorial

HashiCorp Vault | Getting started

Introduction to CQRS and Event Sourcing

Self Signed Cert - Local Testing With ASP.NET Core WEB API