Angular Test Code Coverage Reporting in a TeamCity Build Configuration

Welcome to today’s blog.

In a previous post I showed how to integrate unit test reporting into TeamCity project builds.

We learned how to configure our Angular application to generate reporting for our unit tests that are readable by TeamCity builds and output in readable format in the build overview report.

We also learnt how to configure our Angular application to generate code coverage reporting for our unit tests that are readable by Team City builds and display a basic code coverage summary report within the build overview report.

Today I will be going one step further showing you how to configure a TeamCity build configuration pipeline to provide detailed code coverage reporting within TeamCity build overview.

The Existing Build Summary Report Tab

The current view of our build summary report Overview tab is as shown:

You will also notice there is an additional test tab in the build overview.

However, we have a Code coverage summary report without any detailed coverage report.

In addition, we can see the number of tests passed (and failed if any tests have failed).

When selecting the hyperlink all tests, we see a report of all the unit tests run.

We can also add an extra custom tab to display details of the code coverage report that was generated by the Angular application.

To do this we need to apply the following tasks:

1. Create a new build configuration parameter for the location of our coverage report.
2. Create a new build report tab to display our coverage report.
3. Configuring the build configuration artifacts path

Creating a Build Configuration Parameter

In the project general settings, open the Parameters configuration.

Select Add a new parameter

In the add parameter dialog, give a name for the parameter, kind of parameter. For build configurations, the kind should be of type Configuration parameter. For the value enter the path to the folder containing the code coverage HTML report:

Save the configuration parameter.

In the next section, I will show how to add the additional tab for the code coverage report.

Creating a Build Report Tab for Code Coverage

In the project general settings, open the Report Tab configuration.

In the report tab select the Create new build report tab option.

In the report tab settings dialog, enter the tab title and start page.

Note: If you have a build task that checks out source into the TeamCity working folder, then the start page will be relative to the artifacts subfolder. For a source folder outside of the TeamCity working folder follow the directions below:

The build parameter we create earlier can be selected from the parameter list drop down.

Once selected our report tab definition will look as shown:

Save the definition.

The report tab definition will show in the list of report tabs:

In the next section, I will show how to configure the build configuration artifacts path so that the final code coverage report has the desired formatting and styling applied to it.

Configuring the Build Configuration Artifacts Path

Select the build configuration settings.

The general settings will show by default:

In the artifacts path, select the configuration parameter that we created earlier.

Save the change. Now re-run the build. After the build completes. Select the overview tab. You will notice the code coverage tab named Code Coverage will show:

Select the artifacts tab. You will see the files with the folder that make up the code coverage artifacts generated from our test build:

Select the code coverage tab. You will the detailed code report that we had from our angular application.

We can also drill down into each file and view coverage details of the underlying typescript code.

We can even drill down further and view the actual code that is uncovered (has no related unit tests):

To summarize. We have learnt how to do the following tasks:

1. Configure a build artifact path for a custom report location.
2. Configure TeamCity to display test coverage reporting from our artifacts path.

That’s all for today’s post.

I hope you found this post useful and informative.