test(keep-alive): prevent unmounted node from being inserted during transition leave (#14369)

packages-private/vapor-e2e-test/__tests__/transition.spec.ts

@@ -957,70 +957,30 @@ describe('vapor transition', () => {
     )
 
     // #12860
-    // TODO: getCurrentInstance is no longer works inside Vapor components;
-    // need use an alternative method for testing here.
-    // Verified locally in the playground — no memory leak was observed.
-    test.todo(
+    test(
       'unmount children',
       async () => {
-        //     const unmountSpy = vi.fn()
-        //     let storageContainer: ElementHandle<HTMLDivElement>
-        //     const setStorageContainer = (container: any) =>
-        //       (storageContainer = container)
-        //     await page().exposeFunction('unmountSpy', unmountSpy)
-        //     await page().exposeFunction('setStorageContainer', setStorageContainer)
-        //     await page().evaluate(() => {
-        //       const { unmountSpy, setStorageContainer } = window as any
-        //       const { createApp, ref, h, onUnmounted, getCurrentInstance } = (
-        //         window as any
-        //       ).Vue
-        //       createApp({
-        //         template: `
-        //         <div id="container">
-        //           <transition>
-        //             <KeepAlive :include="includeRef">
-        //               <TrueBranch v-if="toggle"></TrueBranch>
-        //             </KeepAlive>
-        //           </transition>
-        //         </div>
-        //         <button id="toggleBtn" @click="click">button</button>
-        //       `,
-        //         components: {
-        //           TrueBranch: {
-        //             name: 'TrueBranch',
-        //             setup() {
-        //               const instance = getCurrentInstance()
-        //               onUnmounted(() => {
-        //                 unmountSpy()
-        //                 setStorageContainer(instance.__keepAliveStorageContainer)
-        //               })
-        //               const count = ref(0)
-        //               return () => h('div', count.value)
-        //             },
-        //           },
-        //         },
-        //         setup: () => {
-        //           const includeRef = ref(['TrueBranch'])
-        //           const toggle = ref(true)
-        //           const click = () => {
-        //             toggle.value = !toggle.value
-        //             if (toggle.value) {
-        //               includeRef.value = ['TrueBranch']
-        //             } else {
-        //               includeRef.value = []
-        //             }
-        //           }
-        //           return { toggle, click, unmountSpy, includeRef }
-        //         },
-        //       }).mount('#app')
-        //     })
-        //     await transitionFinish()
-        //     expect(await html('#container')).toBe('<div>0</div>')
-        //     await click('#toggleBtn')
-        //     await transitionFinish()
-        //     expect(await html('#container')).toBe('<!--v-if-->')
-        //     expect(unmountSpy).toBeCalledTimes(1)
-        //     expect(await storageContainer!.evaluate(x => x.innerHTML)).toBe(``)
+        const containerSelector = '.keep-alive-unmount-children > #container'
+        const btnSelector = '.keep-alive-unmount-children > #toggleBtn'
+
+        await waitForInnerHTML(containerSelector, '<div>0</div>')
+        expect(await html(containerSelector)).toBe('<div>0</div>')
+
+        await click(btnSelector)
+        await waitForInnerHTML(containerSelector, '')
+
+        const calls = await page().evaluate(() => {
+          return (window as any).getCalls('unmount')
+        })
+        expect(calls).toStrictEqual(['UnmountBranch'])
+
+        const storageInner = await page().evaluate(() => {
+          const container = (
+            window as any
+          ).getKeepAliveUnmountStorageContainer?.()
+          return container ? container.innerHTML : null
+        })
+        expect(storageInner).toBe('')
       },
       E2E_TIMEOUT,
     )

packages-private/vapor-e2e-test/transition/App.vue

@@ -135,6 +135,29 @@ const click = () => {
   }
 }
 
+const UnmountBranch = defineVaporComponent({
+  name: 'UnmountBranch',
+  setup() {
+    onUnmounted(() => {
+      calls.unmount.push('UnmountBranch')
+    })
+    return template('<div>0</div>')()
+  },
+})
+const keepAliveUnmountRef = ref(null)
+window.getKeepAliveUnmountStorageContainer = () =>
+  keepAliveUnmountRef.value?.ctx?.getStorageContainer?.() ?? null
+const unmountIncludeRef = ref(['UnmountBranch'])
+const unmountToggle = ref(true)
+const unmountClick = () => {
+  unmountToggle.value = !unmountToggle.value
+  if (unmountToggle.value) {
+    unmountIncludeRef.value = ['UnmountBranch']
+  } else {
+    unmountIncludeRef.value = []
+  }
+}
+
 const CompA = defineVaporComponent({
   name: 'CompA',
   setup() {
@@ -693,6 +716,16 @@ const Comp2 = defineVaporComponent({
       </div>
       <button @click="click">button</button>
     </div>
+    <div class="keep-alive-unmount-children">
+      <div id="container">
+        <transition>
+          <KeepAlive ref="keepAliveUnmountRef" :include="unmountIncludeRef">
+            <UnmountBranch v-if="unmountToggle"></UnmountBranch>
+          </KeepAlive>
+        </transition>
+      </div>
+      <button id="toggleBtn" @click="unmountClick">button</button>
+    </div>
     <div class="keep-alive-update-include">
       <div>
         <transition mode="out-in">