angular の UT カバレッジ レポートを SonarQube にアップロードするにはどうすればよいですか?

1. 前提条件: SonarQube サービスをデプロイしていること。

2. プロセスをテストするために、ローカル コンピューターにソナー スキャナーをインストールします。それは上の画像の左側にあります。私は Windows システムを使用しているため、以下の Web サイトからパッケージを入手します。 

ソナースキャナ | SonarQube ドキュメント

3. sonar-scanner のインストール パスを環境変数に追加します。

 3. コマンド sonar-scanner -h を入力して、動作しているかどうかを確認します。

sonar-scanner -h

 4. 設定を追加します: { type: 'lcovonly' } を Karma.conf.js ファイルに追加して、SonaQube にアップロードする lcov.info ファイルを出力します。

// 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('karma-coverage'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      jasmine: {
        // you can add configuration options for Jasmine here
        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
        // for example, you can disable the random execution with `random: false`
        // or set a specific seed with `seed: 4321`
      },
      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' }, { type: 'lcovonly' },
        { type: 'text-summary' }
      ]
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true
  });
};

5. sona properties ファイルを追加して、UT カバレッジ レポートをアップロードするための設定を保存します。

私のプロジェクトでは、sonar-project.properties という名前でした。値は次のとおりです。

# must be unique in a given SonarQube instance
sonar.projectKey=webapp-angular

# --- optional properties ---

# defaults to project key
#sonar.projectName=My project
# defaults to 'not provided'
#sonar.projectVersion=1.0
 
# Path is relative to the sonar-project.properties file. Defaults to .
sonar.sources=src/app
sonar.exclusions=**/node_modules/**,src/**.spec.ts,src/**.module.ts
 
# Encoding of the source code. Default is default system encoding
sonar.sourceEncoding=UTF-8
# https://sonar.xxx.com, it didn't work if using the domain in My computer.
sonar.host.url=http://10.*.*.*
sonar.login=xxxx

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

6. UT カバレッジ レポートを生成する

ng test --no-watch --code-coverage

  コマンドの実行後、UT カバレッジ レポートが作成されます。

   そして、lcov.info ファイルがカバレッジフォルダーの下にあります。

7. sonar-scanner を実行します。以下のコマンドをコピーして実行します。

sonar-scanner -Dproject.settings=sonar-project.properties

 8. SonaQube Web サイトにログインして、UT カバレッジ レポートを確認してください。

お使いの環境で動作しない場合は、記事を参照してください。

Angular 単体テストと統合テスト