test: add test

Author: edison1105

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

@@ -905,7 +905,54 @@ describe('vapor transition', () => {
 
   describe.todo('transition with KeepAlive', () => {})
   describe.todo('transition with Suspense', () => {})
-  describe.todo('transition with Teleport', () => {})
+
+  describe('transition with Teleport', () => {
+    test(
+      'apply transition to teleport child',
+      async () => {
+        const btnSelector = '.with-teleport > button'
+        const containerSelector = '.with-teleport > .container'
+        const targetSelector = `.with-teleport > .target`
+
+        await transitionFinish()
+        expect(await html(containerSelector)).toBe('')
+        expect(await html(targetSelector)).toBe('')
+
+        // enter
+        expect(
+          (await transitionStart(btnSelector, `${targetSelector} div`))
+            .classNames,
+        ).toStrictEqual(['test', 'v-enter-from', 'v-enter-active'])
+        await nextFrame()
+        expect(await classList(`${targetSelector} div`)).toStrictEqual([
+          'test',
+          'v-enter-active',
+          'v-enter-to',
+        ])
+        await transitionFinish()
+        expect(await html(targetSelector)).toBe(
+          '<div class="test">vapor compB</div>',
+        )
+        expect(await html(containerSelector)).toBe('')
+
+        // leave
+        expect(
+          (await transitionStart(btnSelector, `${targetSelector} div`))
+            .classNames,
+        ).toStrictEqual(['test', 'v-leave-from', 'v-leave-active'])
+        await nextFrame()
+        expect(await classList(`${targetSelector} div`)).toStrictEqual([
+          'test',
+          'v-leave-active',
+          'v-leave-to',
+        ])
+        await transitionFinish()
+        expect(await html(targetSelector)).toBe('')
+        expect(await html(containerSelector)).toBe('')
+      },
+      E2E_TIMEOUT,
+    )
+  })
 
   describe('transition with v-show', () => {
     test(

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

@@ -11,6 +11,7 @@ import {
 const show = ref(true)
 const toggle = ref(true)
 const count = ref(0)
+const hide = ref(false)
 
 const timeout = (fn, time) => setTimeout(fn, time)
 const duration = typeof process !== 'undefined' && process.env.CI ? 200 : 50
@@ -481,6 +482,21 @@ function changeViewInOut() {
     </div>
     <!-- mode end -->
 
+    <!-- with teleport -->
+    <div class="with-teleport">
+      <div class="target"></div>
+      <div class="container">
+        <Transition>
+          <Teleport to=".target" defer>
+            <!-- comment -->
+            <VaporCompB v-if="hide" class="test"></VaporCompB>
+          </Teleport>
+        </Transition>
+      </div>
+      <button @click="hide = !hide">button</button>
+    </div>
+    <!-- with teleport end -->
+
     <!-- vdom interop -->
     <div class="vdom">
       <button @click="toggleVdom = !toggleVdom">toggle vdom component</button>