これでばっちり。AngularのユニットテストをAzure DevOpsで実行して、結果を表示する方法

Augularのマニュアルには、著名なCI/CDでユニットテストを実行する方法が記載されています。

しかし、Azure DevOpsの記載はありません･･･。

当面、Azure DevOpsを使い続けるつもりなので調べてみました。

CI用のテストスクリプトの追加

package.jsonにCI用のテストスクリプトを追加します。

"test:ci": "ng test --no-watch --code-coverage --no-progress --browsers=ChromeHeadless",

Azure DevOpsで実行するときは、「npm run test:ci」になります。

テスト結果が表示されない･･･

めでたくカバレッジは表示されるようになったものの、テストそのものの結果が表示されません。

表示するためには、テストの結果をAzure DevOpsが取り込める形式で出力する必要があります。

Angular側の設定

Junit形式であれば取り込めるようですので、テスト結果をJunit形式で出力できるプラグインをインストールします。

npm install karma-junit-reporter --save-dev

次にkarma.conf.jsを編集します。

pluginsに以下を追加します。

require('karma-junit-reporter'),

reportersにjunitを追加します。

reporters: ['progress', 'kjhtml', 'junit'],

Junitのテスト結果を出力するフォルダを指定します。

junitReporter: {
     outputDir: require('path').join(__dirname, './junit'),
   },

Azure DevOpsの設定

Azure DevOpsでは、ユニットテストが終わったところに、以下を追加します。

  # テスト結果をPipelineに保存
 - task: PublishTestResults@2
   inputs:
     searchFolder: $(System.DefaultWorkingDirectory)/junit
     testRunTitle: Angular
     testResultsFormat: JUnit
     testResultsFiles: "**/TESTS*.xml"

これで、Azure DevOpsのPipelineを実行するとテスト結果が表示されます。