Angular code coverage with SonarQube

Angular code coverage with SonarQube

1 Like

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,

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,

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 Download | SonarQube.

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\ 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 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.


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

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