アプリケーションテスト

このドキュメントは作業中です。リリース前の情報であり、変更される可能性があります。

アプリをテストすることは良いことです。 このページでは、私たちが提供したテストの設定をお届けします。

テストの実行

あなたのアプリをテストするには多くの方法があり、テストを書くことができる多くのフレームワークがあります。以下のユニットテストと統合テストのサンプルを提供しました。統合テストではPuppeteerを使用し、ユニットテストではWCTが使えます。アプリケーションを変更したりカスタマイズしたりするときには、テストも更新してください :)

テストフォルダの構造は次のとおりです:

test
├── integration
|   └── screenshots-baseline
|   └── router.js
|   └── visual.js
├── unit
|   └── index.html
|   └── counter-element.js
|   └── views-a11y.js

どこに

下記のコマンドでテストスイート全体を実行することができます

npm test

または部分的なテストスイートは下記の通りです。

npm run test:unit
npm run test:integration

ユニットテスト

ベーシックテスト

ユニットテストを実行するには、WCTを使用します。 WCTには、コンテンツのテンプレートを定義し、そのコンテンツのクリーンで新しいインスタンスを各テストスイートにコピーする要素である <test-fixture>があらかじめパッケージ化されています(詳細はこちら)。スイートに新しい単体テストを追加するには:

WCT.loadSuites([
  ...
  // ネイティブのshadow DOMを使用して 'my-new-test.html'テストスイートを読み込みます:
  'my-new-test.html',
  // shady DOMを使って 'my-new-test.html'テストスイートを読み込みます:
  'my-new-test.html?wc-shadydom=true&wc-ce=true',
]);
npm run test:unit

デフォルトでは、すべてのローカルブラウザでテストが実行されます(Mac OSマシンを使用している場合は、リモートオートメーションを有効にする必要があります。これを正しく動作させるには、「開発」メニューからSafariのを選択します。 テストに使用するブラウザを設定する場合は、 -lコマンドライン引数を使用できます:

npm run test:unit -l chrome -l firefox

WCTを使用したユニットテストの作成の詳細については、テストドキュメントまたはWCTドキュメントを参照してください。

アクセシビリティ(A11y)テスト

Ax-coreは、アクセシビリティ違反をHTMLで自動的に監査するライブラリです。

これをユニットテストの内部でより簡単に使用するために、小さなラッパー、ax-report.jsを作成しました。すべての違反を含む Errorを返します。

これを使用して特定の要素またはページ全体も参照してください。

要素 elの機能をテストするために既に WCTでテストを設定している場合は、それにa11yテストを追加することもできます:

import {axeReport} from '../axe-report.js';
suite('my-element tests', function() {
  test('a11y', function() {
    const el = fixture('some-fixture');
    return axeReport(el);
  });
});

Travisの設定

デフォルトでは、 npm testはコマンドラインでテストを実行します。ただし、Travisのような継続的な統合サーバーを設定して、新しいコミットが行われるたびにテストを実行することができます。

何かをする前に、Getting Startedガイドに従ってGithubリポジトリにTravisの設定して、あなたのTravisプロファイルにレポジトリがあるかも含めて確認してください。

pwa-starter-kitのTravis設定は.travis.ymlにあり、設定にはいくつかの種類があります。

最初の継続的な統合テストを開始するには、新しいコミットをブランチにプッシュします。

SauceLabsテスト

現時点では、Travis CIにはMac OSとLinux VMしかありません。つまり、Microsoftのブラウザでのテストを自動化するために、別のサードパーティサービスを使用する必要があります。これにはSauceLabsを使用します。Travisでそれを設定するには、.travis.ymlにいくつかの秘密鍵を含める必要があります。 ファイル(SauceConnect docs 暗号化された変数のドキュメント。 SauceLabsをまったく使用したくない場合は、この行このセクションを設定ファイルから削除します。

Puppeteerによる統合テスト

Puppeteerは、Chromeを制御できる npmライブラリです。 ページ内の特定の要素をクリックしたり、特定の要素がロードされるのを待ったり、スクリーンショットを撮ったりするのはとても簡単です。 これはChromeでしか実行されないため、基本的な統合テストを行う簡単な方法として、アプリの基本がコミットの間に壊れないようにするだけです。

ルータテスト

ルーターテスト( test/integration/router.js)は、Puppeteerを使用してページとやりとりするための出発点を提供します。それらは、(ナビゲーションリンクのような)shadow Root内の特定のノードをどのように見つけて、それと対話するか(特にそれをクリックすることによって)を示します。

同じことをする(ノードをクリックする)2つの異なる例を示します。「深い」クエリーセレクタをテストページに挿入し、それを使用して特定のノードを見つけるか、またはPuppeteer APIを使用してテスト側のノードを見つけるか

スクリーンショットテスト

テストに役立つもう一つのことは、アプリが視覚的に変化したかどうかを確認することです。私たちが提供した例は、(レイアウトが変更されているので)ワイドスクリーンビューアと狭いスクリーンビューポートの両方でアプリのレイアウトをテストします。新しい種類の視覚テストを追加する場合は、これに似た新しいテストスイートを追加する必要があります。 beforeEachメソッドの中でPuppeteerメソッド(router.jsテストのコードに似ています)を使ってスクリーンショットを設定します: いくつかの要素をクリックし、入力をフォーカスし、フォームを送信します等

“ゴールデン”(またはベースライン)のスクリーンショットは、‘regenerate-baseline.js’スクリプトを実行します。これは npm run test:regenerate_screenshotsコマンドで実行できます。アプリの新しい部分(たとえば、draowerが開いているモバイルレイアウト)をテストする場合は、テストと同様の設定でスクリーンショットを生成するための新しい機能を追加する必要があります。

リポジトリを複製した後ににpwa-starter-kitのスクリーンショットテストを新しく実行すると失敗するかもしれないことに注意してください。これはチェックされたベースラインのスクリーンショットがMacOSマシン上でレンダリングされ、別のプラットフォームでは、アプリは多少異なってレンダリングされることがあるからです(フォントメトリックが同一ではないため)。この場合、ベースラインのスクリーンショットを再生成してから、もう一度試してみるべきです。