test: fix keepalive transition out-in test case

Author: yyx990803

packages/runtime-core/__tests__/hmr.spec.ts

@@ -176,7 +176,8 @@ describe('hot module replacement', () => {
         return { toggle: true }
       },
       render: compileToFunction(
-        `<button @click="toggle = !toggle"></button><KeepAlive><Child v-if="toggle" /></KeepAlive>`
+        `<button @click="toggle = !toggle" />
+        <KeepAlive><Child v-if="toggle" /></KeepAlive>`
       )
     }
 
@@ -243,7 +244,10 @@ describe('hot module replacement', () => {
         return { toggle: true }
       },
       render: compileToFunction(
-        `<button @click="toggle = !toggle"></button><BaseTransition mode="out-in"><KeepAlive><Child v-if="toggle" /></KeepAlive></BaseTransition>`
+        `<button @click="toggle = !toggle" />
+        <BaseTransition>
+          <KeepAlive><Child v-if="toggle" /></KeepAlive>
+        </BaseTransition>`
       )
     }
 
@@ -271,6 +275,87 @@ describe('hot module replacement', () => {
     // should not unmount when toggling
     triggerEvent(root.children[1] as TestElement, 'click')
     await nextTick()
+    expect(serializeInner(root)).toBe(`<button></button><!--v-if-->`)
+    expect(unmountSpy).toHaveBeenCalledTimes(1)
+    expect(mountSpy).toHaveBeenCalledTimes(1)
+    expect(activeSpy).toHaveBeenCalledTimes(1)
+    expect(deactiveSpy).toHaveBeenCalledTimes(1)
+
+    // should not mount when toggling
+    triggerEvent(root.children[1] as TestElement, 'click')
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<button></button><div>1</div>`)
+    expect(unmountSpy).toHaveBeenCalledTimes(1)
+    expect(mountSpy).toHaveBeenCalledTimes(1)
+    expect(activeSpy).toHaveBeenCalledTimes(2)
+    expect(deactiveSpy).toHaveBeenCalledTimes(1)
+  })
+
+  test('reload KeepAlive slot in Transition with out-in', async () => {
+    const root = nodeOps.createElement('div')
+    const childId = 'test-transition-keep-alive-reload-with-out-in'
+    const unmountSpy = vi.fn()
+    const mountSpy = vi.fn()
+    const activeSpy = vi.fn()
+    const deactiveSpy = vi.fn()
+
+    const Child: ComponentOptions = {
+      __hmrId: childId,
+      name: 'original',
+      data() {
+        return { count: 0 }
+      },
+      unmounted: unmountSpy,
+      render: compileToFunction(`<div>{{ count }}</div>`)
+    }
+    createRecord(childId, Child)
+
+    const Parent: ComponentOptions = {
+      components: { Child },
+      data() {
+        return { toggle: true }
+      },
+      methods: {
+        // @ts-ignore
+        onLeave(_, done) {
+          setTimeout(done, 0)
+        }
+      },
+      render: compileToFunction(
+        `<button @click="toggle = !toggle" />
+        <BaseTransition mode="out-in" @leave="onLeave">
+          <KeepAlive><Child v-if="toggle" /></KeepAlive>
+        </BaseTransition>`
+      )
+    }
+
+    render(h(Parent), root)
+    expect(serializeInner(root)).toBe(`<button></button><div>0</div>`)
+
+    reload(childId, {
+      __hmrId: childId,
+      name: 'updated',
+      data() {
+        return { count: 1 }
+      },
+      mounted: mountSpy,
+      unmounted: unmountSpy,
+      activated: activeSpy,
+      deactivated: deactiveSpy,
+      render: compileToFunction(`<div>{{ count }}</div>`)
+    })
+    await nextTick()
+    await new Promise(r => setTimeout(r, 0))
+    expect(serializeInner(root)).toBe(`<button></button><div>1</div>`)
+    expect(unmountSpy).toHaveBeenCalledTimes(1)
+    expect(mountSpy).toHaveBeenCalledTimes(1)
+    expect(activeSpy).toHaveBeenCalledTimes(1)
+    expect(deactiveSpy).toHaveBeenCalledTimes(0)
+
+    // should not unmount when toggling
+    triggerEvent(root.children[1] as TestElement, 'click')
+    await nextTick()
+    await new Promise(r => setTimeout(r, 0))
     expect(serializeInner(root)).toBe(`<button></button><!---->`)
     expect(unmountSpy).toHaveBeenCalledTimes(1)
     expect(mountSpy).toHaveBeenCalledTimes(1)