VSTSでAngularのユニットテスト - はまったりひらめいたり…とか…

はじめに

今回の記事の構成は下記のとおりです。

AngularCLI : 7.0.3
Angular : 7.0.1

Azure DevOpsの略し方が未だにつかめていないので

VSTSの名称でお送りいたします。（ADops…？）

今回のゴール

AngularのUnitTestをVSTSで実施し

結果をVSTSのテストレポートで確認するところまでを目指します。

Angularのプロジェクトの作成からテストコードの作成までは割愛します。

ただ、ネット上に転がっている文献では

PhamtomJSを使用しているものが多いのですが

AzureDevOps(VSTS)でHeadlessChromeが使用できるようになっていることもあり

CIテストに必要な工程はだいぶ減っている印象です

github.com

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
    },