import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils' import path from 'path' import { mockWarn } from '@vue/shared' import { createApp, ref } from 'vue' describe('e2e: TransitionGroup', () => { mockWarn() const { page, html, nextFrame, timeout } = setupPuppeteer() const baseUrl = `file://${path.resolve(__dirname, './transition.html')}` const duration = 50 const buffer = 5 const htmlWhenTransitionStart = () => page().evaluate(() => { (document.querySelector('#toggleBtn') as any)!.click() return Promise.resolve().then(() => { return document.querySelector('#container')!.innerHTML }) }) const transitionFinish = (time = duration) => timeout(time + buffer) beforeEach(async () => { await page().goto(baseUrl) await page().waitFor('#app') }) test( 'enter', async () => { await page().evaluate(() => { const { createApp, ref } = (window as any).Vue createApp({ template: `
{{item}}
`, setup: () => { const items = ref(['a', 'b', 'c']) const click = () => items.value.push('d', 'e') return { click, items } } }).mount('#app') }) expect(await html('#container')).toBe( `
a
` + `
b
` + `
c
` ) expect(await htmlWhenTransitionStart()).toBe( `
a
` + `
b
` + `
c
` + `
d
` + `
e
` ) await nextFrame() expect(await html('#container')).toBe( `
a
` + `
b
` + `
c
` + `
d
` + `
e
` ) await transitionFinish() expect(await html('#container')).toBe( `
a
` + `
b
` + `
c
` + `
d
` + `
e
` ) }, E2E_TIMEOUT ) test( 'leave', async () => { await page().evaluate(() => { const { createApp, ref } = (window as any).Vue createApp({ template: `
{{item}}
`, setup: () => { const items = ref(['a', 'b', 'c']) const click = () => (items.value = ['b']) return { click, items } } }).mount('#app') }) expect(await html('#container')).toBe( `
a
` + `
b
` + `
c
` ) expect(await htmlWhenTransitionStart()).toBe( `
a
` + `
b
` + `
c
` ) await nextFrame() expect(await html('#container')).toBe( `
a
` + `
b
` + `
c
` ) await transitionFinish() expect(await html('#container')).toBe(`
b
`) }, E2E_TIMEOUT ) test( 'enter + leave', async () => { await page().evaluate(() => { const { createApp, ref } = (window as any).Vue createApp({ template: `
{{item}}
`, setup: () => { const items = ref(['a', 'b', 'c']) const click = () => (items.value = ['b', 'c', 'd']) return { click, items } } }).mount('#app') }) expect(await html('#container')).toBe( `
a
` + `
b
` + `
c
` ) expect(await htmlWhenTransitionStart()).toBe( `
a
` + `
b
` + `
c
` + `
d
` ) await nextFrame() expect(await html('#container')).toBe( `
a
` + `
b
` + `
c
` + `
d
` ) await transitionFinish() expect(await html('#container')).toBe( `
b
` + `
c
` + `
d
` ) }, E2E_TIMEOUT ) test( 'appear', async () => { const appearHtml = await page().evaluate(() => { const { createApp, ref } = (window as any).Vue createApp({ template: `
{{item}}
`, setup: () => { const items = ref(['a', 'b', 'c']) const click = () => items.value.push('d', 'e') return { click, items } } }).mount('#app') return Promise.resolve().then(() => { return document.querySelector('#container')!.innerHTML }) }) // appear expect(appearHtml).toBe( `
a
` + `
b
` + `
c
` ) await nextFrame() expect(await html('#container')).toBe( `
a
` + `
b
` + `
c
` ) await transitionFinish() expect(await html('#container')).toBe( `
a
` + `
b
` + `
c
` ) // enter expect(await htmlWhenTransitionStart()).toBe( `
a
` + `
b
` + `
c
` + `
d
` + `
e
` ) await nextFrame() expect(await html('#container')).toBe( `
a
` + `
b
` + `
c
` + `
d
` + `
e
` ) await transitionFinish() expect(await html('#container')).toBe( `
a
` + `
b
` + `
c
` + `
d
` + `
e
` ) }, E2E_TIMEOUT ) test( 'move', async () => { await page().evaluate(() => { const { createApp, ref } = (window as any).Vue createApp({ template: `
{{item}}
`, setup: () => { const items = ref(['a', 'b', 'c']) const click = () => (items.value = ['d', 'b', 'a']) return { click, items } } }).mount('#app') }) expect(await html('#container')).toBe( `
a
` + `
b
` + `
c
` ) expect(await htmlWhenTransitionStart()).toBe( `
d
` + `
b
` + `
a
` + `
c
` ) await nextFrame() expect(await html('#container')).toBe( `
d
` + `
b
` + `
a
` + `
c
` ) await transitionFinish(duration * 2) expect(await html('#container')).toBe( `
d
` + `
b
` + `
a
` ) }, E2E_TIMEOUT ) test( 'dynamic name', async () => { await page().evaluate(() => { const { createApp, ref } = (window as any).Vue createApp({ template: `
{{item}}
`, setup: () => { const items = ref(['a', 'b', 'c']) const name = ref('invalid') const click = () => (items.value = ['b', 'c', 'a']) const changeName = () => { name.value = 'group' items.value = ['a', 'b', 'c'] } return { click, items, name, changeName } } }).mount('#app') }) expect(await html('#container')).toBe( `
a
` + `
b
` + `
c
` ) // invalid name expect(await htmlWhenTransitionStart()).toBe( `
b
` + `
c
` + `
a
` ) // change name const moveHtml = await page().evaluate(() => { ;(document.querySelector('#changeNameBtn') as any).click() return Promise.resolve().then(() => { return document.querySelector('#container')!.innerHTML }) }) expect(moveHtml).toBe( `
a
` + `
b
` + `
c
` ) // not sure why but we just have to wait really long for this to // pass consistently :/ await transitionFinish(duration * 4) expect(await html('#container')).toBe( `
a
` + `
b
` + `
c
` ) }, E2E_TIMEOUT ) test( 'events', async () => { const onLeaveSpy = jest.fn() const onEnterSpy = jest.fn() const onAppearSpy = jest.fn() const beforeLeaveSpy = jest.fn() const beforeEnterSpy = jest.fn() const beforeAppearSpy = jest.fn() const afterLeaveSpy = jest.fn() const afterEnterSpy = jest.fn() const afterAppearSpy = jest.fn() await page().exposeFunction('onLeaveSpy', onLeaveSpy) await page().exposeFunction('onEnterSpy', onEnterSpy) await page().exposeFunction('onAppearSpy', onAppearSpy) await page().exposeFunction('beforeLeaveSpy', beforeLeaveSpy) await page().exposeFunction('beforeEnterSpy', beforeEnterSpy) await page().exposeFunction('beforeAppearSpy', beforeAppearSpy) await page().exposeFunction('afterLeaveSpy', afterLeaveSpy) await page().exposeFunction('afterEnterSpy', afterEnterSpy) await page().exposeFunction('afterAppearSpy', afterAppearSpy) const appearHtml = await page().evaluate(() => { const { beforeAppearSpy, onAppearSpy, afterAppearSpy, beforeEnterSpy, onEnterSpy, afterEnterSpy, beforeLeaveSpy, onLeaveSpy, afterLeaveSpy } = window as any const { createApp, ref } = (window as any).Vue createApp({ template: `
{{item}}
`, setup: () => { const items = ref(['a', 'b', 'c']) const click = () => (items.value = ['b', 'c', 'd']) return { click, items, beforeAppearSpy, onAppearSpy, afterAppearSpy, beforeEnterSpy, onEnterSpy, afterEnterSpy, beforeLeaveSpy, onLeaveSpy, afterLeaveSpy } } }).mount('#app') return Promise.resolve().then(() => { return document.querySelector('#container')!.innerHTML }) }) expect(beforeAppearSpy).toBeCalled() expect(onAppearSpy).not.toBeCalled() expect(afterAppearSpy).not.toBeCalled() expect(appearHtml).toBe( `
a
` + `
b
` + `
c
` ) await nextFrame() expect(onAppearSpy).toBeCalled() expect(afterAppearSpy).not.toBeCalled() expect(await html('#container')).toBe( `
a
` + `
b
` + `
c
` ) await transitionFinish() expect(afterAppearSpy).toBeCalled() expect(await html('#container')).toBe( `
a
` + `
b
` + `
c
` ) // enter + leave expect(await htmlWhenTransitionStart()).toBe( `
a
` + `
b
` + `
c
` + `
d
` ) expect(beforeLeaveSpy).toBeCalled() expect(onLeaveSpy).not.toBeCalled() expect(afterLeaveSpy).not.toBeCalled() expect(beforeEnterSpy).toBeCalled() expect(onEnterSpy).not.toBeCalled() expect(afterEnterSpy).not.toBeCalled() await nextFrame() expect(await html('#container')).toBe( `
a
` + `
b
` + `
c
` + `
d
` ) expect(onLeaveSpy).toBeCalled() expect(afterLeaveSpy).not.toBeCalled() expect(onEnterSpy).toBeCalled() expect(afterEnterSpy).not.toBeCalled() await transitionFinish() expect(await html('#container')).toBe( `
b
` + `
c
` + `
d
` ) expect(afterLeaveSpy).toBeCalled() expect(afterEnterSpy).toBeCalled() }, E2E_TIMEOUT ) test('warn unkeyed children', () => { createApp({ template: `
{{item}}
`, setup: () => { const items = ref(['a', 'b', 'c']) return { items } } }).mount(document.createElement('div')) expect(` children must be keyed`).toHaveBeenWarned() }) })