Skip to content

Commit aa7e196

Browse files
LittleSoundLittleSound
committed
test: lifecycle hooks of dynamic sub-components
1 parent 5eb43b0 commit aa7e196

File tree

2 files changed

+199
-37
lines changed

2 files changed

+199
-37
lines changed

Diff for: ‎packages/runtime-vapor/__tests__/apiLifecycle.spec.ts

+62-36
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ describe('api: lifecycle hooks', () => {
165165

166166
toggle.value = false
167167
await nextTick()
168-
// expect(fn).toHaveBeenCalledTimes(1) // FIXME: not called
168+
expect(fn).toHaveBeenCalledTimes(1)
169169
expect(host.innerHTML).toBe('<!--if-->')
170170
})
171171

@@ -201,7 +201,7 @@ describe('api: lifecycle hooks', () => {
201201

202202
toggle.value = false
203203
await nextTick()
204-
// expect(fn).toHaveBeenCalledTimes(1) // FIXME: not called
204+
expect(fn).toHaveBeenCalledTimes(1)
205205
expect(host.innerHTML).toBe('<!--if-->')
206206
})
207207

@@ -239,29 +239,32 @@ describe('api: lifecycle hooks', () => {
239239

240240
toggle.value = false
241241
await nextTick()
242-
// expect(fn).toHaveBeenCalledTimes(1) // FIXME: not called
242+
expect(fn).toHaveBeenCalledTimes(1)
243243
expect(host.innerHTML).toBe('<!--if-->')
244244
})
245245

246246
it('lifecycle call order', async () => {
247-
const count = ref(0)
247+
const rootCounter = ref(0)
248+
const propsCounter = ref(0)
248249
const toggle = ref(true)
249250
const calls: string[] = []
250251

251252
const { render } = define({
252253
setup() {
253-
onBeforeMount(() => calls.push('onBeforeMount'))
254-
onMounted(() => calls.push('onMounted'))
255-
onBeforeUpdate(() => calls.push('onBeforeUpdate'))
256-
onUpdated(() => calls.push('onUpdated'))
257-
onBeforeUnmount(() => calls.push('onBeforeUnmount'))
258-
onUnmounted(() => calls.push('onUnmounted'))
254+
onBeforeMount(() => calls.push('root onBeforeMount'))
255+
onMounted(() => calls.push('root onMounted'))
256+
onBeforeUpdate(() => calls.push('root onBeforeUpdate'))
257+
onUpdated(() => calls.push('root onUpdated'))
258+
onBeforeUnmount(() => calls.push('root onBeforeUnmount'))
259+
onUnmounted(() => calls.push('root onUnmounted'))
259260
return (() => {
260-
const n0 = createIf(
261+
const n0 = template('<p></p>')()
262+
renderEffect(() => setText(n0, rootCounter.value))
263+
const n1 = createIf(
261264
() => toggle.value,
262-
() => createComponent(Mid, { count: () => count.value }),
265+
() => createComponent(Mid, { count: () => propsCounter.value }),
263266
)
264-
return n0
267+
return [n0, n1]
265268
})()
266269
},
267270
})
@@ -303,42 +306,65 @@ describe('api: lifecycle hooks', () => {
303306
// mount
304307
render()
305308
expect(calls).toEqual([
306-
'onBeforeMount',
309+
'root onBeforeMount',
307310
'mid onBeforeMount',
308311
'child onBeforeMount',
309312
'child onMounted',
310313
'mid onMounted',
311-
'onMounted',
314+
'root onMounted',
312315
])
313316

314317
calls.length = 0
315318

316-
// update
317-
count.value++
319+
// props update
320+
propsCounter.value++
321+
await nextTick()
322+
// There are no calls in the root and mid,
323+
// but maybe such performance would be better.
324+
expect(calls).toEqual([
325+
// 'root onBeforeUpdate',
326+
// 'mid onBeforeUpdate',
327+
'child onBeforeUpdate',
328+
'child onUpdated',
329+
// 'mid onUpdated',
330+
// 'root onUpdated',
331+
])
332+
333+
calls.length = 0
334+
335+
// root update
336+
rootCounter.value++
318337
await nextTick()
319-
// FIXME: not called
320-
// expect(calls).toEqual([
321-
// 'root onBeforeUpdate',
322-
// 'mid onBeforeUpdate',
323-
// 'child onBeforeUpdate',
324-
// 'child onUpdated',
325-
// 'mid onUpdated',
326-
// 'root onUpdated',
327-
// ])
338+
// Root update events should not be passed to children.
339+
expect(calls).toEqual(['root onBeforeUpdate', 'root onUpdated'])
328340

329341
calls.length = 0
330342

331343
// unmount
332344
toggle.value = false
333-
// FIXME: not called
334-
// expect(calls).toEqual([
335-
// 'root onBeforeUnmount',
336-
// 'mid onBeforeUnmount',
337-
// 'child onBeforeUnmount',
338-
// 'child onUnmounted',
339-
// 'mid onUnmounted',
340-
// 'root onUnmounted',
341-
// ])
345+
await nextTick()
346+
expect(calls).toEqual([
347+
'root onBeforeUpdate',
348+
'mid onBeforeUnmount',
349+
'child onBeforeUnmount',
350+
'child onUnmounted',
351+
'mid onUnmounted',
352+
'root onUpdated',
353+
])
354+
355+
calls.length = 0
356+
357+
// mount
358+
toggle.value = true
359+
await nextTick()
360+
expect(calls).toEqual([
361+
'root onBeforeUpdate',
362+
'mid onBeforeMount',
363+
'child onBeforeMount',
364+
'child onMounted',
365+
'mid onMounted',
366+
'root onUpdated',
367+
])
342368
})
343369

344370
it('onRenderTracked', async () => {
@@ -458,7 +484,7 @@ describe('api: lifecycle hooks', () => {
458484
expect(fn).toHaveBeenCalledTimes(2)
459485
toggle.value = false
460486
await nextTick()
461-
// expect(fn).toHaveBeenCalledTimes(4) // FIXME: not called unmounted hook
487+
expect(fn).toHaveBeenCalledTimes(4)
462488
})
463489

464490
// #136

Diff for: ‎packages/runtime-vapor/__tests__/component.spec.ts

+137-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,15 @@
1-
import { ref, setText, template, watchEffect } from '../src'
1+
import {
2+
type Directive,
3+
createComponent,
4+
createIf,
5+
nextTick,
6+
ref,
7+
renderEffect,
8+
setText,
9+
template,
10+
watchEffect,
11+
withDirectives,
12+
} from '../src'
213
import { describe, expect } from 'vitest'
314
import { makeRender } from './_utils'
415

@@ -19,4 +30,129 @@ describe('component', () => {
1930
app.unmount()
2031
expect(host.innerHTML).toBe('')
2132
})
33+
34+
it('directive lifecycle hooks call order', async () => {
35+
const rootCounter = ref(0)
36+
const propsCounter = ref(0)
37+
const toggle = ref(true)
38+
const calls: string[] = []
39+
40+
const vDirective = (name: string): Directive => ({
41+
created: () => calls.push(`${name} created`),
42+
beforeMount: () => calls.push(`${name} beforeMount`),
43+
mounted: () => calls.push(`${name} mounted`),
44+
beforeUpdate: () => calls.push(`${name} beforeUpdate`),
45+
updated: () => calls.push(`${name} updated`),
46+
beforeUnmount: () => calls.push(`${name} beforeUnmount`),
47+
unmounted: () => calls.push(`${name} unmounted`),
48+
})
49+
50+
const { render } = define({
51+
setup() {
52+
return (() => {
53+
const n0 = withDirectives(template('<p></p>')(), [
54+
[vDirective('root')],
55+
])
56+
renderEffect(() => setText(n0, rootCounter.value))
57+
const n1 = createIf(
58+
() => toggle.value,
59+
() => createComponent(Mid, { count: () => propsCounter.value }),
60+
)
61+
return [n0, n1]
62+
})()
63+
},
64+
})
65+
66+
const Mid = {
67+
props: ['count'],
68+
setup(props: any) {
69+
return (() => {
70+
withDirectives(template('<p></p>')(), [[vDirective('mid')]])
71+
const n0 = createComponent(Child, { count: () => props.count })
72+
return n0
73+
})()
74+
},
75+
}
76+
77+
const Child = {
78+
props: ['count'],
79+
setup(props: any) {
80+
return (() => {
81+
const t0 = template('<div></div>')
82+
const n0 = t0()
83+
withDirectives(n0, [[vDirective('child')]])
84+
renderEffect(() => setText(n0, props.count))
85+
return n0
86+
})()
87+
},
88+
}
89+
90+
// mount
91+
render()
92+
expect(calls).toEqual([
93+
'root created',
94+
'mid created',
95+
'child created',
96+
'root beforeMount',
97+
'mid beforeMount',
98+
'child beforeMount',
99+
'child mounted',
100+
'mid mounted',
101+
'root mounted',
102+
])
103+
104+
calls.length = 0
105+
106+
// props update
107+
propsCounter.value++
108+
await nextTick()
109+
// There are no calls in the root and mid,
110+
// but maybe such performance would be better.
111+
expect(calls).toEqual([
112+
// 'root beforeUpdate',
113+
// 'mid beforeUpdate',
114+
'child beforeUpdate',
115+
'child updated',
116+
// 'mid updated',
117+
// 'root updated',
118+
])
119+
120+
calls.length = 0
121+
122+
// root update
123+
rootCounter.value++
124+
await nextTick()
125+
// Root update events should not be passed to children.
126+
expect(calls).toEqual(['root beforeUpdate', 'root updated'])
127+
128+
calls.length = 0
129+
130+
// unmount
131+
toggle.value = false
132+
await nextTick()
133+
expect(calls).toEqual([
134+
'root beforeUpdate',
135+
'mid beforeUnmount',
136+
'child beforeUnmount',
137+
'child unmounted',
138+
'mid unmounted',
139+
'root updated',
140+
])
141+
142+
calls.length = 0
143+
144+
// mount
145+
toggle.value = true
146+
await nextTick()
147+
expect(calls).toEqual([
148+
'root beforeUpdate',
149+
'mid created',
150+
'child created',
151+
'mid beforeMount',
152+
'child beforeMount',
153+
'child mounted',
154+
'mid mounted',
155+
'root updated',
156+
])
157+
})
22158
})

0 commit comments

Comments
 (0)