From: daiwei <daiwei521@126.com>
Date: Tue, 15 Apr 2025 03:41:34 +0000 (+0800)
Subject: wip: e2e tests
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=327807807d2a4180e3ecf3b7670d4a4a7de043be;p=thirdparty%2Fvuejs%2Fcore.git

wip: e2e tests
---

diff --git a/packages-private/vapor-e2e-test/__tests__/keepalive.spec.ts b/packages-private/vapor-e2e-test/__tests__/keepalive.spec.ts
new file mode 100644
index 0000000000..7f98a1f3a9
--- /dev/null
+++ b/packages-private/vapor-e2e-test/__tests__/keepalive.spec.ts
@@ -0,0 +1,87 @@
+import path from 'node:path'
+import {
+  E2E_TIMEOUT,
+  setupPuppeteer,
+} from '../../../packages/vue/__tests__/e2e/e2eUtils'
+import connect from 'connect'
+import sirv from 'sirv'
+const { page, html, click, value, enterValue } = setupPuppeteer()
+
+describe('vapor keepalive', () => {
+  let server: any
+  const port = '8196'
+  beforeAll(() => {
+    server = connect()
+      .use(sirv(path.resolve(import.meta.dirname, '../dist')))
+      .listen(port)
+    process.on('SIGTERM', () => server && server.close())
+  })
+
+  beforeEach(async () => {
+    const baseUrl = `http://localhost:${port}/keepalive/`
+    await page().goto(baseUrl)
+    await page().waitForSelector('#app')
+  })
+
+  afterAll(() => {
+    server.close()
+  })
+
+  test(
+    'render vdom component',
+    async () => {
+      const testSelector = '.render-vdom-component'
+      const btnShow = `${testSelector} .btn-show`
+      const btnToggle = `${testSelector} .btn-toggle`
+      const container = `${testSelector} > div`
+      const inputSelector = `${testSelector} input`
+
+      let calls = await page().evaluate(() => {
+        return (window as any).getCalls()
+      })
+      expect(calls).toStrictEqual(['mounted', 'activated'])
+
+      expect(await html(container)).toBe('<input type="text">')
+      expect(await value(inputSelector)).toBe('vdom')
+
+      // change input value
+      await enterValue(inputSelector, 'changed')
+      expect(await value(inputSelector)).toBe('changed')
+
+      // deactivate
+      await click(btnToggle)
+      expect(await html(container)).toBe('')
+      calls = await page().evaluate(() => {
+        return (window as any).getCalls()
+      })
+      expect(calls).toStrictEqual(['deactivated'])
+
+      // activate
+      await click(btnToggle)
+      expect(await html(container)).toBe('<input type="text">')
+      expect(await value(inputSelector)).toBe('changed')
+      calls = await page().evaluate(() => {
+        return (window as any).getCalls()
+      })
+      expect(calls).toStrictEqual(['activated'])
+
+      // unmount keepalive
+      await click(btnShow)
+      expect(await html(container)).toBe('')
+      calls = await page().evaluate(() => {
+        return (window as any).getCalls()
+      })
+      expect(calls).toStrictEqual(['deactivated', 'unmounted'])
+
+      // mount keepalive
+      await click(btnShow)
+      expect(await html(container)).toBe('<input type="text">')
+      expect(await value(inputSelector)).toBe('vdom')
+      calls = await page().evaluate(() => {
+        return (window as any).getCalls()
+      })
+      expect(calls).toStrictEqual(['mounted', 'activated'])
+    },
+    E2E_TIMEOUT,
+  )
+})
diff --git a/packages-private/vapor-e2e-test/index.html b/packages-private/vapor-e2e-test/index.html
index 7dc205e5ab..29ec129caf 100644
--- a/packages-private/vapor-e2e-test/index.html
+++ b/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="/keepalive/">Vapor KeepAlive</a>
diff --git a/packages-private/vapor-e2e-test/keepalive/App.vue b/packages-private/vapor-e2e-test/keepalive/App.vue
new file mode 100644
index 0000000000..b7c088f837
--- /dev/null
+++ b/packages-private/vapor-e2e-test/keepalive/App.vue
@@ -0,0 +1,26 @@
+<script vapor>
+import { ref } from 'vue'
+import VdomComp from './components/VdomComp.vue';
+
+window.calls = []
+window.getCalls = () => {
+  const ret = window.calls.slice()
+  window.calls = []
+  return ret
+}
+
+const show = ref(true)
+const toggle = ref(true)
+</script>
+
+<template>
+  <div class="render-vdom-component">
+    <button class="btn-show" @click="show = !show">show</button>
+    <button class="btn-toggle" @click="toggle = !toggle">toggle</button>
+    <div>
+      <KeepAlive v-if="show">
+        <VdomComp v-if="toggle"></VdomComp>
+      </KeepAlive>
+    </div>
+  </div>
+</template>
diff --git a/packages-private/vapor-e2e-test/keepalive/components/VdomComp.vue b/packages-private/vapor-e2e-test/keepalive/components/VdomComp.vue
new file mode 100644
index 0000000000..ca173c560d
--- /dev/null
+++ b/packages-private/vapor-e2e-test/keepalive/components/VdomComp.vue
@@ -0,0 +1,20 @@
+<script setup>
+import { onActivated, onDeactivated, onMounted, onUnmounted, ref } from 'vue'
+const msg = ref('vdom')
+
+onMounted(() => {
+    window.calls.push('mounted')
+})
+onActivated(() => {
+    window.calls.push('activated')
+})
+onDeactivated(() => {
+    window.calls.push('deactivated')
+})
+onUnmounted(() => {
+    window.calls.push('unmounted')
+})
+</script>
+<template>
+    <input type="text" v-model="msg" />
+</template>
\ No newline at end of file
diff --git a/packages-private/vapor-e2e-test/keepalive/index.html b/packages-private/vapor-e2e-test/keepalive/index.html
new file mode 100644
index 0000000000..79052a023b
--- /dev/null
+++ b/packages-private/vapor-e2e-test/keepalive/index.html
@@ -0,0 +1,2 @@
+<script type="module" src="./main.ts"></script>
+<div id="app"></div>
diff --git a/packages-private/vapor-e2e-test/keepalive/main.ts b/packages-private/vapor-e2e-test/keepalive/main.ts
new file mode 100644
index 0000000000..bc6b49173a
--- /dev/null
+++ b/packages-private/vapor-e2e-test/keepalive/main.ts
@@ -0,0 +1,4 @@
+import { createVaporApp, vaporInteropPlugin } from 'vue'
+import App from './App.vue'
+
+createVaporApp(App).use(vaporInteropPlugin).mount('#app')
diff --git a/packages-private/vapor-e2e-test/package.json b/packages-private/vapor-e2e-test/package.json
index 66ea0457ec..d5d358f3cf 100644
--- a/packages-private/vapor-e2e-test/package.json
+++ b/packages-private/vapor-e2e-test/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite dev",
-    "build": "vite build"
+    "build": "vite build && vite preview"
   },
   "devDependencies": {
     "@types/connect": "^3.4.38",
diff --git a/packages-private/vapor-e2e-test/vite.config.ts b/packages-private/vapor-e2e-test/vite.config.ts
index 1e29a4dbd1..34cbd79985 100644
--- a/packages-private/vapor-e2e-test/vite.config.ts
+++ b/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'),
+        keepalive: resolve(import.meta.dirname, 'keepalive/index.html'),
       },
     },
   },
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index f1e526106f..e66d82b5c6 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -174,9 +174,9 @@ export function createComponent(
     )
     // TODO: problem is `frag.insert` will be called multiple times
     // if used in v-if
-    if (!isHydrating && _insertionParent) {
-      insert(frag, _insertionParent, _insertionAnchor)
-    }
+    // if (!isHydrating && _insertionParent) {
+    //   insert(frag, _insertionParent, _insertionAnchor)
+    // }
     return frag
   }
 
diff --git a/packages/runtime-vapor/src/components/KeepAlive.ts b/packages/runtime-vapor/src/components/KeepAlive.ts
index 3c097f6696..8ccc6d5538 100644
--- a/packages/runtime-vapor/src/components/KeepAlive.ts
+++ b/packages/runtime-vapor/src/components/KeepAlive.ts
@@ -66,9 +66,9 @@ export const VaporKeepAliveImpl: ObjectVaporComponent = defineVaporComponent({
     const storageContainer = createElement('div')
     let current: VaporComponentInstance | VaporFragment | undefined
 
-    if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
-      ;(keepAliveInstance as any).__v_cache = cache
-    }
+    // if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
+    //   ;(keepAliveInstance as any).__v_cache = cache
+    // }
 
     function shouldCache(instance: VaporComponentInstance) {
       const { include, exclude } = props
@@ -120,12 +120,16 @@ export const VaporKeepAliveImpl: ObjectVaporComponent = defineVaporComponent({
         if (current) {
           const innerComp = getInnerComponent(current)!
           if (innerComp.type === cached.type) {
-            const da = cached.da
+            const instance = cached.vapor
+              ? cached
+              : // vdom interop
+                (cached as any).component
+            const da = instance.da
             da && queuePostFlushCb(da)
             return
           }
         }
-        remove(cached, storageContainer)
+        remove(item, storageContainer)
       })
     })