エンドツーエンドのテスト

E2Eテストは、実際のブラウザーでコンポーネントを検証します。たとえば、 my-componentにX属性がある場合、子コンポーネントはテキストYをレンダリングし、イベントZを受信することを期待します。レンダリングテストにPuppeteerを使用することにより（ブラウザの動作をシミュレートするノード環境ではなく）、より良い結果を得るために、エンドツーエンドのテストを実際のブラウザ内で実行できます。

ステンシルは、JestおよびPuppeteerのテストに役立つ多くのユーティリティ関数を提供します。たとえば、コンポーネントのシャドウdomは、Puppeteer上に構築されたStencilユーティリティ関数を使用してクエリおよびテストできます。テストは、模擬HTMLコンテンツを提供できるだけでなく、Puppeteerが開いてStencilの開発サーバーでテストできるアプリのURLにアクセスすることもできます。

エンドツーエンドのテストでは、テストを実際に実行する前に、新しいビルド、dev-server、およびpuppeteerブラウザーインスタンスを作成する必要があります。追加されたビルドの複雑さにより、 stenciltestコマンドはビルド要件を事前に整理することができます。

E2Eテストを実行するには、 stencil test--e2eを実行します。デフォルトでは、 .e2e.tsで終わるファイルが実行されます。

ステンシルのE2Eテストは、次のAPIで提供され、 @stencil/core/testingから入手できます。ほとんどのメソッドは非同期であり、Promisesを返します。 asyncとawaitを使用して、テストを整理します。

newE2EPage：新しい E2EPageオブジェクトをインスタンス化するには、各テストの開始時に呼び出す必要があります
E2EPageは、テストの作成を簡素化するためのPuppeteerのラッパーユーティリティです。 E2EPageのいくつかの便利なメソッドは次のとおりです。
setContent(html: string)：ページのコンテンツを設定します。これは、テスト対象のコンポーネントのマークアップを含める場所です。
find(selector: string)：セレクターに一致する要素を検索します。 document.querySelectorに似ています。
waitForChanges()：StencilとPuppeteerの両方に非同期アーキテクチャがあり、これはパフォーマンスにとって良いことです。すべての呼び出しは非同期であるため、コンポーネントに変更が加えられたときに await page.waitForChanges()が呼び出される必要があります。

E2Eテストの例には、次の定型文があります。

import { newE2EPage } from '@stencil/core/testing'; describe('example', () => { it('should render a foo-component', async () => { const page = await newE2EPage(); await page.setContent(`<foo-component></foo-component>`); const el = await page.find('foo-component'); expect(el).not.toBeNull(); }); });

E2Eテストの例

import { newE2EPage } from '@stencil/core/testing'; it('should create toggle, unchecked by default', async () => { const page = await newE2EPage(); await page.setContent(` <ion-toggle class="pretty-toggle"></ion-toggle> `); const ionChange = await page.spyOnEvent('ionChange'); const toggle = await page.find('ion-toggle'); expect(toggle).toHaveClasses(['pretty-toggle', 'hydrated']); expect(toggle).not.toHaveClass('toggle-checked'); toggle.setProperty('checked', true); await page.waitForChanges(); expect(toggle).toHaveClass('toggle-checked'); expect(ionChange).toHaveReceivedEventDetail({ checked: true, value: 'on' }); });

E2Eテストレシピ

ShadowDOMで要素を検索する

「ピアス」セレクター >>>を使用して、コンポーネントのシャドウルート内のオブジェクトをクエリします。

const el = await page.find('foo-component >>> .close-button');

コンポーネントに@Prop()を設定します

page。$ eval（Puppeteer APIの一部）を使用して、Propを設定するか、コンポーネントを操作します。

// create a new puppeteer page // load the page with html content await page.setContent(` <prop-cmp></prop-cmp> `); // select the "prop-cmp" element // and run the callback in the browser's context await page.$eval('prop-cmp', (elm: any) => { // within the browser's context // let's set new property values on the component elm.first = 'Marty'; elm.lastName = 'McFly'; }); // we just made a change and now the async queue need to process it // make sure the queue does its work before we continue await page.waitForChanges();

外部参照を使用してコンポーネントに@Prop（）を設定します

page。$ evalには分離されたスコープがあるため、外部参照を明示的に渡す必要があります。そうしないと、undefinedエラーが発生します。これは、別のファイルからデータをインポートしたり、同じファイル内の複数のテストでモックデータを再利用したりする場合に役立ちます。

const props = { first: 'Marty', lastName: 'McFly', }; await page.setContent(`<prop-cmp></prop-cmp>`); await page.$eval('prop-cmp', (elm: any, { first, lastName }) => { elm.first = first; elm.lastName = lastName; }, props ); await page.waitForChanges();

コンポーネントで@Method()を呼び出す

const elm = await page.find('method-cmp'); elm.setProperty('someProp', 88); const methodRtnValue = await elm.callMethod('someMethod');

入力フィールドに入力します

const page = await newE2EPage({ html: ` <dom-interaction></dom-interaction> ` }); const input = await page.find('dom-interaction >>> .input'); let value = await input.getProperty('value'); expect(value).toBe(''); await input.press('8'); await input.press('8'); await input.press(' '); await page.keyboard.down('Shift'); await input.press('KeyM'); await input.press('KeyP'); await input.press('KeyH'); await page.keyboard.up('Shift');

レンダリングされたコンポーネントのテキストを確認する

await page.setContent(` <prop-cmp first="Marty" last-name="McFly"></prop-cmp> `); const elm = await page.find('prop-cmp >>> div'); expect(elm).toEqualText('Hello, my name is Marty McFly');

コンポーネントのHTMLを確認する

shadowRootコンテンツの場合：

 expect(el.shadowRoot).toEqualHtml(`<div> <div class=\"nav-desktop\"> <slot></slot> </div> </div>`); });

For non-shadow content:

 expect(el).toEqualHtml(`<div> <div class=\"nav-desktop\"> <slot></slot> </div> </div>`); });

CD/CIでのe2eテストの自動化に関する警告

かなり一般的な方法であるため、継続的デプロイ/統合（CD/CI）システムでエンドツーエンドのテストを自動的に実行することをお勧めします。ただし、環境によっては、構成を微調整する必要がある場合があります。その場合、 stencil.config.tsファイルのconfigオブジェクトには、パイプラインでヘッドレスChromeが実際にどのように使用されるかを変更するパラメーターを受け入れる testing属性があります。

Gitlab CI環境で必要になる可能性のある構成の例：

export const config: Config = { namespace: 'Foo', testing: { /** * Gitlab CI doesn't allow sandbox, therefor this parameters must be passed to your Headless Chrome * before it can run your tests */ browserArgs: ['--no-sandbox', '--disable-setuid-sandbox'], }, outputTargets: [ { type: 'dist' }, { type: 'www', }, ], };