From 046c8a4740baa7a87493242166335f1576178482 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 17 Jun 2021 08:45:38 +0800
Subject: [PATCH 1/4] fix(Suspense): fallback should work with transition

---
 packages/runtime-core/src/components/Suspense.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/runtime-core/src/components/Suspense.ts b/packages/runtime-core/src/components/Suspense.ts
index d5d544469f3..57ba92c6fcd 100644
--- a/packages/runtime-core/src/components/Suspense.ts
+++ b/packages/runtime-core/src/components/Suspense.ts
@@ -551,6 +551,8 @@ function createSuspenseBoundary(
       if (delayEnter) {
         activeBranch!.transition!.afterLeave = mountFallback
       }
+      suspense.isInFallback = true
+
       // unmount current active branch
       unmount(
         activeBranch!,
@@ -559,7 +561,6 @@ function createSuspenseBoundary(
         true // shouldRemove
       )
 
-      suspense.isInFallback = true
       if (!delayEnter) {
         mountFallback()
       }

From 60810a9ae6633874005de6db8ca63f4a4bda5a5c Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 17 Jun 2021 22:23:45 +0800
Subject: [PATCH 2/4] test: add test case

---
 packages/vue/__tests__/Transition.spec.ts | 63 +++++++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/packages/vue/__tests__/Transition.spec.ts b/packages/vue/__tests__/Transition.spec.ts
index eb56c4fd39b..99d048d8cd7 100644
--- a/packages/vue/__tests__/Transition.spec.ts
+++ b/packages/vue/__tests__/Transition.spec.ts
@@ -1325,6 +1325,69 @@ describe('e2e: Transition', () => {
       },
       E2E_TIMEOUT
     )
+
+    test(
+      'Suspense fallback should work with transition',
+      async () => {
+        const onLeaveSpy = jest.fn()
+        const onEnterSpy = jest.fn()
+
+        await page().exposeFunction('onLeaveSpy', onLeaveSpy)
+        await page().exposeFunction('onEnterSpy', onEnterSpy)
+
+        await page().evaluate(() => {
+          const { createApp, shallowRef, h } = (window as any).Vue
+          const One = {
+            template: `<div>{{ msg }}</div>`,
+            setup() {
+              return new Promise((resolve, reject) => {
+                setTimeout(
+                  () =>
+                    resolve({
+                      msg: 'success'
+                    }),
+                  1000
+                )
+              })
+            }
+          }
+          createApp({
+            template: `
+              <div id="container">
+                <transition mode="out-in">
+                  <Suspense :timeout="0">
+                    <template #default>
+                      <component :is="view" />
+                    </template>
+                    <template #fallback>
+                      <div>Loading...</div>
+                    </template>
+                  </Suspense>
+                </transition>
+              </div>
+              <button id="toggleBtn" @click="click">button</button>
+            `,
+            setup: () => {
+              const view = shallowRef(null)
+              const click = () => {
+                view.value = view.value ? null : h(One)
+              }
+              return { view, click }
+            }
+          }).mount('#app')
+        })
+
+        await nextTick()
+        expect(await html('#container')).toBe('<!---->')
+
+        await click('#toggleBtn')
+        await timeout(500)
+        expect(await html('#container')).toBe('<div class="">Loading...</div>')
+        await transitionFinish(1500)
+        expect(await html('#container')).toBe('<div class="">success</div>')
+      },
+      E2E_TIMEOUT
+    )
   })
 
   describe('transition with v-show', () => {

From fe7acfd539b48bdead6d61cc9f1c6eed8cdc4704 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Fri, 18 Jun 2021 08:43:35 +0800
Subject: [PATCH 3/4] test: clean

---
 packages/vue/__tests__/Transition.spec.ts | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/vue/__tests__/Transition.spec.ts b/packages/vue/__tests__/Transition.spec.ts
index 99d048d8cd7..e21d9a4c37c 100644
--- a/packages/vue/__tests__/Transition.spec.ts
+++ b/packages/vue/__tests__/Transition.spec.ts
@@ -1326,15 +1326,10 @@ describe('e2e: Transition', () => {
       E2E_TIMEOUT
     )
 
+    // #3963
     test(
       'Suspense fallback should work with transition',
       async () => {
-        const onLeaveSpy = jest.fn()
-        const onEnterSpy = jest.fn()
-
-        await page().exposeFunction('onLeaveSpy', onLeaveSpy)
-        await page().exposeFunction('onEnterSpy', onEnterSpy)
-
         await page().evaluate(() => {
           const { createApp, shallowRef, h } = (window as any).Vue
           const One = {
@@ -1377,7 +1372,6 @@ describe('e2e: Transition', () => {
           }).mount('#app')
         })
 
-        await nextTick()
         expect(await html('#container')).toBe('<!---->')
 
         await click('#toggleBtn')

From 740bcd17141c72f14af0ef8b15601e1a7f0312de Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Mon, 21 Jun 2021 16:54:54 -0400
Subject: [PATCH 4/4] chore: improve test speed and reliability

---
 packages/vue/__tests__/Transition.spec.ts | 26 ++++++++++++++---------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/vue/__tests__/Transition.spec.ts b/packages/vue/__tests__/Transition.spec.ts
index e21d9a4c37c..1465f9c9ece 100644
--- a/packages/vue/__tests__/Transition.spec.ts
+++ b/packages/vue/__tests__/Transition.spec.ts
@@ -1332,20 +1332,20 @@ describe('e2e: Transition', () => {
       async () => {
         await page().evaluate(() => {
           const { createApp, shallowRef, h } = (window as any).Vue
+
           const One = {
             template: `<div>{{ msg }}</div>`,
             setup() {
-              return new Promise((resolve, reject) => {
-                setTimeout(
-                  () =>
-                    resolve({
-                      msg: 'success'
-                    }),
-                  1000
-                )
+              return new Promise(_resolve => {
+                // @ts-ignore
+                window.resolve = () =>
+                  _resolve({
+                    msg: 'success'
+                  })
               })
             }
           }
+
           createApp({
             template: `
               <div id="container">
@@ -1375,9 +1375,15 @@ describe('e2e: Transition', () => {
         expect(await html('#container')).toBe('<!---->')
 
         await click('#toggleBtn')
-        await timeout(500)
+        await nextFrame()
         expect(await html('#container')).toBe('<div class="">Loading...</div>')
-        await transitionFinish(1500)
+
+        await page().evaluate(() => {
+          // @ts-ignore
+          window.resolve()
+        })
+
+        await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<div class="">success</div>')
       },
       E2E_TIMEOUT