Angular CLIで作成したプロジェクトは初期設定でテストフレームワークであるJasmineとテストランナーであるKarmaを備えています。デフォルト状態でテスト（ng test）を行うと、Karmaによってブラウザが起動し、Jasmineで書かれたテストコードが実行されます。このとき、karma.conf.jsのconfigに記載されたブラウザが起動する仕組みになっています。開発PC等でテストを実行するときconfigに記載されたブラウザが予めインストールされていれば問題なくテストを実行できます。
しかし、CIサーバやDockerなどの通常ブラウザがインストールされていない環境でテスト実行する場合は別途ブラウザをインストールする必要があります。
この記事ではDockerでAngularのテストを実行するために設定したことを記載していきます。また、公式ドキュメントの内容だけでは設定がうまくいかず若干ハマったポイントもあるのでそこについても触れたいと思います。
前提
今回使用するフレームワーク等のバージョン
以下バージョンを前提としています。バージョン次第で動作が変わる可能性があります。
| フレームワーク・ツール | バージョン |
|---|---|
| Angular | 9.1.9 |
| Karma | 5.0.9 |
| Jasmine | 2.8.0 |
| Puppeteer | 3.3.0 |
また、今回使用するDocker上のOSはCentOS 7を使用します。
Dockerfile
テスト実行のための環境構築はdocker buildで行い、テスト実行はdocker runで行うものとします。
またAngularテストの設定前に、最低限node.jsのインストールやnpm install、テスト実行コマンドは用意しているものとします。
FROM centos:centos7
RUN curl -sL https://rpm.nodesource.com/setup_14.x | bash - && yum install -y nodejs
WORKDIR /app
COPY package*.json /app/
RUN npm i
COPY . /app/
CMD ["npx", "ng", "test", "--no-watch"]
node_modules
ちなみにAngularはデフォルトでウォッチモードでテストを実行します。ウォッチモードではKarmaがデーモンのように動いており、Angularのコードを変更するとそれを検知して自動でテストが再実行されます。
ただ今回のようにDocker上で動かす場合はウォッチモードで動かす必要はなく、プロセスを停止させる必要もあるため、ng testに--no-watchオプションを付与することでウォッチモードなしにしています。
今回使用したサンプルコード
今回のサンプルコードは以下GitHubに上げています。
設定したこと
基本的にはAngularの公式ドキュメントに記載があるのでそれに従って設定していきます。
ただし、2と3については公式ドキュメントには記載されていません。調査していく中で分かったことになります。
1. ヘッドレスブラウザの設定
通常Docker上でのテストの実行にGUIブラウザは不要のため、ヘッドレスブラウザを使用します。今回はChromeを利用します。
公式ドキュメントに記載されているようにkarma.conf.jsのconfigのbroswersプロパティとcustomLaunchersプロパティに以下のように設定します。
module.exports = function (config) {
config.set({
...
browsers: ['Chrome'],
customLaunchers: {
ChromeHeadlessCI: {
base: 'ChromeHeadless',
flags: ['--no-sandbox']
}
},
...
});
};
テストを実行する際は上記の設定をオプションとして指定します。
COPY . /app/
-CMD ["npx", "ng", "test", "--no-watch"]
+CMD ["npx", "ng", "test", "--no-watch", "--browsers=ChromeHeadlessCI"]
Dockerfileをビルドしてテスト実行してみます。
# ビルド
$ docker build -t sample-angular-test .
...
# テスト実行
$ docker run sample-angular-test
...
14 06 2020 10:15:58.255:WARN [karma]: No captured browser, open http://localhost:9876/
14 06 2020 10:15:58.265:INFO [karma-server]: Karma v5.0.9 server started at http://0.0.0.0:9876/
14 06 2020 10:15:58.266:INFO [launcher]: Launching browsers ChromeHeadlessCI with concurrency unlimited
14 06 2020 10:15:58.275:INFO [launcher]: Starting browser ChromeHeadless
14 06 2020 10:15:58.277:ERROR [launcher]: No binary for ChromeHeadless browser on your platform.
Please, set "CHROME_BIN" env variable.
14 06 2020 10:16:09.712:WARN [karma]: No captured browser, open http://localhost:9876/
エラーが出てテストが失敗します。
エラー内容を見るとChromeヘッドレスブラウザのバイナリがない、CHROME_BIN環境変数を設定しろと言っています。開発PC等で動かすときは通常Chromeのバイナリがすでにインストールされていることが多いためこのエラーに出くわすことは少ないですが、DockerなどではChromeバイナリがインストールされていないため別途必要になります。
ということで次にChromeバイナリをインストールしていきます。
2. Chromeバイナリのインストール
ヘッドレスChromeを動かすためにChromeのバイナリをインストールします。
karma-chrome-launcherプラグインのREADMEにも記載されているように、今回はPuppeteerに封入されているChromeバイナリを利用しようと思います。
必要なパッケージをインストールします。READMEにはkarma-chrome-launcherのインストールも書いてありますが、Angular CLIで作成したプロジェクトにはデフォルトで入っているのでPuppeteerのみインストールします。
このインストールに限ってはローカルPCで行っています。（本来はpackage.jsonに追加すればよいが面倒なためnpm installで追加している）
$ npm i -D puppeteer
インストール後、Chromeバイナリのパスを示すCHROME_BIN環境変数を設定します。
process.env.CHROME_BIN = require('puppeteer').executablePath(); // 新たに追加
module.exports = function (config) {
config.set({
...
});
};
Chromeバイナリのインストールと環境変数の設定ができました。
この状態でもう一度Dockerfileのビルド、テスト実行をしてみます。
# ビルド
$ docker build -t sample-angular-test .
...
# テスト実行
$ docker run sample-angular-test
...
14 06 2020 10:46:59.325:WARN [karma]: No captured browser, open http://localhost:9876/
14 06 2020 10:46:59.344:INFO [karma-server]: Karma v5.0.9 server started at http://0.0.0.0:9876/
14 06 2020 10:46:59.345:INFO [launcher]: Launching browsers ChromeHeadlessCI with concurrency unlimited
14 06 2020 10:46:59.354:INFO [launcher]: Starting browser ChromeHeadless
14 06 2020 10:46:59.438:ERROR [launcher]: Cannot start ChromeHeadless
/app/node_modules/puppeteer/.local-chromium/linux-756035/chrome-linux/chrome: error while loading shared libraries: libX11.so.6: cannot open shared object file: No such file or directory
14 06 2020 10:46:59.439:ERROR [launcher]: ChromeHeadless stdout:
14 06 2020 10:46:59.439:ERROR [launcher]: ChromeHeadless stderr: /app/node_modules/puppeteer/.local-chromium/linux-756035/chrome-linux/chrome: error while loading shared libraries: libX11.so.6: cannot open shared object file: No such file or directory
14 06 2020 10:46:59.452:INFO [launcher]: Trying to start ChromeHeadless again (1/2).
14 06 2020 10:46:59.569:ERROR [launcher]: Cannot start ChromeHeadless
/app/node_modules/puppeteer/.local-chromium/linux-756035/chrome-linux/chrome: error while loading shared libraries: libX11.so.6: cannot open shared object file: No such file or directory
14 06 2020 10:46:59.572:ERROR [launcher]: ChromeHeadless stdout:
14 06 2020 10:46:59.573:ERROR [launcher]: ChromeHeadless stderr: /app/node_modules/puppeteer/.local-chromium/linux-756035/chrome-linux/chrome: error while loading shared libraries: libX11.so.6: cannot open shared object file: No such file or directory
14 06 2020 10:46:59.622:INFO [launcher]: Trying to start ChromeHeadless again (2/2).
14 06 2020 10:47:00.333:ERROR [launcher]: Cannot start ChromeHeadless
/app/node_modules/puppeteer/.local-chromium/linux-756035/chrome-linux/chrome: error while loading shared libraries: libX11.so.6: cannot open shared object file: No such file or directory
14 06 2020 10:47:00.335:ERROR [launcher]: ChromeHeadless stdout:
14 06 2020 10:47:00.336:ERROR [launcher]: ChromeHeadless stderr: /app/node_modules/puppeteer/.local-chromium/linux-756035/chrome-linux/chrome: error while loading shared libraries: libX11.so.6: cannot open shared object file: No such file or directory
14 06 2020 10:47:00.455:ERROR [launcher]: ChromeHeadless failed 2 times (cannot start). Giving up.
14 06 2020 10:47:07.813:WARN [karma]: No captured browser, open http://localhost:9876/
またエラーが出ます。Chromeヘッドレスブラウザがスタートできないと言っています。原因はPuppeteerに封入されたChromeバイナリが必要とする共有ライブラリ（libX11.so.6）が存在しないためのようです。
ということで次にPuppeteerのChromeバイナリが必要なパッケージをインストールしていきます。
3. PuppeteerのChromeバイナリが必要なパッケージのインストール
Linux上でPuppeteerのヘッドレスChromeを利用する場合はいくつか依存パッケージが必要になります。OSによって必要なパッケージは異なります。
PuppeteerのトラブルシューティングページにOSごとに必要なパッケージの記載があるので詳しくはこちらを見てください。
今回はCentOS 7の環境で進めたため、CentOS 7に必要なパッケージを追加します。
FROM centos:centos7
-
+
+RUN yum -y install alsa-lib.x86_64 atk.x86_64 cups-libs.x86_64 GConf2.x86_64 gtk3.x86_64 ipa-gothic-fonts libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXrandr.x86_64 libXScrnSaver.x86_64 libXtst.x86_64 pango.x86_64 xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-fonts-cyrillic xorg-x11-fonts-misc xorg-x11-fonts-Type1 xorg-x11-utils && yum update nss -y
RUN curl -sL https://rpm.nodesource.com/setup_14.x | bash - && yum install -y nodejs
最後にビルド＆テスト実行します。
# ビルド
$ docker build -t sample-angular-test .
...
# テスト実行
$ docker run sample-angular-test
...
14 06 2020 11:57:40.881:INFO [karma-server]: Karma v5.0.9 server started at http://0.0.0.0:9876/
14 06 2020 11:57:40.899:INFO [launcher]: Launching browsers ChromeHeadlessCI with concurrency unlimited
14 06 2020 11:57:40.909:INFO [launcher]: Starting browser ChromeHeadless
14 06 2020 11:57:49.489:INFO [Chrome Headless 83.0.4103.0 (Linux x86_64)]: Connected on socket 3oZV9oh1wxO8T1UOAAAA with id 83185974
Chrome Headless 83.0.4103.0 (Linux x86_64): Executed 3 of 3 SUCCESS (0.481 secs / 0.319 secs)
TOTAL: 3 SUCCESS
TOTAL: 3 SUCCESS
以上で問題なくDocker（CentOS 7）上でもAngularテストを実行することができました。