yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

test(ct): vue cli slot tests (#21028)

Browse Source
This commit is contained in:
Sander 2023-02-27 21:53:44 +01:00 committed by GitHub
parent eba86fcc53
commit 0cd39cf002
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tests/components/ct-vue-cli/playwright/index.ts
View File

@ -1,5 +1,6 @@
import { beforeMount, afterMount } from '@playwright/experimental-ct-vue/hooks'; import { beforeMount, afterMount } from '@playwright/experimental-ct-vue/hooks';
import { router } from '../src/router'; import { router } from '../src/router';
import Button from '../src/components/Button.vue';
import '../src/assets/index.css'; import '../src/assets/index.css';
export type HooksConfig = { export type HooksConfig = {
@ -10,6 +11,7 @@ export type HooksConfig = {
beforeMount<HooksConfig>(async ({ app, hooksConfig }) => { beforeMount<HooksConfig>(async ({ app, hooksConfig }) => {
if (hooksConfig?.routing) if (hooksConfig?.routing)
app.use(router); app.use(router);
app.component('Button', Button);
console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`); console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`);
}); });

22
tests/components/ct-vue-cli/tests/slots/slots.spec.ts
View File

@ -5,20 +5,32 @@ import NamedSlots from '@/components/NamedSlots.vue';
test('render a default slot', async ({ mount }) => { test('render a default slot', async ({ mount }) => {
const component = await mount(DefaultSlot, { const component = await mount(DefaultSlot, {
slots: { slots: {
default: 'Main Content', default: '<strong>Main Content</strong>',
}, },
}); });
await expect(component).toContainText('Main Content'); 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 }) => { test('render a component with multiple slots', async ({ mount }) => {
const component = await mount(DefaultSlot, { const component = await mount(DefaultSlot, {
slots: { slots: {
default: ['one', 'two'], default: [
'<div data-testid="one">One</div>',
'<div data-testid="two">Two</div>',
],
}, },
}); });
await expect(component).toContainText('one'); await expect(component.getByTestId('one')).toContainText('One');
await expect(component).toContainText('two'); await expect(component.getByTestId('two')).toContainText('Two');
}); });
test('render a component with a named slot', async ({ mount }) => { test('render a component with a named slot', async ({ mount }) => {

18
tests/components/ct-vue-cli/tests/slots/slots.spec.tsx
View File

@ -4,8 +4,12 @@ import DefaultSlot from '@/components/DefaultSlot.vue';
import NamedSlots from '@/components/NamedSlots.vue'; import NamedSlots from '@/components/NamedSlots.vue';
test('render a default slot', async ({ mount }) => { test('render a default slot', async ({ mount }) => {
const component = await mount(<DefaultSlot>Main Content</DefaultSlot>); const component = await mount(
await expect(component).toContainText('Main Content'); <DefaultSlot>
<strong>Main Content</strong>
</DefaultSlot>
);
await expect(component.getByRole('strong')).toContainText('Main Content');
}); });
test('render a component as slot', async ({ mount }) => { test('render a component as slot', async ({ mount }) => {
@ -17,15 +21,15 @@ test('render a component as slot', async ({ mount }) => {
await expect(component).toContainText('Submit'); await expect(component).toContainText('Submit');
}); });
test('render a component with multiple children', async ({ mount }) => { test('render a component with multiple slots', async ({ mount }) => {
const component = await mount( const component = await mount(
<DefaultSlot> <DefaultSlot>
<div id="one">One</div> <div data-testid="one">One</div>
<div id="two">Two</div> <div data-testid="two">Two</div>
</DefaultSlot> </DefaultSlot>
); );
await expect(component.locator('#one')).toContainText('One'); await expect(component.getByTestId('one')).toContainText('One');
await expect(component.locator('#two')).toContainText('Two'); await expect(component.getByTestId('two')).toContainText('Two');
}); });
test('render a component with a named slot', async ({ mount }) => { test('render a component with a named slot', async ({ mount }) => {