これでばっちり。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を実行するとテスト結果が表示されます。
この記事が気に入ったらサポートをしてみませんか?