test: add e2e tests for vdom teleport vapor interop

Author: edison1105

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

@@ -6,10 +6,10 @@ import {
 import connect from 'connect'
 import sirv from 'sirv'
 import { ports } from '../utils'
+import { nextTick } from 'vue'
+const { page, click, text, enterValue, html } = setupPuppeteer()
 
 describe('vdom / vapor interop', () => {
-  const { page, click, text, enterValue } = setupPuppeteer()
-
   let server: any
   const port = ports.vdomInterop
   beforeAll(() => {
@@ -19,16 +19,19 @@ describe('vdom / vapor interop', () => {
     process.on('SIGTERM', () => server && server.close())
   })
 
+  beforeEach(async () => {
+    const baseUrl = `http://localhost:${port}/interop/`
+    await page().goto(baseUrl)
+    await page().waitForSelector('#app')
+  })
+
   afterAll(() => {
     server.close()
   })
 
   test(
     'should work',
     async () => {
-      const baseUrl = `http://localhost:${port}/interop/`
-      await page().goto(baseUrl)
-
       expect(await text('.vapor > h2')).toContain('Vapor component in VDOM')
 
       expect(await text('.vapor-prop')).toContain('hello')
@@ -82,4 +85,33 @@ describe('vdom / vapor interop', () => {
     },
     E2E_TIMEOUT,
   )
+
+  describe('teleport', () => {
+    const testSelector = '.teleport'
+    test('render vapor component', async () => {
+      const targetSelector = `${testSelector} .teleport-target`
+      const containerSelector = `${testSelector} .render-vapor-comp`
+      const buttonSelector = `${containerSelector} button`
+
+      // teleport is disabled by default
+      expect(await html(containerSelector)).toBe(
+        `<button>toggle</button><div>vapor comp</div>`,
+      )
+      expect(await html(targetSelector)).toBe('')
+
+      // disabled -> enabled
+      await click(buttonSelector)
+      await nextTick()
+      expect(await html(containerSelector)).toBe(`<button>toggle</button>`)
+      expect(await html(targetSelector)).toBe('<div>vapor comp</div>')
+
+      // enabled -> disabled
+      await click(buttonSelector)
+      await nextTick()
+      expect(await html(containerSelector)).toBe(
+        `<button>toggle</button><div>vapor comp</div>`,
+      )
+      expect(await html(targetSelector)).toBe('')
+    })
+  })
 })

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

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import VaporComp from './VaporComp.vue'
+import VaporComp from './components/VaporComp.vue'
+import SimpleVaporComp from './components/SimpleVaporComp.vue'
 
 const msg = ref('hello')
 const passSlot = ref(true)
+const disabled = ref(true)
 </script>
 
 <template>
@@ -19,4 +21,16 @@ const passSlot = ref(true)
 
     <template #test v-if="passSlot">A test slot</template>
   </VaporComp>
+
+  <!-- teleport -->
+  <div class="teleport">
+    <div class="teleport-target"></div>
+    <div class="render-vapor-comp">
+      <button @click="disabled = !disabled">toggle</button>
+      <Teleport to=".teleport-target" defer :disabled="disabled">
+        <SimpleVaporComp />
+      </Teleport>
+    </div>
+  </div>
+  <!-- teleport end-->
 </template>

packages-private/vapor-e2e-test/interop/components/SimpleVaporComp.vue

@@ -0,0 +1,6 @@
+<script setup vapor lang="ts">
+const msg = 'vapor comp'
+</script>
+<template>
+    <div>{{ msg }}</div>
+</template>