From a3dc1f91c545686ea71b0f0b108e2064bde3d478 Mon Sep 17 00:00:00 2001 From: sand4rt Date: Tue, 7 May 2024 21:53:48 +0200 Subject: [PATCH] chore: remove docs until official release --- docs/src/test-components-js.md | 106 +++++---------------------------- 1 file changed, 16 insertions(+), 90 deletions(-) diff --git a/docs/src/test-components-js.md b/docs/src/test-components-js.md index bf7b3755d6..3467f3c068 100644 --- a/docs/src/test-components-js.md +++ b/docs/src/test-components-js.md @@ -109,7 +109,6 @@ 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'}, ] }> @@ -182,22 +181,6 @@ 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 @@ -309,7 +292,6 @@ 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'}, ] }> @@ -439,41 +421,6 @@ 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 @@ -489,7 +436,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,angular}`? +### What's the difference between `@playwright/test` and `@playwright/experimental-ct-{react,svelte,vue,solid}`? ```js test('…', async ({ mount, page, context }) => { @@ -497,7 +444,7 @@ test('…', async ({ mount, page, context }) => { }); ``` -`@playwright/experimental-ct-{react,svelte,vue,solid,angular}` wrap `@playwright/test` to provide an additional built-in component-testing specific fixture called `mount`: +`@playwright/experimental-ct-{react,svelte,vue,solid}` 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 { Greetings } from './Greetings'; +import HelloWorld from './HelloWorld'; test.use({ viewport: { width: 500, height: 500 } }); test('should work', async ({ mount }) => { - const component = await mount(); - await expect(component).toContainText('Hello world'); + const component = await mount(); + await expect(component).toContainText('Greetings'); }); ``` @@ -529,17 +475,17 @@ test('should work', async ({ mount }) => { ```js import { test, expect } from '@playwright/experimental-ct-vue'; -import Greetings from './Greetings.vue'; +import HelloWorld from './HelloWorld.vue'; test.use({ viewport: { width: 500, height: 500 } }); test('should work', async ({ mount }) => { - const component = await mount(Greetings, { + const component = await mount(HelloWorld, { props: { - message: 'Hello world', + msg: 'Greetings', }, }); - await expect(component).toContainText('Hello world'); + await expect(component).toContainText('Greetings'); }); ``` @@ -549,17 +495,17 @@ test('should work', async ({ mount }) => { ```js import { test, expect } from '@playwright/experimental-ct-svelte'; -import Greetings from './Greetings.svelte'; +import HelloWorld from './HelloWorld.svelte'; test.use({ viewport: { width: 500, height: 500 } }); test('should work', async ({ mount }) => { - const component = await mount(Greetings, { + const component = await mount(HelloWorld, { props: { - message: 'Hello world', + msg: 'Greetings', }, }); - await expect(component).toContainText('Hello world'); + await expect(component).toContainText('Greetings'); }); ``` @@ -569,33 +515,13 @@ test('should work', async ({ mount }) => { ```js import { test, expect } from '@playwright/experimental-ct-solid'; -import { Greetings } from './Welcome'; +import HelloWorld from './HelloWorld'; test.use({ viewport: { width: 500, height: 500 } }); test('should work', async ({ mount }) => { - 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'); + const component = await mount(); + await expect(component).toContainText('Greetings'); }); ```