From 14a35b7b9848798ef16c20dd6fb3ffc5c588a9b9 Mon Sep 17 00:00:00 2001
From: likui <2218301630@qq.com>
Date: Wed, 13 May 2020 22:44:54 +0800
Subject: [PATCH 1/6] test(Transition): more test transition

---
 .../__tests__/transition/Transition.spec.ts   | 1331 ++++++++++++++++-
 .../{index.html => transition.html}           |   15 +-
 2 files changed, 1292 insertions(+), 54 deletions(-)
 rename packages/vue/examples/transition/{index.html => transition.html} (76%)

diff --git a/packages/vue/examples/__tests__/transition/Transition.spec.ts b/packages/vue/examples/__tests__/transition/Transition.spec.ts
index 650919d16d9..5ac85b3bcb9 100644
--- a/packages/vue/examples/__tests__/transition/Transition.spec.ts
+++ b/packages/vue/examples/__tests__/transition/Transition.spec.ts
@@ -1,17 +1,27 @@
 import { E2E_TIMEOUT, setupPuppeteer } from '../e2eUtils'
 import path from 'path'
+import { mockWarn } from '@vue/shared'
+import { h, createApp, Transition } from 'vue'
 
 describe('e2e: Transition', () => {
-  const { page, html, classList } = setupPuppeteer()
+  mockWarn()
+  const { page, html, classList, isVisible } = setupPuppeteer()
   const baseUrl = `file://${path.resolve(
     __dirname,
-    '../../transition/index.html'
+    '../../transition/transition.html'
   )}`
 
-  const container = '#test'
-
   const duration = 50
   const buffer = 10
+
+  const classWhenTransitionStart = () =>
+    page().evaluate(() => {
+      document.querySelector('button')!.click()
+      return Promise.resolve().then(() => {
+        return document.querySelector('#container div')!.className.split(/\s+/g)
+      })
+    })
+
   const transitionFinish = () =>
     new Promise(r => {
       setTimeout(r, duration + buffer)
@@ -27,59 +37,1300 @@ describe('e2e: Transition', () => {
     })
   }
 
-  test(
-    'basic transition',
-    async () => {
-      await page().goto(baseUrl)
-      await page().waitFor('#app')
-      expect(await html(container)).toBe('<div class="test">content</div>')
+  beforeEach(async () => {
+    await page().goto(baseUrl)
+    await page().waitFor('#app')
+  })
 
-      const leaveStartClasses = await page().evaluate(() => {
-        document.querySelector('button')!.click()
-        return Promise.resolve().then(() => {
-          return document.querySelector('#test div')!.className.split(/\s+/g)
+  describe('transition with v-if', () => {
+    test(
+      'basic transition',
+      async () => {
+        await page().evaluate(() => {
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            template: `
+            <div id="container"><transition><div v-if="toggle" class="test">content</div></transition></div>
+            <button @click="click">button</button>
+          `,
+            setup: () => {
+              const toggle = ref(true)
+              const click = () => (toggle.value = !toggle.value)
+              return { toggle, click }
+            }
+          }).mount('#app')
         })
-      })
+        expect(await html('#container')).toBe('<div class="test">content</div>')
 
-      expect(leaveStartClasses).toStrictEqual([
-        'test',
-        'v-leave-active',
-        'v-leave-from'
-      ])
+        // leave
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'v-leave-active',
+          'v-leave-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'v-leave-active',
+          'v-leave-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe('<!--v-if-->')
 
-      await nextFrame()
-      expect(await classList('#test div')).toStrictEqual([
-        'test',
-        'v-leave-active',
-        'v-leave-to'
-      ])
+        // enter
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'v-enter-active',
+          'v-enter-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'v-enter-active',
+          'v-enter-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+      },
+      E2E_TIMEOUT
+    )
 
-      await transitionFinish()
-      expect(await html('#test')).toBe('<!--v-if-->')
+    test(
+      'named transition',
+      async () => {
+        await page().evaluate(() => {
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            template: `
+              <div id="container"><transition name="test"><div v-if="toggle" class="test">content</div></transition></div>
+              <button @click="click">button</button>
+            `,
+            setup: () => {
+              const toggle = ref(true)
+              const click = () => (toggle.value = !toggle.value)
+              return { toggle, click }
+            }
+          }).mount('#app')
+        })
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+
+        // leave
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe('<!--v-if-->')
+
+        // enter
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+      },
+      E2E_TIMEOUT
+    )
+
+    test(
+      'custom transition classes',
+      async () => {
+        await page().evaluate(() => {
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            template: `
+          <div id="container">
+            <transition enter-from-class="hello-from"
+                enter-active-class="hello-active"
+                enter-to-class="hello-to"
+                leave-from-class="bye-from"
+                leave-active-class="bye-active"
+                leave-to-class="bye-to"><div v-if="toggle" class="test">content</div></transition>
+            </div>
+          <button @click="click">button</button>
+          `,
+            setup: () => {
+              const toggle = ref(true)
+              const click = () => (toggle.value = !toggle.value)
+              return { toggle, click }
+            }
+          }).mount('#app')
+        })
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+
+        // leave
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'bye-active',
+          'bye-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'bye-active',
+          'bye-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe('<!--v-if-->')
+
+        // enter
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'hello-active',
+          'hello-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'hello-active',
+          'hello-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+      },
+      E2E_TIMEOUT
+    )
+
+    test(
+      'transition with dynamic name',
+      async () => {
+        await page().evaluate(() => {
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            template: `
+          <div id="container"><transition :name="name"><div v-if="toggle" class="test">content</div></transition></div>
+          <button id="toggleBtn" @click="click">button</button>
+          <button id="changeNameBtn" @click="changeName">button</button>
+          `,
+            setup: () => {
+              const name = ref('test')
+              const toggle = ref(true)
+              const click = () => (toggle.value = !toggle.value)
+              const changeName = () => {
+                name.value = 'changed'
+                click()
+              }
+              return { toggle, click, name, changeName }
+            }
+          }).mount('#app')
+        })
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+
+        // leave
+        const leaveClass = await page().evaluate(() => {
+          ;(document.querySelector('#toggleBtn') as any).click()
+          return Promise.resolve().then(() => {
+            return document.querySelector('.test')!.className.split(/\s+/g)
+          })
+        })
+        expect(leaveClass).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe('<!--v-if-->')
+
+        // enter
+        const enterClass = await page().evaluate(() => {
+          ;(document.querySelector('#changeNameBtn') as any).click()
+          return Promise.resolve().then(() => {
+            return document.querySelector('.test')!.className.split(/\s+/g)
+          })
+        })
+        expect(enterClass).toStrictEqual([
+          'test',
+          'changed-enter-active',
+          'changed-enter-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'changed-enter-active',
+          'changed-enter-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+      },
+      E2E_TIMEOUT
+    )
+
+    test(
+      'transition events without appear',
+      async () => {
+        const beforeLeaveSpy = jest.fn()
+        const onLeaveSpy = jest.fn()
+        const afterLeaveSpy = jest.fn()
+        const beforeEnterSpy = jest.fn()
+        const onEnterSpy = jest.fn()
+        const afterEnterSpy = jest.fn()
 
-      const enterStartClasses = await page().evaluate(() => {
-        document.querySelector('button')!.click()
-        return Promise.resolve().then(() => {
-          return document.querySelector('#test div')!.className.split(/\s+/g)
+        await page().exposeFunction('onLeaveSpy', onLeaveSpy)
+        await page().exposeFunction('onEnterSpy', onEnterSpy)
+        await page().exposeFunction('beforeLeaveSpy', beforeLeaveSpy)
+        await page().exposeFunction('beforeEnterSpy', beforeEnterSpy)
+        await page().exposeFunction('afterLeaveSpy', afterLeaveSpy)
+        await page().exposeFunction('afterEnterSpy', afterEnterSpy)
+
+        await page().evaluate(() => {
+          const {
+            beforeEnterSpy,
+            onEnterSpy,
+            afterEnterSpy,
+            beforeLeaveSpy,
+            onLeaveSpy,
+            afterLeaveSpy
+          } = window as any
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            template: `
+            <div id="container">
+              <transition
+                name="test"
+                @before-enter="beforeEnterSpy"
+                @enter="onEnterSpy"
+                @after-enter="afterEnterSpy"
+                @before-leave="beforeLeaveSpy"
+                @leave="onLeaveSpy"
+                @after-leave="afterLeaveSpy">
+                <div v-if="toggle" class="test">content</div>
+              </transition>
+            </div>
+            <button @click="click">button</button>
+          `,
+            setup: () => {
+              const toggle = ref(true)
+              const click = () => (toggle.value = !toggle.value)
+              return {
+                toggle,
+                click,
+                beforeEnterSpy,
+                onEnterSpy,
+                afterEnterSpy,
+                beforeLeaveSpy,
+                onLeaveSpy,
+                afterLeaveSpy
+              }
+            }
+          }).mount('#app')
         })
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+
+        // leave
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-from'
+        ])
+        // todo test event with arguments. Note: not get dom, get object. '{}'
+        expect(beforeLeaveSpy).toBeCalled()
+        expect(onLeaveSpy).not.toBeCalled()
+        expect(afterLeaveSpy).not.toBeCalled()
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to'
+        ])
+        expect(beforeLeaveSpy).toBeCalled()
+        expect(afterLeaveSpy).not.toBeCalled()
+        await transitionFinish()
+        expect(await html('#container')).toBe('<!--v-if-->')
+        expect(afterLeaveSpy).toBeCalled()
+
+        // enter
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-from'
+        ])
+        expect(beforeEnterSpy).toBeCalled()
+        expect(onEnterSpy).not.toBeCalled()
+        expect(afterEnterSpy).not.toBeCalled()
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to'
+        ])
+        expect(onEnterSpy).toBeCalled()
+        expect(afterEnterSpy).not.toBeCalled()
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+        expect(afterEnterSpy).toBeCalled()
+      },
+      E2E_TIMEOUT
+    )
+
+    test('onEnterCancelled', async () => {
+      const enterCancelledSpy = jest.fn()
+
+      await page().exposeFunction('enterCancelledSpy', enterCancelledSpy)
+
+      await page().evaluate(() => {
+        const { enterCancelledSpy } = window as any
+        const { createApp, ref } = (window as any).Vue
+        createApp({
+          template: `
+            <div id="container">
+              <transition
+                name="test"
+                @enter-cancelled="enterCancelledSpy">
+                <div v-if="toggle" class="test">content</div>
+              </transition>
+            </div>
+            <button @click="click">button</button>
+          `,
+          setup: () => {
+            const toggle = ref(false)
+            const click = () => (toggle.value = !toggle.value)
+            return {
+              toggle,
+              click,
+              enterCancelledSpy
+            }
+          }
+        }).mount('#app')
       })
+      expect(await html('#container')).toBe('<!--v-if-->')
 
-      expect(enterStartClasses).toStrictEqual([
+      // enter
+      expect(await classWhenTransitionStart()).toStrictEqual([
         'test',
-        'v-enter-active',
-        'v-enter-from'
+        'test-enter-active',
+        'test-enter-from'
       ])
-
       await nextFrame()
-      expect(await classList('#test div')).toStrictEqual([
+      expect(await classList('.test')).toStrictEqual([
         'test',
-        'v-enter-active',
-        'v-enter-to'
+        'test-enter-active',
+        'test-enter-to'
       ])
 
+      // cancel (leave)
+      expect(await classWhenTransitionStart()).toStrictEqual([
+        'test',
+        'test-leave-active',
+        'test-leave-from'
+      ])
+      // fixme
+      expect(enterCancelledSpy).not.toBeCalled()
+      await nextFrame()
+      expect(await classList('.test')).toStrictEqual([
+        'test',
+        'test-leave-active',
+        'test-leave-to'
+      ])
       await transitionFinish()
-      expect(await html('#test')).toBe('<div class="test">content</div>')
+      expect(await html('#container')).toBe('<!--v-if-->')
+    })
+
+    test(
+      'transition on appear',
+      async () => {
+        await page().evaluate(async () => {
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            template: `
+              <div id="container">
+                <transition name="test"
+                            appear
+                            appear-from-class="test-appear-from"
+                            appear-to-class="test-appear-to"
+                            appear-active-class="test-appear-active">
+                  <div v-if="toggle" class="test">content</div>
+                </transition>
+              </div>
+              <button @click="click">button</button>
+            `,
+            setup: () => {
+              const toggle = ref(true)
+              const click = () => (toggle.value = !toggle.value)
+              return { toggle, click }
+            }
+          }).mount('#app')
+        })
+        // appear
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-appear-active',
+          'test-appear-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-appear-active',
+          'test-appear-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+
+        // leave
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe('<!--v-if-->')
+
+        // enter
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+      },
+      E2E_TIMEOUT
+    )
+
+    test(
+      'transition events with appear',
+      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)
+
+        await page().evaluate(async () => {
+          const {
+            beforeAppearSpy,
+            onAppearSpy,
+            afterAppearSpy,
+            beforeEnterSpy,
+            onEnterSpy,
+            afterEnterSpy,
+            beforeLeaveSpy,
+            onLeaveSpy,
+            afterLeaveSpy
+          } = window as any
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            template: `
+              <div id="container">
+                <transition
+                  name="test"
+                  appear
+                  appear-from-class="test-appear-from"
+                  appear-to-class="test-appear-to"
+                  appear-active-class="test-appear-active"
+                  @before-enter="beforeEnterSpy"
+                  @enter="onEnterSpy"
+                  @after-enter="afterEnterSpy"
+                  @before-leave="beforeLeaveSpy"
+                  @leave="onLeaveSpy"
+                  @after-leave="afterLeaveSpy"
+                  @before-appear="beforeAppearSpy"
+                  @appear="onAppearSpy"
+                  @after-appear="afterAppearSpy">
+                  <div v-if="toggle" class="test">content</div>
+                </transition>
+              </div>
+              <button @click="click">button</button>
+            `,
+            setup: () => {
+              const toggle = ref(true)
+              const click = () => (toggle.value = !toggle.value)
+              return {
+                toggle,
+                click,
+                beforeAppearSpy,
+                onAppearSpy,
+                afterAppearSpy,
+                beforeEnterSpy,
+                onEnterSpy,
+                afterEnterSpy,
+                beforeLeaveSpy,
+                onLeaveSpy,
+                afterLeaveSpy
+              }
+            }
+          }).mount('#app')
+        })
+        // appear fixme spy called
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-appear-active',
+          'test-appear-from'
+        ])
+        expect(beforeAppearSpy).not.toBeCalled()
+        expect(onAppearSpy).not.toBeCalled()
+        expect(afterAppearSpy).not.toBeCalled()
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-appear-active',
+          'test-appear-to'
+        ])
+        expect(onAppearSpy).not.toBeCalled()
+        expect(afterAppearSpy).not.toBeCalled()
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+        expect(afterAppearSpy).not.toBeCalled()
+
+        // leave
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-from'
+        ])
+        expect(beforeLeaveSpy).toBeCalled()
+        expect(onLeaveSpy).not.toBeCalled()
+        expect(afterLeaveSpy).not.toBeCalled()
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to'
+        ])
+        expect(onLeaveSpy).toBeCalled()
+        expect(afterLeaveSpy).not.toBeCalled()
+        await transitionFinish()
+        expect(await html('#container')).toBe('<!--v-if-->')
+        expect(afterLeaveSpy).toBeCalled()
+
+        // enter fixme spy called
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-from'
+        ])
+        expect(beforeEnterSpy).toBeCalled()
+        expect(onEnterSpy).toBeCalled()
+        expect(afterEnterSpy).toBeCalled()
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to'
+        ])
+        expect(onEnterSpy).toBeCalled()
+        expect(afterEnterSpy).toBeCalled()
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+        expect(afterEnterSpy).toBeCalled()
+      },
+      E2E_TIMEOUT
+    )
+
+    // fixme
+    test(
+      'css: false',
+      async () => {
+        const onLeaveSpy = jest.fn()
+        const onEnterSpy = jest.fn()
+
+        await page().exposeFunction('onLeaveSpy', onLeaveSpy)
+        await page().exposeFunction('onEnterSpy', onEnterSpy)
+
+        await page().evaluate(() => {
+          const { onLeaveSpy, onEnterSpy } = window as any
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            template: `
+            <div id="container">
+              <transition
+                :css="false"
+                name="test"
+                @enter="onEnterSpy"
+                @leave="onLeaveSpy">
+                <div v-if="toggle" class="test">content</div>
+              </transition>
+            </div>
+            <button @click="click"></button>
+          `,
+            setup: () => {
+              const toggle = ref(true)
+              const click = () => (toggle.value = !toggle.value)
+              return { toggle, click, onLeaveSpy, onEnterSpy }
+            }
+          }).mount('#app')
+        })
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+
+        // leave
+        await classWhenTransitionStart()
+        expect(onLeaveSpy).toBeCalled()
+        expect(await html('#container')).toBe(
+          '<div class="test">content</div><!--v-if-->'
+        )
+        // enter
+        await classWhenTransitionStart()
+        expect(onEnterSpy).toBeCalled()
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+      },
+      E2E_TIMEOUT
+    )
+
+    test(
+      'no transition detected',
+      async () => {
+        await page().evaluate(() => {
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            template: `
+            <div id="container">
+              <transition name="noop">
+                <div v-if="toggle">content</div>
+              </transition>
+            </div>
+            <button @click="click">button</button>
+          `,
+            setup: () => {
+              const toggle = ref(true)
+              const click = () => (toggle.value = !toggle.value)
+              return { toggle, click }
+            }
+          }).mount('#app')
+        })
+        expect(await html('#container')).toBe('<div>content</div>')
+
+        // leave
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'noop-leave-active',
+          'noop-leave-from'
+        ])
+        await nextFrame()
+        expect(await html('#container')).toBe('<!--v-if-->')
+
+        // enter
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'noop-enter-active',
+          'noop-enter-from'
+        ])
+        await nextFrame()
+        expect(await html('#container')).toBe('<div class="">content</div>')
+      },
+      E2E_TIMEOUT
+    )
+
+    test(
+      'animations',
+      async () => {
+        await page().evaluate(() => {
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            template: `
+              <div id="container"><transition name="test-anim"><div v-if="toggle" class="test">content</div></transition></div>
+              <button @click="click">button</button>
+            `,
+            setup: () => {
+              const toggle = ref(true)
+              const click = () => (toggle.value = !toggle.value)
+              return { toggle, click }
+            }
+          }).mount('#app')
+        })
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+
+        // leave
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-anim-leave-active',
+          'test-anim-leave-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-anim-leave-active',
+          'test-anim-leave-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe('<!--v-if-->')
+
+        // enter
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-anim-enter-active',
+          'test-anim-enter-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-anim-enter-active',
+          'test-anim-enter-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+      },
+      E2E_TIMEOUT
+    )
+
+    test(
+      'explicit transition type',
+      async () => {
+        await page().evaluate(() => {
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            template: `
+              <div id="container"><transition name="test-anim-long" type="animation"><div v-if="toggle" class="test">content</div></transition></div>
+              <button @click="click">button</button>
+            `,
+            setup: () => {
+              const toggle = ref(true)
+              const click = () => (toggle.value = !toggle.value)
+              return { toggle, click }
+            }
+          }).mount('#app')
+        })
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+
+        // leave
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-anim-long-leave-active',
+          'test-anim-long-leave-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-anim-long-leave-active',
+          'test-anim-long-leave-to'
+        ])
+        await new Promise(r => {
+          setTimeout(r, duration + 5)
+        })
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-anim-long-leave-active',
+          'test-anim-long-leave-to'
+        ])
+        await new Promise(r => {
+          setTimeout(r, duration + 5)
+        })
+        expect(await html('#container')).toBe('<!--v-if-->')
+
+        // enter
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-anim-long-enter-active',
+          'test-anim-long-enter-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-anim-long-enter-active',
+          'test-anim-long-enter-to'
+        ])
+        await new Promise(r => {
+          setTimeout(r, duration + 5)
+        })
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-anim-long-enter-active',
+          'test-anim-long-enter-to'
+        ])
+        await new Promise(r => {
+          setTimeout(r, duration + 5)
+        })
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+      },
+      E2E_TIMEOUT
+    )
+
+    test(
+      'transition on SVG elements',
+      async () => {
+        await page().evaluate(() => {
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            template: `
+              <svg id="container">
+                <transition name="test">
+                  <circle v-if="toggle" cx="0" cy="0" r="10" class="test"></circle>
+                </transition>
+              </svg>
+              <button @click="click">button</button>
+            `,
+            setup: () => {
+              const toggle = ref(true)
+              const click = () => (toggle.value = !toggle.value)
+              return { toggle, click }
+            }
+          }).mount('#app')
+        })
+        expect(await html('#container')).toBe(
+          '<circle cx="0" cy="0" r="10" class="test"></circle>'
+        )
+
+        const svgTransitionStart = () =>
+          page().evaluate(() => {
+            document.querySelector('button')!.click()
+            return Promise.resolve().then(() => {
+              return document
+                .querySelector('.test')!
+                .getAttribute('class')!
+                .split(/\s+/g)
+            })
+          })
+
+        // leave
+        expect(await svgTransitionStart()).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe('<!--v-if-->')
+
+        // enter
+        expect(await svgTransitionStart()).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe(
+          '<circle cx="0" cy="0" r="10" class="test"></circle>'
+        )
+      },
+      E2E_TIMEOUT
+    )
+
+    test(
+      'custom transition higher-order component',
+      async () => {
+        await page().evaluate(() => {
+          const { createApp, ref, h, Transition } = (window as any).Vue
+          createApp({
+            template: `
+              <div id="container"><my-transition><div v-if="toggle" class="test">content</div></my-transition></div>
+              <button @click="click">button</button>
+            `,
+            components: {
+              'my-transition': (props: any, { slots }: any) => {
+                return h(Transition, { name: 'test' }, slots)
+              }
+            },
+            setup: () => {
+              const toggle = ref(true)
+              const click = () => (toggle.value = !toggle.value)
+              return { toggle, click }
+            }
+          }).mount('#app')
+        })
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+
+        // leave
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe('<!--v-if-->')
+
+        // enter
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+      },
+      E2E_TIMEOUT
+    )
+  })
+
+  describe('transition with v-show', () => {
+    test(
+      'named transition with v-show',
+      async () => {
+        await page().evaluate(() => {
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            template: `
+            <div id="container">
+              <transition name="test">
+                <div v-show="toggle" class="test">content</div>
+              </transition>
+            </div>
+            <button @click="click">button</button>
+          `,
+            setup: () => {
+              const toggle = ref(true)
+              const click = () => (toggle.value = !toggle.value)
+              return { toggle, click }
+            }
+          }).mount('#app')
+        })
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+        expect(await isVisible('.test')).toBe(true)
+
+        // leave
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to'
+        ])
+        await transitionFinish()
+        expect(await isVisible('.test')).toBe(false)
+
+        // enter
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe(
+          '<div class="test" style="">content</div>'
+        )
+      },
+      E2E_TIMEOUT
+    )
+
+    test(
+      'transition events with v-show',
+      async () => {
+        const beforeLeaveSpy = jest.fn()
+        const onLeaveSpy = jest.fn()
+        const afterLeaveSpy = jest.fn()
+        const beforeEnterSpy = jest.fn()
+        const onEnterSpy = jest.fn()
+        const afterEnterSpy = jest.fn()
+
+        await page().exposeFunction('onLeaveSpy', onLeaveSpy)
+        await page().exposeFunction('onEnterSpy', onEnterSpy)
+        await page().exposeFunction('beforeLeaveSpy', beforeLeaveSpy)
+        await page().exposeFunction('beforeEnterSpy', beforeEnterSpy)
+        await page().exposeFunction('afterLeaveSpy', afterLeaveSpy)
+        await page().exposeFunction('afterEnterSpy', afterEnterSpy)
+
+        await page().evaluate(() => {
+          const {
+            beforeEnterSpy,
+            onEnterSpy,
+            afterEnterSpy,
+            beforeLeaveSpy,
+            onLeaveSpy,
+            afterLeaveSpy
+          } = window as any
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            template: `
+            <div id="container">
+              <transition
+                name="test"
+                @before-enter="beforeEnterSpy"
+                @enter="onEnterSpy"
+                @after-enter="afterEnterSpy"
+                @before-leave="beforeLeaveSpy"
+                @leave="onLeaveSpy"
+                @after-leave="afterLeaveSpy">
+                <div v-show="toggle" class="test">content</div>
+              </transition>
+            </div>
+            <button @click="click">button</button>
+          `,
+            setup: () => {
+              const toggle = ref(true)
+              const click = () => (toggle.value = !toggle.value)
+              return {
+                toggle,
+                click,
+                beforeEnterSpy,
+                onEnterSpy,
+                afterEnterSpy,
+                beforeLeaveSpy,
+                onLeaveSpy,
+                afterLeaveSpy
+              }
+            }
+          }).mount('#app')
+        })
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+
+        // leave
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-from'
+        ])
+        expect(beforeLeaveSpy).toBeCalled()
+        expect(onLeaveSpy).not.toBeCalled()
+        expect(afterLeaveSpy).not.toBeCalled()
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to'
+        ])
+        expect(beforeLeaveSpy).toBeCalled()
+        expect(afterLeaveSpy).not.toBeCalled()
+        await transitionFinish()
+        expect(await isVisible('.test')).toBe(false)
+        expect(afterLeaveSpy).toBeCalled()
+
+        // enter
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-from'
+        ])
+        expect(beforeEnterSpy).toBeCalled()
+        expect(onEnterSpy).not.toBeCalled()
+        expect(afterEnterSpy).not.toBeCalled()
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to'
+        ])
+        expect(onEnterSpy).toBeCalled()
+        expect(afterEnterSpy).not.toBeCalled()
+        await transitionFinish()
+        expect(await html('#container')).toBe(
+          '<div class="test" style="">content</div>'
+        )
+        expect(afterEnterSpy).toBeCalled()
+      },
+      E2E_TIMEOUT
+    )
+
+    test(
+      'onLeaveCancelled (v-show only)',
+      async () => {
+        const onLeaveCancelledSpy = jest.fn()
+
+        await page().exposeFunction('onLeaveCancelledSpy', onLeaveCancelledSpy)
+        await page().evaluate(() => {
+          const { onLeaveCancelledSpy } = window as any
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            template: `
+            <div id="container">
+              <transition name="test">
+                <div v-show="toggle" class="test" @leave-cancelled="onLeaveCancelledSpy">content</div>
+              </transition>
+            </div>
+            <button @click="click">button</button>
+          `,
+            setup: () => {
+              const toggle = ref(true)
+              const click = () => (toggle.value = !toggle.value)
+              return { toggle, click, onLeaveCancelledSpy }
+            }
+          }).mount('#app')
+        })
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+        expect(await isVisible('.test')).toBe(true)
+
+        // leave
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to'
+        ])
+
+        // cancel (enter)
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-from'
+        ])
+        // fixme
+        expect(onLeaveCancelledSpy).not.toBeCalled()
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe(
+          '<div class="test" style="">content</div>'
+        )
+      },
+      E2E_TIMEOUT
+    )
+
+    test(
+      'transition on appear with v-show',
+      async () => {
+        await page().evaluate(async () => {
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            template: `
+              <div id="container">
+                <transition name="test"
+                            appear
+                            appear-from-class="test-appear-from"
+                            appear-to-class="test-appear-to"
+                            appear-active-class="test-appear-active">
+                  <div v-show="toggle" class="test">content</div>
+                </transition>
+              </div>
+              <button @click="click">button</button>
+            `,
+            setup: () => {
+              const toggle = ref(true)
+              const click = () => (toggle.value = !toggle.value)
+              return { toggle, click }
+            }
+          }).mount('#app')
+        })
+        // appear
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-appear-active',
+          'test-appear-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-appear-active',
+          'test-appear-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+
+        // leave
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to'
+        ])
+        await transitionFinish()
+        expect(await isVisible('.test')).toBe(false)
+
+        // enter
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe(
+          '<div class="test" style="">content</div>'
+        )
+      },
+      E2E_TIMEOUT
+    )
+  })
+
+  test(
+    'warn when used on multiple elements',
+    async () => {
+      createApp({
+        render() {
+          return h(Transition, null, {
+            default: () => [h('div'), h('div')]
+          })
+        }
+      }).mount(document.createElement('div'))
+      expect(
+        '<transition> can only be used on a single element or component'
+      ).toHaveBeenWarned()
     },
     E2E_TIMEOUT
   )
+
+  test.todo('explicit durations -')
+  test.todo('transition on child components with empty root node')
 })
diff --git a/packages/vue/examples/transition/index.html b/packages/vue/examples/transition/transition.html
similarity index 76%
rename from packages/vue/examples/transition/index.html
rename to packages/vue/examples/transition/transition.html
index af66e19df85..2a794234103 100644
--- a/packages/vue/examples/transition/index.html
+++ b/packages/vue/examples/transition/transition.html
@@ -1,19 +1,6 @@
 <script src="../../dist/vue.global.js"></script>
-<div id="app"></div>
-<script>
-  Vue.createApp({
-    template: `
-      <div id="test"><transition><div v-if="toggle" class="test">content</div></transition></div>
-      <button @click="click">button</button>
-    `,
-    setup:() => {
-      const toggle = Vue.ref(true)
-      const click = () => toggle.value = !toggle.value
-      return { toggle, click }
-    }
-  }).mount('#app')
-</script>
 
+<div id="app"></div>
 <style>
   .test {
     -webkit-transition: opacity 50ms ease;

From 743a9cbb3e58c5b2a96e36561392009395024017 Mon Sep 17 00:00:00 2001
From: likui <2218301630@qq.com>
Date: Thu, 14 May 2020 17:33:28 +0800
Subject: [PATCH 2/6] test(Transition): more test transition

---
 .../__tests__/transition/Transition.spec.ts   | 366 ++++++++++++++++--
 1 file changed, 328 insertions(+), 38 deletions(-)

diff --git a/packages/vue/examples/__tests__/transition/Transition.spec.ts b/packages/vue/examples/__tests__/transition/Transition.spec.ts
index 5ac85b3bcb9..ee175371ca5 100644
--- a/packages/vue/examples/__tests__/transition/Transition.spec.ts
+++ b/packages/vue/examples/__tests__/transition/Transition.spec.ts
@@ -16,15 +16,15 @@ describe('e2e: Transition', () => {
 
   const classWhenTransitionStart = () =>
     page().evaluate(() => {
-      document.querySelector('button')!.click()
+      (document.querySelector('#toggleBtn') as any)!.click()
       return Promise.resolve().then(() => {
         return document.querySelector('#container div')!.className.split(/\s+/g)
       })
     })
 
-  const transitionFinish = () =>
+  const transitionFinish = (time = duration) =>
     new Promise(r => {
-      setTimeout(r, duration + buffer)
+      setTimeout(r, time + buffer)
     })
 
   const nextFrame = () => {
@@ -51,7 +51,7 @@ describe('e2e: Transition', () => {
           createApp({
             template: `
             <div id="container"><transition><div v-if="toggle" class="test">content</div></transition></div>
-            <button @click="click">button</button>
+            <button id="toggleBtn" @click="click">button</button>
           `,
             setup: () => {
               const toggle = ref(true)
@@ -103,7 +103,7 @@ describe('e2e: Transition', () => {
           createApp({
             template: `
               <div id="container"><transition name="test"><div v-if="toggle" class="test">content</div></transition></div>
-              <button @click="click">button</button>
+              <button id="toggleBtn" @click="click">button</button>
             `,
             setup: () => {
               const toggle = ref(true)
@@ -162,7 +162,7 @@ describe('e2e: Transition', () => {
                 leave-active-class="bye-active"
                 leave-to-class="bye-to"><div v-if="toggle" class="test">content</div></transition>
             </div>
-          <button @click="click">button</button>
+          <button id="toggleBtn" @click="click">button</button>
           `,
             setup: () => {
               const toggle = ref(true)
@@ -221,10 +221,7 @@ describe('e2e: Transition', () => {
               const name = ref('test')
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
-              const changeName = () => {
-                name.value = 'changed'
-                click()
-              }
+              const changeName = () => (name.value = 'changed')
               return { toggle, click, name, changeName }
             }
           }).mount('#app')
@@ -232,13 +229,7 @@ describe('e2e: Transition', () => {
         expect(await html('#container')).toBe('<div class="test">content</div>')
 
         // leave
-        const leaveClass = await page().evaluate(() => {
-          ;(document.querySelector('#toggleBtn') as any).click()
-          return Promise.resolve().then(() => {
-            return document.querySelector('.test')!.className.split(/\s+/g)
-          })
-        })
-        expect(leaveClass).toStrictEqual([
+        expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-active',
           'test-leave-from'
@@ -253,13 +244,10 @@ describe('e2e: Transition', () => {
         expect(await html('#container')).toBe('<!--v-if-->')
 
         // enter
-        const enterClass = await page().evaluate(() => {
+        await page().evaluate(() => {
           ;(document.querySelector('#changeNameBtn') as any).click()
-          return Promise.resolve().then(() => {
-            return document.querySelector('.test')!.className.split(/\s+/g)
-          })
         })
-        expect(enterClass).toStrictEqual([
+        expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'changed-enter-active',
           'changed-enter-from'
@@ -317,7 +305,7 @@ describe('e2e: Transition', () => {
                 <div v-if="toggle" class="test">content</div>
               </transition>
             </div>
-            <button @click="click">button</button>
+            <button id="toggleBtn" @click="click">button</button>
           `,
             setup: () => {
               const toggle = ref(true)
@@ -400,7 +388,7 @@ describe('e2e: Transition', () => {
                 <div v-if="toggle" class="test">content</div>
               </transition>
             </div>
-            <button @click="click">button</button>
+            <button id="toggleBtn" @click="click">button</button>
           `,
           setup: () => {
             const toggle = ref(false)
@@ -462,7 +450,7 @@ describe('e2e: Transition', () => {
                   <div v-if="toggle" class="test">content</div>
                 </transition>
               </div>
-              <button @click="click">button</button>
+              <button id="toggleBtn" @click="click">button</button>
             `,
             setup: () => {
               const toggle = ref(true)
@@ -576,7 +564,7 @@ describe('e2e: Transition', () => {
                   <div v-if="toggle" class="test">content</div>
                 </transition>
               </div>
-              <button @click="click">button</button>
+              <button id="toggleBtn" @click="click">button</button>
             `,
             setup: () => {
               const toggle = ref(true)
@@ -687,7 +675,7 @@ describe('e2e: Transition', () => {
                 <div v-if="toggle" class="test">content</div>
               </transition>
             </div>
-            <button @click="click"></button>
+            <button id="toggleBtn" @click="click"></button>
           `,
             setup: () => {
               const toggle = ref(true)
@@ -724,7 +712,7 @@ describe('e2e: Transition', () => {
                 <div v-if="toggle">content</div>
               </transition>
             </div>
-            <button @click="click">button</button>
+            <button id="toggleBtn" @click="click">button</button>
           `,
             setup: () => {
               const toggle = ref(true)
@@ -762,7 +750,7 @@ describe('e2e: Transition', () => {
           createApp({
             template: `
               <div id="container"><transition name="test-anim"><div v-if="toggle" class="test">content</div></transition></div>
-              <button @click="click">button</button>
+              <button id="toggleBtn" @click="click">button</button>
             `,
             setup: () => {
               const toggle = ref(true)
@@ -814,7 +802,7 @@ describe('e2e: Transition', () => {
           createApp({
             template: `
               <div id="container"><transition name="test-anim-long" type="animation"><div v-if="toggle" class="test">content</div></transition></div>
-              <button @click="click">button</button>
+              <button id="toggleBtn" @click="click">button</button>
             `,
             setup: () => {
               const toggle = ref(true)
@@ -890,7 +878,7 @@ describe('e2e: Transition', () => {
                   <circle v-if="toggle" cx="0" cy="0" r="10" class="test"></circle>
                 </transition>
               </svg>
-              <button @click="click">button</button>
+              <button id="toggleBtn" @click="click">button</button>
             `,
             setup: () => {
               const toggle = ref(true)
@@ -957,7 +945,7 @@ describe('e2e: Transition', () => {
           createApp({
             template: `
               <div id="container"><my-transition><div v-if="toggle" class="test">content</div></my-transition></div>
-              <button @click="click">button</button>
+              <button id="toggleBtn" @click="click">button</button>
             `,
             components: {
               'my-transition': (props: any, { slots }: any) => {
@@ -1005,6 +993,82 @@ describe('e2e: Transition', () => {
       },
       E2E_TIMEOUT
     )
+
+    test(
+      'transition on child components with empty root node',
+      async () => {
+        await page().evaluate(() => {
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            template: `
+              <div id="container">
+                <transition name="test">
+                  <component class="test" :is="view"></component>
+                </transition>
+              </div>
+              <button id="toggleBtn" @click="click">button</button>
+              <button id="changeViewBtn" @click="change">button</button>
+            `,
+            components: {
+              one: {
+                template: '<div v-if="false">one</div>'
+              },
+              two: {
+                template: '<div>two</div>'
+              }
+            },
+            setup: () => {
+              const toggle = ref(true)
+              const view = ref('one')
+              const click = () => (toggle.value = !toggle.value)
+              const change = () =>
+                (view.value = view.value === 'one' ? 'two' : 'one')
+              return { toggle, click, change, view }
+            }
+          }).mount('#app')
+        })
+        expect(await html('#container')).toBe('<!--v-if-->')
+
+        // change view -> 'two'
+        await page().evaluate(() => {
+          (document.querySelector('#changeViewBtn') as any)!.click()
+        })
+        // enter
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div class="test">two</div>')
+
+        // change view -> 'one'
+        await page().evaluate(() => {
+          (document.querySelector('#changeViewBtn') as any)!.click()
+        })
+        // leave
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe('<!--v-if-->')
+      },
+      E2E_TIMEOUT
+    )
   })
 
   describe('transition with v-show', () => {
@@ -1020,7 +1084,7 @@ describe('e2e: Transition', () => {
                 <div v-show="toggle" class="test">content</div>
               </transition>
             </div>
-            <button @click="click">button</button>
+            <button id="toggleBtn" @click="click">button</button>
           `,
             setup: () => {
               const toggle = ref(true)
@@ -1108,7 +1172,7 @@ describe('e2e: Transition', () => {
                 <div v-show="toggle" class="test">content</div>
               </transition>
             </div>
-            <button @click="click">button</button>
+            <button id="toggleBtn" @click="click">button</button>
           `,
             setup: () => {
               const toggle = ref(true)
@@ -1191,7 +1255,7 @@ describe('e2e: Transition', () => {
                 <div v-show="toggle" class="test" @leave-cancelled="onLeaveCancelledSpy">content</div>
               </transition>
             </div>
-            <button @click="click">button</button>
+            <button id="toggleBtn" @click="click">button</button>
           `,
             setup: () => {
               const toggle = ref(true)
@@ -1254,7 +1318,7 @@ describe('e2e: Transition', () => {
                   <div v-show="toggle" class="test">content</div>
                 </transition>
               </div>
-              <button @click="click">button</button>
+              <button id="toggleBtn" @click="click">button</button>
             `,
             setup: () => {
               const toggle = ref(true)
@@ -1331,6 +1395,232 @@ describe('e2e: Transition', () => {
     E2E_TIMEOUT
   )
 
-  test.todo('explicit durations -')
-  test.todo('transition on child components with empty root node')
+  describe('explicit durations', () => {
+    test(
+      'single value',
+      async () => {
+        await page().evaluate(() => {
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            template: `
+              <div id="container">
+                <transition name="test" duration="100">
+                  <div v-if="toggle" class="test">content</div>
+                </transition>
+              </div>
+              <button id="toggleBtn" @click="click">button</button>
+            `,
+            setup: () => {
+              const toggle = ref(true)
+              const click = () => (toggle.value = !toggle.value)
+              return { toggle, click }
+            }
+          }).mount('#app')
+        })
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+
+        // leave
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to'
+        ])
+        await transitionFinish(100)
+        expect(await html('#container')).toBe('<!--v-if-->')
+
+        // enter
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to'
+        ])
+        await transitionFinish(100)
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+      },
+      E2E_TIMEOUT
+    )
+
+    test(
+      'enter with explicit durations',
+      async () => {
+        await page().evaluate(() => {
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            template: `
+              <div id="container">
+                <transition name="test" :duration="{ enter: 100 }">
+                  <div v-if="toggle" class="test">content</div>
+                </transition>
+              </div>
+              <button id="toggleBtn" @click="click">button</button>
+            `,
+            setup: () => {
+              const toggle = ref(true)
+              const click = () => (toggle.value = !toggle.value)
+              return { toggle, click }
+            }
+          }).mount('#app')
+        })
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+
+        // leave
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe('<!--v-if-->')
+
+        // enter
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to'
+        ])
+        await transitionFinish(100)
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+      },
+      E2E_TIMEOUT
+    )
+
+    test(
+      'leave with explicit durations',
+      async () => {
+        await page().evaluate(() => {
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            template: `
+              <div id="container">
+                <transition name="test" :duration="{ leave: 100 }">
+                  <div v-if="toggle" class="test">content</div>
+                </transition>
+              </div>
+              <button id="toggleBtn" @click="click">button</button>
+            `,
+            setup: () => {
+              const toggle = ref(true)
+              const click = () => (toggle.value = !toggle.value)
+              return { toggle, click }
+            }
+          }).mount('#app')
+        })
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+
+        // leave
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to'
+        ])
+        await transitionFinish(100)
+        expect(await html('#container')).toBe('<!--v-if-->')
+
+        // enter
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to'
+        ])
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+      },
+      E2E_TIMEOUT
+    )
+
+    test(
+      'separate enter and leave',
+      async () => {
+        await page().evaluate(() => {
+          const { createApp, ref } = (window as any).Vue
+          createApp({
+            template: `
+              <div id="container">
+                <transition name="test" :duration="{ enter: 200, leave: 100 }">
+                  <div v-if="toggle" class="test">content</div>
+                </transition>
+              </div>
+              <button id="toggleBtn" @click="click">button</button>
+            `,
+            setup: () => {
+              const toggle = ref(true)
+              const click = () => (toggle.value = !toggle.value)
+              return { toggle, click }
+            }
+          }).mount('#app')
+        })
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+
+        // leave
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to'
+        ])
+        await transitionFinish(100)
+        expect(await html('#container')).toBe('<!--v-if-->')
+
+        // enter
+        expect(await classWhenTransitionStart()).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-from'
+        ])
+        await nextFrame()
+        expect(await classList('.test')).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to'
+        ])
+        await transitionFinish(200)
+        expect(await html('#container')).toBe('<div class="test">content</div>')
+      },
+      E2E_TIMEOUT
+    )
+
+    // fixme
+    test.todo('warn invalid durations')
+  })
 })

From 5afa6017c298f32689a1d443fadab2ad6b32094f Mon Sep 17 00:00:00 2001
From: likui <2218301630@qq.com>
Date: Thu, 14 May 2020 17:51:06 +0800
Subject: [PATCH 3/6] test(Transition): more test transition

---
 .../__tests__/transition/Transition.spec.ts        | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/vue/examples/__tests__/transition/Transition.spec.ts b/packages/vue/examples/__tests__/transition/Transition.spec.ts
index ee175371ca5..a3b87019e4f 100644
--- a/packages/vue/examples/__tests__/transition/Transition.spec.ts
+++ b/packages/vue/examples/__tests__/transition/Transition.spec.ts
@@ -530,7 +530,7 @@ describe('e2e: Transition', () => {
         await page().exposeFunction('afterEnterSpy', afterEnterSpy)
         await page().exposeFunction('afterAppearSpy', afterAppearSpy)
 
-        await page().evaluate(async () => {
+        const appearClass = await page().evaluate(async () => {
           const {
             beforeAppearSpy,
             onAppearSpy,
@@ -584,9 +584,12 @@ describe('e2e: Transition', () => {
               }
             }
           }).mount('#app')
+          return Promise.resolve().then(() => {
+            return document.querySelector('.test')!.className.split(/\s+/g)
+          })
         })
         // appear fixme spy called
-        expect(await classList('.test')).toStrictEqual([
+        expect(appearClass).toStrictEqual([
           'test',
           'test-appear-active',
           'test-appear-from'
@@ -1305,7 +1308,7 @@ describe('e2e: Transition', () => {
     test(
       'transition on appear with v-show',
       async () => {
-        await page().evaluate(async () => {
+        const appearClass = await page().evaluate(async () => {
           const { createApp, ref } = (window as any).Vue
           createApp({
             template: `
@@ -1326,9 +1329,12 @@ describe('e2e: Transition', () => {
               return { toggle, click }
             }
           }).mount('#app')
+          return Promise.resolve().then(() => {
+            return document.querySelector('.test')!.className.split(/\s+/g)
+          })
         })
         // appear
-        expect(await classList('.test')).toStrictEqual([
+        expect(appearClass).toStrictEqual([
           'test',
           'test-appear-active',
           'test-appear-from'

From 45be820a7bbe455a65b744a795bebb9afe389aa3 Mon Sep 17 00:00:00 2001
From: likui <2218301630@qq.com>
Date: Sat, 16 May 2020 18:29:01 +0800
Subject: [PATCH 4/6] test(Transition): fix animate test

---
 .../__tests__/transition/Transition.spec.ts      | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/vue/examples/__tests__/transition/Transition.spec.ts b/packages/vue/examples/__tests__/transition/Transition.spec.ts
index a3b87019e4f..b091763fcc9 100644
--- a/packages/vue/examples/__tests__/transition/Transition.spec.ts
+++ b/packages/vue/examples/__tests__/transition/Transition.spec.ts
@@ -752,7 +752,7 @@ describe('e2e: Transition', () => {
           const { createApp, ref } = (window as any).Vue
           createApp({
             template: `
-              <div id="container"><transition name="test-anim"><div v-if="toggle" class="test">content</div></transition></div>
+              <div id="container"><transition name="test-anim"><div v-if="toggle">content</div></transition></div>
               <button id="toggleBtn" @click="click">button</button>
             `,
             setup: () => {
@@ -762,37 +762,33 @@ describe('e2e: Transition', () => {
             }
           }).mount('#app')
         })
-        expect(await html('#container')).toBe('<div class="test">content</div>')
+        expect(await html('#container')).toBe('<div>content</div>')
 
         // leave
         expect(await classWhenTransitionStart()).toStrictEqual([
-          'test',
           'test-anim-leave-active',
           'test-anim-leave-from'
         ])
         await nextFrame()
-        expect(await classList('.test')).toStrictEqual([
-          'test',
+        expect(await classList('#container div')).toStrictEqual([
           'test-anim-leave-active',
           'test-anim-leave-to'
         ])
-        await transitionFinish()
+        await transitionFinish(100)
         expect(await html('#container')).toBe('<!--v-if-->')
 
         // enter
         expect(await classWhenTransitionStart()).toStrictEqual([
-          'test',
           'test-anim-enter-active',
           'test-anim-enter-from'
         ])
         await nextFrame()
-        expect(await classList('.test')).toStrictEqual([
-          'test',
+        expect(await classList('#container div')).toStrictEqual([
           'test-anim-enter-active',
           'test-anim-enter-to'
         ])
         await transitionFinish()
-        expect(await html('#container')).toBe('<div class="test">content</div>')
+        expect(await html('#container')).toBe('<div class="">content</div>')
       },
       E2E_TIMEOUT
     )

From 12f134d8e1ad5d7bbe573b7a8641f151a6c29d60 Mon Sep 17 00:00:00 2001
From: likui <2218301630@qq.com>
Date: Sun, 17 May 2020 10:33:38 +0800
Subject: [PATCH 5/6] test(Transition): fix animate test

---
 .../__tests__/transition/Transition.spec.ts   | 28 ++++++-------------
 1 file changed, 9 insertions(+), 19 deletions(-)

diff --git a/packages/vue/examples/__tests__/transition/Transition.spec.ts b/packages/vue/examples/__tests__/transition/Transition.spec.ts
index b091763fcc9..2a822a30b14 100644
--- a/packages/vue/examples/__tests__/transition/Transition.spec.ts
+++ b/packages/vue/examples/__tests__/transition/Transition.spec.ts
@@ -800,7 +800,7 @@ describe('e2e: Transition', () => {
           const { createApp, ref } = (window as any).Vue
           createApp({
             template: `
-              <div id="container"><transition name="test-anim-long" type="animation"><div v-if="toggle" class="test">content</div></transition></div>
+              <div id="container"><transition name="test-anim-long" type="animation"><div v-if="toggle">content</div></transition></div>
               <button id="toggleBtn" @click="click">button</button>
             `,
             setup: () => {
@@ -810,57 +810,47 @@ describe('e2e: Transition', () => {
             }
           }).mount('#app')
         })
-        expect(await html('#container')).toBe('<div class="test">content</div>')
+        expect(await html('#container')).toBe('<div>content</div>')
 
         // leave
         expect(await classWhenTransitionStart()).toStrictEqual([
-          'test',
           'test-anim-long-leave-active',
           'test-anim-long-leave-from'
         ])
         await nextFrame()
-        expect(await classList('.test')).toStrictEqual([
-          'test',
+        expect(await classList('#container div')).toStrictEqual([
           'test-anim-long-leave-active',
           'test-anim-long-leave-to'
         ])
         await new Promise(r => {
           setTimeout(r, duration + 5)
         })
-        expect(await classList('.test')).toStrictEqual([
-          'test',
+        expect(await classList('#container div')).toStrictEqual([
           'test-anim-long-leave-active',
           'test-anim-long-leave-to'
         ])
-        await new Promise(r => {
-          setTimeout(r, duration + 5)
-        })
+        await transitionFinish(100)
         expect(await html('#container')).toBe('<!--v-if-->')
 
         // enter
         expect(await classWhenTransitionStart()).toStrictEqual([
-          'test',
           'test-anim-long-enter-active',
           'test-anim-long-enter-from'
         ])
         await nextFrame()
-        expect(await classList('.test')).toStrictEqual([
-          'test',
+        expect(await classList('#container div')).toStrictEqual([
           'test-anim-long-enter-active',
           'test-anim-long-enter-to'
         ])
         await new Promise(r => {
           setTimeout(r, duration + 5)
         })
-        expect(await classList('.test')).toStrictEqual([
-          'test',
+        expect(await classList('#container div')).toStrictEqual([
           'test-anim-long-enter-active',
           'test-anim-long-enter-to'
         ])
-        await new Promise(r => {
-          setTimeout(r, duration + 5)
-        })
-        expect(await html('#container')).toBe('<div class="test">content</div>')
+        await transitionFinish(100)
+        expect(await html('#container')).toBe('<div class="">content</div>')
       },
       E2E_TIMEOUT
     )

From 6d4f123508a5c751ea70cb3199548efbd76614c5 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 25 Jun 2020 14:00:55 -0400
Subject: [PATCH 6/6] refactor: move transition test out of examples

---
 .../Transition.spec.ts                        | 90 +++++++++++--------
 .../vue/{examples => }/__tests__/e2eUtils.ts  |  2 +-
 .../transition => __tests__}/transition.html  |  2 +-
 .../vue/examples/__tests__/commits.spec.ts    |  2 +-
 packages/vue/examples/__tests__/grid.spec.ts  |  2 +-
 .../vue/examples/__tests__/markdown.spec.ts   |  2 +-
 packages/vue/examples/__tests__/svg.spec.ts   |  2 +-
 .../vue/examples/__tests__/todomvc.spec.ts    |  2 +-
 packages/vue/examples/__tests__/tree.spec.ts  |  2 +-
 9 files changed, 62 insertions(+), 44 deletions(-)
 rename packages/vue/{examples/__tests__/transition => __tests__}/Transition.spec.ts (95%)
 rename packages/vue/{examples => }/__tests__/e2eUtils.ts (98%)
 rename packages/vue/{examples/transition => __tests__}/transition.html (95%)

diff --git a/packages/vue/examples/__tests__/transition/Transition.spec.ts b/packages/vue/__tests__/Transition.spec.ts
similarity index 95%
rename from packages/vue/examples/__tests__/transition/Transition.spec.ts
rename to packages/vue/__tests__/Transition.spec.ts
index 2a822a30b14..135343ef9c4 100644
--- a/packages/vue/examples/__tests__/transition/Transition.spec.ts
+++ b/packages/vue/__tests__/Transition.spec.ts
@@ -1,4 +1,4 @@
-import { E2E_TIMEOUT, setupPuppeteer } from '../e2eUtils'
+import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
 import path from 'path'
 import { mockWarn } from '@vue/shared'
 import { h, createApp, Transition } from 'vue'
@@ -6,13 +6,10 @@ import { h, createApp, Transition } from 'vue'
 describe('e2e: Transition', () => {
   mockWarn()
   const { page, html, classList, isVisible } = setupPuppeteer()
-  const baseUrl = `file://${path.resolve(
-    __dirname,
-    '../../transition/transition.html'
-  )}`
+  const baseUrl = `file://${path.resolve(__dirname, './transition.html')}`
 
   const duration = 50
-  const buffer = 10
+  const buffer = 5
 
   const classWhenTransitionStart = () =>
     page().evaluate(() => {
@@ -50,7 +47,11 @@ describe('e2e: Transition', () => {
           const { createApp, ref } = (window as any).Vue
           createApp({
             template: `
-            <div id="container"><transition><div v-if="toggle" class="test">content</div></transition></div>
+            <div id="container">
+              <transition>
+                <div v-if="toggle" class="test">content</div>
+              </transition>
+            </div>
             <button id="toggleBtn" @click="click">button</button>
           `,
             setup: () => {
@@ -102,7 +103,11 @@ describe('e2e: Transition', () => {
           const { createApp, ref } = (window as any).Vue
           createApp({
             template: `
-              <div id="container"><transition name="test"><div v-if="toggle" class="test">content</div></transition></div>
+              <div id="container">
+                <transition name="test">
+                  <div v-if="toggle" class="test">content</div>
+                </transition>
+              </div>
               <button id="toggleBtn" @click="click">button</button>
             `,
             setup: () => {
@@ -156,12 +161,14 @@ describe('e2e: Transition', () => {
             template: `
           <div id="container">
             <transition enter-from-class="hello-from"
-                enter-active-class="hello-active"
-                enter-to-class="hello-to"
-                leave-from-class="bye-from"
-                leave-active-class="bye-active"
-                leave-to-class="bye-to"><div v-if="toggle" class="test">content</div></transition>
-            </div>
+              enter-active-class="hello-active"
+              enter-to-class="hello-to"
+              leave-from-class="bye-from"
+              leave-active-class="bye-active"
+              leave-to-class="bye-to">
+              <div v-if="toggle" class="test">content</div>
+            </transition>
+          </div>
           <button id="toggleBtn" @click="click">button</button>
           `,
             setup: () => {
@@ -213,7 +220,11 @@ describe('e2e: Transition', () => {
           const { createApp, ref } = (window as any).Vue
           createApp({
             template: `
-          <div id="container"><transition :name="name"><div v-if="toggle" class="test">content</div></transition></div>
+          <div id="container">
+            <transition :name="name">
+              <div v-if="toggle" class="test">content</div>
+            </transition>
+          </div>
           <button id="toggleBtn" @click="click">button</button>
           <button id="changeNameBtn" @click="changeName">button</button>
           `,
@@ -752,7 +763,11 @@ describe('e2e: Transition', () => {
           const { createApp, ref } = (window as any).Vue
           createApp({
             template: `
-              <div id="container"><transition name="test-anim"><div v-if="toggle">content</div></transition></div>
+              <div id="container">
+                <transition name="test-anim">
+                  <div v-if="toggle">content</div>
+                </transition>
+              </div>
               <button id="toggleBtn" @click="click">button</button>
             `,
             setup: () => {
@@ -774,7 +789,7 @@ describe('e2e: Transition', () => {
           'test-anim-leave-active',
           'test-anim-leave-to'
         ])
-        await transitionFinish(100)
+        await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<!--v-if-->')
 
         // enter
@@ -829,7 +844,7 @@ describe('e2e: Transition', () => {
           'test-anim-long-leave-active',
           'test-anim-long-leave-to'
         ])
-        await transitionFinish(100)
+        await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<!--v-if-->')
 
         // enter
@@ -849,7 +864,7 @@ describe('e2e: Transition', () => {
           'test-anim-long-enter-active',
           'test-anim-long-enter-to'
         ])
-        await transitionFinish(100)
+        await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<div class="">content</div>')
       },
       E2E_TIMEOUT
@@ -1391,12 +1406,12 @@ describe('e2e: Transition', () => {
     test(
       'single value',
       async () => {
-        await page().evaluate(() => {
+        await page().evaluate(duration => {
           const { createApp, ref } = (window as any).Vue
           createApp({
             template: `
               <div id="container">
-                <transition name="test" duration="100">
+                <transition name="test" duration="${duration * 2}">
                   <div v-if="toggle" class="test">content</div>
                 </transition>
               </div>
@@ -1408,7 +1423,7 @@ describe('e2e: Transition', () => {
               return { toggle, click }
             }
           }).mount('#app')
-        })
+        }, duration)
         expect(await html('#container')).toBe('<div class="test">content</div>')
 
         // leave
@@ -1423,7 +1438,7 @@ describe('e2e: Transition', () => {
           'test-leave-active',
           'test-leave-to'
         ])
-        await transitionFinish(100)
+        await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<!--v-if-->')
 
         // enter
@@ -1438,7 +1453,7 @@ describe('e2e: Transition', () => {
           'test-enter-active',
           'test-enter-to'
         ])
-        await transitionFinish(100)
+        await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
       E2E_TIMEOUT
@@ -1447,12 +1462,12 @@ describe('e2e: Transition', () => {
     test(
       'enter with explicit durations',
       async () => {
-        await page().evaluate(() => {
+        await page().evaluate(duration => {
           const { createApp, ref } = (window as any).Vue
           createApp({
             template: `
               <div id="container">
-                <transition name="test" :duration="{ enter: 100 }">
+                <transition name="test" :duration="{ enter: ${duration * 2} }">
                   <div v-if="toggle" class="test">content</div>
                 </transition>
               </div>
@@ -1464,7 +1479,7 @@ describe('e2e: Transition', () => {
               return { toggle, click }
             }
           }).mount('#app')
-        })
+        }, duration)
         expect(await html('#container')).toBe('<div class="test">content</div>')
 
         // leave
@@ -1494,7 +1509,7 @@ describe('e2e: Transition', () => {
           'test-enter-active',
           'test-enter-to'
         ])
-        await transitionFinish(100)
+        await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
       E2E_TIMEOUT
@@ -1503,12 +1518,12 @@ describe('e2e: Transition', () => {
     test(
       'leave with explicit durations',
       async () => {
-        await page().evaluate(() => {
+        await page().evaluate(duration => {
           const { createApp, ref } = (window as any).Vue
           createApp({
             template: `
               <div id="container">
-                <transition name="test" :duration="{ leave: 100 }">
+                <transition name="test" :duration="{ leave: ${duration * 2} }">
                   <div v-if="toggle" class="test">content</div>
                 </transition>
               </div>
@@ -1520,7 +1535,7 @@ describe('e2e: Transition', () => {
               return { toggle, click }
             }
           }).mount('#app')
-        })
+        }, duration)
         expect(await html('#container')).toBe('<div class="test">content</div>')
 
         // leave
@@ -1535,7 +1550,7 @@ describe('e2e: Transition', () => {
           'test-leave-active',
           'test-leave-to'
         ])
-        await transitionFinish(100)
+        await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<!--v-if-->')
 
         // enter
@@ -1559,12 +1574,15 @@ describe('e2e: Transition', () => {
     test(
       'separate enter and leave',
       async () => {
-        await page().evaluate(() => {
+        await page().evaluate(duration => {
           const { createApp, ref } = (window as any).Vue
           createApp({
             template: `
               <div id="container">
-                <transition name="test" :duration="{ enter: 200, leave: 100 }">
+                <transition name="test" :duration="{
+                  enter: ${duration * 4},
+                  leave: ${duration * 2}
+                }">
                   <div v-if="toggle" class="test">content</div>
                 </transition>
               </div>
@@ -1576,7 +1594,7 @@ describe('e2e: Transition', () => {
               return { toggle, click }
             }
           }).mount('#app')
-        })
+        }, duration)
         expect(await html('#container')).toBe('<div class="test">content</div>')
 
         // leave
@@ -1591,7 +1609,7 @@ describe('e2e: Transition', () => {
           'test-leave-active',
           'test-leave-to'
         ])
-        await transitionFinish(100)
+        await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<!--v-if-->')
 
         // enter
diff --git a/packages/vue/examples/__tests__/e2eUtils.ts b/packages/vue/__tests__/e2eUtils.ts
similarity index 98%
rename from packages/vue/examples/__tests__/e2eUtils.ts
rename to packages/vue/__tests__/e2eUtils.ts
index f014623d8fe..7d5a0a0e069 100644
--- a/packages/vue/examples/__tests__/e2eUtils.ts
+++ b/packages/vue/__tests__/e2eUtils.ts
@@ -79,7 +79,7 @@ export function setupPuppeteer() {
     await page.$eval(
       selector,
       (node, value) => {
-        (node as HTMLInputElement).value = value
+        ;(node as HTMLInputElement).value = value
         node.dispatchEvent(new Event('input'))
       },
       value
diff --git a/packages/vue/examples/transition/transition.html b/packages/vue/__tests__/transition.html
similarity index 95%
rename from packages/vue/examples/transition/transition.html
rename to packages/vue/__tests__/transition.html
index 2a794234103..51553064554 100644
--- a/packages/vue/examples/transition/transition.html
+++ b/packages/vue/__tests__/transition.html
@@ -1,4 +1,4 @@
-<script src="../../dist/vue.global.js"></script>
+<script src="../dist/vue.global.js"></script>
 
 <div id="app"></div>
 <style>
diff --git a/packages/vue/examples/__tests__/commits.spec.ts b/packages/vue/examples/__tests__/commits.spec.ts
index d48a1957487..380a8083e34 100644
--- a/packages/vue/examples/__tests__/commits.spec.ts
+++ b/packages/vue/examples/__tests__/commits.spec.ts
@@ -1,5 +1,5 @@
 import path from 'path'
-import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils'
+import { setupPuppeteer, E2E_TIMEOUT } from '../../__tests__/e2eUtils'
 import mocks from './commits.mock'
 
 describe('e2e: commits', () => {
diff --git a/packages/vue/examples/__tests__/grid.spec.ts b/packages/vue/examples/__tests__/grid.spec.ts
index 6fde334fd49..c82e7eedef2 100644
--- a/packages/vue/examples/__tests__/grid.spec.ts
+++ b/packages/vue/examples/__tests__/grid.spec.ts
@@ -1,5 +1,5 @@
 import path from 'path'
-import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils'
+import { setupPuppeteer, E2E_TIMEOUT } from '../../__tests__/e2eUtils'
 
 interface TableData {
   name: string
diff --git a/packages/vue/examples/__tests__/markdown.spec.ts b/packages/vue/examples/__tests__/markdown.spec.ts
index 77409fa7413..f5496f8aa6b 100644
--- a/packages/vue/examples/__tests__/markdown.spec.ts
+++ b/packages/vue/examples/__tests__/markdown.spec.ts
@@ -1,5 +1,5 @@
 import path from 'path'
-import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils'
+import { setupPuppeteer, E2E_TIMEOUT } from '../../__tests__/e2eUtils'
 
 describe('e2e: markdown', () => {
   const { page, isVisible, value, html } = setupPuppeteer()
diff --git a/packages/vue/examples/__tests__/svg.spec.ts b/packages/vue/examples/__tests__/svg.spec.ts
index fce05ac0bd1..b41708fa3bb 100644
--- a/packages/vue/examples/__tests__/svg.spec.ts
+++ b/packages/vue/examples/__tests__/svg.spec.ts
@@ -1,5 +1,5 @@
 import path from 'path'
-import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils'
+import { setupPuppeteer, E2E_TIMEOUT } from '../../__tests__/e2eUtils'
 
 declare const globalStats: {
   label: string
diff --git a/packages/vue/examples/__tests__/todomvc.spec.ts b/packages/vue/examples/__tests__/todomvc.spec.ts
index de55102362e..f6f1b05e576 100644
--- a/packages/vue/examples/__tests__/todomvc.spec.ts
+++ b/packages/vue/examples/__tests__/todomvc.spec.ts
@@ -1,5 +1,5 @@
 import path from 'path'
-import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils'
+import { setupPuppeteer, E2E_TIMEOUT } from '../../__tests__/e2eUtils'
 
 describe('e2e: todomvc', () => {
   const {
diff --git a/packages/vue/examples/__tests__/tree.spec.ts b/packages/vue/examples/__tests__/tree.spec.ts
index c8095b0aa29..e1d14090f30 100644
--- a/packages/vue/examples/__tests__/tree.spec.ts
+++ b/packages/vue/examples/__tests__/tree.spec.ts
@@ -1,5 +1,5 @@
 import path from 'path'
-import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils'
+import { setupPuppeteer, E2E_TIMEOUT } from '../../__tests__/e2eUtils'
 
 describe('e2e: tree', () => {
   const { page, click, count, text, children, isVisible } = setupPuppeteer()