Anglar Karmaテストの持続的な集積実践を詳細に説明する。
Anglar+Karma+Jasmineを使用して、フロントエンドの単体テストを行うことができます。前の文章からKarmaの動作原理を分かりました。指定された種類のブラウザを起動し、このブラウザでテスト用の例を実行します。もし継続的な統合が必要であれば、例えばJenkinsまたは他の方法と組み合わせて自動化テストを行い、手動でブラウザを閉じる操作が必要であれば、あるいは図形化されたインターフェースを提供できない場合、テストの実行を保証するこれらは持続的な統合の障害となります。
ブラウザを使用できるテスト環境
テスト環境はブラウザを使用することができ、このマシンではng testを使用してテストを行うことができ、KarmaはChromeブラウザを起動し、その後テスト用例を実行し、継続的に統合する場合、Jenkinsはリモートコマンドで実行する方法でブラウザを使用できるテスト環境でng test完成テストを実行します。
このような方法は非常に簡単で、解決が必要なのは一つの問題だけです。Anglarのdemoアプリケーションがng testを実行した後、Chromeブラウザも終了しないので、Jenkinsの呼び出し部分も戻りません。実行が終わったらすぐにブラウザを閉じるようにするだけで大丈夫です。実際にKarmaの設定ファイルの中で、singleRunはこのオプションであり、デフォルトはfalseに設定されています。これは脱退しない原因です。このオプションをtrueに設定するだけでいいです。デモ例のKarma設定ファイルを以下のように変更すればいいです。
ブラウザを開く必要がないテスト環境：PhotomJS
例えば、テスト環境は、Alpine版Linuxに基づくコンテナの中で、図形化されたブラウザを使用できない、または使用したくない場合、ブラウザのHeadlessモードまたはインターフェース方式のないブラウザを使用することができます。PhotomJSはこのような解決方法です。Photomはステルスのブラウザです。名前のように「幽霊/幻影/幽霊」というように、実はそれほど深くないです。PhantomJSはWebkitカーネルのHeadlessモードに基づいていますので、Webkitブラウザでできることは基本的に全部できます。以前の爬虫類の使用シーンにはファンのフォローが必要です。現在の安定バージョンは2.1で、短時間でこのバージョンに安定しています。現在は更新が停止されていますので、更新時間は別途通知されると言われていますが、まだ来ていません。これを使って一時的に停止するPhotomJSも解決方法です。具体的な手順は以下の通りです。
手順1：PhotomJSの設置
インストールは非常に簡単です。PhotomJSはWindows/Linux/MacOSのバイナリファイルを提供しています。PATHサーチ経路に該当するbinディレクトリを追加するだけでインストールが完了します。ここではMacOS上のインストールを例にしています。
ダウンロード住所：https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip
解圧：/usr/local/phantomjsに解凍します。
バージョン確認：phantomjs--version
実行ログは以下の通りです。
デフォルトのカード配置ファイルを次のように修正すればいいです。はまだsingleRunをtrue に設定する必要があります。はchromeのlauncherをphantomjs に両替します。ブラウザもChromeからPhotomJS に変えます。
Anglar 8またはes 6のtarget設定を使用する場合は、targetを下記のように修正する必要があります。
ng testを実行すると、PhotomJSで行われたテストが使用されていますが、実行中にブラウザが開かれていません。
ブラウザのテスト環境を開く必要はありません。Chromeのヘッダなしモードです。
PhotomJSはWebkitカーネルを使用して、ブラウザを開けてテストを行う必要がないが、実際にはIEを除いた多くのブラウザがこのいわゆるヘッドレスモードを提供しています。Chromeも直接提供して、Chrome 59からheadless mode（ヘッドレスモード）を提供しています。Anglar 8ではChromeのヘッドレスモードを使ってテストするのがとても簡単です。デフォルトのブラウザをChromeからChromeHeadlessに変更するだけでいいです。
手順1：Karmaのプロファイルを変更する
デフォルトのカード配置ファイルを次のように修正すればいいです。はまだsingleRunをtrue に設定する必要があります。ブラウザをChromeからChromeHeadless に変更する。
ステップ2：試験の実行
ng testを実行すると、ChromeHeadlessによるテストが使用され、実行中にブラウザが開かれていないことが確認されます。
この文章は三つの一般的なKarmaの集積方式を紹介しています。PhotomJSは更新を一時停止し、カーネルはWebkitだけなので、ほとんどの場合は直接ブラウザのHeadless Modeを使うほうがいいかもしれません。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
ブラウザを使用できるテスト環境
テスト環境はブラウザを使用することができ、このマシンではng testを使用してテストを行うことができ、KarmaはChromeブラウザを起動し、その後テスト用例を実行し、継続的に統合する場合、Jenkinsはリモートコマンドで実行する方法でブラウザを使用できるテスト環境でng test完成テストを実行します。
このような方法は非常に簡単で、解決が必要なのは一つの問題だけです。Anglarのdemoアプリケーションがng testを実行した後、Chromeブラウザも終了しないので、Jenkinsの呼び出し部分も戻りません。実行が終わったらすぐにブラウザを閉じるようにするだけで大丈夫です。実際にKarmaの設定ファイルの中で、singleRunはこのオプションであり、デフォルトはfalseに設定されています。これは脱退しない原因です。このオプションをtrueに設定するだけでいいです。デモ例のKarma設定ファイルを以下のように変更すればいいです。
liumiaocn:demo liumiao$ cp karma.conf.js karma.conf.js.origin
liumiaocn:demo liumiao$ vi karma.conf.js
liumiaocn:demo liumiao$ diff karma.conf.js karma.conf.js.origin
29c29
< singleRun: true,
---
> singleRun: false,
liumiaocn:demo liumiao$
liumiaocn:demo liumiao$ rm -rf coverage/
liumiaocn:demo liumiao$ ls
README.md e2e node_modules src tsconfig.spec.json
angular.json karma.conf.js package-lock.json tsconfig.app.json tslint.json
browserslist karma.conf.js.origin package.json tsconfig.json
liumiaocn:demo liumiao$
liumiaocn:demo liumiao$ ng test --code-coverage
30% building 12/12 modules 0 active31 10 2019 20:19:39.308:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/
31 10 2019 20:19:39.314:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
30% building 13/13 modules 0 active31 10 2019 20:19:39.324:INFO [launcher]: Starting browser Chrome
31 10 2019 20:19:43.028:INFO [Chrome 78.0.3904 (Mac OS X 10.14.0)]: Connected on socket Pwhf3R-KNkzVDi1AAAAA with id 46366297
Chrome 78.0.3904 (Mac OS X 10.14.0): Executed 3 of 3 SUCCESS (0.373 secs / 0.321 secs)
TOTAL: 3 SUCCESS
TOTAL: 3 SUCCESS
TOTAL: 3 SUCCESS
=============================== Coverage summary ===============================
Statements : 100% ( 6/6 )
Branches : 100% ( 0/0 )
Functions : 100% ( 1/1 )
Lines : 100% ( 5/5 )
================================================================================
liumiaocn:demo liumiao$ ls
README.md coverage karma.conf.js.origin package.json tsconfig.json
angular.json e2e node_modules src tsconfig.spec.json
browserslist karma.conf.js package-lock.json tsconfig.app.json tslint.json
liumiaocn:demo liumiao$ ブラウザを開く必要がないテスト環境：PhotomJS
例えば、テスト環境は、Alpine版Linuxに基づくコンテナの中で、図形化されたブラウザを使用できない、または使用したくない場合、ブラウザのHeadlessモードまたはインターフェース方式のないブラウザを使用することができます。PhotomJSはこのような解決方法です。Photomはステルスのブラウザです。名前のように「幽霊/幻影/幽霊」というように、実はそれほど深くないです。PhantomJSはWebkitカーネルのHeadlessモードに基づいていますので、Webkitブラウザでできることは基本的に全部できます。以前の爬虫類の使用シーンにはファンのフォローが必要です。現在の安定バージョンは2.1で、短時間でこのバージョンに安定しています。現在は更新が停止されていますので、更新時間は別途通知されると言われていますが、まだ来ていません。これを使って一時的に停止するPhotomJSも解決方法です。具体的な手順は以下の通りです。
手順1：PhotomJSの設置
インストールは非常に簡単です。PhotomJSはWindows/Linux/MacOSのバイナリファイルを提供しています。PATHサーチ経路に該当するbinディレクトリを追加するだけでインストールが完了します。ここではMacOS上のインストールを例にしています。
ダウンロード住所：https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip
解圧：/usr/local/phantomjsに解凍します。
バージョン確認：phantomjs--version
liumiaocn:demo liumiao$ export PATH=$PATH:/usr/local/phantomjs/phantomjs-2.1.1-macosx/bin
liumiaocn:demo liumiao$ which phantomjs
/usr/local/phantomjs/phantomjs-2.1.1-macosx/bin/phantomjs
liumiaocn:demo liumiao$ phantomjs --version
2.1.1
liumiaocn:demo liumiao$
実行ログは以下の通りです。
liumiaocn:demo liumiao$ npm install --save-dev karma-phantomjs-launcher
> [email protected] install /Users/liumiao/Desktop/demo/node_modules/phantomjs-prebuilt
> node install.js
Considering PhantomJS found at /usr/local/phantomjs/phantomjs-2.1.1-macosx/bin/phantomjs
Found PhantomJS at /usr/local/phantomjs/phantomjs-2.1.1-macosx/bin/phantomjs ...verifying
Writing location.js file
PhantomJS is already installed on PATH at /usr/local/phantomjs/phantomjs-2.1.1-macosx/bin/phantomjs
npm WARN [email protected] requires a peer of eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
+ [email protected]
added 16 packages from 36 contributors in 9.804s
liumiaocn:demo liumiao$ デフォルトのカード配置ファイルを次のように修正すればいいです。
liumiaocn:demo liumiao$ diff karma.conf.js karma.conf.js.origin
10c10
< require('karma-phantomjs-launcher'),
---
> require('karma-chrome-launcher'),
28,29c28,29
< browsers: ['PhantomJS'],
< singleRun: true,
---
> browsers: ['Chrome'],
> singleRun: false,
liumiaocn:demo liumiao$
Anglar 8またはes 6のtarget設定を使用する場合は、targetを下記のように修正する必要があります。
liumiaocn:demo liumiao$ diff tsconfig.json tsconfig.json.org
13c13
< "target": "es5",
---
> "target": "es2015",
liumiaocn:demo liumiao$
ng testを実行すると、PhotomJSで行われたテストが使用されていますが、実行中にブラウザが開かれていません。
liumiaocn:demo liumiao$ ng test --code-coverage
25% building 94/94 modules 0 active01 11 2019 06:11:48.490:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/
01 11 2019 06:11:48.493:INFO [launcher]: Launching browsers PhantomJS with concurrency unlimited
25% building 96/96 modules 0 active01 11 2019 06:11:48.573:INFO [launcher]: Starting browser PhantomJS
01 11 2019 06:11:52.035:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket PTR3E6eTdHOW0JcEAAAA with id 8370488
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 3 of 3 SUCCESS (0.512 secs / 0.769 secs)
TOTAL: 3 SUCCESS
TOTAL: 3 SUCCESS
TOTAL: 3 SUCCESS
=============================== Coverage summary ===============================
Statements : 100% ( 7/7 )
Branches : 100% ( 0/0 )
Functions : 100% ( 2/2 )
Lines : 100% ( 6/6 )
================================================================================
liumiaocn:demo liumiao$ ブラウザのテスト環境を開く必要はありません。Chromeのヘッダなしモードです。
PhotomJSはWebkitカーネルを使用して、ブラウザを開けてテストを行う必要がないが、実際にはIEを除いた多くのブラウザがこのいわゆるヘッドレスモードを提供しています。Chromeも直接提供して、Chrome 59からheadless mode（ヘッドレスモード）を提供しています。Anglar 8ではChromeのヘッドレスモードを使ってテストするのがとても簡単です。デフォルトのブラウザをChromeからChromeHeadlessに変更するだけでいいです。
手順1：Karmaのプロファイルを変更する
デフォルトのカード配置ファイルを次のように修正すればいいです。
liumiaocn:demo liumiao$ diff karma.conf.js karma.conf.js.origin
28,29c28,29
< browsers: ['ChromeHeadless'],
< singleRun: true,
---
> browsers: ['Chrome'],
> singleRun: false,
liumiaocn:demo liumiao$
ステップ2：試験の実行
ng testを実行すると、ChromeHeadlessによるテストが使用され、実行中にブラウザが開かれていないことが確認されます。
liumiaocn:demo liumiao$ ng test --code-coverage
25% building 15/15 modules 0 active01 11 2019 06:37:05.037:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/
01 11 2019 06:37:05.040:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
25% building 93/93 modules 0 active01 11 2019 06:37:05.154:INFO [launcher]: Starting browser ChromeHeadless
01 11 2019 06:37:08.720:INFO [HeadlessChrome 78.0.3904 (Mac OS X 10.14.0)]: Connected on socket Br7fkzwejyGNs2WgAAAA with id 35869507
HeadlessChrome 78.0.3904 (Mac OS X 10.14.0): Executed 3 of 3 SUCCESS (0.374 secs / 0.319 secs)
TOTAL: 3 SUCCESS
TOTAL: 3 SUCCESS
TOTAL: 3 SUCCESS
=============================== Coverage summary ===============================
Statements : 100% ( 7/7 )
Branches : 100% ( 0/0 )
Functions : 100% ( 2/2 )
Lines : 100% ( 6/6 )
================================================================================
liumiaocn:demo liumiao$
この文章は三つの一般的なKarmaの集積方式を紹介しています。PhotomJSは更新を一時停止し、カーネルはWebkitだけなので、ほとんどの場合は直接ブラウザのHeadless Modeを使うほうがいいかもしれません。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。