Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

test(ct): vue2 slice by feature (#20080)

Browse source
This commit is contained in:
Sander 2023-01-12 19:46:15 +01:00 committed by GitHub
parent 862125e122
commit 4a038b726d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 326 additions and 330 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
tests/components/ct-vue2-cli/playwright.config.ts
View file

@ -15,14 +15,22 @@
*/
import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-vue2';
import { resolve } from 'path';
const config: PlaywrightTestConfig = {
testDir: 'src',
testDir: 'tests',
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
reporter: 'html',
use: {
trace: 'on-first-retry',
ctViteConfig: {
resolve: {
alias: {
'@': resolve(__dirname, './src'),
}
}
}
},
projects: [
{

2
tests/components/ct-vue2-cli/playwright/index.html
View file

@ -7,6 +7,6 @@
</head>
<body>
<div id="root"></div>
<script type="module" src="./index.ts"></script>
<script type="module" src="./index.js"></script>
</body>
</html>

11
tests/components/ct-vue2-cli/playwright/index.ts → tests/components/ct-vue2-cli/playwright/index.js
View file

@ -3,20 +3,15 @@ import Router from 'vue-router';
import { router } from '../src/router';
import '../src/assets/index.css';
export type HooksConfig = {
route?: string;
routing?: boolean;
}
beforeMount<HooksConfig>(async ({ Vue, hooksConfig }) => {
beforeMount(async ({ Vue, hooksConfig }) => {
console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
if (hooksConfig?.routing) {
Vue.use(Router as any); // TODO: remove any and fix the various installed conflicting Vue versions
Vue.use(Router);
return { router }
}
});
afterMount<HooksConfig>(async ({ instance }) => {
afterMount(async ({ instance }) => {
console.log(`After mount el: ${instance.$el.constructor.name}`);
});

154
tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx
View file

@ -1,154 +0,0 @@
import { test, expect } from '@playwright/experimental-ct-vue2'
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 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 messages: string[] = []
const component = await mount(<Counter />)
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>
Main Content
</DefaultSlot>)
await expect(component).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 id="one">One</div>
<div id="two">Two</div>
</DefaultSlot>)
await expect(component.locator('#one')).toContainText('One')
await expect(component.locator('#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\"}', 'After mount el: HTMLButtonElement'])
})
test('unmount', async ({ page, mount }) => {
const component = await mount(<Button title="Submit" />)
await expect(page.locator('#root')).toContainText('Submit')
await component.unmount();
await expect(page.locator('#root')).not.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('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');
});

163
tests/components/ct-vue2-cli/src/notation-vue.spec.ts
View file

@ -1,163 +0,0 @@
import { test, expect } from '@playwright/experimental-ct-vue2';
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 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 ({ page, 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 component.update({
slots: { default: 'Default Slot' }
})
await expect(component).toContainText('Default 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: 'Main Content'
}
})
await expect(component).toContainText('Main Content')
})
test('render a component with multiple slots', async ({ mount }) => {
const component = await mount(DefaultSlot, {
slots: {
default: ['one', 'two']
}
})
await expect(component).toContainText('one')
await expect(component).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\"}', '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('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');
});

16
tests/components/ct-vue2-cli/tests/events/events.spec.ts Normal file
View file

@ -0,0 +1,16 @@
import { test, expect } from '@playwright/experimental-ct-vue2';
import Button from '@/components/Button.vue';
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']);
});

28
tests/components/ct-vue2-cli/tests/events/events.spec.tsx Normal file
View file

@ -0,0 +1,28 @@
import { test, expect } from '@playwright/experimental-ct-vue2';
import Button from '@/components/Button.vue';
import DefaultSlot from '@/components/DefaultSlot.vue';
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('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-vue2-cli/tests/render/render.spec.ts Normal file
View file

@ -0,0 +1,25 @@
import { test, expect } from '@playwright/experimental-ct-vue2';
import Button from '@/components/Button.vue';
import Component from '@/components/Component.vue';
import EmptyTemplate from '@/components/EmptyTemplate.vue';
test('render props', async ({ mount }) => {
const component = await mount(Button, {
props: {
title: 'Submit',
},
});
await expect(component).toContainText('Submit');
});
test('render a component without options', async ({ mount }) => {
const component = await mount(Component);
await expect(component).toContainText('test');
});
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('');
});

20
tests/components/ct-vue2-cli/tests/render/render.spec.tsx Normal file
View file

@ -0,0 +1,20 @@
import { test, expect } from '@playwright/experimental-ct-vue2';
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('');
});

35
tests/components/ct-vue2-cli/tests/slots/slots.spec.ts Normal file
View file

@ -0,0 +1,35 @@
import { test, expect } from '@playwright/experimental-ct-vue2';
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: 'Main Content',
},
});
await expect(component).toContainText('Main Content');
});
test('render a component with multiple slots', async ({ mount }) => {
const component = await mount(DefaultSlot, {
slots: {
default: ['one', 'two'],
},
});
await expect(component).toContainText('one');
await expect(component).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');
});

42
tests/components/ct-vue2-cli/tests/slots/slots.spec.tsx Normal file
View file

@ -0,0 +1,42 @@
import { test, expect } from '@playwright/experimental-ct-vue2';
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>Main Content</DefaultSlot>);
await expect(component).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 id="one">One</div>
<div id="two">Two</div>
</DefaultSlot>
);
await expect(component.locator('#one')).toContainText('One');
await expect(component.locator('#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');
});

13
tests/components/ct-vue2-cli/tests/unmount/unmount.spec.ts Normal file
View file

@ -0,0 +1,13 @@
import { test, expect } from '@playwright/experimental-ct-vue2';
import Button from '@/components/Button.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');
});

9
tests/components/ct-vue2-cli/tests/unmount/unmount.spec.tsx Normal file
View file

@ -0,0 +1,9 @@
import { test, expect } from '@playwright/experimental-ct-vue2';
import Button from '@/components/Button.vue';
test('unmount', async ({ page, mount }) => {
const component = await mount(<Button title="Submit" />);
await expect(page.locator('#root')).toContainText('Submit');
await component.unmount();
await expect(page.locator('#root')).not.toContainText('Submit');
});

52
tests/components/ct-vue2-cli/tests/update/update.spec.ts Normal file
View file

@ -0,0 +1,52 @@
import { test, expect } from '@playwright/experimental-ct-vue2';
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: (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 component.update({
slots: { default: 'Default Slot' },
});
await expect(component).toContainText('Default Slot');
await expect(component.locator('#remount-count')).toContainText('1');
});

45
tests/components/ct-vue2-cli/tests/update/update.spec.tsx Normal file
View file

@ -0,0 +1,45 @@
import { test, expect } from '@playwright/experimental-ct-vue2';
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 messages: string[] = [];
const component = await mount(<Counter />);
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');
});

13
tests/components/ct-vue2-cli/tests/vue-router/vue-router.spec.ts Normal file
View file

@ -0,0 +1,13 @@
import { test, expect } from '@playwright/experimental-ct-vue2';
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');
});

13
tests/components/ct-vue2-cli/tests/vue-router/vue-router.spec.tsx Normal file
View file

@ -0,0 +1,13 @@
import { test, expect } from '@playwright/experimental-ct-vue2';
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');
});

3
tests/components/ct-vue2-cli/tsconfig.app.json
View file

@ -1,12 +1,11 @@
{
"extends": "@vue/tsconfig/tsconfig.web.json",
"include": ["src/**/*", "src/**/*.vue"],
"exclude": ["src/**/*.spec.*/*"],
"compilerOptions": {
"composite": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
"@/*": ["./src/*"]
}
}
}

2
tests/components/ct-vue2-cli/tsconfig.test.json
View file

@ -1,6 +1,6 @@
{
"extends": "./tsconfig.app.json",
"include": ["playwright", "src/**/*"],
"include": ["tests/**/*", "src/shims-vue.d.ts"],
"compilerOptions": {
"allowJs": true,
"composite": true,