mirror of https://github.com/vuejs/vitepress
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
2.6 KiB
79 lines
2.6 KiB
describe('client components', () => {
|
|
beforeEach(async () => {
|
|
await goto('/client-component/')
|
|
await page.waitForSelector('#forwarded.client-component')
|
|
})
|
|
|
|
test('forwards default and scoped slots and keeps them reactive', async () => {
|
|
const header = page.locator('#forwarded header')
|
|
const content = page.locator('#forwarded .default-slot')
|
|
|
|
expect(await header.textContent()).toBe('scoped value 0')
|
|
expect((await content.textContent())?.trim()).toBe('default content 0')
|
|
expect(await page.locator('#forwarded footer').textContent()).toBe('')
|
|
|
|
await page.locator('#increment').click()
|
|
|
|
await expect.poll(() => header.textContent()).toBe('scoped value 1')
|
|
expect((await content.textContent())?.trim()).toBe('default content 1')
|
|
expect(await page.locator('#forwarded footer').textContent()).toBe(
|
|
'conditional slot'
|
|
)
|
|
|
|
await page.locator('#increment').click()
|
|
|
|
await expect.poll(() => header.textContent()).toBe('scoped value 2')
|
|
expect(await page.locator('#forwarded footer').textContent()).toBe('')
|
|
})
|
|
|
|
test('forwards slots when args only provide props', async () => {
|
|
expect(await page.locator('#with-props header').textContent()).toBe(
|
|
'from args'
|
|
)
|
|
expect(
|
|
(await page.locator('#with-props .default-slot').textContent())?.trim()
|
|
).toBe('content with props')
|
|
expect(await page.locator('#empty-args .default-slot').textContent()).toBe(
|
|
'content with empty args'
|
|
)
|
|
expect(await page.locator('#null-props .default-slot').textContent()).toBe(
|
|
'content with null props'
|
|
)
|
|
})
|
|
|
|
test('preserves explicitly provided slots and shorthand children', async () => {
|
|
expect(await page.locator('#explicit header').textContent()).toBe(
|
|
'explicit header'
|
|
)
|
|
expect(await page.locator('#explicit .default-slot').textContent()).toBe(
|
|
'explicit default'
|
|
)
|
|
|
|
for (const [id, content] of [
|
|
['string', 'string child'],
|
|
['array', 'array child'],
|
|
['vnode', 'vnode child'],
|
|
['function', 'function child'],
|
|
['number', '42'],
|
|
['null', 'default fallback'],
|
|
['undefined', 'default fallback'],
|
|
['multiple', 'firstsecond']
|
|
]) {
|
|
expect(
|
|
await page.locator(`#legacy-${id} .default-slot`).textContent()
|
|
).toBe(content)
|
|
}
|
|
})
|
|
|
|
test.runIf(!!process.env.VITE_TEST_BUILD)(
|
|
'does not render the component or its slots on the server',
|
|
async () => {
|
|
const response = await page.request.get(page.url())
|
|
const html = await response.text()
|
|
|
|
expect(html).not.toContain('class="client-component"')
|
|
expect(html).not.toContain('default content 0')
|
|
}
|
|
)
|
|
})
|