Angular Unit Testing Code Coverage Report in Azure DevOps Build Pipeline

DevOps Basic Topics : .NET Code Coverage report in Azure Pipeline

Unit tests help to ensure functionality and provide a means of verification for refactoring efforts. Code coverage is a measurement of the amount of code that is run by unit tests — either lines, branches, or methods.

This article discusses the usage of code coverage for unit testing in Angular Project

Unit Test in UI Angular project

The new angular web UI project is having an inbuilt unit testing template file(.spec.ts) which is used to cover the methods/functions defined in Components/Services etc. Mainly the methods defined in these areas must be validated by unit tests.

Create an Angular project with jasmine and karma

As the angular team recommends we are going to use angular-cli to create our app. By doing this the configuration of jasmine and karma comes resolved for us.

Install angular-cli and create a new project:

• npm install -g @angular/cli
• ng new angular-unit-testing

When you create the project all the dependencies get installed among them everything you are going to need to create the tests.

In the image above you can see all the dependencies installed for testing purposes. Let’s go through the more important ones;

• jasmine-core. Jasmine is the framework we are going to use to create our tests. It has a bunch of functionalities to allow us the write different kinds of tests.
• karma. Karma is a task runner for our tests. It uses a configuration file in order to set the startup file, the reporters, the testing framework, the browser among other things.
• The rest of the dependencies are mainly reporters for our tests, tools to use karma and jasmine and browser launchers.

To run the test you only need to run the command “ng test”. This command is going to execute the tests, open the browser, show a console and a browser report and, not less important, leave the execution of the test in watch mode.

Karma Config

Let’s take a look at the karma configuration file (karma.conf.js) created by angular-cli.

You probably can guess what most of these configuration properties are for, but let’s go through some of them.

• frameworks: this is where jasmine gets set as a testing framework. If you want to use another framework this is the place to do it.
• reporters: this is where you set the reporters. You can change them or add new ones.
• autoWatch: if this is set to true, the tests run in watch mode. If you change any test and save the file the tests are re-build and re-run.
• browsers: this is where you set the browser where the test should run. By default it is chrome but you can install and use other browser launchers.

Test entry file

The angular-cli configuration of karma uses the file “src > test.ts” as the entry point of the tests for the application. Let’s take a look to that file;

We have a lot of things going on here. You are probably never going to need to change this file but let’s go and discuss some of the things happening;

• An environment to run angular tests is being created using all the imports at the beginning of the file.
• TestBed is a powerful unit testing tool provided by angular, and it is initialized in this file.
• Finally, karma loads all the test files of the application matching their names against a regular expression. All files inside our app folder that has “spec.ts” on its name are considered a test.

DevOps Build Pipeline Setup (YAML):

Once you have the necessary prerequisites in place, you can add the following tasks to your Azure Build Pipeline to generate a code coverage report inside of Azure DevOps’ build results:

There is no change in the Use Node 14.x, Angular CLI and npm install Tasks in Azure Build Pipeline.

Modify the Test Task in Azure Pipeline,

steps:
- task: Npm@1
  displayName: Test
  inputs:
    command: custom
    workingDir: 'Client/SampleApp'
    verbose: false
    customCommand: 'run test-headless'
  continueOnError: true

Note: ‘test-headless’ is the build command parameter

package.json file change is given below,

Modify the Publish Test Result Task in Azure Pipeline,

steps:
- task: PublishTestResults@2
  displayName: 'Publish Test Results $(Build.SourcesDirectory)/Client/SampleApp/projects/web-app/test_report/TESTS-*.xml'
  inputs:
    testResultsFiles: '$(Build.SourcesDirectory)/Client/SampleApp/projects/web-app/test_report/TESTS-*.xml'

Modify the Publish Code Coverage Task in Azure Pipeline,

steps:
- task: PublishCodeCoverageResults@1
  displayName: 'Publish code coverage from $(Build.SourcesDirectory)/Client/SampleApp/coverage/**/*cobertura-coverage.xml'
  inputs:
    codeCoverageTool: Cobertura
    summaryFileLocation: '$(Build.SourcesDirectory)/Client/SampleApp/coverage/**/*cobertura-coverage.xml'

There is no change in Build and Publish Artifact Task,

steps:
- task: Npm@1
  displayName: Build
  inputs:
    command: custom
    workingDir: 'Client/SampleApp'
    verbose: false
    customCommand: 'run build-dev'

Note: ‘build-dev’ is the build command parameter

steps:
- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact: dist'
  inputs:
    PathtoPublish: 'Client\SampleApp\dist\web-app'
    ArtifactName: dist