Skip to content

Commit

Permalink
chore: remove docs until official release
Browse files Browse the repository at this point in the history
  • Loading branch information
@sand4rt
sand4rt committed May 7, 2024
1 parent 4ceaadb commit 6941cb2
Showing 1 changed file with 21 additions and 95 deletions.
116 changes: 21 additions & 95 deletions docs/src/test-components-js.md
View file
Expand Up @@ -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'},
]
}>
<TabItem value="react">
Expand Down Expand Up @@ -182,22 +181,6 @@ test('should work', async ({ mount }) => {

</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>

### Step 3. Run the tests
Expand Down Expand Up @@ -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'},
]
}>
<TabItem value="react">
Expand All @@ -330,7 +312,7 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
```js title="src/pages/ProductsPage.spec.tsx"
import { test, expect } from '@playwright/experimental-ct-react';
import type { HooksConfig } from '@playwright/test';
import type { HooksConfig } from '../playwright';
import { ProductsPage } from './pages/ProductsPage';

test('configure routing through hooks config', async ({ page, mount }) => {
Expand Down Expand Up @@ -361,7 +343,7 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
```js title="src/pages/ProductsPage.spec.tsx"
import { test, expect } from '@playwright/experimental-ct-solid';
import type { HooksConfig } from '@playwright/test';
import type { HooksConfig } from '../playwright';
import { ProductsPage } from './pages/ProductsPage';

test('configure routing through hooks config', async ({ page, mount }) => {
Expand Down Expand Up @@ -392,7 +374,7 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
```js title="src/pages/ProductsPage.spec.ts"
import { test, expect } from '@playwright/experimental-ct-vue';
import type { HooksConfig } from '@playwright/test';
import type { HooksConfig } from '../playwright';
import ProductsPage from './pages/ProductsPage.vue';

test('configure routing through hooks config', async ({ page, mount }) => {
Expand Down Expand Up @@ -426,7 +408,7 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
```js title="src/pages/ProductsPage.spec.ts"
import { test, expect } from '@playwright/experimental-ct-vue2';
import type { HooksConfig } from '@playwright/test';
import type { HooksConfig } from '../playwright';
import ProductsPage from './pages/ProductsPage.vue';

test('configure routing through hooks config', async ({ page, mount }) => {
Expand All @@ -439,41 +421,6 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
</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>
## Under the hood
Expand All @@ -489,15 +436,15 @@ 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 }) => {
// …
});
```
`@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
defaultValue="react"
Expand All @@ -506,20 +453,19 @@ test('…', async ({ mount, page, context }) => {
{label: 'Solid', value: 'solid'},
{label: 'Svelte', value: 'svelte'},
{label: 'Vue', value: 'vue'},
{label: 'Angular', value: 'angular'},
]
}>
<TabItem value="react">
```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(<Greetings message="Hello world" />);
await expect(component).toContainText('Hello world');
const component = await mount(<HelloWorld msg="greetings" />);
await expect(component).toContainText('Greetings');
});
```
Expand All @@ -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');
});
```
Expand All @@ -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');
});
```
Expand All @@ -569,33 +515,13 @@ test('should work', async ({ mount }) => {
```js
import { test, expect } from '@playwright/experimental-ct-solid';
import { Greetings } from './Welcome';

test.use({ viewport: { width: 500, height: 500 } });

test('should work', async ({ mount }) => {
const component = await mount(<Greetings message="Hello world" />);
await expect(component).toContainText('Hello world');
});
```
</TabItem>
<TabItem value="angular">
```js
import { test, expect } from '@playwright/experimental-ct-angular';
import { GreetingsComponent } from './greetings.component';
import HelloWorld from './HelloWorld';

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(<HelloWorld msg="greetings" />);
await expect(component).toContainText('Greetings');
});
```
Expand Down Expand Up @@ -743,7 +669,7 @@ beforeMount<HooksConfig>(async ({ hooksConfig }) => {
```js title="src/pinia.spec.ts"
import { test, expect } from '@playwright/experimental-ct-vue';
import type { HooksConfig } from '@playwright/test';
import type { HooksConfig } from '../playwright';
import Store from './Store.vue';

test('override initialState ', async ({ mount }) => {
Expand Down

0 comments on commit 6941cb2

Please sign in to comment.