Publishing Angular unit test and code coverage results on Azure DevOps CI/CD pipe line

As most of us know writing unit test is one of the hot topics among developers, and we all try to write to our best abilities and time constraints. This is about how we can publish results to DevOps as part of your Angular build.

install below npm packges on your Angular project

npm install puppeteer --save-dev
npm install karma-junit-reporter --save-dev
npm install jasmine-reporters --save-dev

update your package.json like below

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "install-puppeteer": "cd node_modules/puppeteer && npm run install",
    "test": "npm run install-puppeteer && ng test",
    "lint": "ng lint",
    "e2e": "npm run install-puppeteer && ng e2e"
  },

Add below steps to azure-pipelines.yml file looks like

trigger:
  - master
  - hotfix/*
  - feature/*
  - release/*

pool:
  name: Hosted Windows 2019 with VS2019
  demands: npm

steps:
  - task: Npm@1
    displayName: 'Install node modules'
    inputs:
      command: 'ci'
      verbose: false

  - task: Npm@1
    displayName: Tslint
    inputs:
      command: custom
      verbose: false
      customCommand: 'run lint'

  - task: Npm@1
    displayName: 'Run Tests'
    inputs:
      command: 'custom'
      customCommand: 'run ng test -- --watch=false --code-coverage'

  - task: PublishTestResults@2
    displayName: 'Publish unit test results'
    condition: succeededOrFailed()
    inputs:
      searchFolder: $(System.DefaultWorkingDirectory)/testresults/junit
      testRunTitle: Angular
      testResultsFormat: JUnit
      testResultsFiles: "**/unit-test-result.xml"

  - task: PublishCodeCoverageResults@1
    displayName: 'Publish code coverage results'
    condition: succeededOrFailed()
    inputs:
      codeCoverageTool: Cobertura
      summaryFileLocation: '$(System.DefaultWorkingDirectory)/coverage/cobertura-coverage.xml'
      failIfCoverageEmpty: true

  - task: Npm@1
    displayName: 'Build'
    inputs:
      command: custom
      verbose: false
      customCommand: 'run build:prod'

  - task: PublishBuildArtifacts@1
    inputs:
      PathtoPublish: 'dist/[*********your folder***********]'
      ArtifactName: 'drop'
      publishLocation: 'Container'

Now lets update karma.conf.js

Add below after “module.exports = function (config) {” line

const puppeteer = require('puppeteer');
process.env.CHROME_BIN = puppeteer.executablePath();

add below under plugins

require('karma-junit-reporter')

add below under coverageIstanbulReporter

    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, './coverage'),
      reports: ['html', 'lcovonly', 'text-summary', 'cobertura'],
      fixWebpackSourcePaths: true
    },

add below to “reporters”

junitReporter: {
outputDir: 'testresults/junit',
outputFile: 'unit-test-result.xml',
useBrowserName: false
},

browsers can be Chrome or ChromeHeadless

browsers: [‘Chrome’],// or [‘ChromeHeadless’]

let’s update e2e/protractor.conf.js all the way in the top, before export

const { JUnitXmlReporter } = require('jasmine-reporters');
const puppeteer = require('puppeteer');
process.env.CHROME_BIN = puppeteer.executablePath();

under capabilities

  capabilities: {
    'browserName': 'chrome',
    chromeOptions: {
      args: ["--headless", "--disable-gpu", "--window-size=1200,900"],
      binary: process.env.CHROME_BIN
    }
  },

var junitReporter = new JUnitXmlReporter({
      savePath: require('path').join(__dirname, './junit'),
      consolidateAll: true
    });
    jasmine.getEnv().addReporter(junitReporter);