test(ct): svelte named slots (#17943)

This commit is contained in:
sand4rt 2022-10-10 21:43:30 +02:00 committed by GitHub
parent 815277c546
commit 0f820aa7f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 50 additions and 0 deletions

View File

@ -0,0 +1,11 @@
<div>
<header>
<slot name="header" />
</header>
<main>
<slot name="main" />
</main>
<footer>
<slot name="footer" />
</footer>
</div>

View File

@ -17,6 +17,7 @@
import { test, expect } from '@playwright/experimental-ct-svelte';
import Button from './components/Button.svelte';
import DefaultSlot from './components/DefaultSlot.svelte';
import NamedSlots from './components/NamedSlots.svelte';
import MultiRoot from './components/MultiRoot.svelte';
import Empty from './components/Empty.svelte';
@ -54,6 +55,19 @@ test('render a default slot', async ({ mount }) => {
await expect(component).toContainText('Main Content')
})
test('render a component with a named slot', async ({ mount }) => {
const component = await mount(NamedSlots, {
slots: {
header: 'Header',
main: 'Main Content',
footer: 'Footer'
}
})
await expect(component).toContainText('Header')
await expect(component).toContainText('Main Content')
await expect(component).toContainText('Footer')
})
test('run hooks', async ({ page, mount }) => {
const messages = []
page.on('console', m => messages.push(m.text()))

View File

@ -0,0 +1,11 @@
<div>
<header>
<slot name="header" />
</header>
<main>
<slot name="main" />
</main>
<footer>
<slot name="footer" />
</footer>
</div>

View File

@ -18,6 +18,7 @@ import { test, expect } from '@playwright/experimental-ct-svelte';
import Button from './components/Button.svelte';
import Component from './components/Component.svelte';
import DefaultSlot from './components/DefaultSlot.svelte';
import NamedSlots from './components/NamedSlots.svelte'
import MultiRoot from './components/MultiRoot.svelte';
import Empty from './components/Empty.svelte';
@ -55,6 +56,19 @@ test('render a default slot', async ({ mount }) => {
await expect(component).toContainText('Main Content')
})
test('render a component with a named slot', async ({ mount }) => {
const component = await mount(NamedSlots, {
slots: {
header: 'Header',
main: 'Main Content',
footer: 'Footer'
}
})
await expect(component).toContainText('Header')
await expect(component).toContainText('Main Content')
await expect(component).toContainText('Footer')
})
test('render a component without options', async ({ mount }) => {
const component = await mount(Component);
await expect(component).toContainText('test');