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.properties 文件中使用 sonar.javascript.lcov.reportPaths 配置报​​告路径，而不是使用 sonar.typescript.lcov.reportPaths 。
2. 据我所知，目前 SonarQube 仅支持使用 lcov.info 文件进行覆盖集成。确保您的 karma 配置在配置的路径生成 lcov.info 文件。
3. 要生成 lcov 格式的覆盖率报告，您可以按照以下步骤操作：

• 使用 karma-coverage：（推荐）

  • 确保（在 package.json 中）您已安装 karma-coverage。通常它是预安装新的 Angular 项目的。
  • 更新您的 karma.conf.js 文件，如下所示：
    • 在 karma-coverage 报告器下添加 { type: 'lcov', subdir: 'lcov-report' }。
  • 确保您没有任何重复的配置。
  • 删除任何其他覆盖率报告器及其配置以避免冲突。
  • 理想情况下，您的 karma.config.js 应如下所示：

    // Karma 配置文件，请参阅链接以获取更多信息
    // https://karma-runner.github.io/1.0/config/configuration-file.html
    
    module.exports = 函数（配置）{
        配置.设置({
        基本路径: '',
        框架：['jasmine'，'@angular-devkit/build-angular']，
        插件：[
            require('业力茉莉花'),
            需要（'karma-chrome-launcher'），
            require('karma-jasmine-html-reporter'),
            要求（'业力覆盖'），
            需要（'@ Angular-devkit / build-Angular /插件/业力'）
        ],
        客户： {
            茉莉花：{
            },
            clearContext: false // 让 Jasmine Spec Runner 输出在浏览器中可见
        },
        jasmineHtmlReporter：{
            suppressAll: true // 删除重复的痕迹
        },
        报道记者：{
            dir: require('path').join(__dirname, './coverage'),
            子目录：'.'，
            记者：【
            { 类型：'html'，子目录：'html-report' },
            { 类型：'lcov'，子目录：'lcov-report' }
            ]
        },
        记者：['进展', 'kjhtml'],
        端口：9876，
        颜色：真实，
        日志级别：config.LOG_INFO，
        自动观察：正确，
        浏览器：['Chrome']，
        单运行：假，
        重新启动文件更改：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')。

    • 设置以下配置：

       覆盖伊斯坦布尔记者：{
            dir: require('path').join(__dirname, './coverage/lcov-report'),
            报告：['lcovonly']，
            修复WebpackSourcePaths：true
         },
         记者：['进展', 'kjhtml']
      

  • 确保您没有任何重复的配置。
  • 删除任何其他覆盖率报告器及其配置以避免冲突。
  • 理想情况下，您的 karma.config.js 应如下所示：

    // Karma 配置文件，请参阅链接以获取更多信息
    // https://karma-runner.github.io/1.0/config/configuration-file.html
    
    module.exports = 函数（配置）{
        配置.设置({
            基本路径: '',
            框架：['jasmine'，'@angular-devkit/build-angular']，
            插件：[
                require('业力茉莉花'),
                需要（'karma-chrome-launcher'），
                require('karma-jasmine-html-reporter'),
                要求（'业力覆盖-伊斯坦布尔记者'），
                需要（'@ Angular-devkit / build-Angular /插件/业力'）
            ],
            客户： {
            clearContext: false // 让 Jasmine Spec Runner 输出在浏览器中可见
            },
            报道伊斯坦布尔记者：{
                dir: require('path').join(__dirname, './coverage/lcov-report'),
                报告：['lcovonly']，
                修复WebpackSourcePaths：true
            },
            记者：['进展', 'kjhtml'],
            端口：9876，
            颜色：真实，
            日志级别：config.LOG_INFO，
            自动观察：正确，
            浏览器：['Chrome']，
            单运行：假，
            重新启动文件更改：true
        });
    };
    
    

• 现在，运行 ng test --code-coverage --watch=false 命令来生成代码覆盖率。 （您还可以在 angular.json 文件中设置默认代码覆盖率和监视配置，以避免每次都指定它）。

• 下一步是告诉您的声纳 qube 此覆盖范围信息。

• 如果您尚未安装，请使用 npm i -D sonar-scanner 安装声纳扫描仪。 （将其安装为开发依赖项将有助于团队中的其他开发人员）。

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

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

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

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

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

Answer 2

除了 Yash Mochi 的答案 中的 karma.config.js 更改之外，我还必须将 angular.json 文件编辑为将其指向我的业力配置。这是我添加到 angular.json 中的内容：

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

现在，测试期间实际使用了 karma.config.js 中的设置，并且代码覆盖率报告按照我指定的方式进行格式化。

另请注意，您必须使用 --code-coverage 运行 ng test，或者将 "codeCoverage": true 添加到测试选项angular.json，否则根本不会生成覆盖范围。