Skip to content

Commit 9f0a509

Browse files
edison1105edison1105
committed
wip: add tests
1 parent 04eadd8 commit 9f0a509

File tree

1 file changed

+192
-0
lines changed

1 file changed

+192
-0
lines changed

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

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,48 @@ describe('Vapor Mode hydration', () => {
264264
)
265265
})
266266

267+
test('nested components with anchor insertion', async () => {
268+
const { container, data } = await testHydration(
269+
`
270+
<template><components.Parent/></template>
271+
`,
272+
{
273+
Parent: `<template><div><span/><components.Child/><span/></div></template>`,
274+
Child: `<template><div>{{ data }}</div></template>`,
275+
},
276+
)
277+
expect(container.innerHTML).toMatchInlineSnapshot(
278+
`"<div><span></span><div>foo</div><span></span></div>"`,
279+
)
280+
281+
data.value = 'bar'
282+
await nextTick()
283+
expect(container.innerHTML).toMatchInlineSnapshot(
284+
`"<div><span></span><div>bar</div><span></span></div>"`,
285+
)
286+
})
287+
288+
test('nested components with multi level anchor insertion', async () => {
289+
const { container, data } = await testHydration(
290+
`
291+
<template><div><span></span><components.Parent/><span></span></div></template>
292+
`,
293+
{
294+
Parent: `<template><div><span/><components.Child/><span/></div></template>`,
295+
Child: `<template><div>{{ data }}</div></template>`,
296+
},
297+
)
298+
expect(container.innerHTML).toMatchInlineSnapshot(
299+
`"<div><span></span><div><span></span><div>foo</div><span></span></div><span></span></div>"`,
300+
)
301+
302+
data.value = 'bar'
303+
await nextTick()
304+
expect(container.innerHTML).toMatchInlineSnapshot(
305+
`"<div><span></span><div><span></span><div>bar</div><span></span></div><span></span></div>"`,
306+
)
307+
})
308+
267309
test('consecutive components with anchor insertion', async () => {
268310
const { container, data } = await testHydration(
269311
`<template>
@@ -290,6 +332,48 @@ describe('Vapor Mode hydration', () => {
290332
)
291333
})
292334

335+
test('nested consecutive components with anchor insertion', async () => {
336+
const { container, data } = await testHydration(
337+
`
338+
<template><components.Parent/></template>
339+
`,
340+
{
341+
Parent: `<template><div><span/><components.Child/><components.Child/><span/></div></template>`,
342+
Child: `<template><div>{{ data }}</div></template>`,
343+
},
344+
)
345+
expect(container.innerHTML).toMatchInlineSnapshot(
346+
`"<div><span></span><div>foo</div><!--[[--><div>foo</div><!--]]--><span></span></div>"`,
347+
)
348+
349+
data.value = 'bar'
350+
await nextTick()
351+
expect(container.innerHTML).toMatchInlineSnapshot(
352+
`"<div><span></span><div>bar</div><!--[[--><div>bar</div><!--]]--><span></span></div>"`,
353+
)
354+
})
355+
356+
test('nested consecutive components with multi level anchor insertion', async () => {
357+
const { container, data } = await testHydration(
358+
`
359+
<template><div><span></span><components.Parent/><span></span></div></template>
360+
`,
361+
{
362+
Parent: `<template><div><span/><components.Child/><components.Child/><span/></div></template>`,
363+
Child: `<template><div>{{ data }}</div></template>`,
364+
},
365+
)
366+
expect(container.innerHTML).toMatchInlineSnapshot(
367+
`"<div><span></span><div><span></span><div>foo</div><!--[[--><div>foo</div><!--]]--><span></span></div><span></span></div>"`,
368+
)
369+
370+
data.value = 'bar'
371+
await nextTick()
372+
expect(container.innerHTML).toMatchInlineSnapshot(
373+
`"<div><span></span><div><span></span><div>bar</div><!--[[--><div>bar</div><!--]]--><span></span></div><span></span></div>"`,
374+
)
375+
})
376+
293377
test('mixed component and element with anchor insertion', async () => {
294378
const { container, data } = await testHydration(
295379
`<template>
@@ -369,6 +453,48 @@ describe('Vapor Mode hydration', () => {
369453
)
370454
})
371455

456+
test('nested fragment component with anchor insertion', async () => {
457+
const { container, data } = await testHydration(
458+
`
459+
<template><components.Parent/></template>
460+
`,
461+
{
462+
Parent: `<template><div><span/><components.Child/><span/></div></template>`,
463+
Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
464+
},
465+
)
466+
expect(container.innerHTML).toMatchInlineSnapshot(
467+
`"<div><span></span><!--[--><div>foo</div>-foo-<!--]--><span></span></div>"`,
468+
)
469+
470+
data.value = 'bar'
471+
await nextTick()
472+
expect(container.innerHTML).toMatchInlineSnapshot(
473+
`"<div><span></span><!--[--><div>bar</div>-bar-<!--]--><span></span></div>"`,
474+
)
475+
})
476+
477+
test('nested fragment component with multi level anchor insertion', async () => {
478+
const { container, data } = await testHydration(
479+
`
480+
<template><div><span/><components.Parent/><span/></div></template>
481+
`,
482+
{
483+
Parent: `<template><div><span/><components.Child/><span/></div></template>`,
484+
Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
485+
},
486+
)
487+
expect(container.innerHTML).toMatchInlineSnapshot(
488+
`"<div><span></span><div><span></span><!--[--><div>foo</div>-foo-<!--]--><span></span></div><span></span></div>"`,
489+
)
490+
491+
data.value = 'bar'
492+
await nextTick()
493+
expect(container.innerHTML).toMatchInlineSnapshot(
494+
`"<div><span></span><div><span></span><!--[--><div>bar</div>-bar-<!--]--><span></span></div><span></span></div>"`,
495+
)
496+
})
497+
372498
test('consecutive fragment components with anchor insertion', async () => {
373499
const { container, data } = await testHydration(
374500
`<template>
@@ -395,6 +521,72 @@ describe('Vapor Mode hydration', () => {
395521
)
396522
})
397523

524+
test('nested consecutive fragment components with anchor insertion', async () => {
525+
const { container, data } = await testHydration(
526+
`
527+
<template><components.Parent/></template>
528+
`,
529+
{
530+
Parent: `<template><div><span/><components.Child/><components.Child/><span/></div></template>`,
531+
Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
532+
},
533+
)
534+
expect(container.innerHTML).toMatchInlineSnapshot(
535+
`"<div><span></span><!--[--><div>foo</div>-foo-<!--]--><!--[[--><!--[--><div>foo</div>-foo-<!--]--><!--]]--><span></span></div>"`,
536+
)
537+
538+
data.value = 'bar'
539+
await nextTick()
540+
expect(container.innerHTML).toMatchInlineSnapshot(
541+
`"<div><span></span><!--[--><div>bar</div>-bar-<!--]--><!--[[--><!--[--><div>bar</div>-bar-<!--]--><!--]]--><span></span></div>"`,
542+
)
543+
})
544+
545+
test('nested consecutive fragment components with multi level anchor insertion', async () => {
546+
const { container, data } = await testHydration(
547+
`
548+
<template><div><span></span><components.Parent/><span></span></div></template>
549+
`,
550+
{
551+
Parent: `<template><div><span/><components.Child/><components.Child/><span/></div></template>`,
552+
Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
553+
},
554+
)
555+
expect(container.innerHTML).toMatchInlineSnapshot(
556+
`"<div><span></span><div><span></span><!--[--><div>foo</div>-foo-<!--]--><!--[[--><!--[--><div>foo</div>-foo-<!--]--><!--]]--><span></span></div><span></span></div>"`,
557+
)
558+
559+
data.value = 'bar'
560+
await nextTick()
561+
expect(container.innerHTML).toMatchInlineSnapshot(
562+
`"<div><span></span><div><span></span><!--[--><div>bar</div>-bar-<!--]--><!--[[--><!--[--><div>bar</div>-bar-<!--]--><!--]]--><span></span></div><span></span></div>"`,
563+
)
564+
})
565+
566+
test.todo(
567+
'nested consecutive fragment components with root level anchor insertion',
568+
async () => {
569+
const { container, data } = await testHydration(
570+
`
571+
<template><div><span></span><components.Parent/><span></span></div></template>
572+
`,
573+
{
574+
Parent: `<template><components.Child/><components.Child/></template>`,
575+
Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
576+
},
577+
)
578+
expect(container.innerHTML).toMatchInlineSnapshot(
579+
`"<div><span></span><!--[--><!--[--><div>foo</div>-foo-<!--]--><!--[--><div>foo</div>-foo-<!--]--><!--]--><span></span></div>"`,
580+
)
581+
582+
data.value = 'bar'
583+
await nextTick()
584+
expect(container.innerHTML).toMatchInlineSnapshot(
585+
`"<div><span></span><!--[--><!--[--><div>bar</div>-bar-<!--]--><!--[--><div>foo</div>-foo-<!--]--><!--]--><span></span></div>"`,
586+
)
587+
},
588+
)
589+
398590
test('mixed fragment component and element with anchor insertion', async () => {
399591
const { container, data } = await testHydration(
400592
`<template>

0 commit comments

Comments
 (0)