Angular 12 / 13 : Not able to integrate code coverage report with sonarqube

Question

When I run ng test --code-coverage, and then run sonar-scanner, still not able to see coverage report on sonar server.

I tried setting up new project using Angular 13 and setting up as per official documentation. Still no luck.

My Sonar server version: Version 9.2.1 (build 49989)

My Sonar scanner version: 4.7

My Karma configuration

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, './coverage/lcov'),
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true
  });
};

My sonar properties file:

sonar.projectKey=UnitTest
sonar.projectName=UnitTest
sonar.projectVersion=1.0
sonar.sourceEncoding=UTF-8
sonar.host.url=http://localhost:9000 
sonar.login=********
sonar.password=********
sonar.sources=src
sonar.tests=src
sonar.exclusions=**/node_modules/**, src/assets/**
sonar.test.inclusions=**/*.spec.ts
sonar.typescript.lcov.reportPaths=coverage/lcov/lcov.info

My sonar-server result:

Answer 1

1. SonarQube has replaced supporting typescript keyword with javascript, since last few versions. Use sonar.javascript.lcov.reportPaths for configuring report path instead of sonar.typescript.lcov.reportPaths in your sonar.properties file.
2. As per my knowledge, as of now SonarQube is only supporting coverage integration using lcov.info file. Make sure your karma configuration is generating lcov.info file at configured path.
3. For generating lcov format coverage report, you may follow below steps:

• Using karma-coverage: (Recommended)

  • Make sure (in package.json) you have karma-coverage installed. Generally it is pre-installed with new angular project.
  • Update your karma.conf.js file as below:
    • Add { type: 'lcov', subdir: 'lcov-report' } under karma-coverage reporters.
  • Make sure that you don't have any duplicate configuration.
  • Remove any other coverage reporter and its configuration to avoid conflict.
  • Ideally, your karma.config.js should look like below:

    // Karma configuration file, see link for more information
    // https://karma-runner.github.io/1.0/config/configuration-file.html
    
    module.exports = function (config) {
        config.set({
        basePath: '',
        frameworks: ['jasmine', '@angular-devkit/build-angular'],
        plugins: [
            require('karma-jasmine'),
            require('karma-chrome-launcher'),
            require('karma-jasmine-html-reporter'),
            require('karma-coverage'),
            require('@angular-devkit/build-angular/plugins/karma')
        ],
        client: {
            jasmine: {
            },
            clearContext: false // leave Jasmine Spec Runner output visible in browser
        },
        jasmineHtmlReporter: {
            suppressAll: true // removes the duplicated traces
        },
        coverageReporter: {
            dir: require('path').join(__dirname, './coverage'),
            subdir: '.',
            reporters: [
            { type: 'html', subdir: 'html-report' },
            { type: 'lcov', subdir: 'lcov-report' }
            ]
        },
        reporters: ['progress', 'kjhtml'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        singleRun: false,
        restartOnFileChange: true
        });
    };
    
    

• Using karma-coverage-istanbul-reporter: (Deprecated)

  • Install karma-coverage-istanbul-reporter using npm i -D karma-coverage-istanbul-reporter command.
  • Please note that karma-coverage-istanbul-reporter is deprecated after version 11, so if you want you can try with karma-coverage package to generate code coverage in lcov.info format.
  • Update your karma.conf.js file as below:

    • Add require('karma-coverage-istanbul-reporter') under plugins.

    • Set below configuration:

         coverageIstanbulReporter: {
            dir: require('path').join(__dirname, './coverage/lcov-report'),
            reports: ['lcovonly'],
            fixWebpackSourcePaths: true
         },
         reporters: ['progress', 'kjhtml']
      

  • Make sure that you don't have any duplicate configuration.
  • Remove any other coverage reporter and its configuration to avoid conflict.
  • Ideally, your karma.config.js should look like below:

    // Karma configuration file, see link for more information
    // https://karma-runner.github.io/1.0/config/configuration-file.html
    
    module.exports = function (config) {
        config.set({
            basePath: '',
            frameworks: ['jasmine', '@angular-devkit/build-angular'],
            plugins: [
                require('karma-jasmine'),
                require('karma-chrome-launcher'),
                require('karma-jasmine-html-reporter'),
                require('karma-coverage-istanbul-reporter'),
                require('@angular-devkit/build-angular/plugins/karma')
            ],
            client: {
            clearContext: false // leave Jasmine Spec Runner output visible in browser
            },
            coverageIstanbulReporter: {
                dir: require('path').join(__dirname, './coverage/lcov-report'),
                reports: ['lcovonly'],
                fixWebpackSourcePaths: true
            },
            reporters: ['progress', 'kjhtml'],
            port: 9876,
            colors: true,
            logLevel: config.LOG_INFO,
            autoWatch: true,
            browsers: ['Chrome'],
            singleRun: false,
            restartOnFileChange: true
        });
    };
    
    

• Now, run ng test --code-coverage --watch=false command to generate code coverage. (You may also set default code coverage and watch configuration in angular.json file to avoid specifying it every time).

• Next step would be telling your sonar qube about this coverage information.

• Install sonar scanner using npm i -D sonar-scanner if you haven't installed yet. (Installing it as dev-dependency will help other developers in your team).

• Add sonar.javascript.lcov.reportPaths=coverage/lcov-report/lcov.info in your sonar-project.properties file to tell your sonar server about your coverage report path.

• After updating sonar-project.properties, it should look like below.

  sonar.projectKey=UnitTest
  sonar.projectName=UnitTest
  sonar.projectVersion=1.0
  sonar.sourceEncoding=UTF-8
  sonar.host.url=http://localhost:9000 
  sonar.login=*********
  sonar.password=*********
  sonar.sources=src
  sonar.tests=src
  sonar.exclusions=**/node_modules/**,src/assets/**
  sonar.test.inclusions=**/*.spec.ts
  sonar.javascript.lcov.reportPaths=coverage/lcov-report/lcov.info
  

• Run your sonar-scanner with updated properties.

• I have tested both options with Angular 12 and Angular 13 version. Both seems to work fine. Please let me know if you face any issue.

Answer 2

In addition to the karma.config.js changes from Yash Mochi's answer, I also had to edit my angular.json file to point it at my karma config. This is what I added to angular.json:

{
  "projects": {
    "YourAppName": {
      ...
      "architect": {
        ...
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "karmaConfig": "karma.conf.js" // <-- I added this property

Now the settings from karma.config.js are actually used during testing, and the code coverage report is formatted in the ways I specified.

Also note that you must to either run ng test with --code-coverage, or add "codeCoverage": true to the test options in angular.json, otherwise coverage won't be generated at all.