From ed6face071cd07f235896d08389baddc4de18bec Mon Sep 17 00:00:00 2001 From: daiwei Date: Thu, 23 Oct 2025 11:38:53 +0800 Subject: [PATCH] refactor(tests): port keepalive e2e tests to unit test --- .../__tests__/keepalive.spec.ts | 87 -------------- packages-private/vapor-e2e-test/index.html | 3 +- .../vapor-e2e-test/keepalive/App.vue | 26 ----- .../keepalive/components/VdomComp.vue | 20 ---- .../vapor-e2e-test/keepalive/index.html | 2 - .../vapor-e2e-test/keepalive/main.ts | 4 - .../vapor-e2e-test/vite.config.ts | 1 - .../__tests__/components/KeepAlive.spec.ts | 108 ++++++++++++++++++ 8 files changed, 109 insertions(+), 142 deletions(-) delete mode 100644 packages-private/vapor-e2e-test/__tests__/keepalive.spec.ts delete mode 100644 packages-private/vapor-e2e-test/keepalive/App.vue delete mode 100644 packages-private/vapor-e2e-test/keepalive/components/VdomComp.vue delete mode 100644 packages-private/vapor-e2e-test/keepalive/index.html delete mode 100644 packages-private/vapor-e2e-test/keepalive/main.ts diff --git a/packages-private/vapor-e2e-test/__tests__/keepalive.spec.ts b/packages-private/vapor-e2e-test/__tests__/keepalive.spec.ts deleted file mode 100644 index ab0607a1d9..0000000000 --- a/packages-private/vapor-e2e-test/__tests__/keepalive.spec.ts +++ /dev/null @@ -1,87 +0,0 @@ -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 = '8197' - 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('') - 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('') - 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('') - 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 7ae09c3b66..3d5d2f932a 100644 --- a/packages-private/vapor-e2e-test/index.html +++ b/packages-private/vapor-e2e-test/index.html @@ -1,6 +1,5 @@ VDOM / Vapor interop Vapor TodoMVC -Vapor KeepAlive Vapor Transition Vapor TransitionGroup @@ -9,4 +8,4 @@ display: block; margin: 10px; } - + \ No newline at end of file diff --git a/packages-private/vapor-e2e-test/keepalive/App.vue b/packages-private/vapor-e2e-test/keepalive/App.vue deleted file mode 100644 index c388228eb5..0000000000 --- a/packages-private/vapor-e2e-test/keepalive/App.vue +++ /dev/null @@ -1,26 +0,0 @@ - - - diff --git a/packages-private/vapor-e2e-test/keepalive/components/VdomComp.vue b/packages-private/vapor-e2e-test/keepalive/components/VdomComp.vue deleted file mode 100644 index 4c539e9de9..0000000000 --- a/packages-private/vapor-e2e-test/keepalive/components/VdomComp.vue +++ /dev/null @@ -1,20 +0,0 @@ - - diff --git a/packages-private/vapor-e2e-test/keepalive/index.html b/packages-private/vapor-e2e-test/keepalive/index.html deleted file mode 100644 index 79052a023b..0000000000 --- a/packages-private/vapor-e2e-test/keepalive/index.html +++ /dev/null @@ -1,2 +0,0 @@ - -
diff --git a/packages-private/vapor-e2e-test/keepalive/main.ts b/packages-private/vapor-e2e-test/keepalive/main.ts deleted file mode 100644 index bc6b49173a..0000000000 --- a/packages-private/vapor-e2e-test/keepalive/main.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { createVaporApp, vaporInteropPlugin } from 'vue' -import App from './App.vue' - -createVaporApp(App).use(vaporInteropPlugin).mount('#app') diff --git a/packages-private/vapor-e2e-test/vite.config.ts b/packages-private/vapor-e2e-test/vite.config.ts index 931794ca84..f50fccea3c 100644 --- a/packages-private/vapor-e2e-test/vite.config.ts +++ b/packages-private/vapor-e2e-test/vite.config.ts @@ -14,7 +14,6 @@ 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'), transition: resolve(import.meta.dirname, 'transition/index.html'), transitionGroup: resolve( import.meta.dirname, diff --git a/packages/runtime-vapor/__tests__/components/KeepAlive.spec.ts b/packages/runtime-vapor/__tests__/components/KeepAlive.spec.ts index 754d83ac68..53d47651bb 100644 --- a/packages/runtime-vapor/__tests__/components/KeepAlive.spec.ts +++ b/packages/runtime-vapor/__tests__/components/KeepAlive.spec.ts @@ -1,4 +1,5 @@ import { + h, nextTick, onActivated, onBeforeMount, @@ -8,6 +9,8 @@ import { reactive, ref, shallowRef, + vModelText, + withDirectives, } from 'vue' import type { LooseRawProps, VaporComponent } from '../../src/component' import { makeRender } from '../_utils' @@ -18,10 +21,12 @@ import { createDynamicComponent, createIf, createTemplateRefSetter, + createVaporApp, defineVaporComponent, renderEffect, setText, template, + vaporInteropPlugin, } from '../../src' const define = makeRender() @@ -1186,4 +1191,107 @@ describe('VaporKeepAlive', () => { expect(deactivatedHome).toHaveBeenCalledTimes(0) expect(unmountedHome).toHaveBeenCalledTimes(1) }) + + describe('vdom interop', () => { + test('render vdom component', async () => { + const VdomComp = { + setup() { + const msg = ref('vdom') + onBeforeMount(() => oneHooks.beforeMount()) + onMounted(() => oneHooks.mounted()) + onActivated(() => oneHooks.activated()) + onDeactivated(() => oneHooks.deactivated()) + onUnmounted(() => oneHooks.unmounted()) + return () => { + return withDirectives( + h( + 'input', + { + type: 'text', + 'onUpdate:modelValue': ($event: any) => (msg.value = $event), + }, + [], + ), + [[vModelText, msg.value]], + ) + } + }, + } + + const show = ref(true) + const toggle = ref(true) + + const App = defineVaporComponent({ + setup() { + const n0 = createIf( + () => show.value, + () => { + const n5 = createComponent( + VaporKeepAlive, + null, + { + default: () => { + const n2 = createIf( + () => toggle.value, + () => { + const n4 = createComponent(VdomComp) + return n4 + }, + ) + return n2 + }, + }, + true, + ) + return n5 + }, + ) + return n0 + }, + }) + + const container = document.createElement('div') + document.body.appendChild(container) + const app = createVaporApp(App) + app.use(vaporInteropPlugin) + app.mount(container) + + expect(container.innerHTML).toBe(``) + assertHookCalls(oneHooks, [1, 1, 1, 0, 0]) + + let inputEl = container.firstChild as HTMLInputElement + expect(inputEl.value).toBe('vdom') + + inputEl.value = 'changed' + inputEl.dispatchEvent(new Event('input')) + await nextTick() + + // deactivate + toggle.value = false + await nextTick() + expect(container.innerHTML).toBe(``) + assertHookCalls(oneHooks, [1, 1, 1, 1, 0]) + + // activate + toggle.value = true + await nextTick() + expect(container.innerHTML).toBe(``) + assertHookCalls(oneHooks, [1, 1, 2, 1, 0]) + expect(inputEl.value).toBe('changed') + + // unmount keepalive + show.value = false + await nextTick() + expect(container.innerHTML).toBe(``) + assertHookCalls(oneHooks, [1, 1, 2, 2, 1]) + + // mount keepalive + show.value = true + await nextTick() + expect(container.innerHTML).toBe(``) + assertHookCalls(oneHooks, [2, 2, 3, 2, 1]) + inputEl = container.firstChild as HTMLInputElement + expect(inputEl.value).toBe('vdom') + }) + }) }) -- 2.47.3