VSTSでAngularのユニットテスト
はじめに
今回の記事の構成は下記のとおりです。
- AngularCLI : 7.0.3
- Angular : 7.0.1
Azure DevOpsの略し方が未だにつかめていないので
VSTSの名称でお送りいたします。(ADops…?)
今回のゴール
AngularのUnitTestをVSTSで実施し
結果をVSTSのテストレポートで確認するところまでを目指します。
Angularのプロジェクトの作成からテストコードの作成までは割愛します。
ただ、ネット上に転がっている文献では
PhamtomJSを使用しているものが多いのですが
AzureDevOps(VSTS)でHeadlessChromeが使用できるようになっていることもあり
CIテストに必要な工程はだいぶ減っている印象です
VSTSのReporter出力の準備
VSTSのレポート出力用に、JUnitReporterをインストールします。
また、HeadlessChromeでテストを実行するので、Pupetterもインストールします。
npm i karma-junit-reporter --save-dev
npm i puppeteer --save-dev
karmaでHeadlessChromeを使用する設定を追加していきます。
- karma.conf.js
process.env.CHROME_BIN = require('puppeteer').executablePath();
plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage-istanbul-reporter'), require('karma-junit-reporter'), // 追加 require('@angular-devkit/build-angular/plugins/karma') ],
browsers: ['Chrome', 'ChromeHeadless'], //ChromeHeadlessを追加
karmaのテストレポートでjunitを使用するよう設定追加します。
- karma.conf.js
reporters: ['progress', 'kjhtml', 'junit'], // 'jUnitを追加' junitReporter: { // 出力ディレクトリ outputDir: require('path').join(__dirname, '../reports'), // 出力ファイル名 outputFile: 'test-results.xml', suite: '', useBrowserName: false },
Angularのテスト\スクリプト作成
CI環境下で実行するため、HeadlessChromeで一回のみテストを実行するコマンドです。
- package.json
"citest": "ng test --watch=false --no-progress --browsers=ChromeHeadless",
VSTSのCIパイプラインを構築
VSTSでAngularのテストを行うよう、パイプラインを構築していきます。
1.Angular-cliをインストール
ng
コマンドを使用するために@angular/cliをインストールしておきます。
2.npm install を実行
3.組んだCI用のテストを実行する
4.テストが失敗していた場合はレポートを出力する
5.テストが成功していた場合はビルドする
テストで失敗した場合
AngularのTypeScript側で失敗したエラーが
VSTSのレポートから確認できるようになりました。
最後に
少し前まではHeadlessChromeが使えなかったので
PhamtomJSをインストールしたり、設定を追加していたりしたのですが
だいぶ楽にCIの自動テストの構成を作ることができるようになりました。
ただ、npm installをしている関係で、一回のサイクルに5分位かかってしまうので
ビルド時間に制限のあるPrivateリポジトリでのCIについては
乱発しないように注意が必要かもしれません。