Welcome to today’s blog.
Today I will be showing you how to configure an Angular application to provide reporting output to the TeamCity within a build and test pipeline.
In a previous post, I showed how to configure an Angular application with the built-in Istanbul test coverage reporter to generate test coverage report outputs from the Karma test runner.
To be able to generate test coverage reports that are able to be understood by TeamCity we will need to install an NPM package into our Angular application:
npm install karma-teamcity-reporter –save-dev
Following installation, you will see the package in the dependencies list in package.json:
"dependencies": {
…
"karma-teamcity-reporter": "^1.1.0",
…
},
Next, we will amend the Karma test runner configuration file karma.config.js, to include the Karma TeamCity reporter within the list of plug-ins. We do this as shown:
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma'),
require('karma-teamcity-reporter')
],
The next part within karma.config.js we amend is the coverageIstanbulReporter section to include the TeamCity reports:
coverageIstanbulReporter: {
dir: require('path').join(__dirname, './coverage/angular-azure-app'),
reports: ['teamcity', 'html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true,
In our package.json we add an additional command which will allow us to run the unit tests headless and with additional test coverage:
"headless-test-coverage": "ng test --watch=false --code-coverage
--browsers=ChromeHeadlessCustom",
We update our test build step NPM script to run the headless tests with coverage:
npm run headless-test-coverage
After running the build configuration, when viewing the log for the test build step, you will notice that the code coverage will show as a results summary:
Select the Overview tab for the build and you will notice that the Code coverage summary shows as a mini summary report:
There is also one other result that is missing from our build report. It is only reporting the success or failure of the whole build process. There is no mention of how many tests have passed and how many have failed.
To add reports for tests we will have to add an additional parameter to the Angular test run that restricts the report data to the TeamCity test output.
To do this we add the –reporters flag to the ng test command in our package.json:
"headless-test-coverage-report": "ng test --watch=false --code-coverage
--reporters=teamcity --browsers=ChromeHeadlessCustom",
We are just restricting the reports to TeamCity report output from our Angular test run.
After running our tests within Angular, we will see a lot of output that looks like the following:
This is the unit test result output that Team City can understand.
Now go into the build step in Team City and amend the NPM script to run with TeamCity reports:
npm run headless-test-coverage-report
After the build is re-run and completes, you will notice that the build log has changed. There is additional JavaScript output in the build log:
As we will see, TeamCity has used the report data from Angular to determine more details on the unit tests, and even included a breakdown of tests specs within each suite.
You will also notice there is an additional test tab in the build overview.
In addition, we can see the number of tests passed (and failed if any tests have failed).
Now click on the hyperlink all tests. We will see a report of all the unit tests run.
We can also add an extra tab to display details of the code coverage report that was generated by the Angular application.
In the next post, I will show how to implement the extra tab to show the code coverage. This will involve the following tasks:
- Create a new build configuration parameter for the location of our coverage report.
- Create a new build report tab to display our coverage report.
- Configuring the build configuration artifacts path
Andrew Halil is a blogger, author and software developer with expertise of many areas in the information technology industry including full-stack web and native cloud based development, test driven development and Devops.
