test(ct): vue vite slice by feature (#19657)
This commit is contained in:
Sander
GitHub
parent
a39a97f0ee
commit
a5f4717192
|
|
@ -15,14 +15,22 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-vue';
|
import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-vue';
|
||||||
|
import { resolve } from 'path';
|
||||||
|
|
||||||
const config: PlaywrightTestConfig = {
|
const config: PlaywrightTestConfig = {
|
||||||
testDir: 'src',
|
testDir: 'tests',
|
||||||
forbidOnly: !!process.env.CI,
|
forbidOnly: !!process.env.CI,
|
||||||
retries: process.env.CI ? 2 : 0,
|
retries: process.env.CI ? 2 : 0,
|
||||||
reporter: 'html',
|
reporter: 'html',
|
||||||
use: {
|
use: {
|
||||||
trace: 'on-first-retry'
|
trace: 'on-first-retry',
|
||||||
|
ctViteConfig: {
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': resolve(__dirname, './src'),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
projects: [
|
projects: [
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -1,155 +0,0 @@
|
||||||
import { test, expect } from '@playwright/experimental-ct-vue'
|
|
||||||
import App from './App.vue';
|
|
||||||
import Button from './components/Button.vue'
|
|
||||||
import Counter from './components/Counter.vue'
|
|
||||||
import DefaultSlot from './components/DefaultSlot.vue'
|
|
||||||
import NamedSlots from './components/NamedSlots.vue'
|
|
||||||
import MultiRoot from './components/MultiRoot.vue'
|
|
||||||
import EmptyTemplate from './components/EmptyTemplate.vue'
|
|
||||||
import type { HooksConfig } from '../playwright'
|
|
||||||
|
|
||||||
test.use({ viewport: { width: 500, height: 500 } })
|
|
||||||
|
|
||||||
test('render props', async ({ mount }) => {
|
|
||||||
const component = await mount(<Button title="Submit" />)
|
|
||||||
await expect(component).toContainText('Submit')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('render attributes', async ({ mount }) => {
|
|
||||||
const component = await mount(<Button class="primary" title="Submit" />)
|
|
||||||
await expect(component).toHaveClass('primary');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('update props without remounting', async ({ mount }) => {
|
|
||||||
const component = await mount(<Counter count={9001} />)
|
|
||||||
await expect(component.locator('#props')).toContainText('9001')
|
|
||||||
|
|
||||||
await component.update(<Counter count={1337} />)
|
|
||||||
await expect(component).not.toContainText('9001')
|
|
||||||
await expect(component.locator('#props')).toContainText('1337')
|
|
||||||
|
|
||||||
await expect(component.locator('#remount-count')).toContainText('1')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('update event listeners without remounting', async ({ mount }) => {
|
|
||||||
const component = await mount(<Counter />)
|
|
||||||
|
|
||||||
const messages: string[] = []
|
|
||||||
await component.update(<Counter v-on:submit={(count: string) => {
|
|
||||||
messages.push(count)
|
|
||||||
}} />)
|
|
||||||
await component.click();
|
|
||||||
expect(messages).toEqual(['hello'])
|
|
||||||
|
|
||||||
await expect(component.locator('#remount-count')).toContainText('1')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('update slots without remounting', async ({ mount }) => {
|
|
||||||
const component = await mount(<Counter>Default Slot</Counter>)
|
|
||||||
await expect(component).toContainText('Default Slot')
|
|
||||||
|
|
||||||
await component.update(<Counter>
|
|
||||||
<template v-slot:main>Test Slot</template>
|
|
||||||
</Counter>)
|
|
||||||
await expect(component).not.toContainText('Default Slot')
|
|
||||||
await expect(component).toContainText('Test Slot')
|
|
||||||
|
|
||||||
await expect(component.locator('#remount-count')).toContainText('1')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('emit an submit event when the button is clicked', async ({ mount }) => {
|
|
||||||
const messages: string[] = []
|
|
||||||
const component = await mount(<Button
|
|
||||||
title="Submit"
|
|
||||||
v-on:submit={(data: string) => {
|
|
||||||
messages.push(data)
|
|
||||||
}}
|
|
||||||
/>)
|
|
||||||
await component.click()
|
|
||||||
expect(messages).toEqual(['hello'])
|
|
||||||
})
|
|
||||||
|
|
||||||
test('render a default slot', async ({ mount }) => {
|
|
||||||
const component = await mount(<DefaultSlot>
|
|
||||||
<strong>Main Content</strong>
|
|
||||||
</DefaultSlot>)
|
|
||||||
await expect(component.getByRole('strong')).toContainText('Main Content')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('render a component as slot', async ({ mount }) => {
|
|
||||||
const component = await mount(<DefaultSlot>
|
|
||||||
<Button title="Submit" />
|
|
||||||
</DefaultSlot>)
|
|
||||||
await expect(component).toContainText('Submit')
|
|
||||||
});
|
|
||||||
|
|
||||||
test('render a component with multiple slots', async ({ mount }) => {
|
|
||||||
const component = await mount(<DefaultSlot>
|
|
||||||
<div data-testid="one">One</div>
|
|
||||||
<div data-testid="two">Two</div>
|
|
||||||
</DefaultSlot>)
|
|
||||||
await expect(component.getByTestId('one')).toContainText('One')
|
|
||||||
await expect(component.getByTestId('two')).toContainText('Two')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('render a component with a named slot', async ({ mount }) => {
|
|
||||||
const component = await mount(<NamedSlots>
|
|
||||||
<template v-slot:header>
|
|
||||||
Header
|
|
||||||
</template>
|
|
||||||
<template v-slot:main>
|
|
||||||
Main Content
|
|
||||||
</template>
|
|
||||||
<template v-slot:footer>
|
|
||||||
Footer
|
|
||||||
</template>
|
|
||||||
</NamedSlots>);
|
|
||||||
await expect(component).toContainText('Header')
|
|
||||||
await expect(component).toContainText('Main Content')
|
|
||||||
await expect(component).toContainText('Footer')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('emit a event when a slot is clicked', async ({ mount }) => {
|
|
||||||
let clickFired = false;
|
|
||||||
const component = await mount(<DefaultSlot>
|
|
||||||
<span v-on:click={() => clickFired = true}>Main Content</span>
|
|
||||||
</DefaultSlot>);
|
|
||||||
await component.locator('text=Main Content').click();
|
|
||||||
expect(clickFired).toBeTruthy();
|
|
||||||
})
|
|
||||||
|
|
||||||
test('run hooks', async ({ page, mount }) => {
|
|
||||||
const messages: string[] = []
|
|
||||||
page.on('console', m => messages.push(m.text()))
|
|
||||||
await mount<HooksConfig>(<Button title="Submit" />, {
|
|
||||||
hooksConfig: { route: 'A' }
|
|
||||||
})
|
|
||||||
expect(messages).toEqual(['Before mount: {\"route\":\"A\"}, app: true', 'After mount el: HTMLButtonElement'])
|
|
||||||
})
|
|
||||||
|
|
||||||
test('unmount a multi root component', async ({ mount, page }) => {
|
|
||||||
const component = await mount(<MultiRoot />)
|
|
||||||
await expect(page.locator('#root')).toContainText('root 1')
|
|
||||||
await expect(page.locator('#root')).toContainText('root 2')
|
|
||||||
await component.unmount()
|
|
||||||
await expect(page.locator('#root')).not.toContainText('root 1')
|
|
||||||
await expect(page.locator('#root')).not.toContainText('root 2')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('get textContent of the empty template', async ({ mount }) => {
|
|
||||||
const component = await mount(<EmptyTemplate />);
|
|
||||||
expect(await component.allTextContents()).toEqual(['']);
|
|
||||||
expect(await component.textContent()).toBe('');
|
|
||||||
await expect(component).toHaveText('');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('navigate to a page by clicking a link', async ({ page, mount }) => {
|
|
||||||
const component = await mount<HooksConfig>(<App />, {
|
|
||||||
hooksConfig: { routing: true }
|
|
||||||
});
|
|
||||||
await expect(component.getByRole('main')).toHaveText('Login');
|
|
||||||
await expect(page).toHaveURL('/');
|
|
||||||
await component.getByRole('link', { name: 'Dashboard' }).click();
|
|
||||||
await expect(component.getByRole('main')).toHaveText('Dashboard');
|
|
||||||
await expect(page).toHaveURL('/dashboard');
|
|
||||||
});
|
|
||||||
|
|
@ -1,171 +0,0 @@
|
||||||
import { test, expect } from '@playwright/experimental-ct-vue'
|
|
||||||
import App from './App.vue';
|
|
||||||
import Button from './components/Button.vue'
|
|
||||||
import Counter from './components/Counter.vue'
|
|
||||||
import DefaultSlot from './components/DefaultSlot.vue'
|
|
||||||
import MultiRoot from './components/MultiRoot.vue'
|
|
||||||
import NamedSlots from './components/NamedSlots.vue'
|
|
||||||
import Component from './components/Component.vue'
|
|
||||||
import EmptyTemplate from './components/EmptyTemplate.vue'
|
|
||||||
|
|
||||||
test.use({ viewport: { width: 500, height: 500 } })
|
|
||||||
|
|
||||||
test('render props', async ({ mount }) => {
|
|
||||||
const component = await mount(Button, {
|
|
||||||
props: {
|
|
||||||
title: 'Submit'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
await expect(component).toContainText('Submit')
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
test('update props without remounting', async ({ mount }) => {
|
|
||||||
const component = await mount(Counter, {
|
|
||||||
props: { count: 9001 }
|
|
||||||
})
|
|
||||||
await expect(component.locator('#props')).toContainText('9001')
|
|
||||||
|
|
||||||
await component.update({
|
|
||||||
props: { count: 1337 }
|
|
||||||
})
|
|
||||||
await expect(component).not.toContainText('9001')
|
|
||||||
await expect(component.locator('#props')).toContainText('1337')
|
|
||||||
|
|
||||||
await expect(component.locator('#remount-count')).toContainText('1')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('update event listeners without remounting', async ({ mount }) => {
|
|
||||||
const component = await mount(Counter)
|
|
||||||
|
|
||||||
const messages = []
|
|
||||||
await component.update({
|
|
||||||
on: {
|
|
||||||
submit: (count) => messages.push(count)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
await component.click();
|
|
||||||
expect(messages).toEqual(['hello'])
|
|
||||||
|
|
||||||
await expect(component.locator('#remount-count')).toContainText('1')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('update slots without remounting', async ({ mount }) => {
|
|
||||||
const component = await mount(Counter, {
|
|
||||||
slots: { default: 'Default Slot' }
|
|
||||||
})
|
|
||||||
await expect(component).toContainText('Default Slot')
|
|
||||||
|
|
||||||
await component.update({
|
|
||||||
slots: { main: 'Test Slot' }
|
|
||||||
})
|
|
||||||
await expect(component).not.toContainText('Default Slot')
|
|
||||||
await expect(component).toContainText('Test Slot')
|
|
||||||
|
|
||||||
await expect(component.locator('#remount-count')).toContainText('1')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('emit an submit event when the button is clicked', async ({ mount }) => {
|
|
||||||
const messages = []
|
|
||||||
const component = await mount(Button, {
|
|
||||||
props: {
|
|
||||||
title: 'Submit'
|
|
||||||
},
|
|
||||||
on: {
|
|
||||||
submit: (data) => messages.push(data)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
await component.click()
|
|
||||||
expect(messages).toEqual(['hello'])
|
|
||||||
})
|
|
||||||
|
|
||||||
test('render a default slot', async ({ mount }) => {
|
|
||||||
const component = await mount(DefaultSlot, {
|
|
||||||
slots: {
|
|
||||||
default: '<strong>Main Content</strong>'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
await expect(component.getByRole('strong')).toContainText('Main Content')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('render a component as slot', async ({ mount, page }) => {
|
|
||||||
const component = await mount(DefaultSlot, {
|
|
||||||
slots: {
|
|
||||||
default: '<Button title="Submit" />',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
await expect(component).toContainText('Submit')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('render a component with multiple slots', async ({ mount }) => {
|
|
||||||
const component = await mount(DefaultSlot, {
|
|
||||||
slots: {
|
|
||||||
default: [
|
|
||||||
'<div data-testid="one">One</div>',
|
|
||||||
'<div data-testid="two">Two</div>'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
await expect(component.getByTestId('one')).toContainText('One')
|
|
||||||
await expect(component.getByTestId('two')).toContainText('Two')
|
|
||||||
})
|
|
||||||
|
|
||||||
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')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('run hooks', async ({ page, mount }) => {
|
|
||||||
const messages = []
|
|
||||||
page.on('console', m => messages.push(m.text()))
|
|
||||||
await mount(Button, {
|
|
||||||
props: {
|
|
||||||
title: 'Submit'
|
|
||||||
},
|
|
||||||
hooksConfig: { route: 'A' }
|
|
||||||
})
|
|
||||||
expect(messages).toEqual(['Before mount: {\"route\":\"A\"}, app: true', 'After mount el: HTMLButtonElement'])
|
|
||||||
})
|
|
||||||
|
|
||||||
test('unmount a multi root component', async ({ mount, page }) => {
|
|
||||||
const component = await mount(MultiRoot)
|
|
||||||
|
|
||||||
await expect(page.locator('#root')).toContainText('root 1')
|
|
||||||
await expect(page.locator('#root')).toContainText('root 2')
|
|
||||||
|
|
||||||
await component.unmount()
|
|
||||||
|
|
||||||
await expect(page.locator('#root')).not.toContainText('root 1')
|
|
||||||
await expect(page.locator('#root')).not.toContainText('root 2')
|
|
||||||
});
|
|
||||||
|
|
||||||
test('get textContent of the empty template', async ({ mount }) => {
|
|
||||||
const component = await mount(EmptyTemplate);
|
|
||||||
expect(await component.allTextContents()).toEqual(['']);
|
|
||||||
expect(await component.textContent()).toBe('');
|
|
||||||
await expect(component).toHaveText('');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('navigate to a page by clicking a link', async ({ page, mount }) => {
|
|
||||||
const component = await mount(App, {
|
|
||||||
hooksConfig: { routing: true }
|
|
||||||
});
|
|
||||||
await expect(component.getByRole('main')).toHaveText('Login');
|
|
||||||
await expect(page).toHaveURL('/');
|
|
||||||
await component.getByRole('link', { name: 'Dashboard' }).click();
|
|
||||||
await expect(component.getByRole('main')).toHaveText('Dashboard');
|
|
||||||
await expect(page).toHaveURL('/dashboard');
|
|
||||||
});
|
|
||||||
|
|
@ -1,179 +0,0 @@
|
||||||
import { test, expect } from '@playwright/experimental-ct-vue'
|
|
||||||
import App from './App.vue';
|
|
||||||
import Button from './components/Button.vue'
|
|
||||||
import Counter from './components/Counter.vue'
|
|
||||||
import DefaultSlot from './components/DefaultSlot.vue'
|
|
||||||
import NamedSlots from './components/NamedSlots.vue'
|
|
||||||
import MultiRoot from './components/MultiRoot.vue'
|
|
||||||
import Component from './components/Component.vue'
|
|
||||||
import EmptyTemplate from './components/EmptyTemplate.vue'
|
|
||||||
import type { HooksConfig } from '../playwright'
|
|
||||||
|
|
||||||
test.use({ viewport: { width: 500, height: 500 } })
|
|
||||||
|
|
||||||
test('render props', async ({ mount }) => {
|
|
||||||
const component = await mount(Button, {
|
|
||||||
props: {
|
|
||||||
title: 'Submit'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
await expect(component).toContainText('Submit')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('update props without remounting', async ({ mount }) => {
|
|
||||||
const component = await mount(Counter, {
|
|
||||||
props: { count: 9001 }
|
|
||||||
})
|
|
||||||
await expect(component.locator('#props')).toContainText('9001')
|
|
||||||
|
|
||||||
await component.update({
|
|
||||||
props: { count: 1337 }
|
|
||||||
})
|
|
||||||
await expect(component).not.toContainText('9001')
|
|
||||||
await expect(component.locator('#props')).toContainText('1337')
|
|
||||||
|
|
||||||
await expect(component.locator('#remount-count')).toContainText('1')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('update event listeners without remounting', async ({ mount }) => {
|
|
||||||
const component = await mount(Counter)
|
|
||||||
|
|
||||||
const messages: string[] = []
|
|
||||||
await component.update({
|
|
||||||
on: {
|
|
||||||
submit: (data: string) => messages.push(data)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
await component.click();
|
|
||||||
expect(messages).toEqual(['hello'])
|
|
||||||
|
|
||||||
await expect(component.locator('#remount-count')).toContainText('1')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('update slots without remounting', async ({ mount }) => {
|
|
||||||
const component = await mount(Counter, {
|
|
||||||
slots: { default: 'Default Slot' }
|
|
||||||
})
|
|
||||||
await expect(component).toContainText('Default Slot')
|
|
||||||
|
|
||||||
await component.update({
|
|
||||||
slots: { main: 'Test Slot' }
|
|
||||||
})
|
|
||||||
await expect(component).not.toContainText('Default Slot')
|
|
||||||
await expect(component).toContainText('Test Slot')
|
|
||||||
|
|
||||||
await expect(component.locator('#remount-count')).toContainText('1')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('emit an submit event when the button is clicked', async ({ mount }) => {
|
|
||||||
const messages: string[] = []
|
|
||||||
const component = await mount(Button, {
|
|
||||||
props: {
|
|
||||||
title: 'Submit'
|
|
||||||
},
|
|
||||||
on: {
|
|
||||||
submit: (data: string) => messages.push(data)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
await component.click()
|
|
||||||
expect(messages).toEqual(['hello'])
|
|
||||||
})
|
|
||||||
|
|
||||||
test('render a default slot', async ({ mount }) => {
|
|
||||||
const component = await mount(DefaultSlot, {
|
|
||||||
slots: {
|
|
||||||
default: '<strong>Main Content</strong>'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
await expect(component.getByRole('strong')).toContainText('Main Content')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('render a component as slot', async ({ mount, page }) => {
|
|
||||||
const component = await mount(DefaultSlot, {
|
|
||||||
slots: {
|
|
||||||
default: '<Button title="Submit" />',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
await expect(component).toContainText('Submit')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('render a component with multiple slots', async ({ mount }) => {
|
|
||||||
const component = await mount(DefaultSlot, {
|
|
||||||
slots: {
|
|
||||||
default: [
|
|
||||||
'<div data-testid="one">One</div>',
|
|
||||||
'<div data-testid="two">Two</div>'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
await expect(component.getByTestId('one')).toContainText('One')
|
|
||||||
await expect(component.getByTestId('two')).toContainText('Two')
|
|
||||||
})
|
|
||||||
|
|
||||||
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')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('run hooks', async ({ page, mount }) => {
|
|
||||||
const messages: string[] = []
|
|
||||||
page.on('console', m => messages.push(m.text()))
|
|
||||||
await mount<HooksConfig>(Button, {
|
|
||||||
props: {
|
|
||||||
title: 'Submit'
|
|
||||||
},
|
|
||||||
hooksConfig: { route: 'A' }
|
|
||||||
})
|
|
||||||
expect(messages).toEqual(['Before mount: {\"route\":\"A\"}, app: true', 'After mount el: HTMLButtonElement'])
|
|
||||||
})
|
|
||||||
|
|
||||||
test('unmount', async ({ page, mount }) => {
|
|
||||||
const component = await mount(Button, {
|
|
||||||
props: {
|
|
||||||
title: 'Submit'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
await expect(page.locator('#root')).toContainText('Submit')
|
|
||||||
await component.unmount();
|
|
||||||
await expect(page.locator('#root')).not.toContainText('Submit');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('unmount a multi root component', async ({ mount, page }) => {
|
|
||||||
const component = await mount(MultiRoot)
|
|
||||||
await expect(page.locator('#root')).toContainText('root 1')
|
|
||||||
await expect(page.locator('#root')).toContainText('root 2')
|
|
||||||
await component.unmount()
|
|
||||||
await expect(page.locator('#root')).not.toContainText('root 1')
|
|
||||||
await expect(page.locator('#root')).not.toContainText('root 2')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('get textContent of the empty template', async ({ mount }) => {
|
|
||||||
const component = await mount(EmptyTemplate);
|
|
||||||
expect(await component.allTextContents()).toEqual(['']);
|
|
||||||
expect(await component.textContent()).toBe('');
|
|
||||||
await expect(component).toHaveText('');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('navigate to a page by clicking a link', async ({ page, mount }) => {
|
|
||||||
const component = await mount<HooksConfig>(App, {
|
|
||||||
hooksConfig: { routing: true }
|
|
||||||
});
|
|
||||||
await expect(component.getByRole('main')).toHaveText('Login');
|
|
||||||
await expect(page).toHaveURL('/');
|
|
||||||
await component.getByRole('link', { name: 'Dashboard' }).click();
|
|
||||||
await expect(component.getByRole('main')).toHaveText('Dashboard');
|
|
||||||
await expect(page).toHaveURL('/dashboard');
|
|
||||||
});
|
|
||||||
16
tests/components/ct-vue-vite/tests/events/events.spec.js
Normal file
16
tests/components/ct-vue-vite/tests/events/events.spec.js
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||||
|
import Button from '@/components/Button.vue';
|
||||||
|
|
||||||
|
test('emit a submit event when the button is clicked', async ({ mount }) => {
|
||||||
|
const messages = [];
|
||||||
|
const component = await mount(Button, {
|
||||||
|
props: {
|
||||||
|
title: 'Submit',
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
submit: (data) => messages.push(data),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
await component.click();
|
||||||
|
expect(messages).toEqual(['hello']);
|
||||||
|
});
|
||||||
16
tests/components/ct-vue-vite/tests/events/events.spec.ts
Normal file
16
tests/components/ct-vue-vite/tests/events/events.spec.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||||
|
import Button from '@/components/Button.vue';
|
||||||
|
|
||||||
|
test('emit a submit event when the button is clicked', async ({ mount }) => {
|
||||||
|
const messages: string[] = [];
|
||||||
|
const component = await mount(Button, {
|
||||||
|
props: {
|
||||||
|
title: 'Submit',
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
submit: (data: string) => messages.push(data),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
await component.click();
|
||||||
|
expect(messages).toEqual(['hello']);
|
||||||
|
});
|
||||||
28
tests/components/ct-vue-vite/tests/events/events.spec.tsx
Normal file
28
tests/components/ct-vue-vite/tests/events/events.spec.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||||
|
import Button from '@/components/Button.vue';
|
||||||
|
import DefaultSlot from '@/components/DefaultSlot.vue';
|
||||||
|
|
||||||
|
test('emit a submit event when the button is clicked', async ({ mount }) => {
|
||||||
|
const messages: string[] = [];
|
||||||
|
const component = await mount(
|
||||||
|
<Button
|
||||||
|
title="Submit"
|
||||||
|
v-on:submit={(data: string) => {
|
||||||
|
messages.push(data);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
await component.click();
|
||||||
|
expect(messages).toEqual(['hello']);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('emit a event when a slot is clicked', async ({ mount }) => {
|
||||||
|
let clickFired = false;
|
||||||
|
const component = await mount(
|
||||||
|
<DefaultSlot>
|
||||||
|
<span v-on:click={() => (clickFired = true)}>Main Content</span>
|
||||||
|
</DefaultSlot>
|
||||||
|
);
|
||||||
|
await component.locator('text=Main Content').click();
|
||||||
|
expect(clickFired).toBeTruthy();
|
||||||
|
});
|
||||||
25
tests/components/ct-vue-vite/tests/render/render.spec.js
Normal file
25
tests/components/ct-vue-vite/tests/render/render.spec.js
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||||
|
import Button from '@/components/Button.vue';
|
||||||
|
import EmptyTemplate from '@/components/EmptyTemplate.vue';
|
||||||
|
import Component from '@/components/Component.vue';
|
||||||
|
|
||||||
|
test('render props', async ({ mount }) => {
|
||||||
|
const component = await mount(Button, {
|
||||||
|
props: {
|
||||||
|
title: 'Submit',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
await expect(component).toContainText('Submit');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('get textContent of the empty template', async ({ mount }) => {
|
||||||
|
const component = await mount(EmptyTemplate);
|
||||||
|
expect(await component.allTextContents()).toEqual(['']);
|
||||||
|
expect(await component.textContent()).toBe('');
|
||||||
|
await expect(component).toHaveText('');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('render a component without options', async ({ mount }) => {
|
||||||
|
const component = await mount(Component);
|
||||||
|
await expect(component).toContainText('test');
|
||||||
|
});
|
||||||
25
tests/components/ct-vue-vite/tests/render/render.spec.ts
Normal file
25
tests/components/ct-vue-vite/tests/render/render.spec.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||||
|
import Button from '@/components/Button.vue';
|
||||||
|
import EmptyTemplate from '@/components/EmptyTemplate.vue';
|
||||||
|
import Component from '@/components/Component.vue';
|
||||||
|
|
||||||
|
test('render props', async ({ mount }) => {
|
||||||
|
const component = await mount(Button, {
|
||||||
|
props: {
|
||||||
|
title: 'Submit',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
await expect(component).toContainText('Submit');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('get textContent of the empty template', async ({ mount }) => {
|
||||||
|
const component = await mount(EmptyTemplate);
|
||||||
|
expect(await component.allTextContents()).toEqual(['']);
|
||||||
|
expect(await component.textContent()).toBe('');
|
||||||
|
await expect(component).toHaveText('');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('render a component without options', async ({ mount }) => {
|
||||||
|
const component = await mount(Component);
|
||||||
|
await expect(component).toContainText('test');
|
||||||
|
});
|
||||||
20
tests/components/ct-vue-vite/tests/render/render.spec.tsx
Normal file
20
tests/components/ct-vue-vite/tests/render/render.spec.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||||
|
import Button from '@/components/Button.vue';
|
||||||
|
import EmptyTemplate from '@/components/EmptyTemplate.vue';
|
||||||
|
|
||||||
|
test('render props', async ({ mount }) => {
|
||||||
|
const component = await mount(<Button title='Submit' />);
|
||||||
|
await expect(component).toContainText('Submit');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('render attributes', async ({ mount }) => {
|
||||||
|
const component = await mount(<Button class='primary' title='Submit' />);
|
||||||
|
await expect(component).toHaveClass('primary');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('get textContent of the empty template', async ({ mount }) => {
|
||||||
|
const component = await mount(<EmptyTemplate />);
|
||||||
|
expect(await component.allTextContents()).toEqual(['']);
|
||||||
|
expect(await component.textContent()).toBe('');
|
||||||
|
await expect(component).toHaveText('');
|
||||||
|
});
|
||||||
47
tests/components/ct-vue-vite/tests/slots/slots.spec.js
Normal file
47
tests/components/ct-vue-vite/tests/slots/slots.spec.js
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||||
|
import DefaultSlot from '@/components/DefaultSlot.vue';
|
||||||
|
import NamedSlots from '@/components/NamedSlots.vue';
|
||||||
|
|
||||||
|
test('render a default slot', async ({ mount }) => {
|
||||||
|
const component = await mount(DefaultSlot, {
|
||||||
|
slots: {
|
||||||
|
default: '<strong>Main Content</strong>',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
await expect(component.getByRole('strong')).toContainText('Main Content');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('render a component as slot', async ({ mount }) => {
|
||||||
|
const component = await mount(DefaultSlot, {
|
||||||
|
slots: {
|
||||||
|
default: '<Button title="Submit" />', // component is registered globally in /playwright/index.ts
|
||||||
|
},
|
||||||
|
});
|
||||||
|
await expect(component).toContainText('Submit');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('render a component with multiple slots', async ({ mount }) => {
|
||||||
|
const component = await mount(DefaultSlot, {
|
||||||
|
slots: {
|
||||||
|
default: [
|
||||||
|
'<div data-testid="one">One</div>',
|
||||||
|
'<div data-testid="two">Two</div>',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
await expect(component.getByTestId('one')).toContainText('One');
|
||||||
|
await expect(component.getByTestId('two')).toContainText('Two');
|
||||||
|
});
|
||||||
|
|
||||||
|
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');
|
||||||
|
});
|
||||||
47
tests/components/ct-vue-vite/tests/slots/slots.spec.ts
Normal file
47
tests/components/ct-vue-vite/tests/slots/slots.spec.ts
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||||
|
import DefaultSlot from '@/components/DefaultSlot.vue';
|
||||||
|
import NamedSlots from '@/components/NamedSlots.vue';
|
||||||
|
|
||||||
|
test('render a default slot', async ({ mount }) => {
|
||||||
|
const component = await mount(DefaultSlot, {
|
||||||
|
slots: {
|
||||||
|
default: '<strong>Main Content</strong>',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
await expect(component.getByRole('strong')).toContainText('Main Content');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('render a component as slot', async ({ mount }) => {
|
||||||
|
const component = await mount(DefaultSlot, {
|
||||||
|
slots: {
|
||||||
|
default: '<Button title="Submit" />', // component is registered globally in /playwright/index.ts
|
||||||
|
},
|
||||||
|
});
|
||||||
|
await expect(component).toContainText('Submit');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('render a component with multiple slots', async ({ mount }) => {
|
||||||
|
const component = await mount(DefaultSlot, {
|
||||||
|
slots: {
|
||||||
|
default: [
|
||||||
|
'<div data-testid="one">One</div>',
|
||||||
|
'<div data-testid="two">Two</div>',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
await expect(component.getByTestId('one')).toContainText('One');
|
||||||
|
await expect(component.getByTestId('two')).toContainText('Two');
|
||||||
|
});
|
||||||
|
|
||||||
|
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');
|
||||||
|
});
|
||||||
46
tests/components/ct-vue-vite/tests/slots/slots.spec.tsx
Normal file
46
tests/components/ct-vue-vite/tests/slots/slots.spec.tsx
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||||
|
import Button from '@/components/Button.vue';
|
||||||
|
import DefaultSlot from '@/components/DefaultSlot.vue';
|
||||||
|
import NamedSlots from '@/components/NamedSlots.vue';
|
||||||
|
|
||||||
|
test('render a default slot', async ({ mount }) => {
|
||||||
|
const component = await mount(
|
||||||
|
<DefaultSlot>
|
||||||
|
<strong>Main Content</strong>
|
||||||
|
</DefaultSlot>
|
||||||
|
);
|
||||||
|
await expect(component.getByRole('strong')).toContainText('Main Content');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('render a component as slot', async ({ mount }) => {
|
||||||
|
const component = await mount(
|
||||||
|
<DefaultSlot>
|
||||||
|
<Button title="Submit" />
|
||||||
|
</DefaultSlot>
|
||||||
|
);
|
||||||
|
await expect(component).toContainText('Submit');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('render a component with multiple slots', async ({ mount }) => {
|
||||||
|
const component = await mount(
|
||||||
|
<DefaultSlot>
|
||||||
|
<div data-testid="one">One</div>
|
||||||
|
<div data-testid="two">Two</div>
|
||||||
|
</DefaultSlot>
|
||||||
|
);
|
||||||
|
await expect(component.getByTestId('one')).toContainText('One');
|
||||||
|
await expect(component.getByTestId('two')).toContainText('Two');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('render a component with a named slot', async ({ mount }) => {
|
||||||
|
const component = await mount(
|
||||||
|
<NamedSlots>
|
||||||
|
<template v-slot:header>Header</template>
|
||||||
|
<template v-slot:main>Main Content</template>
|
||||||
|
<template v-slot:footer>Footer</template>
|
||||||
|
</NamedSlots>
|
||||||
|
);
|
||||||
|
await expect(component).toContainText('Header');
|
||||||
|
await expect(component).toContainText('Main Content');
|
||||||
|
await expect(component).toContainText('Footer');
|
||||||
|
});
|
||||||
11
tests/components/ct-vue-vite/tests/unmount/unmount.spec.js
Normal file
11
tests/components/ct-vue-vite/tests/unmount/unmount.spec.js
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||||
|
import MultiRoot from '@/components/MultiRoot.vue';
|
||||||
|
|
||||||
|
test('unmount a multi root component', async ({ mount, page }) => {
|
||||||
|
const component = await mount(MultiRoot);
|
||||||
|
await expect(page.locator('#root')).toContainText('root 1');
|
||||||
|
await expect(page.locator('#root')).toContainText('root 2');
|
||||||
|
await component.unmount();
|
||||||
|
await expect(page.locator('#root')).not.toContainText('root 1');
|
||||||
|
await expect(page.locator('#root')).not.toContainText('root 2');
|
||||||
|
});
|
||||||
23
tests/components/ct-vue-vite/tests/unmount/unmount.spec.ts
Normal file
23
tests/components/ct-vue-vite/tests/unmount/unmount.spec.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||||
|
import Button from '@/components/Button.vue';
|
||||||
|
import MultiRoot from '@/components/MultiRoot.vue';
|
||||||
|
|
||||||
|
test('unmount', async ({ page, mount }) => {
|
||||||
|
const component = await mount(Button, {
|
||||||
|
props: {
|
||||||
|
title: 'Submit',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
await expect(page.locator('#root')).toContainText('Submit');
|
||||||
|
await component.unmount();
|
||||||
|
await expect(page.locator('#root')).not.toContainText('Submit');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('unmount a multi root component', async ({ mount, page }) => {
|
||||||
|
const component = await mount(MultiRoot);
|
||||||
|
await expect(page.locator('#root')).toContainText('root 1');
|
||||||
|
await expect(page.locator('#root')).toContainText('root 2');
|
||||||
|
await component.unmount();
|
||||||
|
await expect(page.locator('#root')).not.toContainText('root 1');
|
||||||
|
await expect(page.locator('#root')).not.toContainText('root 2');
|
||||||
|
});
|
||||||
11
tests/components/ct-vue-vite/tests/unmount/unmount.spec.tsx
Normal file
11
tests/components/ct-vue-vite/tests/unmount/unmount.spec.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||||
|
import MultiRoot from '@/components/MultiRoot.vue';
|
||||||
|
|
||||||
|
test('unmount a multi root component', async ({ mount, page }) => {
|
||||||
|
const component = await mount(<MultiRoot />);
|
||||||
|
await expect(page.locator('#root')).toContainText('root 1');
|
||||||
|
await expect(page.locator('#root')).toContainText('root 2');
|
||||||
|
await component.unmount();
|
||||||
|
await expect(page.locator('#root')).not.toContainText('root 1');
|
||||||
|
await expect(page.locator('#root')).not.toContainText('root 2');
|
||||||
|
});
|
||||||
47
tests/components/ct-vue-vite/tests/update/update.spec.js
Normal file
47
tests/components/ct-vue-vite/tests/update/update.spec.js
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||||
|
import Counter from '@/components/Counter.vue';
|
||||||
|
|
||||||
|
test('update props without remounting', async ({ mount }) => {
|
||||||
|
const component = await mount(Counter, {
|
||||||
|
props: { count: 9001 },
|
||||||
|
});
|
||||||
|
await expect(component.locator('#props')).toContainText('9001');
|
||||||
|
|
||||||
|
await component.update({
|
||||||
|
props: { count: 1337 },
|
||||||
|
});
|
||||||
|
await expect(component).not.toContainText('9001');
|
||||||
|
await expect(component.locator('#props')).toContainText('1337');
|
||||||
|
|
||||||
|
await expect(component.locator('#remount-count')).toContainText('1');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('update event listeners without remounting', async ({ mount }) => {
|
||||||
|
const component = await mount(Counter);
|
||||||
|
|
||||||
|
const messages = [];
|
||||||
|
await component.update({
|
||||||
|
on: {
|
||||||
|
submit: (count) => messages.push(count),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
await component.click();
|
||||||
|
expect(messages).toEqual(['hello']);
|
||||||
|
|
||||||
|
await expect(component.locator('#remount-count')).toContainText('1');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('update slots without remounting', async ({ mount }) => {
|
||||||
|
const component = await mount(Counter, {
|
||||||
|
slots: { default: 'Default Slot' },
|
||||||
|
});
|
||||||
|
await expect(component).toContainText('Default Slot');
|
||||||
|
|
||||||
|
await component.update({
|
||||||
|
slots: { main: 'Test Slot' },
|
||||||
|
});
|
||||||
|
await expect(component).not.toContainText('Default Slot');
|
||||||
|
await expect(component).toContainText('Test Slot');
|
||||||
|
|
||||||
|
await expect(component.locator('#remount-count')).toContainText('1');
|
||||||
|
});
|
||||||
47
tests/components/ct-vue-vite/tests/update/update.spec.ts
Normal file
47
tests/components/ct-vue-vite/tests/update/update.spec.ts
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||||
|
import Counter from '@/components/Counter.vue';
|
||||||
|
|
||||||
|
test('update props without remounting', async ({ mount }) => {
|
||||||
|
const component = await mount(Counter, {
|
||||||
|
props: { count: 9001 },
|
||||||
|
});
|
||||||
|
await expect(component.locator('#props')).toContainText('9001');
|
||||||
|
|
||||||
|
await component.update({
|
||||||
|
props: { count: 1337 },
|
||||||
|
});
|
||||||
|
await expect(component).not.toContainText('9001');
|
||||||
|
await expect(component.locator('#props')).toContainText('1337');
|
||||||
|
|
||||||
|
await expect(component.locator('#remount-count')).toContainText('1');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('update event listeners without remounting', async ({ mount }) => {
|
||||||
|
const component = await mount(Counter);
|
||||||
|
|
||||||
|
const messages: string[] = [];
|
||||||
|
await component.update({
|
||||||
|
on: {
|
||||||
|
submit: (count: string) => messages.push(count),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
await component.click();
|
||||||
|
expect(messages).toEqual(['hello']);
|
||||||
|
|
||||||
|
await expect(component.locator('#remount-count')).toContainText('1');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('update slots without remounting', async ({ mount }) => {
|
||||||
|
const component = await mount(Counter, {
|
||||||
|
slots: { default: 'Default Slot' },
|
||||||
|
});
|
||||||
|
await expect(component).toContainText('Default Slot');
|
||||||
|
|
||||||
|
await component.update({
|
||||||
|
slots: { main: 'Test Slot' },
|
||||||
|
});
|
||||||
|
await expect(component).not.toContainText('Default Slot');
|
||||||
|
await expect(component).toContainText('Test Slot');
|
||||||
|
|
||||||
|
await expect(component.locator('#remount-count')).toContainText('1');
|
||||||
|
});
|
||||||
45
tests/components/ct-vue-vite/tests/update/update.spec.tsx
Normal file
45
tests/components/ct-vue-vite/tests/update/update.spec.tsx
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||||
|
import Counter from '@/components/Counter.vue';
|
||||||
|
|
||||||
|
test('update props without remounting', async ({ mount }) => {
|
||||||
|
const component = await mount(<Counter count={9001} />);
|
||||||
|
await expect(component.locator('#props')).toContainText('9001');
|
||||||
|
|
||||||
|
await component.update(<Counter count={1337} />);
|
||||||
|
await expect(component).not.toContainText('9001');
|
||||||
|
await expect(component.locator('#props')).toContainText('1337');
|
||||||
|
|
||||||
|
await expect(component.locator('#remount-count')).toContainText('1');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('update event listeners without remounting', async ({ mount }) => {
|
||||||
|
const component = await mount(<Counter />);
|
||||||
|
|
||||||
|
const messages: string[] = [];
|
||||||
|
await component.update(
|
||||||
|
<Counter
|
||||||
|
v-on:submit={(count: string) => {
|
||||||
|
messages.push(count);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
await component.click();
|
||||||
|
expect(messages).toEqual(['hello']);
|
||||||
|
|
||||||
|
await expect(component.locator('#remount-count')).toContainText('1');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('update slots without remounting', async ({ mount }) => {
|
||||||
|
const component = await mount(<Counter>Default Slot</Counter>);
|
||||||
|
await expect(component).toContainText('Default Slot');
|
||||||
|
|
||||||
|
await component.update(
|
||||||
|
<Counter>
|
||||||
|
<template v-slot:main>Test Slot</template>
|
||||||
|
</Counter>
|
||||||
|
);
|
||||||
|
await expect(component).not.toContainText('Default Slot');
|
||||||
|
await expect(component).toContainText('Test Slot');
|
||||||
|
|
||||||
|
await expect(component.locator('#remount-count')).toContainText('1');
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||||
|
import App from '@/App.vue';
|
||||||
|
|
||||||
|
test('navigate to a page by clicking a link', async ({ page, mount }) => {
|
||||||
|
const component = await mount(App, {
|
||||||
|
hooksConfig: { routing: true },
|
||||||
|
});
|
||||||
|
await expect(component.getByRole('main')).toHaveText('Login');
|
||||||
|
await expect(page).toHaveURL('/');
|
||||||
|
await component.getByRole('link', { name: 'Dashboard' }).click();
|
||||||
|
await expect(component.getByRole('main')).toHaveText('Dashboard');
|
||||||
|
await expect(page).toHaveURL('/dashboard');
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||||
|
import type { HooksConfig } from '../../playwright';
|
||||||
|
import App from '@/App.vue';
|
||||||
|
|
||||||
|
test('navigate to a page by clicking a link', async ({ page, mount }) => {
|
||||||
|
const component = await mount<HooksConfig>(App, {
|
||||||
|
hooksConfig: { routing: true },
|
||||||
|
});
|
||||||
|
await expect(component.getByRole('main')).toHaveText('Login');
|
||||||
|
await expect(page).toHaveURL('/');
|
||||||
|
await component.getByRole('link', { name: 'Dashboard' }).click();
|
||||||
|
await expect(component.getByRole('main')).toHaveText('Dashboard');
|
||||||
|
await expect(page).toHaveURL('/dashboard');
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||||
|
import type { HooksConfig } from '../../playwright';
|
||||||
|
import App from '@/App.vue';
|
||||||
|
|
||||||
|
test('navigate to a page by clicking a link', async ({ page, mount }) => {
|
||||||
|
const component = await mount<HooksConfig>(<App />, {
|
||||||
|
hooksConfig: { routing: true },
|
||||||
|
});
|
||||||
|
await expect(component.getByRole('main')).toHaveText('Login');
|
||||||
|
await expect(page).toHaveURL('/');
|
||||||
|
await component.getByRole('link', { name: 'Dashboard' }).click();
|
||||||
|
await expect(component.getByRole('main')).toHaveText('Dashboard');
|
||||||
|
await expect(page).toHaveURL('/dashboard');
|
||||||
|
});
|
||||||
Loading…
Reference in a new issue