test(TransitionGroup): test for TransitionGroup (#1269)

Author: underfin

packages/runtime-dom/src/components/TransitionGroup.ts

@@ -47,24 +47,21 @@ const TransitionGroupImpl = {
     const state = useTransitionState()
     let prevChildren: VNode[]
     let children: VNode[]
-    let hasMove: boolean | null = null
 
     onUpdated(() => {
       // children is guaranteed to exist after initial render
       if (!prevChildren.length) {
         return
       }
       const moveClass = props.moveClass || `${props.name || 'v'}-move`
-      // Check if move transition is needed. This check is cached per-instance.
-      hasMove =
-        hasMove === null
-          ? (hasMove = hasCSSTransform(
-              prevChildren[0].el as ElementWithTransition,
-              instance.vnode.el as Node,
-              moveClass
-            ))
-          : hasMove
-      if (!hasMove) {
+
+      if (
+        !hasCSSTransform(
+          prevChildren[0].el as ElementWithTransition,
+          instance.vnode.el as Node,
+          moveClass
+        )
+      ) {
         return
       }
 

packages/vue/__tests__/Transition.spec.ts

@@ -5,12 +5,21 @@ import { h, createApp, Transition } from 'vue'
 
 describe('e2e: Transition', () => {
   mockWarn()
-  const { page, html, classList, isVisible } = setupPuppeteer()
+  const {
+    page,
+    html,
+    classList,
+    isVisible,
+    timeout,
+    nextFrame
+  } = setupPuppeteer()
   const baseUrl = `file://${path.resolve(__dirname, './transition.html')}`
 
   const duration = 50
   const buffer = 5
 
+  const transitionFinish = (time = duration) => timeout(time + buffer)
+
   const classWhenTransitionStart = () =>
     page().evaluate(() => {
       (document.querySelector('#toggleBtn') as any)!.click()
@@ -19,21 +28,6 @@ describe('e2e: Transition', () => {
       })
     })
 
-  const transitionFinish = (time = duration) =>
-    new Promise(r => {
-      setTimeout(r, time + buffer)
-    })
-
-  const nextFrame = () => {
-    return page().evaluate(() => {
-      return new Promise(resolve => {
-        requestAnimationFrame(() => {
-          requestAnimationFrame(resolve)
-        })
-      })
-    })
-  }
-
   beforeEach(async () => {
     await page().goto(baseUrl)
     await page().waitFor('#app')