test: add e2e tests

diff --git a/packages-private/vapor-e2e-test/__tests__/vdomInterop.spec.ts b/packages-private/vapor-e2e-test/__tests__/vdomInterop.spec.ts
index 360f48085a14e7ae4f587d9a89ffeae216f582fc..a79c0d037cbd4d10778c5d27afc32e080c023095 100644 (file)
--- a/packages-private/vapor-e2e-test/__tests__/vdomInterop.spec.ts
+++ b/packages-private/vapor-e2e-test/__tests__/vdomInterop.spec.ts
@@ -2,13 +2,15 @@ import path from 'node:path'
 import {
   E2E_TIMEOUT,
   setupPuppeteer,
+  timeout,
 } from '../../../packages/vue/__tests__/e2e/e2eUtils'
 import connect from 'connect'
 import sirv from 'sirv'
+const { page, click, text, enterValue, html } = setupPuppeteer()
 
-describe('vdom / vapor interop', () => {
-  const { page, click, text, enterValue } = setupPuppeteer()
+const duration = process.env.CI ? 200 : 50
 
+describe('vdom / vapor interop', () => {
   let server: any
   const port = '8193'
   beforeAll(() => {
@@ -22,12 +24,15 @@ describe('vdom / vapor interop', () => {
     server.close()
   })
 
+  beforeEach(async () => {
+    const baseUrl = `http://localhost:${port}/interop/`
+    await page().goto(baseUrl)
+    await page().waitForSelector('#app')
+  })
+
   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')
@@ -81,4 +86,19 @@ describe('vdom / vapor interop', () => {
     },
     E2E_TIMEOUT,
   )
+
+  describe('async component', () => {
+    const container = '.async-component-interop'
+    test(
+      'with-vdom-inner-component',
+      async () => {
+        const testContainer = `${container} .with-vdom-component`
+        expect(await html(testContainer)).toBe('<span>loading...</span>')
+
+        await timeout(duration)
+        expect(await html(testContainer)).toBe('<div> foo </div>')
+      },
+      E2E_TIMEOUT,
+    )
+  })
 })

diff --git a/packages-private/vapor-e2e-test/interop/App.vue b/packages-private/vapor-e2e-test/interop/App.vue
index 772a6989dd74c90f2e1cb10fbfed734996cc44fe..4811d00e6439039a3fbcfdc172cefc174d66967c 100644 (file)
--- a/packages-private/vapor-e2e-test/interop/App.vue
+++ b/packages-private/vapor-e2e-test/interop/App.vue
@@ -1,9 +1,23 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import VaporComp from './VaporComp.vue'
+import { ref, defineVaporAsyncComponent, h } from 'vue'
+import VaporComp from './components/VaporComp.vue'
+import VdomFoo from './components/VdomFoo.vue'
 
 const msg = ref('hello')
 const passSlot = ref(true)
+
+const duration = typeof process !== undefined && process.env.CI ? 200 : 50
+
+const AsyncVDomFoo = defineVaporAsyncComponent({
+  loader: () => {
+    return new Promise(r => {
+      setTimeout(() => {
+        r(VdomFoo as any)
+      }, duration)
+    })
+  },
+  loadingComponent: () => h('span', 'loading...'),
+})
 </script>
 
 <template>
@@ -19,4 +33,12 @@ const passSlot = ref(true)
 
     <template #test v-if="passSlot">A test slot</template>
   </VaporComp>
+
+  <!-- async component  -->
+  <div class="async-component-interop">
+    <div class="with-vdom-component">
+      <AsyncVDomFoo />
+    </div>
+  </div>
+  <!-- async component end -->
 </template>

diff --git a/packages-private/vapor-e2e-test/interop/VaporComp.vue b/packages-private/vapor-e2e-test/interop/components/VaporComp.vue
similarity index 80%
rename from packages-private/vapor-e2e-test/interop/VaporComp.vue
rename to packages-private/vapor-e2e-test/interop/components/VaporComp.vue
index 88a60c782c091edc622eaaa07db174ecf7395900..4ebb58b9ce7416783f20a46fcd563f0a64a00388 100644 (file)
--- a/packages-private/vapor-e2e-test/interop/VaporComp.vue
+++ b/packages-private/vapor-e2e-test/interop/components/VaporComp.vue
@@ -20,24 +20,19 @@ const slotProp = ref('slot prop')
 
     <div v-if="ok" style="border: 2px solid orange; padding: 10px">
       <h3>vdom slots in vapor component</h3>
-      <button
-        class="change-vdom-slot-in-vapor-prop"
-        @click="slotProp = 'changed'"
-      >
+      <button class="change-vdom-slot-in-vapor-prop" @click="slotProp = 'changed'">
         change slot prop
       </button>
       <div class="vdom-slot-in-vapor-default">
-        #default: <slot :foo="slotProp" />
+        #default:
+        <slot :foo="slotProp" />
       </div>
       <div class="vdom-slot-in-vapor-test">
         #test: <slot name="test">fallback content</slot>
       </div>
     </div>
 
-    <button
-      class="toggle-vapor-slot-in-vdom-default"
-      @click="passSlot = !passSlot"
-    >
+    <button class="toggle-vapor-slot-in-vdom-default" @click="passSlot = !passSlot">
       Toggle default slot to vdom
     </button>
     <VdomComp :msg="msg">

diff --git a/packages-private/vapor-e2e-test/interop/VdomComp.vue b/packages-private/vapor-e2e-test/interop/components/VdomComp.vue
similarity index 100%
rename from packages-private/vapor-e2e-test/interop/VdomComp.vue
rename to packages-private/vapor-e2e-test/interop/components/VdomComp.vue

diff --git a/packages-private/vapor-e2e-test/interop/components/VdomFoo.vue b/packages-private/vapor-e2e-test/interop/components/VdomFoo.vue
new file mode 100644 (file)
index 0000000..0b15f81
--- /dev/null
+++ b/packages-private/vapor-e2e-test/interop/components/VdomFoo.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    foo
+  </div>
+</template>

diff --git a/packages/runtime-vapor/src/componentProps.ts b/packages/runtime-vapor/src/componentProps.ts
index a5e9daad229ca25c684614de03d195ebc2aee985..fcff365c7a548a37ca51537f47e121cf4ae886ec 100644 (file)
--- a/packages/runtime-vapor/src/componentProps.ts
+++ b/packages/runtime-vapor/src/componentProps.ts
@@ -182,7 +182,7 @@ export function getAttrFromRawProps(rawProps: RawProps, key: string): unknown {
       source = dynamicSources[i]
       isDynamic = isFunction(source)
       source = isDynamic ? (source as Function)() : source
-      if (hasOwn(source, key)) {
+      if (source && hasOwn(source, key)) {
         const value = isDynamic ? source[key] : source[key]()
         if (merged) {
           merged.push(value)