Skip to content

Commit

Permalink
chore: drop support for solid component testing (#33523)
Browse files Browse the repository at this point in the history
  • Loading branch information
@yury-s
yury-s authored Nov 11, 2024
1 parent 649e0e0 commit e3ed9fa
Show file tree
Hide file tree
Showing 43 changed files with 13 additions and 1,227 deletions.
134 changes: 3 additions & 131 deletions docs/src/test-components-js.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ test('event should work', async ({ mount }) => {

## How to get started

Adding Playwright Test to an existing project is easy. Below are the steps to enable Playwright Test for a React, Vue, Svelte or Solid project.
Adding Playwright Test to an existing project is easy. Below are the steps to enable Playwright Test for a React, Vue or Svelte project.

### Step 1: Install Playwright Test for components for your respective framework

Expand Down Expand Up @@ -106,7 +106,6 @@ component is mounted using this script. It can be either a `.js`, `.ts`, `.jsx`
defaultValue="react"
values={[
{label: 'React', value: 'react'},
{label: 'Solid', value: 'solid'},
{label: 'Svelte', value: 'svelte'},
{label: 'Vue', value: 'vue'},
]
Expand Down Expand Up @@ -168,20 +167,6 @@ test('should work', async ({ mount }) => {

</TabItem>

<TabItem value="solid">

```js title="app.spec.tsx"
import { test, expect } from '@playwright/experimental-ct-solid';
import App from './App';

test('should work', async ({ mount }) => {
const component = await mount(<App />);
await expect(component).toContainText('Learn Solid');
});
```

</TabItem>

</Tabs>

### Step 3. Run the tests
Expand Down Expand Up @@ -309,7 +294,6 @@ Provide props to a component when mounted.
defaultValue="react"
values={[
{label: 'React', value: 'react'},
{label: 'Solid', value: 'solid'},
{label: 'Svelte', value: 'svelte'},
{label: 'Vue', value: 'vue'},
]
Expand All @@ -325,17 +309,6 @@ test('props', async ({ mount }) => {
});
```

</TabItem>
<TabItem value="solid">

```js title="component.spec.tsx"
import { test } from '@playwright/experimental-ct-solid';

test('props', async ({ mount }) => {
const component = await mount(<Component msg="greetings" />);
});
```

</TabItem>
<TabItem value="svelte">

Expand Down Expand Up @@ -379,7 +352,6 @@ Provide callbacks/events to a component when mounted.
defaultValue="react"
values={[
{label: 'React', value: 'react'},
{label: 'Solid', value: 'solid'},
{label: 'Svelte', value: 'svelte'},
{label: 'Vue', value: 'vue'},
]
Expand All @@ -395,17 +367,6 @@ test('callback', async ({ mount }) => {
});
```

</TabItem>
<TabItem value="solid">

```js title="component.spec.tsx"
import { test } from '@playwright/experimental-ct-solid';

test('callback', async ({ mount }) => {
const component = await mount(<Component onClick={() => {}} />);
});
```

</TabItem>
<TabItem value="svelte">

Expand Down Expand Up @@ -449,7 +410,6 @@ Provide children/slots to a component when mounted.
defaultValue="react"
values={[
{label: 'React', value: 'react'},
{label: 'Solid', value: 'solid'},
{label: 'Svelte', value: 'svelte'},
{label: 'Vue', value: 'vue'},
]
Expand All @@ -465,17 +425,6 @@ test('children', async ({ mount }) => {
});
```

</TabItem>
<TabItem value="solid">

```js title="component.spec.tsx"
import { test } from '@playwright/experimental-ct-solid';

test('children', async ({ mount }) => {
const component = await mount(<Component>Child</Component>);
});
```

</TabItem>
<TabItem value="svelte">

Expand Down Expand Up @@ -519,7 +468,6 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
defaultValue="react"
values={[
{label: 'React', value: 'react'},
{label: 'Solid', value: 'solid'},
{label: 'Vue3', value: 'vue3'},
]
}>
Expand Down Expand Up @@ -554,37 +502,6 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
</TabItem>
<TabItem value="solid">
```js title="playwright/index.tsx"
import { beforeMount, afterMount } from '@playwright/experimental-ct-solid/hooks';
import { Router } from '@solidjs/router';

export type HooksConfig = {
enableRouting?: boolean;
}

beforeMount<HooksConfig>(async ({ App, hooksConfig }) => {
if (hooksConfig?.enableRouting)
return <Router><App /></Router>;
});
```
```js title="src/pages/ProductsPage.spec.tsx"
import { test, expect } from '@playwright/experimental-ct-solid';
import type { HooksConfig } from '../playwright';
import { ProductsPage } from './pages/ProductsPage';

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>
<TabItem value="vue3">
```js title="playwright/index.ts"
Expand Down Expand Up @@ -626,7 +543,6 @@ Unmount the mounted component from the DOM. This is useful for testing the compo
defaultValue="react"
values={[
{label: 'React', value: 'react'},
{label: 'Solid', value: 'solid'},
{label: 'Svelte', value: 'svelte'},
{label: 'Vue', value: 'vue'},
]
Expand All @@ -643,18 +559,6 @@ test('unmount', async ({ mount }) => {
});
```
</TabItem>
<TabItem value="solid">
```js title="component.spec.tsx"
import { test } from '@playwright/experimental-ct-solid';

test('unmount', async ({ mount }) => {
const component = await mount(<Component/>);
await component.unmount();
});
```
</TabItem>
<TabItem value="svelte">
Expand Down Expand Up @@ -700,7 +604,6 @@ Update props, slots/children, and/or events/callbacks of a mounted component. Th
defaultValue="react"
values={[
{label: 'React', value: 'react'},
{label: 'Solid', value: 'solid'},
{label: 'Svelte', value: 'svelte'},
{label: 'Vue', value: 'vue'},
]
Expand All @@ -719,20 +622,6 @@ test('update', async ({ mount }) => {
});
```
</TabItem>
<TabItem value="solid">
```js title="component.spec.tsx"
import { test } from '@playwright/experimental-ct-solid';

test('update', async ({ mount }) => {
const component = await mount(<Component/>);
await component.update(
<Component msg="greetings" onClick={() => {}}>Child</Component>
);
});
```
</TabItem>
<TabItem value="svelte">
Expand Down Expand Up @@ -820,21 +709,20 @@ test('example test', async ({ mount, router }) => {
## 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}`?
```js
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}` wrap `@playwright/test` to provide an additional built-in component-testing specific fixture called `mount`:
<Tabs
defaultValue="react"
values={[
{label: 'React', value: 'react'},
{label: 'Solid', value: 'solid'},
{label: 'Svelte', value: 'svelte'},
{label: 'Vue', value: 'vue'},
]
Expand Down Expand Up @@ -895,22 +783,6 @@ test('should work', async ({ mount }) => {
</TabItem>
<TabItem value="solid">
```js
import { test, expect } from '@playwright/experimental-ct-solid';
import HelloWorld from './HelloWorld';

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

test('should work', async ({ mount }) => {
const component = await mount(<HelloWorld msg="greetings" />);
await expect(component).toContainText('Greetings');
});
```
</TabItem>
</Tabs>
Additionally, it adds some config options you can use in your `playwright-ct.config.{ts,js}`.
Expand Down
Loading

0 comments on commit e3ed9fa

Please sign in to comment.