Angular 12 / 13：无法将代码覆盖率报告与 sonarqube 集成

Question

当我运行 ng test --code-coverage，然后运行 sonar-scanner 时，仍然无法在 sonar 服务器上看到覆盖率报告。

我尝试使用 Angular 13 设置新项目并按照官方文档进行设置。仍然没有运气。

我的 Sonar 服务器版本：版本 9.2.1（内部版本 49989）

我的声纳扫描仪版本：4.7

我的业力配置

// 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
  });
};

我的声纳属性文件：

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

我的声纳服务器结果：

Answer 1

SonarQube 已经用 javascript 替换了支持的 typescript 关键字，因为最近几个版本。使用 sonar.javascript.lcov.reportPaths 代替 sonar.properties 文件中的 sonar.typescript.lcov.reportPaths 配置报告路径。
据我所知，截至目前，SonarQube 仅支持使用 lcov.info 文件的覆盖率集成。确保您的 karma 配置在配置路径生成 lcov.info 文件。
要生成 lcov 格式的覆盖率报告，您可以按照以下步骤操作：

使用karma-coverage：（推荐）

确保（在 package.json 中）您已安装 karma-coverage。一般是 pre-installed 新的 angular 项目。
更新您的 karma.conf.js 文件如下：
- 在 karma-coverage 名记者下添加 { type: 'lcov', subdir: 'lcov-report' }。
确保您没有任何重复的配置。
删除任何其他报道记者及其配置以避免冲突。

理想情况下，您的 karma.config.js 应如下所示：

// 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
    });
};

使用 karma-coverage-istanbul-reporter：（已弃用）

使用 npm i -D karma-coverage-istanbul-reporter 命令安装 karma-coverage-istanbul-reporter。
请注意，karma-coverage-istanbul-reporter 在版本 11 后已弃用，因此如果您愿意，可以尝试使用 karma-coverage 包生成 lcov.info 格式的代码覆盖率。

更新您的 karma.conf.js 文件如下：

在插件下添加require('karma-coverage-istanbul-reporter')。

设置以下配置：

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

确保您没有任何重复的配置。
删除任何其他报道记者及其配置以避免冲突。

理想情况下，您的 karma.config.js 应如下所示：

// 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
    });
};

现在，运行ng test --code-coverage --watch=false命令生成代码覆盖率。（您也可以在 angular.json 文件中设置默认代码覆盖率和监视配置，以避免每次都指定它）。
下一步是将此覆盖信息告诉您的声纳 qube。
如果尚未安装，请使用 npm i -D sonar-scanner 安装声纳扫描仪。（将其安装为 dev-dependency 将帮助您团队中的其他开发人员）。
在您的 sonar-project.properties 文件中添加 sonar.javascript.lcov.reportPaths=coverage/lcov-report/lcov.info 以告知您的声纳服务器您的覆盖率报告路径。

更新后 sonar-project.properties，它应该如下所示。

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

运行您的 sonar-scanner 具有更新的属性。
我已经用 Angular 12 和 Angular 13 版本测试了这两个选项。两者似乎都工作正常。如果您遇到任何问题，请告诉我。

Angular 12 / 13：无法将代码覆盖率报告与 sonarqube 集成

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

code-coverage

sonarqube

devops

angular

sonarscanner