---
layout: post
title: Publishing Code Coverage in Azure CI Pipeline
date: '2021-03-07 00:00 +0000'
subtitle: Learn how to show Angular Code Coverage Report in Azure CI Pipeline
description: Learn how to show Angular Code Coverage Report in Azure CI Pipeline
cover-img: 'https://i.imgur.com/NRaQUA5.png'
cover_image: 'https://i.imgur.com/oaeFs3U.png'
thumbnail-img: 'https://i.imgur.com/lF87q1A.png'
share-img: 'https://i.imgur.com/lF87q1A.png'
canonical_url: 'https://rupeshtiwari.github.io/2021-03-06-publishing-code-coverage-in-azure-ci-pipeline/'
tags: devops,angular,azure,beginners
last_modified_at: null
published: true
sitemap: true
comments: true
social-share: true
toc: true
excerpt_separator: <!--more-->
---

# Publishing Code Coverage in Azure CI Pipeline
> Do you want to show **Angular** Code Coverage Report in Azure CI Pipeline then read this article and follow the steps.

## IstanbulReporter in Karma.conf.js
Go to `Karma.conf.js` of your angular project and confirm you have **cobertura** reporter.

 coverageIstanbulReporter: {
      dir: require("path").join(
        __dirname,
        "../../coverage/fsms-angular-pubsub"
      ),
      reports: ["html", "lcovonly", "text-summary", "cobertura" 👈 //required],
      fixWebpackSourcePaths: true,
    },

## Running Test with Code Coverage Flag

While running test using angular cli make sure you pass `--code-coverage=true`.

ng test --code-coverage=true


## Adding Code coverage Task in Azure Pipelines

Next use `PublishCodeCoverageResults@1` task from azure DevOps to publish the cobertura report.

  - task: PublishCodeCoverageResults@1
    enabled: true
    displayName: Code Coverage
    inputs:
      codeCoverageTool: "Cobertura"
      summaryFileLocation: "./coverage/fsms-angular-pubsub/cobertura-coverage.xml"
                              # 👆  put your coverage file path
    condition: |
      succeeded()

## Showing Code coverage in Azure Pipeline

Now run you pipeline and notice you will see the code coverage report on the pipeline summary.




Thanks and you are all set.

## Become full stack developer 💻

I teach at [Fullstack Master](https://www.fullstackmaster.net). 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. You can enroll to All-Access Monthly membership plans to get unlimited access to all of our video courses, slides, source code & monthly video calls.

- Please subscribe to [All-Access Membership PRO plan](https://www.fullstackmaster.net/pro) to access current and future angular, node.js and related courses.
- Please subscribe to [All-Access Membership ELITE plan](https://www.fullstackmaster.net/elite) 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](www.fullstackmaster.net) and allow me to help you to board on your dream software company as a Developer,Architect or Lead Engineer role.

**💖 Say 👋 to me!**
Rupesh Tiwari
<a href="https://www.rupeshtiwari.com"> www.rupeshtiwari.com</a>
✉️ <a href="mailto:[e-mail]?subject=Hi"> Email Rupesh</a>
Founder of <a href="https://www.fullstackmaster.net"> Fullstack Master</a>