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

sonar.javascript.lcov.reportPaths
```
 配置报告路径，而不是 
```
sonar.typescript.lcov.reportPaths
```
。
```

lcov.info

 文件进行覆盖集成。确保您的 karma 配置在配置的路径生成 lcov.info 文件。

使用业力覆盖：（推荐）
- 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
```
 包来生成 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-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
使用更新的属性运行声纳扫描仪。
我已经使用 Angular 12 和 Angular 13 版本测试了这两个选项。两者似乎都工作正常。如果您遇到任何问题，请告诉我。

Answer 2

除了

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

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

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

另请注意，您必须使用

ng test

 运行

--code-coverage

，或者将

"codeCoverage": true

 添加到 angular.json 中的测试选项，否则根本不会生成覆盖率。

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

问题描述投票：0回答：2

2个回答

最新问题

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

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2