How to "Enable front-end code coverage in sonarqube" for a Angular project

Question

This is my dahsboard from Bamboo related to Sonarqube: https://imgur.com/a/yOq6iGp

The project build result page looks like this: https://imgur.com/Z126mr7

So, I want enable somehow test coverage in Bamboo to see unit tests reports. I mention that we have local coverage for my angular project.

Can you help me with this?

Answer 1

You'll need to get the results into a format that SonarQube can interpret. Assuming you are using Jasmine/Karma this would be an LCOV format.

1. Modify your build script to include the following line:

   ng test --code-coverage

2. This should create a coverage folder in your angular project. However it will be in an html format. You'll also need to change the Karma runner so that it generates an lcov.info file:

   // karma.conf.js
   // ....
   coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../coverage'),
      reports: ['lcovonly'],
      fixWebpackSourcePaths: true
   },
   // ....
   

3. Finally, Update the sonar-project.properties file with the following line so that SonarQube knows where to find the coverage:

   sonar.typescript.lcov.reportPaths=coverage/lcov/lcov.info