docs(ct): vue + jsx and general improvements
This commit is contained in:
sand4rt
parent
d0c840f639
commit
673e84d59d
|
|
@ -100,7 +100,7 @@ component is mounted using this script. It can be either a `.js`, `.ts`, `.jsx`
|
|||
// Apply theme here, add anything your component needs at runtime here.
|
||||
```
|
||||
|
||||
### Step 2. Create a test file `src/App.spec.{ts,tsx}`
|
||||
### Step 2. Create a test file `src/App.test.{ts,tsx}`
|
||||
|
||||
<Tabs
|
||||
defaultValue="react"
|
||||
|
|
@ -113,12 +113,10 @@ component is mounted using this script. It can be either a `.js`, `.ts`, `.jsx`
|
|||
}>
|
||||
<TabItem value="react">
|
||||
|
||||
```js
|
||||
```js title="app.test.tsx"
|
||||
import { test, expect } from '@playwright/experimental-ct-react';
|
||||
import App from './App';
|
||||
|
||||
test.use({ viewport: { width: 500, height: 500 } });
|
||||
|
||||
test('should work', async ({ mount }) => {
|
||||
const component = await mount(<App />);
|
||||
await expect(component).toContainText('Learn React');
|
||||
|
|
@ -129,37 +127,43 @@ test('should work', async ({ mount }) => {
|
|||
|
||||
<TabItem value="vue">
|
||||
|
||||
```js
|
||||
```js title="app.test.ts"
|
||||
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||
import App from './App.vue';
|
||||
|
||||
test.use({ viewport: { width: 500, height: 500 } });
|
||||
|
||||
test('should work', async ({ mount }) => {
|
||||
const component = await mount(App);
|
||||
await expect(component).toContainText('Vite + Vue');
|
||||
await expect(component).toContainText('Learn Vue');
|
||||
});
|
||||
```
|
||||
|
||||
If using TypeScript and Vue make sure to add a `vue.d.ts` file to your project:
|
||||
Or alternatively, using the `jsx` style:
|
||||
|
||||
```js
|
||||
declare module '*.vue';
|
||||
```js title="app.test.tsx"
|
||||
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||
import App from './App.vue';
|
||||
|
||||
test('should work', async ({ mount }) => {
|
||||
const component = await mount(<App />);
|
||||
await expect(component).toContainText('Learn Vue');
|
||||
});
|
||||
```
|
||||
|
||||
:::note
|
||||
If using TypeScript and Vue, ensure you add a `vue.d.ts` file to your project that contains `declare module '*.vue';`.
|
||||
:::
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="svelte">
|
||||
|
||||
```js
|
||||
```js title="app.test.ts"
|
||||
import { test, expect } from '@playwright/experimental-ct-svelte';
|
||||
import App from './App.svelte';
|
||||
|
||||
test.use({ viewport: { width: 500, height: 500 } });
|
||||
|
||||
test('should work', async ({ mount }) => {
|
||||
const component = await mount(App);
|
||||
await expect(component).toContainText('Vite + Svelte');
|
||||
await expect(component).toContainText('Learn Svelte');
|
||||
});
|
||||
```
|
||||
|
||||
|
|
@ -167,12 +171,10 @@ test('should work', async ({ mount }) => {
|
|||
|
||||
<TabItem value="solid">
|
||||
|
||||
```js
|
||||
```js title="app.test.tsx"
|
||||
import { test, expect } from '@playwright/experimental-ct-solid';
|
||||
import App from './App';
|
||||
|
||||
test.use({ viewport: { width: 500, height: 500 } });
|
||||
|
||||
test('should work', async ({ mount }) => {
|
||||
const component = await mount(<App />);
|
||||
await expect(component).toContainText('Learn Solid');
|
||||
|
|
@ -261,7 +263,7 @@ export function InputMediaForTest(props: InputMediaForTestProps) {
|
|||
|
||||
Then test the component via testing the story:
|
||||
|
||||
```js title="input-media.test.spec.tsx"
|
||||
```js title="input-media.test.tsx"
|
||||
test('changes the image', async ({ mount }) => {
|
||||
let mediaSelected: string | null = null;
|
||||
|
||||
|
|
@ -313,7 +315,9 @@ Provide props to a component when mounted.
|
|||
|
||||
<TabItem value="react">
|
||||
|
||||
```js
|
||||
```js title="component.test.tsx"
|
||||
import { test } from '@playwright/experimental-ct-react';
|
||||
|
||||
test('props', async ({ mount }) => {
|
||||
const component = await mount(<Component msg="greetings" />);
|
||||
});
|
||||
|
|
@ -322,7 +326,9 @@ test('props', async ({ mount }) => {
|
|||
</TabItem>
|
||||
<TabItem value="solid">
|
||||
|
||||
```js
|
||||
```js title="component.test.tsx"
|
||||
import { test } from '@playwright/experimental-ct-solid';
|
||||
|
||||
test('props', async ({ mount }) => {
|
||||
const component = await mount(<Component msg="greetings" />);
|
||||
});
|
||||
|
|
@ -331,7 +337,9 @@ test('props', async ({ mount }) => {
|
|||
</TabItem>
|
||||
<TabItem value="svelte">
|
||||
|
||||
```js
|
||||
```js title="component.test.ts"
|
||||
import { test } from '@playwright/experimental-ct-svelte';
|
||||
|
||||
test('props', async ({ mount }) => {
|
||||
const component = await mount(Component, { props: { msg: 'greetings' } });
|
||||
});
|
||||
|
|
@ -340,11 +348,22 @@ test('props', async ({ mount }) => {
|
|||
</TabItem>
|
||||
<TabItem value="vue">
|
||||
|
||||
```js
|
||||
```js title="component.test.ts"
|
||||
import { test } from '@playwright/experimental-ct-vue';
|
||||
|
||||
test('props', async ({ mount }) => {
|
||||
const component = await mount(Component, { props: { msg: 'greetings' } });
|
||||
});
|
||||
```
|
||||
Or alternatively, using the `jsx` style:
|
||||
|
||||
```js title="component.test.tsx"
|
||||
import { test } from '@playwright/experimental-ct-vue';
|
||||
|
||||
test('props', async ({ mount }) => {
|
||||
const component = await mount(<Component msg="greetings" />);
|
||||
});
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
|
||||
|
|
@ -366,7 +385,9 @@ Provide callbacks/events to a component when mounted.
|
|||
|
||||
<TabItem value="react">
|
||||
|
||||
```js
|
||||
```js title="component.test.tsx"
|
||||
import { test } from '@playwright/experimental-ct-react';
|
||||
|
||||
test('callback', async ({ mount }) => {
|
||||
const component = await mount(<Component callback={() => {}} />);
|
||||
});
|
||||
|
|
@ -375,7 +396,9 @@ test('callback', async ({ mount }) => {
|
|||
</TabItem>
|
||||
<TabItem value="solid">
|
||||
|
||||
```js
|
||||
```js title="component.test.tsx"
|
||||
import { test } from '@playwright/experimental-ct-solid';
|
||||
|
||||
test('callback', async ({ mount }) => {
|
||||
const component = await mount(<Component callback={() => {}} />);
|
||||
});
|
||||
|
|
@ -384,7 +407,9 @@ test('callback', async ({ mount }) => {
|
|||
</TabItem>
|
||||
<TabItem value="svelte">
|
||||
|
||||
```js
|
||||
```js title="component.test.ts"
|
||||
import { test } from '@playwright/experimental-ct-svelte';
|
||||
|
||||
test('event', async ({ mount }) => {
|
||||
const component = await mount(Component, { on: { callback() {} } });
|
||||
});
|
||||
|
|
@ -393,12 +418,24 @@ test('event', async ({ mount }) => {
|
|||
</TabItem>
|
||||
<TabItem value="vue">
|
||||
|
||||
```js
|
||||
```js title="component.test.ts"
|
||||
import { test } from '@playwright/experimental-ct-vue';
|
||||
|
||||
test('event', async ({ mount }) => {
|
||||
const component = await mount(Component, { on: { callback() {} } });
|
||||
});
|
||||
```
|
||||
|
||||
Or alternatively, using the `jsx` style:
|
||||
|
||||
```js title="component.test.tsx"
|
||||
import { test } from '@playwright/experimental-ct-vue';
|
||||
|
||||
test('callback', async ({ mount }) => {
|
||||
const component = await mount(<Component callback={() => {}} />);
|
||||
});
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
|
@ -419,7 +456,9 @@ Provide children/slots to a component when mounted.
|
|||
|
||||
<TabItem value="react">
|
||||
|
||||
```js
|
||||
```js title="component.test.tsx"
|
||||
import { test } from '@playwright/experimental-ct-react';
|
||||
|
||||
test('children', async ({ mount }) => {
|
||||
const component = await mount(<Component>Child</Component>);
|
||||
});
|
||||
|
|
@ -428,7 +467,9 @@ test('children', async ({ mount }) => {
|
|||
</TabItem>
|
||||
<TabItem value="solid">
|
||||
|
||||
```js
|
||||
```js title="component.test.tsx"
|
||||
import { test } from '@playwright/experimental-ct-solid';
|
||||
|
||||
test('children', async ({ mount }) => {
|
||||
const component = await mount(<Component>Child</Component>);
|
||||
});
|
||||
|
|
@ -437,7 +478,9 @@ test('children', async ({ mount }) => {
|
|||
</TabItem>
|
||||
<TabItem value="svelte">
|
||||
|
||||
```js
|
||||
```js title="component.test.ts"
|
||||
import { test } from '@playwright/experimental-ct-svelte';
|
||||
|
||||
test('slot', async ({ mount }) => {
|
||||
const component = await mount(Component, { slots: { default: 'Slot' } });
|
||||
});
|
||||
|
|
@ -446,12 +489,24 @@ test('slot', async ({ mount }) => {
|
|||
</TabItem>
|
||||
<TabItem value="vue">
|
||||
|
||||
```js
|
||||
```js title="component.test.ts"
|
||||
import { test } from '@playwright/experimental-ct-vue';
|
||||
|
||||
test('slot', async ({ mount }) => {
|
||||
const component = await mount(Component, { slots: { default: 'Slot' } });
|
||||
});
|
||||
```
|
||||
|
||||
Or alternatively, using the `jsx` style:
|
||||
|
||||
```js title="component.test.tsx"
|
||||
import { test } from '@playwright/experimental-ct-vue';
|
||||
|
||||
test('children', async ({ mount }) => {
|
||||
const component = await mount(<Component>Child</Component>);
|
||||
});
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
|
@ -485,7 +540,7 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
|
|||
});
|
||||
```
|
||||
|
||||
```js title="src/pages/ProductsPage.spec.tsx"
|
||||
```js title="src/pages/ProductsPage.test.tsx"
|
||||
import { test, expect } from '@playwright/experimental-ct-react';
|
||||
import type { HooksConfig } from '../playwright';
|
||||
import { ProductsPage } from './pages/ProductsPage';
|
||||
|
|
@ -516,7 +571,7 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
|
|||
});
|
||||
```
|
||||
|
||||
```js title="src/pages/ProductsPage.spec.tsx"
|
||||
```js title="src/pages/ProductsPage.test.tsx"
|
||||
import { test, expect } from '@playwright/experimental-ct-solid';
|
||||
import type { HooksConfig } from '../playwright';
|
||||
import { ProductsPage } from './pages/ProductsPage';
|
||||
|
|
@ -547,7 +602,7 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
|
|||
});
|
||||
```
|
||||
|
||||
```js title="src/pages/ProductsPage.spec.ts"
|
||||
```js title="src/pages/ProductsPage.test.ts"
|
||||
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||
import type { HooksConfig } from '../playwright';
|
||||
import ProductsPage from './pages/ProductsPage.vue';
|
||||
|
|
@ -559,6 +614,20 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
|
|||
await expect(component.getByRole('link')).toHaveAttribute('href', '/products/42');
|
||||
});
|
||||
```
|
||||
Or alternatively, using the `jsx` style:
|
||||
|
||||
```js title="src/pages/ProductsPage.test.tsx"
|
||||
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||
import type { HooksConfig } from '../playwright';
|
||||
import ProductsPage from './pages/ProductsPage.vue';
|
||||
|
||||
test('configure routing through hooks config', async ({ page, mount }) => {
|
||||
const component = await mount<HooksConfig>(<ProductsPage />, {
|
||||
hooksConfig: { enableRouting: true },
|
||||
});
|
||||
await expect(component.getByRole('link')).toHaveAttribute('href', '/products/42');
|
||||
});
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
|
||||
|
|
@ -581,7 +650,7 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
|
|||
});
|
||||
```
|
||||
|
||||
```js title="src/pages/ProductsPage.spec.ts"
|
||||
```js title="src/pages/ProductsPage.test.ts"
|
||||
import { test, expect } from '@playwright/experimental-ct-vue2';
|
||||
import type { HooksConfig } from '../playwright';
|
||||
import ProductsPage from './pages/ProductsPage.vue';
|
||||
|
|
@ -594,6 +663,21 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
|
|||
});
|
||||
```
|
||||
|
||||
Or alternatively, using the `jsx` style:
|
||||
|
||||
```js title="src/pages/ProductsPage.test.tsx"
|
||||
import { test, expect } from '@playwright/experimental-ct-vue2';
|
||||
import type { HooksConfig } from '../playwright';
|
||||
import ProductsPage from './pages/ProductsPage.vue';
|
||||
|
||||
test('configure routing through hooks config', async ({ page, mount }) => {
|
||||
const component = await mount<HooksConfig>(<ProductsPage />, {
|
||||
hooksConfig: { enableRouting: true },
|
||||
});
|
||||
await expect(component.getByRole('link')).toHaveAttribute('href', '/products/42');
|
||||
});
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
|
@ -614,7 +698,9 @@ Unmount the mounted component from the DOM. This is useful for testing the compo
|
|||
|
||||
<TabItem value="react">
|
||||
|
||||
```js
|
||||
```js title="component.test.tsx"
|
||||
import { test } from '@playwright/experimental-ct-react';
|
||||
|
||||
test('unmount', async ({ mount }) => {
|
||||
const component = await mount(<Component/>);
|
||||
await component.unmount();
|
||||
|
|
@ -624,7 +710,9 @@ test('unmount', async ({ mount }) => {
|
|||
</TabItem>
|
||||
<TabItem value="solid">
|
||||
|
||||
```js
|
||||
```js title="component.test.tsx"
|
||||
import { test } from '@playwright/experimental-ct-solid';
|
||||
|
||||
test('unmount', async ({ mount }) => {
|
||||
const component = await mount(<Component/>);
|
||||
await component.unmount();
|
||||
|
|
@ -634,7 +722,9 @@ test('unmount', async ({ mount }) => {
|
|||
</TabItem>
|
||||
<TabItem value="svelte">
|
||||
|
||||
```js
|
||||
```js title="component.test.ts"
|
||||
import { test } from '@playwright/experimental-ct-svelte';
|
||||
|
||||
test('unmount', async ({ mount }) => {
|
||||
const component = await mount(Component);
|
||||
await component.unmount();
|
||||
|
|
@ -644,13 +734,25 @@ test('unmount', async ({ mount }) => {
|
|||
</TabItem>
|
||||
<TabItem value="vue">
|
||||
|
||||
```js
|
||||
```js title="component.test.ts"
|
||||
import { test } from '@playwright/experimental-ct-vue';
|
||||
|
||||
test('unmount', async ({ mount }) => {
|
||||
const component = await mount(Component);
|
||||
await component.unmount();
|
||||
});
|
||||
```
|
||||
|
||||
Or alternatively, using the `jsx` style:
|
||||
|
||||
```js title="component.test.tsx"
|
||||
import { test } from '@playwright/experimental-ct-vue';
|
||||
|
||||
test('unmount', async ({ mount }) => {
|
||||
const component = await mount(<Component/>);
|
||||
await component.unmount();
|
||||
});
|
||||
```
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
|
@ -671,7 +773,9 @@ Update props, slots/children, and/or events/callbacks of a mounted component. Th
|
|||
|
||||
<TabItem value="react">
|
||||
|
||||
```js
|
||||
```js title="component.test.tsx"
|
||||
import { test } from '@playwright/experimental-ct-react';
|
||||
|
||||
test('update', async ({ mount }) => {
|
||||
const component = await mount(<Component/>);
|
||||
await component.update(
|
||||
|
|
@ -683,7 +787,9 @@ test('update', async ({ mount }) => {
|
|||
</TabItem>
|
||||
<TabItem value="solid">
|
||||
|
||||
```js
|
||||
```js title="component.test.tsx"
|
||||
import { test } from '@playwright/experimental-ct-solid';
|
||||
|
||||
test('update', async ({ mount }) => {
|
||||
const component = await mount(<Component/>);
|
||||
await component.update(
|
||||
|
|
@ -695,7 +801,9 @@ test('update', async ({ mount }) => {
|
|||
</TabItem>
|
||||
<TabItem value="svelte">
|
||||
|
||||
```js
|
||||
```js title="component.test.ts"
|
||||
import { test } from '@playwright/experimental-ct-svelte';
|
||||
|
||||
test('update', async ({ mount }) => {
|
||||
const component = await mount(Component);
|
||||
await component.update({
|
||||
|
|
@ -709,7 +817,9 @@ test('update', async ({ mount }) => {
|
|||
</TabItem>
|
||||
<TabItem value="vue">
|
||||
|
||||
```js
|
||||
```js title="component.test.ts"
|
||||
import { test } from '@playwright/experimental-ct-vue';
|
||||
|
||||
test('update', async ({ mount }) => {
|
||||
const component = await mount(Component);
|
||||
await component.update({
|
||||
|
|
@ -720,6 +830,19 @@ test('update', async ({ mount }) => {
|
|||
});
|
||||
```
|
||||
|
||||
Or alternatively, using the `jsx` style:
|
||||
|
||||
```js title="component.test.tsx"
|
||||
import { test } from '@playwright/experimental-ct-vue';
|
||||
|
||||
test('update', async ({ mount }) => {
|
||||
const component = await mount(<Component/>);
|
||||
await component.update(
|
||||
<Component msg="greetings" callback={() => {}}>Child</Component>
|
||||
);
|
||||
});
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
|
@ -954,7 +1077,7 @@ beforeMount<HooksConfig>(async ({ hooksConfig }) => {
|
|||
});
|
||||
```
|
||||
|
||||
```js title="src/pinia.spec.ts"
|
||||
```js title="src/pinia.test.ts"
|
||||
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||
import type { HooksConfig } from '../playwright';
|
||||
import Store from './Store.vue';
|
||||
|
|
|
|||
Loading…
Reference in a new issue