Skip to content

Commit 23511e5

Browse files
edison1105edison1105
committed
wip: add more tests for keepalive hmr reload
1 parent 3995a71 commit 23511e5

File tree

1 file changed

+148
-139
lines changed

1 file changed

+148
-139
lines changed

‎packages/runtime-vapor/__tests__/hmr.spec.ts‎

Lines changed: 148 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -237,158 +237,167 @@ describe('hot module replacement', () => {
237237
expect(deactivatedSpy).toHaveBeenCalledTimes(1)
238238
})
239239

240-
// // #7121
241-
// test('reload KeepAlive slot in Transition', async () => {
242-
// const root = nodeOps.createElement('div')
243-
// const childId = 'test-transition-keep-alive-reload'
244-
// const unmountSpy = vi.fn()
245-
// const mountSpy = vi.fn()
246-
// const activeSpy = vi.fn()
247-
// const deactiveSpy = vi.fn()
240+
test('reload KeepAlive slot in Transition', async () => {
241+
const root = document.createElement('div')
242+
document.body.appendChild(root)
243+
const childId = 'test-transition-keep-alive-reload'
244+
const unmountSpy = vi.fn()
245+
const mountSpy = vi.fn()
246+
const activeSpy = vi.fn()
247+
const deactivatedSpy = vi.fn()
248248

249-
// const Child: ComponentOptions = {
250-
// __hmrId: childId,
251-
// data() {
252-
// return { count: 0 }
253-
// },
254-
// unmounted: unmountSpy,
255-
// render: compileToFunction(`<div>{{ count }}</div>`),
256-
// }
257-
// createRecord(childId, Child)
249+
const Child = defineVaporComponent({
250+
__hmrId: childId,
251+
setup() {
252+
onUnmounted(unmountSpy)
253+
const count = ref(0)
254+
return { count }
255+
},
256+
render: compileToFunction(`<div>{{ count }}</div>`),
257+
})
258+
createRecord(childId, Child as any)
258259

259-
// const Parent: ComponentOptions = {
260-
// components: { Child },
261-
// data() {
262-
// return { toggle: true }
263-
// },
264-
// render: compileToFunction(
265-
// `<button @click="toggle = !toggle" />
266-
// <BaseTransition>
267-
// <KeepAlive><Child v-if="toggle" /></KeepAlive>
268-
// </BaseTransition>`,
269-
// ),
270-
// }
260+
const Parent = defineVaporComponent({
261+
__hmrId: 'parentId',
262+
// @ts-expect-error
263+
components: { Child },
264+
setup() {
265+
const toggle = ref(true)
266+
return { toggle }
267+
},
268+
render: compileToFunction(
269+
`<button @click="toggle = !toggle" />
270+
<Transition>
271+
<KeepAlive><Child v-if="toggle" /></KeepAlive>
272+
</Transition>`,
273+
),
274+
})
271275

272-
// render(h(Parent), root)
273-
// expect(serializeInner(root)).toBe(`<button></button><div>0</div>`)
276+
define(Parent).create().mount(root)
277+
expect(root.innerHTML).toBe(`<button></button><div>0</div><!--if-->`)
274278

275-
// reload(childId, {
276-
// __hmrId: childId,
277-
// data() {
278-
// return { count: 1 }
279-
// },
280-
// mounted: mountSpy,
281-
// unmounted: unmountSpy,
282-
// activated: activeSpy,
283-
// deactivated: deactiveSpy,
284-
// render: compileToFunction(`<div>{{ count }}</div>`),
285-
// })
286-
// await nextTick()
287-
// expect(serializeInner(root)).toBe(`<button></button><div>1</div>`)
288-
// expect(unmountSpy).toHaveBeenCalledTimes(1)
289-
// expect(mountSpy).toHaveBeenCalledTimes(1)
290-
// expect(activeSpy).toHaveBeenCalledTimes(1)
291-
// expect(deactiveSpy).toHaveBeenCalledTimes(0)
279+
reload(childId, {
280+
__hmrId: childId,
281+
__vapor: true,
282+
setup() {
283+
onMounted(mountSpy)
284+
onUnmounted(unmountSpy)
285+
onActivated(activeSpy)
286+
onDeactivated(deactivatedSpy)
287+
const count = ref(1)
288+
return { count }
289+
},
290+
render: compileToFunction(`<div>{{ count }}</div>`),
291+
})
292+
await nextTick()
293+
expect(root.innerHTML).toBe(`<button></button><div>1</div><!--if-->`)
294+
expect(unmountSpy).toHaveBeenCalledTimes(1)
295+
expect(mountSpy).toHaveBeenCalledTimes(1)
296+
expect(activeSpy).toHaveBeenCalledTimes(1)
297+
expect(deactivatedSpy).toHaveBeenCalledTimes(0)
292298

293-
// // should not unmount when toggling
294-
// triggerEvent(root.children[1] as TestElement, 'click')
295-
// await nextTick()
296-
// expect(serializeInner(root)).toBe(`<button></button><!--v-if-->`)
297-
// expect(unmountSpy).toHaveBeenCalledTimes(1)
298-
// expect(mountSpy).toHaveBeenCalledTimes(1)
299-
// expect(activeSpy).toHaveBeenCalledTimes(1)
300-
// expect(deactiveSpy).toHaveBeenCalledTimes(1)
299+
// should not unmount when toggling
300+
triggerEvent('click', root.children[0] as Element)
301+
await nextTick()
302+
expect(root.innerHTML).toBe(`<button></button><!--if-->`)
303+
expect(unmountSpy).toHaveBeenCalledTimes(1)
304+
expect(mountSpy).toHaveBeenCalledTimes(1)
305+
expect(activeSpy).toHaveBeenCalledTimes(1)
306+
expect(deactivatedSpy).toHaveBeenCalledTimes(1)
301307

302-
// // should not mount when toggling
303-
// triggerEvent(root.children[1] as TestElement, 'click')
304-
// await nextTick()
305-
// expect(serializeInner(root)).toBe(`<button></button><div>1</div>`)
306-
// expect(unmountSpy).toHaveBeenCalledTimes(1)
307-
// expect(mountSpy).toHaveBeenCalledTimes(1)
308-
// expect(activeSpy).toHaveBeenCalledTimes(2)
309-
// expect(deactiveSpy).toHaveBeenCalledTimes(1)
310-
// })
308+
// should not mount when toggling
309+
triggerEvent('click', root.children[0] as Element)
310+
await nextTick()
311+
expect(root.innerHTML).toBe(`<button></button><div>1</div><!--if-->`)
312+
expect(unmountSpy).toHaveBeenCalledTimes(1)
313+
expect(mountSpy).toHaveBeenCalledTimes(1)
314+
expect(activeSpy).toHaveBeenCalledTimes(2)
315+
expect(deactivatedSpy).toHaveBeenCalledTimes(1)
316+
})
311317

312-
// test('reload KeepAlive slot in Transition with out-in', async () => {
313-
// const root = nodeOps.createElement('div')
314-
// const childId = 'test-transition-keep-alive-reload-with-out-in'
315-
// const unmountSpy = vi.fn()
316-
// const mountSpy = vi.fn()
317-
// const activeSpy = vi.fn()
318-
// const deactiveSpy = vi.fn()
318+
test('reload KeepAlive slot in Transition with out-in', async () => {
319+
const root = document.createElement('div')
320+
document.body.appendChild(root)
321+
const childId = 'test-transition-keep-alive-reload-with-out-in'
322+
const unmountSpy = vi.fn()
323+
const mountSpy = vi.fn()
324+
const activeSpy = vi.fn()
325+
const deactivatedSpy = vi.fn()
319326

320-
// const Child: ComponentOptions = {
321-
// __hmrId: childId,
322-
// name: 'original',
323-
// data() {
324-
// return { count: 0 }
325-
// },
326-
// unmounted: unmountSpy,
327-
// render: compileToFunction(`<div>{{ count }}</div>`),
328-
// }
329-
// createRecord(childId, Child)
327+
const Child = defineVaporComponent({
328+
name: 'original',
329+
__hmrId: childId,
330+
setup() {
331+
onUnmounted(unmountSpy)
332+
const count = ref(0)
333+
return { count }
334+
},
335+
render: compileToFunction(`<div>{{ count }}</div>`),
336+
})
337+
createRecord(childId, Child as any)
330338

331-
// const Parent: ComponentOptions = {
332-
// components: { Child },
333-
// data() {
334-
// return { toggle: true }
335-
// },
336-
// methods: {
337-
// // @ts-expect-error
338-
// onLeave(_, done) {
339-
// setTimeout(done, 0)
340-
// },
341-
// },
342-
// render: compileToFunction(
343-
// `<button @click="toggle = !toggle" />
344-
// <BaseTransition mode="out-in" @leave="onLeave">
345-
// <KeepAlive><Child v-if="toggle" /></KeepAlive>
346-
// </BaseTransition>`,
347-
// ),
348-
// }
339+
const Parent = defineVaporComponent({
340+
// @ts-expect-error
341+
components: { Child },
342+
setup() {
343+
function onLeave(_: any, done: Function) {
344+
setTimeout(done, 0)
345+
}
346+
const toggle = ref(true)
347+
return { toggle, onLeave }
348+
},
349+
render: compileToFunction(
350+
`<button @click="toggle = !toggle" />
351+
<Transition mode="out-in" @leave="onLeave">
352+
<KeepAlive><Child v-if="toggle" /></KeepAlive>
353+
</Transition>`,
354+
),
355+
})
349356

350-
// render(h(Parent), root)
351-
// expect(serializeInner(root)).toBe(`<button></button><div>0</div>`)
357+
define(Parent).create().mount(root)
358+
expect(root.innerHTML).toBe(`<button></button><div>0</div><!--if-->`)
352359

353-
// reload(childId, {
354-
// __hmrId: childId,
355-
// name: 'updated',
356-
// data() {
357-
// return { count: 1 }
358-
// },
359-
// mounted: mountSpy,
360-
// unmounted: unmountSpy,
361-
// activated: activeSpy,
362-
// deactivated: deactiveSpy,
363-
// render: compileToFunction(`<div>{{ count }}</div>`),
364-
// })
365-
// await nextTick()
366-
// await new Promise(r => setTimeout(r, 0))
367-
// expect(serializeInner(root)).toBe(`<button></button><div>1</div>`)
368-
// expect(unmountSpy).toHaveBeenCalledTimes(1)
369-
// expect(mountSpy).toHaveBeenCalledTimes(1)
370-
// expect(activeSpy).toHaveBeenCalledTimes(1)
371-
// expect(deactiveSpy).toHaveBeenCalledTimes(0)
360+
reload(childId, {
361+
name: 'updated',
362+
__hmrId: childId,
363+
__vapor: true,
364+
setup() {
365+
onMounted(mountSpy)
366+
onUnmounted(unmountSpy)
367+
onActivated(activeSpy)
368+
onDeactivated(deactivatedSpy)
369+
const count = ref(1)
370+
return { count }
371+
},
372+
render: compileToFunction(`<div>{{ count }}</div>`),
373+
})
374+
await nextTick()
375+
await new Promise(r => setTimeout(r, 0))
376+
expect(root.innerHTML).toBe(`<button></button><div>1</div><!--if-->`)
377+
expect(unmountSpy).toHaveBeenCalledTimes(1)
378+
expect(mountSpy).toHaveBeenCalledTimes(1)
379+
expect(activeSpy).toHaveBeenCalledTimes(1)
380+
expect(deactivatedSpy).toHaveBeenCalledTimes(0)
372381

373-
// // should not unmount when toggling
374-
// triggerEvent(root.children[1] as TestElement, 'click')
375-
// await nextTick()
376-
// await new Promise(r => setTimeout(r, 0))
377-
// expect(serializeInner(root)).toBe(`<button></button><!--v-if-->`)
378-
// expect(unmountSpy).toHaveBeenCalledTimes(1)
379-
// expect(mountSpy).toHaveBeenCalledTimes(1)
380-
// expect(activeSpy).toHaveBeenCalledTimes(1)
381-
// expect(deactiveSpy).toHaveBeenCalledTimes(1)
382+
// should not unmount when toggling
383+
triggerEvent('click', root.children[0] as Element)
384+
await nextTick()
385+
await new Promise(r => setTimeout(r, 0))
386+
expect(root.innerHTML).toBe(`<button></button><!--if-->`)
387+
expect(unmountSpy).toHaveBeenCalledTimes(1)
388+
expect(mountSpy).toHaveBeenCalledTimes(1)
389+
expect(activeSpy).toHaveBeenCalledTimes(1)
390+
expect(deactivatedSpy).toHaveBeenCalledTimes(1)
382391

383-
// // should not mount when toggling
384-
// triggerEvent(root.children[1] as TestElement, 'click')
385-
// await nextTick()
386-
// expect(serializeInner(root)).toBe(`<button></button><div>1</div>`)
387-
// expect(unmountSpy).toHaveBeenCalledTimes(1)
388-
// expect(mountSpy).toHaveBeenCalledTimes(1)
389-
// expect(activeSpy).toHaveBeenCalledTimes(2)
390-
// expect(deactiveSpy).toHaveBeenCalledTimes(1)
391-
// })
392+
// should not mount when toggling
393+
triggerEvent('click', root.children[0] as Element)
394+
await nextTick()
395+
expect(root.innerHTML).toBe(`<button></button><div>1</div><!--if-->`)
396+
expect(unmountSpy).toHaveBeenCalledTimes(1)
397+
expect(mountSpy).toHaveBeenCalledTimes(1)
398+
expect(activeSpy).toHaveBeenCalledTimes(2)
399+
expect(deactivatedSpy).toHaveBeenCalledTimes(1)
400+
})
392401

393402
// test('reload class component', async () => {
394403
// const root = nodeOps.createElement('div')

0 commit comments

Comments
 (0)