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

Question

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

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

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

我的声纳扫描仪版本：4.7

我的 Karma 配置

// 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

1. 自最近几个版本以来，SonarQube 已用 javascript 取代了支持 typescript 关键字。用于sonar.javascript.lcov.reportPaths配置报告路径，而不是sonar.typescript.lcov.reportPaths在 sonar.properties 文件中。
2. 据我所知，到目前为止 SonarQube 仅支持使用lcov.info文件进行覆盖集成。确保您的 karma 配置在配置的路径生成 lcov.info 文件。
3. 要生成 lcov 格式的覆盖率报告，您可以按照以下步骤操作：

• 使用 karma-coverage：（推荐）

  • 确保（在 package.json 中）您已karma-coverage安装。通常它是预先安装了新的 Angular 项目的。
  • 更新您的karma.conf.js文件如下：
    • 添加{ 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：（已弃用）

  • karma-coverage-istanbul-reporter使用npm i -D 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如果您尚未安装，请使用安装声纳扫描仪。（将其安装为开发依赖项将有助于团队中的其他开发人员）。

• 添加sonar.javascript.lcov.reportPaths=coverage/lcov-report/lcov.info到您的 sonar-project.properties 文件中，以告诉您的声纳服务器您的覆盖报告路径。

• 更新后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
  

• 使用更新的属性运行声纳扫描仪。

• 我已经使用 Angular 12 和 Angular 13 版本测试了这两个选项。两者似乎都工作正常。如果您遇到任何问题，请告诉我。