angularのテストを CI と 開発で実行の仕方を変えたい

angularのテストで、 CI と 開発時 では結構やりたいことが変わる。

• CI環境では、出来る限り早く実行したい
• 開発時は、常に実行しておいて、変更があったら勝手にテストを実行して欲しい

これを実現するために、テスト用のコマンドを２つ用意する。

ng test

は、普通に実行すると watch 状態になる。また、Chromeが立ち上がる。

そのため、 CI には向いていない。

そのため、 CI ようでは下記のオプションを利用する

--single-run
--browsers

--single-run を利用することで一度しか実行しないようにし、また --browsers を利用することで Chrome が立ち上がらない HeadlessChrome を立ち上げる。

HeadlessChromeを利用するには、下記のような設定を karma.conf.js に記載しよう。

customLaunchers: {
  HeadlessChrome: {
    base: 'Chrome',
    flags: [
      '--headless',
      '--disable-gpu',
      // Without a remote debugging port, Google Chrome exits immediately.
      '--remote-debugging-port=9222',
    ],
  }
}

これを package.json に記載して、２つを分ける

  "scripts": {
    ...,
    "test": "ng test",
    "test:ci": "ng test --single-run --browsers HeadlessChrome",
    ...
  }

参考

https://github.com/angular/angular-cli/wiki/test#running-unit-tests
http://cvuorinen.net/2017/05/running-angular-tests-in-headless-chrome/