test(transition): refactor DOM transition test

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

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

packages/vue/examples/transition/index.html

@@ -3,8 +3,8 @@
 <script>
   Vue.createApp({
     template: `
-      <div id="test"><transition><div v-if="toggle" class="test"></div></transition></div>
+      <div id="test"><transition><div v-if="toggle" class="test">content</div></transition></div>
-      <button @click="click"></button>
+      <button @click="click">button</button>
     `,
     setup:() => {
       const toggle = Vue.ref(true)