Publish & Execute Angular Unit Tests in Azure DevOps Build Pipeline with Code Test & Unit Test Summary Reports — Part II
In the Part I, I discussed how to publish & execute Angular Unit Test in AzureDevOps. So, here I am going to discuss how to generate Unit Test Summary Report and Code Coverage in Azure DevOps, for the Unit Test Completed in Part I.
Prerequisites
- Followed & Read Part-I Article. Read If you haven’t, read it 👇
Okay. Let’s start. I divide this article into two main sections.
- Publish Unit Test Summary Report
- Publish Code Coverage Summary Report
1. Publish Unit Test Summary Report
Step 1 — To generate Test Report I’m using Karma JUnit Reporter. First install it to your project.
npm i karma-junit-reporterStep 2 — Now we have to import above ‘karma-junit-reporter’ in to our project and have to configure. So for that, open ‘karma.conf.js’ file in your project. There, in the ‘plugins’ section, add the following line.
require('karma-junit-reporter')Step 3 — Now we have to say use this ‘karma-junit-reporter’ to generate Test Report. For that, in ‘karma.conf.js’ file, you can see a section ‘reporter’. Add the following inside the array.
reporters: ['progress', 'kjhtml', 'junit']Step 4 — okay. Now we have said to use JUnit repoter service to generate our Test Report. But to where ? We have to say, where to publish the Test Report. For that, add the following Code Snippet, before the ‘reporters’ section.
junitReporter: { outputDir: 'testresults/junit', outputFile: 'unit-test-result.xml', useBrowserName: false}
Refer Karma-Junit-Reporter Documentation for more information about the keys inside ‘junitReporter’ Object. [2]
Here I am adding the values focusing the project we created in the Part I. Now we have done all the configuration to generate report. Now push the changes to the repository.
Step 5 — Now go to Azure DevOps. Go to Pipelines. Click Builds. There you can see the last builds we executed in the ‘History’ section. Click ‘Edit’ button and go to build pipeline’s organization section.
Step 6 — As I mentioned in the Article Part I, we have to say all the steps to follow, in the Azure DevOps Build Pipeline. As the way, here we have to say to Azure Pipeline, after Unit Test Execution, generate the Test Summary Report. So we have to add another step saying, ‘Publish Test Results’. Click on + symbol and search ‘Publish Test Results’. Add it.
Step 7 — Add the Following Details.
Now everything is Okay. Only thing left is, Execute the Pipeline and Check :D But prior to that just save and go to builds. In the history section, click on the last build. There you can see a tab ‘Test’. Click on it. Can you see anything ? No Test Results & Nothing 😢
Step 8 — Just click ‘Queue’ and execute a new build. Wait and see until it’s completed. After the build completion, If you’ve followed above steps correctly, now in the ‘Test’ section, there you can see the Test Summary Report :D Yaay ! 👌
That’s all for the Section 1 :D. But now we need to see, how to generate code-coverage report. By default, you can’t see any ‘Tab’ for Code-Coverage, as for the ‘Test’. Fine. Follow Me 😃 😜
2. Publish Code Coverage Summary Report
Step 9 — For this I am using ‘karma-coverage’ library. Let’s first have it in our project.
npm i karma-coverageStep 10— After installation, we have to follow the same step as in the step 2. Open ‘karma.conf.js’ file and import ‘karma-coverage’. Add the following snippet inside the ‘plugins’ section.
require('karma-coverage')Step 11 — Add following line inside the ‘reporters’ array.
reporters: ['progress', 'kjhtml', 'coverage', 'junit']Step 12 — Now we have to say where and how to publish Code Report File. Add the following code snippet before the ‘reporters’ section.
coverageReporter: { type : 'cobertura', dir : 'testresults', subdir:'coverage', file: 'code-coverage.xml'
}
Refer ‘karma-coverage’ documentation for more information regarding the keys in the ‘coverageReporter’ object.[3]
Now here we have to do extra thing we didn’t do for generating Test Summary Report.
Angular by default ready to generate Test Summary Report. But it’s not ready to do Code Coverage. So explicitly have to say, do Code Coverage, on Unit Test.
Now push the changes to the repository. Then after, we have to add step to create Code Coverage report in Azure DevOps build pipeline.
Step 13 — Go to build pipeline’s task section. Click ‘+’ symbol and do search ‘publish code coverage results’. Click Add.
Step 14— Now do modify as the following. And Save 😃
Azure support Cobertura and JaCoCo code coverage results formats. So here I am using Cobertura as the Coverage Tool 🐺
That’s all. We have completed all the configurations to generate Code Coverage summary report. Let’s click ‘Queue’ and see. If you have followed everything correct, then the build is successful and there you can see ‘Code Coverage’ tab, next to ‘Tests’ 😲. Click on it, and you will be amazed 😉
So, that’s all for the series of Publish & Execute Angular Unit Tests in Azure DevOps Build Pipeline with Code Test & Unit Test Summary Reports.
Summary
Here in these two articles, I discussed the following.
- Create Azure DevOps build pipeline for Angular Project.
- Execute Angular Unit Test in Azure DevOps build pipeline.
- Generate Unit Test Summary Report in Azure DevOps.
- Generate Code Coverage Summary Report in Azure DevOps.
Here is the github link for the Project, demonstrated through through out the series 👇
https://github.com/TharakaMadhusanka/angular-unit-test-sample
Hope you guys enjoyed, learned. Then clap 👏, bookmark 📗 & share 💠. If there’s any question or any thought then comment 💁. See you sooner ! Until Happy Coding ! Happy Beer !! 😃 🍺
References