test: add tests

Author: edison1105

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

@@ -907,6 +907,65 @@ describe('vapor transition', () => {
   describe.todo('transition with Suspense', () => {})
   describe.todo('transition with Teleport', () => {})
 
+  describe('transition with AsyncComponent', () => {
+    test('apply transition to inner component', async () => {
+      const btnSelector = '.async > button'
+      const containerSelector = '.async > div'
+
+      expect(await html(containerSelector)).toBe('')
+
+      // toggle
+      await click(btnSelector)
+      await nextTick()
+      // not yet resolved
+      expect(await html(containerSelector)).toBe('')
+
+      // wait resolving
+      await timeout(duration)
+
+      // enter (resolved)
+      expect(await html(containerSelector)).toBe(
+        '<div class="v-enter-from v-enter-active">vapor compA</div>',
+      )
+      await nextFrame()
+      expect(await html(containerSelector)).toBe(
+        '<div class="v-enter-active v-enter-to">vapor compA</div>',
+      )
+      await transitionFinish()
+      expect(await html(containerSelector)).toBe(
+        '<div class="">vapor compA</div>',
+      )
+
+      // leave
+      await click(btnSelector)
+      await nextTick()
+      expect(await html(containerSelector)).toBe(
+        '<div class="v-leave-from v-leave-active">vapor compA</div>',
+      )
+      await nextFrame()
+      expect(await html(containerSelector)).toBe(
+        '<div class="v-leave-active v-leave-to">vapor compA</div>',
+      )
+      await transitionFinish()
+      expect(await html(containerSelector)).toBe('')
+
+      // enter again
+      await click(btnSelector)
+      // use the already resolved component
+      expect(await html(containerSelector)).toBe(
+        '<div class="v-enter-from v-enter-active">vapor compA</div>',
+      )
+      await nextFrame()
+      expect(await html(containerSelector)).toBe(
+        '<div class="v-enter-active v-enter-to">vapor compA</div>',
+      )
+      await transitionFinish()
+      expect(await html(containerSelector)).toBe(
+        '<div class="">vapor compA</div>',
+      )
+    })
+  })
+
   describe('transition with v-show', () => {
     test(
       'named transition with v-show',

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

@@ -7,6 +7,7 @@ import {
   VaporTransition,
   createIf,
   template,
+  defineVaporAsyncComponent,
 } from 'vue'
 const show = ref(true)
 const toggle = ref(true)
@@ -90,6 +91,10 @@ const viewInOut = shallowRef(SimpleOne)
 function changeViewInOut() {
   viewInOut.value = viewInOut.value === SimpleOne ? Two : SimpleOne
 }
+
+const AsyncComp = defineVaporAsyncComponent(() => {
+  return new Promise(resolve => setTimeout(() => resolve(VaporCompA), duration))
+})
 </script>
 
 <template>
@@ -481,6 +486,17 @@ function changeViewInOut() {
     </div>
     <!-- mode end -->
 
+    <!-- async component -->
+    <div class="async">
+      <div id="container">
+        <transition>
+          <AsyncComp v-if="!toggle"></AsyncComp>
+        </transition>
+      </div>
+      <button @click="toggle = !toggle">button</button>
+    </div>
+    <!-- async component end -->
+
     <!-- vdom interop -->
     <div class="vdom">
       <button @click="toggleVdom = !toggleVdom">toggle vdom component</button>