microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-01-05 19:04:43 +03:00
Code Issues 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 { router } from '../src/router';
import Button from '../src/components/Button.vue';
import '../src/assets/index.css';
export type HooksConfig = {
@ -10,6 +11,7 @@ export type HooksConfig = {
beforeMount<HooksConfig>(async ({ app, hooksConfig }) => {
if (hooksConfig?.routing)
app.use(router);
app.component('Button', Button);
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 }) => {
const component = await mount(DefaultSlot, {
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 }) => {
const component = await mount(DefaultSlot, {
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).toContainText('two');
await expect(component.getByTestId('one')).toContainText('One');
await expect(component.getByTestId('two')).toContainText('Two');
});
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';
test('render a default slot', async ({ mount }) => {
const component = await mount(<DefaultSlot>Main Content</DefaultSlot>);
await expect(component).toContainText('Main Content');
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 }) => {
@ -17,15 +21,15 @@ test('render a component as slot', async ({ mount }) => {
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(
<DefaultSlot>
<div id="one">One</div>
<div id="two">Two</div>
<div data-testid="one">One</div>
<div data-testid="two">Two</div>
</DefaultSlot>
);
await expect(component.locator('#one')).toContainText('One');
await expect(component.locator('#two')).toContainText('Two');
await expect(component.getByTestId('one')).toContainText('One');
await expect(component.getByTestId('two')).toContainText('Two');
});
test('render a component with a named slot', async ({ mount }) => {