Sonar-Jenkins Integration for Angular Applications

We are all aware that Angular is gaining popularity among today’s developers. At MiQ, as part of the development process, we follow various steps such as coding, writing test cases, testing and deployment.

With Angular applications, the test cases are written using Jasmine and Karma. Once we have written the test cases, we generate the report and publish it on SonarQube. This report generation can be automated using Jenkins.

In this article, we will focus on integrating Sonar with Jenkins to show the coverage of our Angular applications.

There are 4 major sections:

1. Executing the test cases
2. Changes in the Angular application configuration
3. Publishing report on Sonar
4. Generating the report through Jenkins

1. Executing the test cases

To run the test cases in Angular, we use the following command:

ng test

However, the above command will only run the test cases. To generate the code-coverage, we modify the above command as:

ng test --code-coverage

On executing the above command, a ‘coverage’ folder is generated in the root location as shown:

coverage folder

Now this coverage folder has a file named index.html which contains the percentage of lines, statements, branches and functions covered by the tests.

Sample index.html contents

2. Changes in the Angular application configuration:

To start with, install sonar and make the changes in the configuration files according to the documentation.

Once the changes are made, create a file named sonar-project.properties in the root directory of the project. Add the following properties in it:

sonar-project.properties

In karma.conf file, make the following changes:

karma.conf

Make the following changes in the package.json file:

package.json

3. Publishing report on Sonar

Once the coverage folder is created, we are now ready to publish the report to Sonar.

There are 2 ways to do this:

• We run the command sonar-scanner only: In this case, all the properties mentioned in the sonar-project.properties will be considered.

neetu.purba$ sonar-scanner

• We execute the command sonar-scanner along with few other parameters: In this case, all the values mentioned in the parameters will be considered and the ones missing will be picked up from the sonar-project.properties file.

Here is a sample command:

sonar-scanner command

However, in both cases, the files are scanned and the files mentioned in the exclusions array are excluded. Once the command is executed successfully, 2 links are provided as shown below:

Successful execution of sonar-scanner command

In the first link: http://localhost:9000/dashboard?id=sample-ui , we can view the Sonar dashboard which gives coverage details about each file in the project.

Sonar UI

This is how the coverage for each file looks like:

Coverage for the files

The second link is http://localhost:9000/api/ce/task?id=**************** , which gives information like the component name, component keys, report generation time and status.

Metadata for the project

4. Generating the report through Jenkins

To automate the entire process of running test cases and publishing the coverage report to Sonar, we have to integrate Sonarqube with Jenkins.

Let’s see how that is done:

In the Jenkins UI, install the SonarQube plugin

In the Build steps, add the following commands:

Commands to run Sonar in Jenkins

Summary

In this article, we have learnt how to integrate Sonar and Jenkins to publish the coverage reports for Angular applications. The various benefits of this integration are:

• Manual intervention is eliminated
• With just one click, all the test cases will be executed and the report will be published on the Sonar server
• The Jenkins job can also be scheduled if we want the job to run after every push to the version control system like Git, Bitbucket, etc. This will ensure that test cases are written along with the development code.