Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

chore: remove docs until official release

Browse source
This commit is contained in:
sand4rt 2024-05-07 21:53:48 +02:00
parent 2aa4597597
commit a3dc1f91c5
1 changed files with 16 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
docs/src/test-components-js.md
View file

@ -109,7 +109,6 @@ component is mounted using this script. It can be either a `.js`, `.ts`, `.jsx`
{label: 'Solid', value: 'solid'}, {label: 'Solid', value: 'solid'},
{label: 'Svelte', value: 'svelte'}, {label: 'Svelte', value: 'svelte'},
{label: 'Vue', value: 'vue'}, {label: 'Vue', value: 'vue'},
{label: 'Angular', value: 'angular'},
] ]
}> }>
<TabItem value="react"> <TabItem value="react">
@ -182,22 +181,6 @@ test('should work', async ({ mount }) => {
</TabItem> </TabItem>
<TabItem value="angular">
```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');
});
```
</TabItem>
</Tabs> </Tabs>
### Step 3. Run the tests ### 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: 'Solid', value: 'solid'},
{label: 'Vue3', value: 'vue3'}, {label: 'Vue3', value: 'vue3'},
{label: 'Vue2', value: 'vue2'}, {label: 'Vue2', value: 'vue2'},
{label: 'Angular', value: 'angular'},
] ]
}> }>
<TabItem value="react"> <TabItem value="react">
@ -439,41 +421,6 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
</TabItem> </TabItem>
<TabItem value="angular">
```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<HooksConfig>(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<HooksConfig>(ProductsComponent, {
hooksConfig: { enableRouting: true },
});
await expect(component.getByRole('link')).toHaveAttribute('href', '/products/42');
});
```
</TabItem>
</Tabs> </Tabs>
## Under the hood ## Under the hood
@ -489,7 +436,7 @@ Playwright is using [Vite](https://vitejs.dev/) to create the components bundle
## Frequently asked questions ## 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 ```js
test('…', async ({ mount, page, context }) => { 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`:
<Tabs <Tabs
defaultValue="react" defaultValue="react"
@ -506,20 +453,19 @@ test('…', async ({ mount, page, context }) => {
{label: 'Solid', value: 'solid'}, {label: 'Solid', value: 'solid'},
{label: 'Svelte', value: 'svelte'}, {label: 'Svelte', value: 'svelte'},
{label: 'Vue', value: 'vue'}, {label: 'Vue', value: 'vue'},
{label: 'Angular', value: 'angular'},
] ]
}> }>
<TabItem value="react"> <TabItem value="react">
```js ```js
import { test, expect } from '@playwright/experimental-ct-react'; import { test, expect } from '@playwright/experimental-ct-react';
import { Greetings } from './Greetings'; import HelloWorld from './HelloWorld';
test.use({ viewport: { width: 500, height: 500 } }); test.use({ viewport: { width: 500, height: 500 } });
test('should work', async ({ mount }) => { test('should work', async ({ mount }) => {
const component = await mount(<Greetings message="Hello world" />); const component = await mount(<HelloWorld msg="greetings" />);
await expect(component).toContainText('Hello world'); await expect(component).toContainText('Greetings');
}); });
``` ```
@ -529,17 +475,17 @@ test('should work', async ({ mount }) => {
```js ```js
import { test, expect } from '@playwright/experimental-ct-vue'; 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.use({ viewport: { width: 500, height: 500 } });
test('should work', async ({ mount }) => { test('should work', async ({ mount }) => {
const component = await mount(Greetings, { const component = await mount(HelloWorld, {
props: { 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 ```js
import { test, expect } from '@playwright/experimental-ct-svelte'; 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.use({ viewport: { width: 500, height: 500 } });
test('should work', async ({ mount }) => { test('should work', async ({ mount }) => {
const component = await mount(Greetings, { const component = await mount(HelloWorld, {
props: { 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 ```js
import { test, expect } from '@playwright/experimental-ct-solid'; import { test, expect } from '@playwright/experimental-ct-solid';
import { Greetings } from './Welcome'; import HelloWorld from './HelloWorld';
test.use({ viewport: { width: 500, height: 500 } }); test.use({ viewport: { width: 500, height: 500 } });
test('should work', async ({ mount }) => { test('should work', async ({ mount }) => {
const component = await mount(<Greetings message="Hello world" />); const component = await mount(<HelloWorld msg="greetings" />);
await expect(component).toContainText('Hello world'); await expect(component).toContainText('Greetings');
});
```
</TabItem>
<TabItem value="angular">
```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');
}); });
``` ```