mirror of https://github.com/vuejs/core.git
wip: add tests
This commit is contained in:
daiwei
parent
6e7c5e3d25
commit
26d1d21a87
|
|
@ -55,11 +55,11 @@ describe('vapor transition', () => {
|
|||
) =>
|
||||
page().waitForFunction(
|
||||
(sel, expectedText, expectedClasses) => {
|
||||
const el = document.querySelector(sel)!
|
||||
const el = document.querySelector(sel)
|
||||
const hasClasses =
|
||||
expectedClasses.length === 0
|
||||
? el.classList.length === 0
|
||||
: expectedClasses.every(c => el.classList.contains(c))
|
||||
? el?.classList.length === 0
|
||||
: expectedClasses.every(c => el?.classList.contains(c))
|
||||
const hasText = el?.textContent?.includes(expectedText)
|
||||
return !!el && hasClasses && hasText
|
||||
},
|
||||
|
|
@ -120,9 +120,9 @@ describe('vapor transition', () => {
|
|||
expect(await classList(containerSelector)).contains('v-enter-active')
|
||||
expect(await text(containerSelector)).toContain('vIf')
|
||||
await transitionFinish()
|
||||
await nextFrame()
|
||||
|
||||
// leave
|
||||
await nextFrame()
|
||||
expect(
|
||||
(await transitionStart(btnSelector, containerSelector)).classNames,
|
||||
).toStrictEqual(['v-leave-from', 'v-leave-active'])
|
||||
|
|
@ -134,7 +134,6 @@ describe('vapor transition', () => {
|
|||
])
|
||||
|
||||
await transitionFinish()
|
||||
await nextFrame()
|
||||
expect(await count(containerSelector)).toBe(0)
|
||||
|
||||
// enter
|
||||
|
|
@ -151,6 +150,22 @@ describe('vapor transition', () => {
|
|||
await transitionFinish()
|
||||
await nextFrame()
|
||||
expect(await isVisible(containerSelector)).toBe(true)
|
||||
|
||||
const calls = await page().evaluate(() => {
|
||||
return (window as any).calls
|
||||
})
|
||||
|
||||
expect(calls).toStrictEqual([
|
||||
'beforeAppear',
|
||||
'onEnter',
|
||||
'afterAppear',
|
||||
'beforeLeave',
|
||||
'onLeave',
|
||||
'afterLeave',
|
||||
'beforeEnter',
|
||||
'onEnter',
|
||||
'afterEnter',
|
||||
])
|
||||
},
|
||||
E2E_TIMEOUT,
|
||||
)
|
||||
|
|
@ -303,14 +318,182 @@ describe('vapor transition', () => {
|
|||
E2E_TIMEOUT,
|
||||
)
|
||||
|
||||
test.todo('transition hooks', async () => {}, E2E_TIMEOUT)
|
||||
|
||||
// tests for using vdom component in createVaporApp + vaporInteropPlugin
|
||||
describe('interop', () => {
|
||||
test.todo('interop: render vdom component', async () => {}, E2E_TIMEOUT)
|
||||
test(
|
||||
'render vdom component',
|
||||
async () => {
|
||||
const btnSelector = '.vdom > button'
|
||||
const containerSelector = '.vdom > div'
|
||||
|
||||
test.todo(
|
||||
'interop: switch between vdom/vapor component',
|
||||
async () => {},
|
||||
expect(await html(containerSelector)).toBe(`<div>vdom comp</div>`)
|
||||
|
||||
// comp leave
|
||||
expect(
|
||||
(await transitionStart(btnSelector, containerSelector)).innerHTML,
|
||||
).toBe(`<div class="v-leave-from v-leave-active">vdom comp</div>`)
|
||||
|
||||
await nextFrame()
|
||||
expect(await html(containerSelector)).toBe(
|
||||
`<div class="v-leave-active v-leave-to">vdom comp</div>`,
|
||||
)
|
||||
|
||||
await transitionFinish()
|
||||
expect(await html(containerSelector)).toBe(``)
|
||||
|
||||
// comp enter
|
||||
expect(
|
||||
(await transitionStart(btnSelector, containerSelector)).innerHTML,
|
||||
).toBe(`<div class="v-enter-from v-enter-active">vdom comp</div>`)
|
||||
|
||||
await nextFrame()
|
||||
expect(await html(containerSelector)).toBe(
|
||||
`<div class="v-enter-active v-enter-to">vdom comp</div>`,
|
||||
)
|
||||
|
||||
await transitionFinish()
|
||||
expect(await html(containerSelector)).toBe(
|
||||
`<div class="">vdom comp</div>`,
|
||||
)
|
||||
},
|
||||
E2E_TIMEOUT,
|
||||
)
|
||||
|
||||
test(
|
||||
'switch between vdom/vapor component (out-in mode)',
|
||||
async () => {
|
||||
const btnSelector = '.vdom-vapor-out-in > button'
|
||||
const containerSelector = '.vdom-vapor-out-in > div'
|
||||
const childSelector = `${containerSelector} > div`
|
||||
|
||||
expect(await html(containerSelector)).toBe(`<div>vdom comp</div>`)
|
||||
|
||||
// switch to vapor comp
|
||||
// vdom comp leave
|
||||
expect(
|
||||
(await transitionStart(btnSelector, containerSelector)).innerHTML,
|
||||
).toBe(`<div class="fade-leave-from fade-leave-active">vdom comp</div>`)
|
||||
|
||||
await nextFrame()
|
||||
expect(await html(containerSelector)).toBe(
|
||||
`<div class="fade-leave-active fade-leave-to">vdom comp</div>`,
|
||||
)
|
||||
|
||||
// vapor comp enter
|
||||
await waitForElement(childSelector, 'vapor compA', [
|
||||
'fade-enter-from',
|
||||
'fade-enter-active',
|
||||
])
|
||||
|
||||
await nextFrame()
|
||||
expect(await html(containerSelector)).toBe(
|
||||
`<div class="fade-enter-active fade-enter-to">vapor compA</div>`,
|
||||
)
|
||||
|
||||
await transitionFinish()
|
||||
expect(await html(containerSelector)).toBe(
|
||||
`<div class="">vapor compA</div>`,
|
||||
)
|
||||
|
||||
// switch to vdom comp
|
||||
// vapor comp leave
|
||||
expect(
|
||||
(await transitionStart(btnSelector, containerSelector)).innerHTML,
|
||||
).toBe(
|
||||
`<div class="fade-leave-from fade-leave-active">vapor compA</div>`,
|
||||
)
|
||||
|
||||
await nextFrame()
|
||||
expect(await html(containerSelector)).toBe(
|
||||
`<div class="fade-leave-active fade-leave-to">vapor compA</div>`,
|
||||
)
|
||||
|
||||
// vdom comp enter
|
||||
await waitForElement(childSelector, 'vdom comp', [
|
||||
'fade-enter-from',
|
||||
'fade-enter-active',
|
||||
])
|
||||
|
||||
await nextFrame()
|
||||
expect(await html(containerSelector)).toBe(
|
||||
`<div class="fade-enter-active fade-enter-to">vdom comp</div>`,
|
||||
)
|
||||
|
||||
await transitionFinish()
|
||||
expect(await html(containerSelector)).toBe(
|
||||
`<div class="">vdom comp</div>`,
|
||||
)
|
||||
},
|
||||
E2E_TIMEOUT,
|
||||
)
|
||||
|
||||
test(
|
||||
'switch between vdom/vapor component (in-out mode)',
|
||||
async () => {
|
||||
const btnSelector = '.vdom-vapor-in-out > button'
|
||||
const containerSelector = '.vdom-vapor-in-out > div'
|
||||
const childSelector = `${containerSelector} > div`
|
||||
|
||||
expect(await html(containerSelector)).toBe(`<div>vapor compA</div>`)
|
||||
|
||||
// switch to vdom comp
|
||||
// vdom comp enter
|
||||
expect(
|
||||
(await transitionStart(btnSelector, containerSelector)).innerHTML,
|
||||
).toBe(
|
||||
`<div>vapor compA</div><div class="fade-enter-from fade-enter-active">vdom comp</div>`,
|
||||
)
|
||||
|
||||
await nextFrame()
|
||||
expect(await html(containerSelector)).toBe(
|
||||
`<div>vapor compA</div><div class="fade-enter-active fade-enter-to">vdom comp</div>`,
|
||||
)
|
||||
|
||||
// vapor comp leave
|
||||
await waitForElement(childSelector, 'vapor compA', [
|
||||
'fade-leave-from',
|
||||
'fade-leave-active',
|
||||
])
|
||||
|
||||
await nextFrame()
|
||||
expect(await html(containerSelector)).toBe(
|
||||
`<div class="fade-leave-active fade-leave-to">vapor compA</div><div class="">vdom comp</div>`,
|
||||
)
|
||||
|
||||
await transitionFinish()
|
||||
expect(await html(containerSelector)).toBe(
|
||||
`<div class="">vdom comp</div>`,
|
||||
)
|
||||
|
||||
// switch to vapor comp
|
||||
// vapor comp enter
|
||||
expect(
|
||||
(await transitionStart(btnSelector, containerSelector)).innerHTML,
|
||||
).toBe(
|
||||
`<div class="">vdom comp</div><div class="fade-enter-from fade-enter-active">vapor compA</div>`,
|
||||
)
|
||||
|
||||
await nextFrame()
|
||||
expect(await html(containerSelector)).toBe(
|
||||
`<div class="">vdom comp</div><div class="fade-enter-active fade-enter-to">vapor compA</div>`,
|
||||
)
|
||||
|
||||
// vdom comp leave
|
||||
await waitForElement(childSelector, 'vdom comp', [
|
||||
'fade-leave-from',
|
||||
'fade-leave-active',
|
||||
])
|
||||
|
||||
await nextFrame()
|
||||
expect(await html(containerSelector)).toBe(
|
||||
`<div class="fade-leave-active fade-leave-to">vdom comp</div><div class="">vapor compA</div>`,
|
||||
)
|
||||
|
||||
await transitionFinish()
|
||||
expect(await html(containerSelector)).toBe(
|
||||
`<div class="">vapor compA</div>`,
|
||||
)
|
||||
},
|
||||
E2E_TIMEOUT,
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@ const show = ref(true)
|
|||
const toggle = ref(true)
|
||||
const count = ref(0)
|
||||
|
||||
const calls = []
|
||||
window.calls = calls
|
||||
|
||||
import VaporCompA from './components/VaporCompA.vue'
|
||||
import VaporCompB from './components/VaporCompB.vue'
|
||||
const activeComponent = shallowRef(VaporCompB)
|
||||
|
|
@ -11,6 +14,15 @@ function toggleComponent() {
|
|||
activeComponent.value =
|
||||
activeComponent.value === VaporCompA ? VaporCompB : VaporCompA
|
||||
}
|
||||
|
||||
const toggleVdom = ref(true)
|
||||
import VDomComp from './components/VdomComp.vue'
|
||||
|
||||
const interopComponent = shallowRef(VDomComp)
|
||||
function toggleInteropComponent() {
|
||||
interopComponent.value =
|
||||
interopComponent.value === VaporCompA ? VDomComp : VaporCompA
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -22,7 +34,11 @@ function toggleComponent() {
|
|||
</div>
|
||||
<div class="vif">
|
||||
<button @click="toggle = !toggle">Toggle</button>
|
||||
<Transition appear>
|
||||
<Transition appear @beforeEnter="() => calls.push('beforeEnter')" @enter="() => calls.push('onEnter')"
|
||||
@afterEnter="() => calls.push('afterEnter')" @beforeLeave="() => calls.push('beforeLeave')"
|
||||
@leave="() => calls.push('onLeave')" @afterLeave="() => calls.push('afterLeave')"
|
||||
@beforeAppear="() => calls.push('beforeAppear')" @appear="() => calls.push('onAppear')"
|
||||
@afterAppear="() => calls.push('afterAppear')">
|
||||
<h1 v-if="toggle">vIf</h1>
|
||||
</Transition>
|
||||
</div>
|
||||
|
|
@ -48,6 +64,31 @@ function toggleComponent() {
|
|||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vdom">
|
||||
<button @click="toggleVdom = !toggleVdom">toggle vdom component</button>
|
||||
<div>
|
||||
<Transition>
|
||||
<VDomComp v-if="toggleVdom" />
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vdom-vapor-out-in">
|
||||
<button @click="toggleInteropComponent">switch between vdom/vapor component out-in mode</button>
|
||||
<div>
|
||||
<Transition name="fade" mode="out-in">
|
||||
<component :is="interopComponent"></component>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vdom-vapor-in-out">
|
||||
<button @click="toggleVdom = !toggleVdom">switch between vdom/vapor component in-out mode</button>
|
||||
<div>
|
||||
<Transition name="fade" mode="in-out">
|
||||
<VaporCompA v-if="toggleVdom" />
|
||||
<VDomComp v-else></VDomComp>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.keyed {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
<script setup>
|
||||
const msg = 'vdom comp'
|
||||
</script>
|
||||
<template>
|
||||
<div>{{ msg }}</div>
|
||||
</template>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { createVaporApp } from 'vue'
|
||||
import { createVaporApp, vaporInteropPlugin } from 'vue'
|
||||
import App from './App.vue'
|
||||
import './style.css'
|
||||
|
||||
createVaporApp(App).mount('#app')
|
||||
createVaporApp(App).use(vaporInteropPlugin).mount('#app')
|
||||
|
|
|
|||
Loading…
Reference in New Issue