{"id":2964,"date":"2023-10-24T16:28:05","date_gmt":"2023-10-24T14:28:05","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=2964"},"modified":"2023-10-24T22:28:56","modified_gmt":"2023-10-24T20:28:56","slug":"angular-code-coverage-with-sonarqube","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2023\/10\/24\/angular-code-coverage-with-sonarqube\/","title":{"rendered":"How to integrate angular code coverage with Sonarqube"},"content":{"rendered":"\n

The Angular CLI can run unit tests and create code coverage reports. Code coverage reports show us any parts of our code base that might not be properly tested by our unit tests.<\/p>\n\n\n\n

To generate a coverage report, let’s run the following command in the root of our project:<\/p>\n\n\n\n

ng test --no-watch --code-coverage<\/code><\/pre>\n\n\n\n
When the tests are complete, the command creates a new \/coverage<\/em><\/strong><\/code> directory in the project.  Let us open the index.html<\/code> file (inside the new directory) to see a report with our source code and code coverage values.<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
If we want to create code-coverage reports every time we test, let’s set the following option in the Angular CLI configuration file, angular.json<\/code>:<\/p>\n\n\n\n
\"test\": {\n  \"options\": {\n    \"codeCoverage\": true\n  }\n}<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Code coverage enforcement<\/h4>\n\n\n\n
The code coverage percentages let us estimate how much of our code is tested. If in a team, we decides (in ourselves) on a set minimum amount to be unit tested, we can enforce this minimum with the Angular CLI.<\/p>\n\n\n\n
For example, suppose we want the code base to have a minimum of 80% code coverage. To enable this, let’s open the Karma<\/a> test platform configuration file, karma.conf.js<\/code>, and add the check<\/code> property in the coverageReporter:<\/code> key.<\/p>\n\n\n\n
coverageReporter: {\n  dir: require('path').join(__dirname, '.\/coverage\/<project-name>'),\n  subdir: '.',\n  reporters: [\n    { type: 'html' },\n    { type: 'text-summary' }\n  ],\n  check: {\n    global: {\n      statements: 80,\n      branches: 80,\n      functions: 80,\n      lines: 80\n    }\n  }\n}<\/code><\/pre>\n\n\n\n
The\u00a0check<\/code>\u00a0property causes the tool to enforce a minimum of 80% code coverage when the unit tests are run in the project.<\/em> If the thresholds are not met, karma will return failure.<\/p>\n\n\n\n
PS:<\/strong> Read more on coverage configuration options in the\u00a0karma coverage documentation<\/a>.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Step 2: Add SonarQube plugin to Karma.Conf<\/h4>\n\n\n\n
SonarQube will use the lcov.info<\/code> file to get information about the typescript\/javascript code quality. However, to map a TS\/JS file with its Unit-Test file (Spec file) and make it understand coverage details, you need to use SonarQube plugin with Karma.<\/p>\n\n\n\n
Let’s install the plugin <\/strong><\/span><\/p>\n\n\n\n
npm install -D karma-sonarqube-reporter<\/code><\/pre>\n\n\n\n
 Head over to karma.conf.js and make the following changes:<\/span><\/strong><\/p>\n\n\n\n
\/\/importing the modules\nrequire('karma-sonarqube-reporter')<\/code><\/pre>\n\n\n\n
Add sonarqube to the array of reporters:<\/span><\/strong><\/p>\n\n\n\n
reporters:[\u2018progress\u2019, \u2018kjhtml\u2019, \u2018sonarqube\u2019]<\/code><\/pre>\n\n\n\n
Configure Sonarqube in Karma.conf like this:<\/span><\/strong><\/p>\n\n\n\n
sonarqubeReporter: {\n      basePath: 'src\/app', \/\/ test files folder\n      filePattern: '**\/*spec.ts', \/\/ test files glob pattern\n      encoding: 'utf-8', \/\/ test files encoding\n      outputFolder: 'reports', \/\/ report destination\n      legacyMode: false, \/\/ report for Sonarqube < 6.2 (disabled)\n      reportName: function (metadata) {\n        \/\/ report name callback, but accepts also a\n        \/\/ string (file name) to generate a single file\n        \/**\n         * Report metadata array:\n         * - metadata[0] = browser name\n         * - metadata[1] = browser version\n         * - metadata[2] = plataform name\n         * - metadata[3] = plataform version\n         *\/\n        return 'sonarqube_report.xml';\n      },\n    },<\/code><\/pre>\n\n\n\n
If we run ng test --code-coverage --watch=false<\/code> <\/strong>now, there is a folder reports\/<\/code> generated at the project root with sonarqube_report.xml<\/code> file inside the folder.<\/em><\/p>\n\n\n\n
Example of tree achitectur: <\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
<\/div>\n\n\n\n
Install \u201csonar-scanner\u201d<\/h4>\n\n\n\n
Now the time is to configuring the Sonar with Angular application and to do this we need sonar-scanner<\/em><\/strong> node package in the Angular application.<\/p>\n\n\n\n
npm install -D sonarqube-scanner<\/code><\/pre>\n\n\n\n
The NPM package also has very good docs (https:\/\/www.npmjs.com\/package\/sonarqube-scanner<\/a>). we can refer to it for further\/more details.<\/p>\n\n\n\n
Create a sonar-project.properties file in our project root<\/h4>\n\n\n\n
let’s Create a file called sonar-project.properties<\/em><\/strong> in our Angular root directory and add below attributes:<\/p>\n\n\n\n
sonar.host.url=SONAR-QUBE-URL\nsonar.projectKey=Project_Key # Must be unique (Primary key)\nsonar.projectName=PROJECT_NAME # name that will be displayed on the dashboard\nsonar.projectVersion=1.0\nsonar.sourceEncoding=UTF-8\nsonar.sources=src\nsonar.exclusions=**\/node_modules\/**\nsonar.tests=src # Where to pickup test files from\nsonar.test.inclusions=**\/*.spec.ts # only collect these for test-coverage\nsonar.javascript.lcov.reportPaths=src\/coverage\/PROJECT_NAME\/lcov.info\nsonar.testExecutionReportPaths=reports\/sonarqube_report.xml<\/code><\/pre>\n\n\n\n
Additionally, we can add the sonar.login<\/code> and sonar.password<\/code> if we have password-protected our SonarQube instance (Only when running locally!).<\/p>\n\n\n\n
<\/div>\n\n\n\n
Integrate Karma code coverage with Sonarqube<\/span> <\/h4>\n\n\n\n
We have both Karma code coverage and Sonar server ready.<\/p>\n\n\n\n
Now, let us integrate both using sonar-scanner.<\/p>\n\n\n\n
First, add a script called sonar <\/em><\/strong>to your package.json,<\/p>\n\n\n\n
\"scripts\": {\n    \"sonar\": \"sonar-scanner\"\n}<\/code><\/pre>\n\n\n\n
Finally, let’s run the below command to integrate the Karma coverage with the Sonar server,<\/p>\n\n\n\n
npm run sonar<\/code><\/pre>\n\n\n\n
And we will see the result directly on the Sonar server by navigating to the corresponding url <\/strong>(setted previously to the  sonar-project.properties file)<\/p>\n\n\n\n
example: <\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
<\/div>\n\n\n\n
Update our .gitignore file<\/h4>\n\n\n\n
Consider adding these items to our .gitignore file as they should not be tracked in version control.<\/p>\n\n\n\n
PS: in our demo, the generated folder name is “reports<\/em><\/strong>” . so let us add it in the .gitignore file. <\/p>\n\n\n\n
.scannerwork\/*\nreports\/*  <\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
Conclusion<\/h4>\n\n\n\n
To integrate karma test coverage with Sonarqube reporter , we have four important steps such as,<\/p>\n\n\n\n
  1. Installing the Sonarqube.<\/li>
  2. Configuring the Sonar with Angular using sonar-project.properties and installing the sonar-scanner package.<\/li>
  3. Getting the Karma code coverage.<\/li>
  4. Integrating the Karma code coverage with Sonarqube.<\/li><\/ol>\n\n\n\n
    <\/p>\n","protected":false},"excerpt":{"rendered":"
    The Angular CLI can run unit tests and create code coverage reports. Code coverage reports show us any parts of our code base that might not be properly tested by our unit tests. To generate a coverage report, let’s run the following command in the root of our project: When the tests are complete, the […]<\/p>\n","protected":false},"author":1,"featured_media":2976,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[751,748,597,750,749,747,598],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2964"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=2964"}],"version-history":[{"count":6,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2964\/revisions"}],"predecessor-version":[{"id":2981,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2964\/revisions\/2981"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/2976"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}