Skip to content

Commit 83f03be

Browse files
edison1105edison1105
committed
wip: add more tests
1 parent cbacde5 commit 83f03be

File tree

2 files changed

+159
-19
lines changed

2 files changed

+159
-19
lines changed

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

Lines changed: 155 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -82,20 +82,22 @@ async function testWithVDOMApp(
8282
async function mountWithHydration(
8383
html: string,
8484
code: string,
85-
data: runtimeDom.Ref<any>,
85+
data: runtimeDom.Ref<any> = ref({}),
86+
components?: Record<string, any>,
8687
) {
8788
const container = document.createElement('div')
8889
container.innerHTML = html
90+
document.body.appendChild(container)
8991

90-
const clientComp = compile(`<template>${code}</template>`, data, undefined, {
92+
const clientComp = compile(`<template>${code}</template>`, data, components, {
9193
vapor: true,
9294
ssr: false,
9395
})
9496
const app = createVaporSSRApp(clientComp)
9597
app.mount(container)
9698

9799
return {
98-
frag: (app._instance! as VaporComponentInstance).block as TeleportFragment,
100+
block: (app._instance! as VaporComponentInstance).block,
99101
container,
100102
}
101103
}
@@ -2888,7 +2890,7 @@ describe('Vapor Mode hydration', () => {
28882890
teleportContainer.id = 'teleport'
28892891
teleportContainer.innerHTML = `<!--teleport start anchor--><span>foo</span><span class="foo"></span><!--teleport anchor-->`
28902892
document.body.appendChild(teleportContainer)
2891-
const { frag, container } = await mountWithHydration(
2893+
const { block, container } = await mountWithHydration(
28922894
'<!--teleport start--><!--teleport end-->',
28932895
`<teleport to="#teleport" :disabled="data.disabled">
28942896
<span>{{data.msg}}</span>
@@ -2897,12 +2899,17 @@ describe('Vapor Mode hydration', () => {
28972899
data,
28982900
)
28992901

2900-
expect(frag.anchor).toBe(container.lastChild)
2901-
expect(frag.target).toBe(teleportContainer)
2902-
expect(frag.targetStart).toBe(teleportContainer.childNodes[0])
2903-
expect((frag.nodes as Node[])[0]).toBe(teleportContainer.childNodes[1])
2904-
expect((frag.nodes as Node[])[1]).toBe(teleportContainer.childNodes[2])
2905-
expect(frag.targetAnchor).toBe(teleportContainer.childNodes[3])
2902+
const teleport = block as TeleportFragment
2903+
expect(teleport.anchor).toBe(container.lastChild)
2904+
expect(teleport.target).toBe(teleportContainer)
2905+
expect(teleport.targetStart).toBe(teleportContainer.childNodes[0])
2906+
expect((teleport.nodes as Node[])[0]).toBe(
2907+
teleportContainer.childNodes[1],
2908+
)
2909+
expect((teleport.nodes as Node[])[1]).toBe(
2910+
teleportContainer.childNodes[2],
2911+
)
2912+
expect(teleport.targetAnchor).toBe(teleportContainer.childNodes[3])
29062913

29072914
expect(container.innerHTML).toMatchInlineSnapshot(
29082915
`"<!--teleport start--><!--teleport end-->"`,
@@ -2989,9 +2996,13 @@ describe('Vapor Mode hydration', () => {
29892996
teleportContainer.innerHTML = teleportHtml
29902997
document.body.appendChild(teleportContainer)
29912998

2992-
const { frag, container } = await mountWithHydration(mainHtml, code, data)
2999+
const { block, container } = await mountWithHydration(
3000+
mainHtml,
3001+
code,
3002+
data,
3003+
)
29933004

2994-
const teleports = frag as any as TeleportFragment[]
3005+
const teleports = block as any as TeleportFragment[]
29953006
const teleport1 = teleports[0]
29963007
const teleport2 = teleports[1]
29973008
expect(teleport1.anchor).toBe(container.childNodes[2])
@@ -3029,11 +3040,140 @@ describe('Vapor Mode hydration', () => {
30293040
)
30303041
})
30313042

3032-
test('disabled', async () => {})
3043+
test('disabled', async () => {
3044+
const data = ref({
3045+
msg: ref('foo'),
3046+
fn1: vi.fn(),
3047+
fn2: vi.fn(),
3048+
})
3049+
3050+
const code = `
3051+
<div>foo</div>
3052+
<teleport to="#teleport3" disabled="true">
3053+
<span>{{data.msg}}</span>
3054+
<span :class="data.msg" @click="data.fn1"></span>
3055+
</teleport>
3056+
<div :class="data.msg + 2" @click="data.fn2">bar</div>
3057+
`
3058+
3059+
const serverComp = compile(
3060+
`<template>${code}</template>`,
3061+
data,
3062+
undefined,
3063+
{
3064+
vapor: true,
3065+
ssr: true,
3066+
},
3067+
)
3068+
3069+
const teleportContainer = document.createElement('div')
3070+
teleportContainer.id = 'teleport3'
3071+
const ctx = {} as any
3072+
const mainHtml = await VueServerRenderer.renderToString(
3073+
runtimeDom.createSSRApp(serverComp),
3074+
ctx,
3075+
)
3076+
expect(mainHtml).toMatchInlineSnapshot(
3077+
`"<!--[--><div>foo</div><!--teleport start--><span>foo</span><span class="foo"></span><!--teleport end--><div class="foo2">bar</div><!--]-->"`,
3078+
)
3079+
3080+
const teleportHtml = ctx.teleports!['#teleport3']
3081+
expect(teleportHtml).toMatchInlineSnapshot(
3082+
`"<!--teleport start anchor--><!--teleport anchor-->"`,
3083+
)
3084+
3085+
teleportContainer.innerHTML = teleportHtml
3086+
document.body.appendChild(teleportContainer)
3087+
3088+
const { block, container } = await mountWithHydration(
3089+
mainHtml,
3090+
code,
3091+
data,
3092+
)
3093+
3094+
const blocks = block as any[]
3095+
expect(blocks[0]).toBe(container.childNodes[1])
3096+
3097+
const teleport = blocks[1] as TeleportFragment
3098+
expect((teleport.nodes as Node[])[0]).toBe(container.childNodes[3])
3099+
expect((teleport.nodes as Node[])[1]).toBe(container.childNodes[4])
3100+
expect(teleport.anchor).toBe(container.childNodes[5])
3101+
expect(teleport.target).toBe(teleportContainer)
3102+
expect(teleport.targetStart).toBe(teleportContainer.childNodes[0])
3103+
expect(teleport.targetAnchor).toBe(teleportContainer.childNodes[1])
3104+
expect(blocks[2]).toBe(container.childNodes[6])
3105+
3106+
expect(container.innerHTML).toMatchInlineSnapshot(
3107+
`"<!--[--><div>foo</div><!--teleport start--><span>foo</span><span class="foo"></span><!--teleport end--><div class="foo2">bar</div><!--]-->"`,
3108+
)
3109+
3110+
// event handler
3111+
triggerEvent('click', container.querySelector('.foo')!)
3112+
expect(data.value.fn1).toHaveBeenCalled()
3113+
3114+
triggerEvent('click', container.querySelector('.foo2')!)
3115+
expect(data.value.fn2).toHaveBeenCalled()
3116+
3117+
data.value.msg = 'bar'
3118+
await nextTick()
3119+
expect(container.innerHTML).toMatchInlineSnapshot(
3120+
`"<!--[--><div>foo</div><!--teleport start--><span>bar</span><span class="bar"></span><!--teleport end--><div class="bar2">bar</div><!--]-->"`,
3121+
)
3122+
})
3123+
3124+
test('disabled + as component root', async () => {
3125+
const { container } = await mountWithHydration(
3126+
'<!--[--><div>Parent fragment</div><!--teleport start--><div>Teleport content</div><!--teleport end--><!--]-->',
3127+
`
3128+
<div>Parent fragment</div>
3129+
<teleport to="body" disabled>
3130+
<div>Teleport content</div>
3131+
</teleport>
3132+
`,
3133+
)
3134+
expect(container.innerHTML).toBe(
3135+
'<!--[--><div>Parent fragment</div><!--teleport start--><div>Teleport content</div><!--teleport end--><!--]-->',
3136+
)
3137+
expect(
3138+
`Hydration completed but contains mismatches.`,
3139+
).not.toHaveBeenWarned()
3140+
})
30333141

3034-
test('disabled + as component root', async () => {})
3142+
test('as component root', async () => {
3143+
const teleportContainer = document.createElement('div')
3144+
teleportContainer.id = 'teleport4'
3145+
teleportContainer.innerHTML = `<!--teleport start anchor-->hello<!--teleport anchor-->`
3146+
document.body.appendChild(teleportContainer)
30353147

3036-
test('as component root', async () => {})
3148+
const Wrapper = compile(
3149+
`<template>
3150+
<teleport to="#teleport4">hello</teleport>
3151+
</template>`,
3152+
ref({}),
3153+
undefined,
3154+
{
3155+
vapor: true,
3156+
ssr: false,
3157+
},
3158+
)
3159+
3160+
const { block, container } = await mountWithHydration(
3161+
'<!--teleport start--><!--teleport end-->',
3162+
`<components.Wrapper></components.Wrapper>`,
3163+
undefined,
3164+
{
3165+
Wrapper,
3166+
},
3167+
)
3168+
3169+
const teleport = (block as VaporComponentInstance)
3170+
.block as TeleportFragment
3171+
expect(teleport.anchor).toBe(container.childNodes[1])
3172+
expect(teleport.target).toBe(teleportContainer)
3173+
expect(teleport.targetStart).toBe(teleportContainer.childNodes[0])
3174+
expect(teleport.nodes).toBe(teleportContainer.childNodes[1])
3175+
expect(teleport.targetAnchor).toBe(teleportContainer.childNodes[2])
3176+
})
30373177

30383178
test('nested', async () => {})
30393179

‎packages/runtime-vapor/src/components/Teleport.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,7 @@ export class TeleportFragment extends VaporFragment {
230230
setCurrentHydrationNode(nextNode)
231231
this.anchor = locateTeleportEndAnchor(nextNode)!
232232
this.targetStart = targetNode
233-
this.targetAnchor = targetNode && targetNode.nextSibling!
233+
this.targetAnchor = targetNode && targetNode.nextSibling
234234
} else {
235235
this.anchor = locateTeleportEndAnchor()!
236236
let targetAnchor = targetNode
@@ -241,13 +241,13 @@ export class TeleportFragment extends VaporFragment {
241241
} else if ((targetAnchor as Comment).data === 'teleport anchor') {
242242
this.targetAnchor = targetAnchor
243243
;(target as TeleportTargetElement)._lpa =
244-
this.targetAnchor && this.targetAnchor.nextSibling!
244+
this.targetAnchor && this.targetAnchor.nextSibling
245245
break
246246
}
247247
}
248-
targetAnchor = targetAnchor.nextSibling!
248+
targetAnchor = targetAnchor.nextSibling
249249
}
250-
setCurrentHydrationNode(targetNode && targetNode.nextSibling!)
250+
setCurrentHydrationNode(targetNode && targetNode.nextSibling)
251251
}
252252

253253
this.initChildren()

0 commit comments

Comments
 (0)