Angular code coverage with SonarQube
let’s break this process into the below simple steps,
- Create an Angular component
- Write the Unit testing ( using Karma and Jasmine )
- Generate Karma code coverage
- Install Sonarqube
- Configure Sonar with Angular
- 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,
As we use Angular CLI, it is very simple to create a component. Please follow the below command,
ng generate component COMPONENT_NAME
ng g c test COMPONENT_NAME
Let consider following is one of our components,
Please follow the below code snippet for the unit testing of the above component i.e TestComponent,
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
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.
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\sonar.properties and uncomment or enable it. Rerun the StartSonar.bat file.
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
npm install sonar-scanner — save-dev
Create a file called sonar-project.properties in your Angular root directory and add below attributes,
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,
- Installing the Sonarqube.
- Configuring the Sonar with Angular using sonar-project.properties and installing the sonar-scanner package.
- Getting the Karma code coverage.
- Integrating the Karma code coverage with Sonarqube.