Publish & Execute Angular Unit Tests In Azure DevOps Build Pipeline With Code Coverage & Unit Test Summary Reports — Part I

In this article series I am going to discuss, how to publish Angular Unit Test in Azure DevOps with Summary Reports. Here, I am not going to discuss, how to write Unit Tests in Angular, and the various types of Unit Tests we can write in Angular, such as Component Testing, Service Testing, Directive Testing etc.

Part I —

• How To Create Build Pipeline, for Angular Project
• How To Execute Angular Unit Test, using the Build Pipeline.

Part II —

• Generate Angular Unit Test Summary Report, Display in Azure DevOps.
• Generate Angular Unit Test Code Coverage Summary Report, Display in Azure DevOps.

Prerequisites

• AzureDevOps Subscription
• Understanding of Creating and Pushing Projects to Repository
• Angular Unit Testing Knowledge
• Knowledge on Azure Build Pipelines

Let’s Go.

Do or Don’t

1. Create Azure Build Pipeline to Execute Angular Unit Test

Under this section, Let’s create Azure Build Pipeline :) Here, I am using default Angular Cli generated Project.

Step 1 — Go to Azure DevOps. In the left navigation, select ‘Pipelines’. Then click ‘Builds’. Now you can see, ‘+ New’ drop down. Click it and in the list, select ‘New build pipeline’.

Step 1 — Create Build Pipeline

Step 2 — Then it will take you to select the repository, where your project is hosted. Here select ‘Use the Classic Editor’.

Step 2 — Select Repository

Step 3 — Then after, you will take to select the Project, and the Branch, which the build pipeline works on.

Step 3 — Add Repository

Step 4 — Next it asks to select template. Select, ‘Empty Job’.

Step 4 — Create Job

Step 5— Now you can see the screen, where you have to say the steps to take, to build the project.

Step 5 — Pipeline Steps

What if I ask, what are the usual steps, we have to take, to execute Unit Tests for Angular project, using Angular Cli.

• First, have to download all the Node Packages & the Other external packages, which are mentioned in package.json using the command ‘npm install’.
• Second, open the Angular cli, and execute tests, using the command, ‘ng test’.

As the way, we have to follow those steps in Azure pipeline. It means, we have to add ‘Tasks’ which are, pipeline has to follow. Now let’s see how we can add above steps as Tasks.

Step 6 — Leave the default Task ‘Agent job 1’, as the way it is. When you hover on it, you can see ‘+’ symbol. Click on it. Then you can see a panel, right side, to select the Types of different task, we can add to Pipeline. Type ‘npm’, in the Search box.

Step 6 — Add Angular Step

Step 7 — Add ‘npm’. Then you can see the panel, where you can define the Task.

• Display Name — Name of the Task. ( Display Purpose)
• Command — What the task has to do. ( install = npm install, custom = customized command )
• Working folder that contains package.json — Where is package.json is located. ( you can locate to package.json by clicking ….. in the right side )

For us, the first task is to install Node Modules and Other External Packages using package.json. so we can use default, ‘install’ command.

Step 7 — npm install Task

Step 8 — Next, pipeline’s task is to execute Angular Unit Tests. In local, we use ‘ng test’ command in Angular Cli to execute angular Unit Test.

Follow the steps , as in step 7, to add a new Task. Define the task as following.

What’s this ‘run-script’. Azure CLI, doesn’t know what the hell of ‘ng’. It’s our Angular man’s command. For Azure CLI, it’s a ‘custom’ command. To execute custom command in Azure CLI, use following.

run-script custom-command-name

For Angular, Azure CLI reads, package.json to find the custom command name, which is to be executed.

In package.json, custom command names are added inside ‘scripts’.

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "devkit": "npm i @angular-devkit/build-angular"
  },

So, the following way, we can define the Task 2 in our pipeline.

run-script test

That’s all. Now we have define our pipeline, to execute Angular Unit Tests.

Step 9 — Now, click ‘Save & queue’ drop down. In the list, select ‘Save’. ( Here, can use Save & queue, too. But I purposely, ignore it here, as I discuss ‘queue’ in the next step )

Step 9 — Created Pipeline

Step 10 — Now, we have created our build pipeline. Next, we have to execute it. For it, click ‘queue’. In the popup, select ‘Run’.

Step 10 — Queue Pipeline

Now our build pipeline is executed. You can see it logs, the step which is being executed :D

Waiting For Agent

Executing Tasks — Pipeline

Ouch ! Why the hell, terminal is stuck, Pipeline doesn’t jump to next step. Why ? :’(

Terminal is Stuck — In Task 2

This is because, by default Angular is waiting for next Unit Test/Test Changes to run. So, we have to say Don’t WAIT :D

It can be done by, adding following flag to ‘test’ command. So modify above test command in package.json,

ng test --watch=false

Now, push the changes to the repository, and queue new build. Now, Azure CLI is not waiting. It completes Unit Test and exit.

Pipeline is completed

So, that’s all for the Part — I. If you enjoyed the article, clap, share, bookmark and comment :D Let’s share Knowledge. See you sooner, with Part — II. Until, Happy Coding !! Enjoy Beer !!!

References

1. https://angular.io/guide/testing
2. https://docs.microsoft.com/en-us/azure/devops/pipelines/?view=azure-devops
3. https://blog.angularindepth.com/angular-testing-with-headless-chrome-d1343b349699