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

docs(ct): fix broken examples (#17737)

Browse source
This commit is contained in:
Max Schmitt 2022-09-30 16:30:32 +02:00 committed by GitHub
parent ce2ded1f7e
commit 0e740f85ea
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -264,9 +264,17 @@ test('…', async { mount, page, context } => {
`@playwright/experimental-ct-{react,svelte,vue}` 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`:
<details> <Tabs
<summary>React Example</summary> defaultValue="react"
<pre> values={[
{label: 'React', value: 'react'},
{label: 'Vue', value: 'vue'},
{label: 'Svelte', value: 'svelte'},
]
}>
<TabItem value="react">
```js
import { test, expect } from '@playwright/experimental-ct-react' import { test, expect } from '@playwright/experimental-ct-react'
import HelloWorld from './HelloWorld.tsx' import HelloWorld from './HelloWorld.tsx'
@ -276,12 +284,14 @@ test.use({ viewport: { width: 500, height: 500 } })
test('should work', async ({ mount }) => { test('should work', async ({ mount }) => {
const component = await mount(<HelloWorld msg='greetings' />); const component = await mount(<HelloWorld msg='greetings' />);
await expect(component).toContainText('Greetings') await expect(component).toContainText('Greetings')
})</pre> })
</details> ```
<details> </TabItem>
<summary>Vue Example</summary>
<pre> <TabItem value="vue">
```js
import { test, expect } from '@playwright/experimental-ct-vue' import { test, expect } from '@playwright/experimental-ct-vue'
import HelloWorld from './HelloWorld.vue' import HelloWorld from './HelloWorld.vue'
@ -295,12 +305,14 @@ test('should work', async ({ mount }) => {
} }
}); });
await expect(component).toContainText('Greetings') await expect(component).toContainText('Greetings')
})</pre> })
</details> ```
<details> </TabItem>
<summary>Svelte Example</summary>
<pre> <TabItem value="svelte">
```js
import { test, expect } from '@playwright/experimental-ct-vue' import { test, expect } from '@playwright/experimental-ct-vue'
import NamedSlots from './NamedSlots.vue' import NamedSlots from './NamedSlots.vue'
@ -318,9 +330,12 @@ test('named slots should work', async ({ mount }) => {
await expect(component).toContainText('Header') await expect(component).toContainText('Header')
await expect(component).toContainText('Main Content') await expect(component).toContainText('Main Content')
await expect(component).toContainText('Footer') await expect(component).toContainText('Footer')
})</pre> })
</details> ```
</TabItem>
</Tabs>
Additionally, it adds some config options you can use in your `playwright-ct.config.{ts,js}`. Additionally, it adds some config options you can use in your `playwright-ct.config.{ts,js}`.