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

test(ct): vue cli (#16694)

Browse source
This commit is contained in:
sand4rt 2022-08-23 20:35:43 +02:00 committed by GitHub
parent 6d1a7f3315
commit 31a47d4273
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 140 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
tests/components/ct-vue-cli/playwright/index.js
View file

@ -0,0 +1,11 @@
//@ts-check
import { beforeMount, afterMount } from '@playwright/experimental-ct-vue/hooks';
beforeMount(async ({ app, hooksConfig }) => {
console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`);
});
afterMount(async ({ instance }) => {
console.log(`After mount el: ${instance.$el.constructor.name}`);
});

3
tests/components/ct-vue-cli/src/components/Button.vue
View file

@ -3,9 +3,6 @@ defineProps({
title: {
type: String,
required: true
},
emits: {
submit: null,
}
})
</script>

3
tests/components/ct-vue-cli/src/components/Component.vue Normal file
View file

@ -0,0 +1,3 @@
<template>
<div>test</div>
</template>

21
tests/components/ct-vue-cli/src/components/Counter.vue Normal file
View file

@ -0,0 +1,21 @@
<template>
<div>
<span id="remount-count">{{ remountCount }}</span>
<span id="rerender-count">{{ count }}</span>
</div>
</template>
<script>
let remountCount = 0
</script>
<script setup>
defineProps({
count: {
type: Number,
required: true
}
})
remountCount++
</script>

4
tests/components/ct-vue-cli/src/components/MultiRoot.vue Normal file
View file

@ -0,0 +1,4 @@
<template>
<div>root 1</div>
<div>root 2</div>
</template>

1
tests/components/ct-vue-cli/src/components/NamedSlots.vue
View file

@ -3,7 +3,6 @@
<header>
<slot name="header" />
</header>
<main>
<slot name="main" />
</main>

46
tests/components/ct-vue-cli/src/notation-jsx.spec.tsx
View file

@ -1,15 +1,30 @@
import { test, expect } from '@playwright/experimental-ct-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'
test.use({ viewport: { width: 500, height: 500 } })
test('props should work', async ({ mount }) => {
const component = await mount(<Button title='Submit'></Button>)
const component = await mount(<Button title="Submit" />)
await expect(component).toContainText('Submit')
})
test('renderer and keep the component instance intact', async ({ mount }) => {
const component = await mount(<Counter count={9001} />);
await expect(component.locator('#rerender-count')).toContainText('9001')
await component.rerender({ props: { count: 1337 } })
await expect(component.locator('#rerender-count')).toContainText('1337')
await component.rerender({ props: { count: 42 } })
await expect(component.locator('#rerender-count')).toContainText('42')
await expect(component.locator('#remount-count')).toContainText('1')
})
test('event should work', async ({ mount }) => {
const messages = []
const component = await mount(<Button title='Submit' v-on:submit={data => {
@ -19,7 +34,7 @@ test('event should work', async ({ mount }) => {
expect(messages).toEqual(['hello'])
})
test('default slot should work', async ({ mount }) => {
test('default slot should work', async ({ mount }) => {
const component = await mount(<DefaultSlot>
Main Content
</DefaultSlot>)
@ -51,3 +66,30 @@ test('named slots should work', async ({ mount }) => {
await expect(component).toContainText('Main Content')
await expect(component).toContainText('Footer')
})
test('slot should emit events', 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('should run hooks', async ({ page, mount }) => {
const messages = []
page.on('console', m => messages.push(m.text()))
await mount(<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 should work', 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')
})

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

@ -1,8 +1,11 @@
import { test, expect } from '@playwright/experimental-ct-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'
test.use({ viewport: { width: 500, height: 500 } })
@ -15,6 +18,23 @@ test('props should work', async ({ mount }) => {
await expect(component).toContainText('Submit')
})
test('renderer and keep the component instance intact', async ({ mount }) => {
const component = await mount<{ count: number }>(Counter, {
props: {
count: 9001
}
});
await expect(component.locator('#rerender-count')).toContainText('9001')
await component.rerender({ props: { count: 1337 } })
await expect(component.locator('#rerender-count')).toContainText('1337')
await component.rerender({ props: { count: 42 } })
await expect(component.locator('#rerender-count')).toContainText('42')
await expect(component.locator('#remount-count')).toContainText('1')
})
test('event should work', async ({ mount }) => {
const messages = []
const component = await mount(Button, {
@ -60,3 +80,40 @@ test('named slots should work', async ({ mount }) => {
await expect(component).toContainText('Main Content')
await expect(component).toContainText('Footer')
})
test('optionless should work', async ({ mount }) => {
const component = await mount(Component)
await expect(component).toContainText('test')
})
test('should 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('should 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 should work', 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')
})