From c39aa49d75ca5283f0036e71dc68a167bd22d209 Mon Sep 17 00:00:00 2001 From: sand4rt Date: Fri, 24 Nov 2023 18:36:42 +0100 Subject: [PATCH] docs(ct): angular --- docs/src/test-components-js.md | 106 ++++++++++++++++++++++++++++----- 1 file changed, 90 insertions(+), 16 deletions(-) diff --git a/docs/src/test-components-js.md b/docs/src/test-components-js.md index 3467f3c068..bf7b3755d6 100644 --- a/docs/src/test-components-js.md +++ b/docs/src/test-components-js.md @@ -109,6 +109,7 @@ component is mounted using this script. It can be either a `.js`, `.ts`, `.jsx` {label: 'Solid', value: 'solid'}, {label: 'Svelte', value: 'svelte'}, {label: 'Vue', value: 'vue'}, + {label: 'Angular', value: 'angular'}, ] }> @@ -181,6 +182,22 @@ test('should work', async ({ mount }) => { + + +```js +import { test, expect } from '@playwright/experimental-ct-angular'; +import { AppComponent } from './app.component'; + +test.use({ viewport: { width: 500, height: 500 } }); + +test('should work', async ({ mount }) => { + const component = await mount(AppComponent); + await expect(component).toContainText('Learn Angular'); +}); +``` + + + ### Step 3. Run the tests @@ -292,6 +309,7 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let {label: 'Solid', value: 'solid'}, {label: 'Vue3', value: 'vue3'}, {label: 'Vue2', value: 'vue2'}, + {label: 'Angular', value: 'angular'}, ] }> @@ -421,6 +439,41 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let + + + ```js title="playwright/index.ts" + import { beforeMount, afterMount } from '@playwright/experimental-ct-angular/hooks'; + import { provideRouter } from '@angular/router'; + import { routes } from '../src/router'; + + export type HooksConfig = { + enableRouting?: boolean; + } + + beforeMount(async ({ TestBed, hooksConfig }) => { + if (hooksConfig?.enableRouting) { + TestBed.configureTestingModule({ + providers: [provideRouter(routes)], + }); + } + }); + ``` + + ```js title="src/pages/ProductsPage.spec.ts" + import { test, expect } from '@playwright/experimental-ct-angular'; + import type { HooksConfig } from '@playwright/test'; + import { ProductsComponent } from './pages/products.component'; + + test('configure routing through hooks config', async ({ page, mount }) => { + const component = await mount(ProductsComponent, { + hooksConfig: { enableRouting: true }, + }); + await expect(component.getByRole('link')).toHaveAttribute('href', '/products/42'); + }); + ``` + + + ## Under the hood @@ -436,7 +489,7 @@ Playwright is using [Vite](https://vitejs.dev/) to create the components bundle ## Frequently asked questions -### What's the difference between `@playwright/test` and `@playwright/experimental-ct-{react,svelte,vue,solid}`? +### What's the difference between `@playwright/test` and `@playwright/experimental-ct-{react,svelte,vue,solid,angular}`? ```js test('…', async ({ mount, page, context }) => { @@ -444,7 +497,7 @@ test('…', async ({ mount, page, context }) => { }); ``` -`@playwright/experimental-ct-{react,svelte,vue,solid}` wrap `@playwright/test` to provide an additional built-in component-testing specific fixture called `mount`: +`@playwright/experimental-ct-{react,svelte,vue,solid,angular}` wrap `@playwright/test` to provide an additional built-in component-testing specific fixture called `mount`: { {label: 'Solid', value: 'solid'}, {label: 'Svelte', value: 'svelte'}, {label: 'Vue', value: 'vue'}, + {label: 'Angular', value: 'angular'}, ] }> ```js import { test, expect } from '@playwright/experimental-ct-react'; -import HelloWorld from './HelloWorld'; +import { Greetings } from './Greetings'; test.use({ viewport: { width: 500, height: 500 } }); test('should work', async ({ mount }) => { - const component = await mount(); - await expect(component).toContainText('Greetings'); + const component = await mount(); + await expect(component).toContainText('Hello world'); }); ``` @@ -475,17 +529,17 @@ test('should work', async ({ mount }) => { ```js import { test, expect } from '@playwright/experimental-ct-vue'; -import HelloWorld from './HelloWorld.vue'; +import Greetings from './Greetings.vue'; test.use({ viewport: { width: 500, height: 500 } }); test('should work', async ({ mount }) => { - const component = await mount(HelloWorld, { + const component = await mount(Greetings, { props: { - msg: 'Greetings', + message: 'Hello world', }, }); - await expect(component).toContainText('Greetings'); + await expect(component).toContainText('Hello world'); }); ``` @@ -495,17 +549,17 @@ test('should work', async ({ mount }) => { ```js import { test, expect } from '@playwright/experimental-ct-svelte'; -import HelloWorld from './HelloWorld.svelte'; +import Greetings from './Greetings.svelte'; test.use({ viewport: { width: 500, height: 500 } }); test('should work', async ({ mount }) => { - const component = await mount(HelloWorld, { + const component = await mount(Greetings, { props: { - msg: 'Greetings', + message: 'Hello world', }, }); - await expect(component).toContainText('Greetings'); + await expect(component).toContainText('Hello world'); }); ``` @@ -515,13 +569,33 @@ test('should work', async ({ mount }) => { ```js import { test, expect } from '@playwright/experimental-ct-solid'; -import HelloWorld from './HelloWorld'; +import { Greetings } from './Welcome'; test.use({ viewport: { width: 500, height: 500 } }); test('should work', async ({ mount }) => { - const component = await mount(); - await expect(component).toContainText('Greetings'); + const component = await mount(); + await expect(component).toContainText('Hello world'); +}); +``` + + + + + +```js +import { test, expect } from '@playwright/experimental-ct-angular'; +import { GreetingsComponent } from './greetings.component'; + +test.use({ viewport: { width: 500, height: 500 } }); + +test('should work', async ({ mount }) => { + const component = await mount(GreetingsComponent, { + props: { + message: 'Hello world', + }, + }); + await expect(component).toContainText('Hello world'); }); ```