test(vapor-e2e): add transition test for keep-alive include update

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

@@ -856,6 +856,42 @@ describe('vapor transition', () => {
       })
       expect(calls).toStrictEqual(['TrueBranch'])
     })
+
+    test(
+      'switch child then update include (out-in mode)',
+      async () => {
+        const containerSelector = '.keep-alive-update-include > div'
+        const btnSwitchToB = '.keep-alive-update-include > #switchToB'
+        const btnSwitchToA = '.keep-alive-update-include > #switchToA'
+        const btnSwitchToC = '.keep-alive-update-include > #switchToC'
+
+        await transitionFinish()
+        expect(await html(containerSelector)).toBe('<div>CompA</div>')
+
+        await click(btnSwitchToB)
+        await nextTick()
+        await click(btnSwitchToC)
+        await transitionFinish(duration * 3)
+        expect(await html(containerSelector)).toBe('<div class="">CompC</div>')
+
+        await click(btnSwitchToA)
+        await transitionFinish(duration * 3)
+        expect(await html(containerSelector)).toBe('<div class="">CompA</div>')
+
+        let calls = await page().evaluate(() => {
+          return (window as any).getCalls('unmount')
+        })
+        expect(calls).toStrictEqual(['CompC unmounted'])
+
+        // Unlike vdom, CompA does not update because there are no state changes
+        // expect CompA only update once
+        // calls = await page().evaluate(() => {
+        //   return (window as any).getCalls('updated')
+        // })
+        // expect(calls).toStrictEqual(['CompA updated'])
+      },
+      E2E_TIMEOUT,
+    )
   })
 
   describe.todo('transition with Suspense', () => {})

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

@@ -9,6 +9,7 @@ import {
   template,
   defineVaporAsyncComponent,
   onUnmounted,
+  onUpdated,
 } from 'vue'
 const show = ref(true)
 const toggle = ref(true)
@@ -31,6 +32,7 @@ let calls = {
   showAppear: [],
   notEnter: [],
 
+  updated: [],
   unmount: [],
 }
 window.getCalls = key => calls[key]
@@ -117,6 +119,42 @@ const click = () => {
     includeRef.value = []
   }
 }
+
+const CompA = defineVaporComponent({
+  name: 'CompA',
+  setup() {
+    onUpdated(() => {
+      calls.updated.push('CompA updated')
+    })
+    return template('<div>CompA</div>')()
+  },
+})
+
+const CompB = defineVaporComponent({
+  name: 'CompB',
+  setup() {
+    return template('<div>CompB</div>')()
+  },
+})
+
+const CompC = defineVaporComponent({
+  name: 'CompC',
+  setup() {
+    onUnmounted(() => {
+      calls.unmount.push('CompC unmounted')
+    })
+    return template('<div>CompC</div>')()
+  },
+})
+
+const includeToChange = ref(['CompA', 'CompB', 'CompC'])
+const currentView = shallowRef(CompA)
+const switchToB = () => (currentView.value = CompB)
+const switchToC = () => (currentView.value = CompC)
+const switchToA = () => {
+  currentView.value = CompA
+  includeToChange.value = ['CompA']
+}
 </script>
 
 <template>
@@ -545,6 +583,18 @@ const click = () => {
       </div>
       <button @click="click">button</button>
     </div>
+    <div class="keep-alive-update-include">
+      <div>
+        <transition mode="out-in">
+          <KeepAlive :include="includeToChange">
+            <component :is="currentView" />
+          </KeepAlive>
+        </transition>
+      </div>
+      <button id="switchToB" @click="switchToB">switchToB</button>
+      <button id="switchToC" @click="switchToC">switchToC</button>
+      <button id="switchToA" @click="switchToA">switchToA</button>
+    </div>
     <!-- with keep-alive end -->
 
     <!-- vdom interop -->