test: add e2e tests for vdom interop

Author: edison1105

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

@@ -0,0 +1,61 @@
+import path from 'node:path'
+import {
+  E2E_TIMEOUT,
+  setupPuppeteer,
+} from '../../../packages/vue/__tests__/e2e/e2eUtils'
+import connect from 'connect'
+import sirv from 'sirv'
+import { nextTick } from 'vue'
+import { ports } from '../utils'
+const { page, click, html } = setupPuppeteer()
+
+describe('vdom / vapor interop', () => {
+  let server: any
+  const port = ports.teleport
+  beforeAll(() => {
+    server = connect()
+      .use(sirv(path.resolve(import.meta.dirname, '../dist')))
+      .listen(port)
+    process.on('SIGTERM', () => server && server.close())
+  })
+
+  afterAll(() => {
+    server.close()
+  })
+
+  beforeEach(async () => {
+    const baseUrl = `http://localhost:${port}/teleport/`
+    await page().goto(baseUrl)
+    await page().waitForSelector('#app')
+  })
+
+  describe('vapor teleport', () => {
+    test(
+      'render vdom component',
+      async () => {
+        const targetSelector = '.target'
+        const testSelector = '.interop-render-vdom-comp'
+        const containerSelector = `${testSelector} > div`
+        const btnSelector = `${testSelector} > button`
+
+        // teleport is disabled
+        expect(await html(containerSelector)).toBe('<h1>vdom comp</h1>')
+        expect(await html(targetSelector)).toBe('')
+
+        // enable teleport
+        await click(btnSelector)
+        await nextTick()
+
+        expect(await html(containerSelector)).toBe('')
+        expect(await html(targetSelector)).toBe('<h1>vdom comp</h1>')
+
+        // disable teleport
+        await click(btnSelector)
+        await nextTick()
+        expect(await html(containerSelector)).toBe('<h1>vdom comp</h1>')
+        expect(await html(targetSelector)).toBe('')
+      },
+      E2E_TIMEOUT,
+    )
+  })
+})

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

@@ -5,6 +5,7 @@ import {
 } from '../../../packages/vue/__tests__/e2e/e2eUtils'
 import connect from 'connect'
 import sirv from 'sirv'
+import { ports } from '../utils'
 
 describe('e2e: todomvc', () => {
   const {
@@ -23,7 +24,7 @@ describe('e2e: todomvc', () => {
   } = setupPuppeteer()
 
   let server: any
-  const port = '8194'
+  const port = ports.todomvc
   beforeAll(() => {
     server = connect()
       .use(sirv(path.resolve(import.meta.dirname, '../dist')))

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

@@ -5,12 +5,13 @@ import {
 } from '../../../packages/vue/__tests__/e2e/e2eUtils'
 import connect from 'connect'
 import sirv from 'sirv'
+import { ports } from '../utils'
 
 describe('vdom / vapor interop', () => {
   const { page, click, text, enterValue } = setupPuppeteer()
 
   let server: any
-  const port = '8193'
+  const port = ports.vdomInterop
   beforeAll(() => {
     server = connect()
       .use(sirv(path.resolve(import.meta.dirname, '../dist')))

packages-private/vapor-e2e-test/index.html

@@ -1,2 +1,3 @@
 <a href="/interop/">VDOM / Vapor interop</a>
 <a href="/todomvc/">Vapor TodoMVC</a>
+<a href="/teleport/">Vapor Teleport</a>

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

@@ -0,0 +1,17 @@
+<script setup vapor>
+import { ref, Teleport } from 'vue'
+import VdomComp from './components/VdomComp.vue'
+const disabled = ref(true)
+</script>
+
+<template>
+  <div class="target"></div>
+  <div class="interop-render-vdom-comp">
+    <button @click="disabled = !disabled">toggle</button>
+    <div>
+      <Teleport to=".target" defer :disabled>
+        <VdomComp />
+      </Teleport>
+    </div>
+  </div>
+</template>

packages-private/vapor-e2e-test/teleport/components/VdomComp.vue

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

packages-private/vapor-e2e-test/teleport/index.html

@@ -0,0 +1,2 @@
+<script type="module" src="./main.ts"></script>
+<div id="app"></div>

packages-private/vapor-e2e-test/teleport/main.ts

@@ -0,0 +1,5 @@
+import { createVaporApp, vaporInteropPlugin } from 'vue'
+import App from './App.vue'
+import 'todomvc-app-css/index.css'
+
+createVaporApp(App).use(vaporInteropPlugin).mount('#app')

packages-private/vapor-e2e-test/utils.ts

@@ -0,0 +1,6 @@
+// make sure these ports are unique
+export const ports = {
+  vdomInterop: 8193,
+  todomvc: 8194,
+  teleport: 8195,
+}

packages-private/vapor-e2e-test/vite.config.ts

@@ -14,6 +14,7 @@ export default defineConfig({
       input: {
         interop: resolve(import.meta.dirname, 'interop/index.html'),
         todomvc: resolve(import.meta.dirname, 'todomvc/index.html'),
+        teleport: resolve(import.meta.dirname, 'teleport/index.html'),
       },
     },
   },