test(Transition): more complete transition e2e tests (#1151)

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

packages/vue/__tests__/transition.html

@@ -1,19 +1,6 @@
-<script src="../../dist/vue.global.js"></script>
+<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;

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', () => {

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

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()

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

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 {

packages/vue/examples/__tests__/transition/Transition.spec.ts

@@ -1,85 +0,0 @@
-import { E2E_TIMEOUT, setupPuppeteer } from '../e2eUtils'
-import path from 'path'
-
-describe('e2e: Transition', () => {
-  const { page, html, classList } = setupPuppeteer()
-  const baseUrl = `file://${path.resolve(
-    __dirname,
-    '../../transition/index.html'
-  )}`
-
-  const container = '#test'
-
-  const duration = 50
-  const buffer = 10
-  const transitionFinish = () =>
-    new Promise(r => {
-      setTimeout(r, duration + buffer)
-    })
-
-  const nextFrame = () => {
-    return page().evaluate(() => {
-      return new Promise(resolve => {
-        requestAnimationFrame(() => {
-          requestAnimationFrame(resolve)
-        })
-      })
-    })
-  }
-
-  test(
-    'basic transition',
-    async () => {
-      await page().goto(baseUrl)
-      await page().waitFor('#app')
-      expect(await html(container)).toBe('<div class="test">content</div>')
-
-      const leaveStartClasses = await page().evaluate(() => {
-        document.querySelector('button')!.click()
-        return Promise.resolve().then(() => {
-          return document.querySelector('#test div')!.className.split(/\s+/g)
-        })
-      })
-
-      expect(leaveStartClasses).toStrictEqual([
-        'test',
-        'v-leave-active',
-        'v-leave-from'
-      ])
-
-      await nextFrame()
-      expect(await classList('#test div')).toStrictEqual([
-        'test',
-        'v-leave-active',
-        'v-leave-to'
-      ])
-
-      await transitionFinish()
-      expect(await html('#test')).toBe('<!--v-if-->')
-
-      const enterStartClasses = await page().evaluate(() => {
-        document.querySelector('button')!.click()
-        return Promise.resolve().then(() => {
-          return document.querySelector('#test div')!.className.split(/\s+/g)
-        })
-      })
-
-      expect(enterStartClasses).toStrictEqual([
-        'test',
-        'v-enter-active',
-        'v-enter-from'
-      ])
-
-      await nextFrame()
-      expect(await classList('#test div')).toStrictEqual([
-        'test',
-        'v-enter-active',
-        'v-enter-to'
-      ])
-
-      await transitionFinish()
-      expect(await html('#test')).toBe('<div class="test">content</div>')
-    },
-    E2E_TIMEOUT
-  )
-})

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()