Angular code coverage with Sonarqube

Hello reader, there is no doubt in the popularity of the Angular framework, in most of today’s Web application development Angular is the most favorite and commonly used Web application framework.

We do designing, coding, and unit testing in our regular schedule at our workplace but we face challenges when it is required to integrate the Angular application with any automation tool such as Jenkins + Sonarqube. So this article may help you when you face such challenges.

To make you very clear and simple, let's break this process into the below simple steps,

1. Create an Angular component
2. Write the Unit testing ( using Karma and Jasmine )
3. Generate Karma code coverage
4. Install Sonarqube
5. Configure Sonar with Angular
6. Integrate Karma code coverage with Sonarqube

Before moving to the step by step process, let's assume that you have installed JVM, Node JS, Angular CLI and created an Angular project, if not, please refer Angular Getting Started.

Step 1: ( Create an Angular component)

As we use Angular CLI, it is very simple to create a component. Please follow the below command,

ng generate component COMPONENT_NAME

( OR)

ng g c test COMPONENT_NAME

Let consider following is one of our components,

Step 2: ( Write the Unit testing )

Please follow the below code snippet for the unit testing of the above component i.e TestComponent,

For more details on Angular unit testing, please follow https://angular.io/guide/testing.

Step 3: ( Generate Karma code coverage )

Once you are done with writing the Unit test cases for your component(s), please follow the below command for generating the code coverage,

ng test — code-coverage

If you wish to stop the Karma server post the code coverage generation or all test cases execution then run,

ng test — watch=false — code-coverage

( OR)

You can simply change the singleRun attribute to false in your karma.conf.js available in the root directory.

You may chance to get the Karma timeout error, if so then just add browserNoActivityTimeout: 100000 in your karma.conf.js.

You will see a coverage folder would have generated in your application root directories.

Step 4: ( Install Sonarqube )

For installing Sonarqube first download the Sonarqube from https://www.sonarqube.org/downloads/.

For free use, you just click on the Community Edition.

Post download extracts the ZIP file to any folder and then run the StartSonar.bat from sonarqube\bin\windows-x86–64. Once the batch file runs you see the following messages on the command prompt.

Make sure you have JVM installed and running in your machine. For some time you may get JVM timeout or loading error, no worries just rerun the StartSonar.bat file.

Now you can access the Sonarqube from your browser using the default port http://localhost:9000. You can use the default credentials i.e admin and admin as the Login name and Password respectively. Once you login to the Sonarqube you see the below window,

If the 9000 port is already been used then the StartSonar.bat file execution will fail. To overcome this issue you can use any free available port in sonar.web.port present in sonarqube\conf\sonar.properties and uncomment or enable it. Rerun the StartSonar.bat file.

Step 5: ( Configure Sonar with Angular )

Now the time is to configuring the Sonar with Angular application and to do this we need sonar-scanner node package in the Angular application. And to include this, please follow any one of below methods,

Include sonar-scanner as devDependencies in the package.json and then run

npm install or npm i

( OR)

Directly run

npm install sonar-scanner — save-dev

Create a file called sonar-project.properties in your Angular root directory and add below attributes,

Step 6: ( Integrate Karma code coverage with Sonarqube )

We have both Karma code coverage and Sonar server ready, now will integrate both using sonar-scanner which we have installed in the previous step.

First, add a script called sonar to your package.json,

Finally, run the below command to integrate the Karma coverage with the Sonar server,

npm run sonar

And you will the result directly on the Sonar server by navigating to http://localhost:9002/projects. Please find the below screenshot.

Download

For more reference please download the project from the Github.

Conclusion

Let's conclude this, we have four important steps such as,

1. Installing the Sonarqube.
2. Configuring the Sonar with Angular using sonar-project.properties and installing the sonar-scanner package.
3. Getting the Karma code coverage.
4. Integrating the Karma code coverage with Sonarqube.