From: daiwei Date: Thu, 23 Oct 2025 06:14:25 +0000 (+0800) Subject: refactor(tests): port async component and keepalive tests X-Git-Tag: v3.6.0-alpha.3~14 X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=3e4b55fe4086f244dc9ae86a23883e36c4a39aa7;p=thirdparty%2Fvuejs%2Fcore.git refactor(tests): port async component and keepalive tests --- diff --git a/packages-private/vapor-e2e-test/__tests__/vdomInterop.spec.ts b/packages-private/vapor-e2e-test/__tests__/vdomInterop.spec.ts index df190fe8e1..3f90814cb4 100644 --- a/packages-private/vapor-e2e-test/__tests__/vdomInterop.spec.ts +++ b/packages-private/vapor-e2e-test/__tests__/vdomInterop.spec.ts @@ -11,7 +11,6 @@ const { text, enterValue, html, - value, transitionStart, waitForElement, nextFrame, @@ -98,81 +97,6 @@ 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('loading...') - - await timeout(duration) - expect(await html(testContainer)).toBe('
foo
') - }, - E2E_TIMEOUT, - ) - }) - - describe('keepalive', () => { - test( - 'render vapor component', - async () => { - const testSelector = '.render-vapor-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('vapor') - - // 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('vapor') - calls = await page().evaluate(() => { - return (window as any).getCalls() - }) - expect(calls).toStrictEqual(['mounted', 'activated']) - }, - E2E_TIMEOUT, - ) - }) - describe('vdom transition', () => { test( 'render vapor component', diff --git a/packages-private/vapor-e2e-test/interop/App.vue b/packages-private/vapor-e2e-test/interop/App.vue index 30e99a2e5e..b0c9b778a7 100644 --- a/packages-private/vapor-e2e-test/interop/App.vue +++ b/packages-private/vapor-e2e-test/interop/App.vue @@ -1,8 +1,6 @@ - diff --git a/packages-private/vapor-e2e-test/interop/components/VdomFoo.vue b/packages-private/vapor-e2e-test/interop/components/VdomFoo.vue deleted file mode 100644 index ee13cfbb1a..0000000000 --- a/packages-private/vapor-e2e-test/interop/components/VdomFoo.vue +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/runtime-vapor/__tests__/vdomInterop.spec.ts b/packages/runtime-vapor/__tests__/vdomInterop.spec.ts index dd25f06aab..a9baea6ab2 100644 --- a/packages/runtime-vapor/__tests__/vdomInterop.spec.ts +++ b/packages/runtime-vapor/__tests__/vdomInterop.spec.ts @@ -1,8 +1,14 @@ import { + KeepAlive, createVNode, defineComponent, h, nextTick, + onActivated, + onBeforeMount, + onDeactivated, + onMounted, + onUnmounted, ref, renderSlot, toDisplayString, @@ -14,6 +20,7 @@ import { applyVShow, child, createComponent, + defineVaporAsyncComponent, defineVaporComponent, renderEffect, setText, @@ -275,4 +282,140 @@ describe('vdomInterop', () => { expect(fn).toHaveBeenCalledTimes(1) }) }) + + describe('async component', () => { + const duration = 5 + test('render vapor async component', async () => { + const VdomChild = { + setup() { + return () => h('div', 'foo') + }, + } + const VaporAsyncChild = defineVaporAsyncComponent({ + loader: () => { + return new Promise(r => { + setTimeout(() => { + r(VdomChild as any) + }, duration) + }) + }, + loadingComponent: () => h('span', 'loading...'), + }) + + const { html } = define({ + setup() { + return () => h(VaporAsyncChild as any) + }, + }).render() + + expect(html()).toBe('loading...') + + await new Promise(r => setTimeout(r, duration)) + await nextTick() + expect(html()).toBe('
foo
') + }) + }) + + describe('keepalive', () => { + function assertHookCalls( + hooks: { + beforeMount: any + mounted: any + activated: any + deactivated: any + unmounted: any + }, + callCounts: number[], + ) { + expect([ + hooks.beforeMount.mock.calls.length, + hooks.mounted.mock.calls.length, + hooks.activated.mock.calls.length, + hooks.deactivated.mock.calls.length, + hooks.unmounted.mock.calls.length, + ]).toEqual(callCounts) + } + + let hooks: any + beforeEach(() => { + hooks = { + beforeMount: vi.fn(), + mounted: vi.fn(), + activated: vi.fn(), + deactivated: vi.fn(), + unmounted: vi.fn(), + } + }) + + test('render vapor component', async () => { + const VaporChild = defineVaporComponent({ + setup() { + const msg = ref('vapor') + onBeforeMount(() => hooks.beforeMount()) + onMounted(() => hooks.mounted()) + onActivated(() => hooks.activated()) + onDeactivated(() => hooks.deactivated()) + onUnmounted(() => hooks.unmounted()) + + const n0 = template('', true)() as any + applyTextModel( + n0, + () => msg.value, + _value => (msg.value = _value), + ) + return n0 + }, + }) + + const show = ref(true) + const toggle = ref(true) + const { html, host } = define({ + setup() { + return () => + show.value + ? h(KeepAlive, null, { + default: () => (toggle.value ? h(VaporChild as any) : null), + }) + : null + }, + }).render() + + expect(html()).toBe('') + let inputEl = host.firstChild as HTMLInputElement + expect(inputEl.value).toBe('vapor') + assertHookCalls(hooks, [1, 1, 1, 0, 0]) + + // change input value + inputEl.value = 'changed' + inputEl.dispatchEvent(new Event('input')) + await nextTick() + + // deactivate + toggle.value = false + await nextTick() + expect(html()).toBe('') + assertHookCalls(hooks, [1, 1, 1, 1, 0]) + + // activate + toggle.value = true + await nextTick() + expect(html()).toBe('') + inputEl = host.firstChild as HTMLInputElement + expect(inputEl.value).toBe('changed') + assertHookCalls(hooks, [1, 1, 2, 1, 0]) + + // unmount keepalive + show.value = false + await nextTick() + expect(html()).toBe('') + assertHookCalls(hooks, [1, 1, 2, 2, 1]) + + // mount keepalive + show.value = true + await nextTick() + inputEl = host.firstChild as HTMLInputElement + expect(inputEl.value).toBe('vapor') + assertHookCalls(hooks, [2, 2, 3, 2, 1]) + }) + }) })