Skip to content

Commit ccbb170

Browse files
edison1105edison1105
committed
test: enhance nested custom element and teleport rendering with shadowRoot: false
1 parent cbf18fb commit ccbb170

File tree

3 files changed

+218
-175
lines changed

3 files changed

+218
-175
lines changed

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

Lines changed: 196 additions & 174 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,13 @@ import {
55
type Ref,
66
inject,
77
nextTick,
8+
onMounted,
89
provide,
910
ref,
1011
toDisplayString,
1112
} from '@vue/runtime-dom'
1213
import {
14+
VaporTeleport,
1315
child,
1416
createComponent,
1517
createComponentWithFallback,
@@ -1368,189 +1370,209 @@ describe('defineVaporCustomElement', () => {
13681370
)
13691371
})
13701372

1371-
// test('render nested customElement w/ shadowRoot false', async () => {
1372-
// const calls: string[] = []
1373+
test('render nested customElement w/ shadowRoot false', async () => {
1374+
const calls: string[] = []
13731375

1374-
// const Child = defineVaporCustomElement(
1375-
// {
1376-
// setup() {
1377-
// calls.push('child rendering')
1378-
// onMounted(() => {
1379-
// calls.push('child mounted')
1380-
// })
1381-
// },
1382-
// render() {
1383-
// return renderSlot(this.$slots, 'default')
1384-
// },
1385-
// },
1386-
// { shadowRoot: false },
1387-
// )
1388-
// customElements.define('my-child', Child)
1376+
const Child = defineVaporCustomElement(
1377+
{
1378+
setup() {
1379+
calls.push('child rendering')
1380+
onMounted(() => {
1381+
calls.push('child mounted')
1382+
})
1383+
return createSlot('default')
1384+
},
1385+
},
1386+
{ shadowRoot: false } as any,
1387+
)
1388+
customElements.define('my-child', Child)
13891389

1390-
// const Parent = defineVaporCustomElement(
1391-
// {
1392-
// setup() {
1393-
// calls.push('parent rendering')
1394-
// onMounted(() => {
1395-
// calls.push('parent mounted')
1396-
// })
1397-
// },
1398-
// render() {
1399-
// return renderSlot(this.$slots, 'default')
1400-
// },
1401-
// },
1402-
// { shadowRoot: false },
1403-
// )
1404-
// customElements.define('my-parent', Parent)
1390+
const Parent = defineVaporCustomElement(
1391+
{
1392+
setup() {
1393+
calls.push('parent rendering')
1394+
onMounted(() => {
1395+
calls.push('parent mounted')
1396+
})
1397+
return createSlot('default')
1398+
},
1399+
},
1400+
{ shadowRoot: false } as any,
1401+
)
1402+
customElements.define('my-parent', Parent)
14051403

1406-
// const App = {
1407-
// render() {
1408-
// return h('my-parent', null, {
1409-
// default: () => [
1410-
// h('my-child', null, {
1411-
// default: () => [h('span', null, 'default')],
1412-
// }),
1413-
// ],
1414-
// })
1415-
// },
1416-
// }
1417-
// const app = createVaporApp(App)
1418-
// app.mount(container)
1419-
// await nextTick()
1420-
// const e = container.childNodes[0] as VaporElement
1421-
// expect(e.innerHTML).toBe(
1422-
// `<my-child data-v-app=""><span>default</span></my-child>`,
1423-
// )
1424-
// expect(calls).toEqual([
1425-
// 'parent rendering',
1426-
// 'parent mounted',
1427-
// 'child rendering',
1428-
// 'child mounted',
1429-
// ])
1430-
// app.unmount()
1431-
// })
1404+
const App = {
1405+
setup() {
1406+
return createComponentWithFallback('my-parent', null, {
1407+
default: () =>
1408+
createComponentWithFallback('my-child', null, {
1409+
default: () => template('<span>default</span>')(),
1410+
}),
1411+
})
1412+
},
1413+
}
1414+
const app = createVaporApp(App)
1415+
app.mount(container)
1416+
await nextTick()
1417+
const e = container.childNodes[0] as VaporElement
1418+
expect(e.innerHTML).toBe(
1419+
`<my-child><span>default</span><!--slot--></my-child><!--slot-->`,
1420+
)
1421+
expect(calls).toEqual([
1422+
'parent rendering',
1423+
'parent mounted',
1424+
'child rendering',
1425+
'child mounted',
1426+
])
1427+
app.unmount()
1428+
})
14321429

1433-
// test('render nested Teleport w/ shadowRoot false', async () => {
1434-
// const target = document.createElement('div')
1435-
// const Child = defineVaporCustomElement(
1436-
// {
1437-
// render() {
1438-
// return h(
1439-
// Teleport,
1440-
// { to: target },
1441-
// {
1442-
// default: () => [renderSlot(this.$slots, 'default')],
1443-
// },
1444-
// )
1445-
// },
1446-
// },
1447-
// { shadowRoot: false },
1448-
// )
1449-
// customElements.define('my-el-teleport-child', Child)
1450-
// const Parent = defineVaporCustomElement(
1451-
// {
1452-
// render() {
1453-
// return renderSlot(this.$slots, 'default')
1454-
// },
1455-
// },
1456-
// { shadowRoot: false },
1457-
// )
1458-
// customElements.define('my-el-teleport-parent', Parent)
1430+
test('render nested Teleport w/ shadowRoot false', async () => {
1431+
const target = document.createElement('div')
1432+
const Child = defineVaporCustomElement(
1433+
{
1434+
setup() {
1435+
return createComponent(
1436+
VaporTeleport,
1437+
{ to: () => target },
1438+
{
1439+
default: () => createSlot('default'),
1440+
},
1441+
)
1442+
},
1443+
},
1444+
{ shadowRoot: false } as any,
1445+
)
1446+
customElements.define('my-el-teleport-child', Child)
1447+
const Parent = defineVaporCustomElement(
1448+
{
1449+
setup() {
1450+
return createSlot('default')
1451+
},
1452+
},
1453+
{ shadowRoot: false } as any,
1454+
)
1455+
customElements.define('my-el-teleport-parent', Parent)
14591456

1460-
// const App = {
1461-
// render() {
1462-
// return h('my-el-teleport-parent', null, {
1463-
// default: () => [
1464-
// h('my-el-teleport-child', null, {
1465-
// default: () => [h('span', null, 'default')],
1466-
// }),
1467-
// ],
1468-
// })
1469-
// },
1470-
// }
1471-
// const app = createVaporApp(App)
1472-
// app.mount(container)
1473-
// await nextTick()
1474-
// expect(target.innerHTML).toBe(`<span>default</span>`)
1475-
// app.unmount()
1476-
// })
1457+
const App = {
1458+
setup() {
1459+
return createComponentWithFallback('my-el-teleport-parent', null, {
1460+
default: () =>
1461+
createComponentWithFallback('my-el-teleport-child', null, {
1462+
default: () => template('<span>default</span>')(),
1463+
}),
1464+
})
1465+
},
1466+
}
1467+
const app = createVaporApp(App)
1468+
app.mount(container)
1469+
await nextTick()
1470+
expect(target.innerHTML).toBe(`<span>default</span><!--slot-->`)
1471+
app.unmount()
1472+
})
14771473

1478-
// test('render two Teleports w/ shadowRoot false', async () => {
1479-
// const target1 = document.createElement('div')
1480-
// const target2 = document.createElement('span')
1481-
// const Child = defineVaporCustomElement(
1482-
// {
1483-
// render() {
1484-
// return [
1485-
// h(Teleport, { to: target1 }, [renderSlot(this.$slots, 'header')]),
1486-
// h(Teleport, { to: target2 }, [renderSlot(this.$slots, 'body')]),
1487-
// ]
1488-
// },
1489-
// },
1490-
// { shadowRoot: false },
1491-
// )
1492-
// customElements.define('my-el-two-teleport-child', Child)
1474+
test('render two Teleports w/ shadowRoot false', async () => {
1475+
const target1 = document.createElement('div')
1476+
const target2 = document.createElement('span')
1477+
const Child = defineVaporCustomElement(
1478+
{
1479+
setup() {
1480+
return [
1481+
createComponent(
1482+
VaporTeleport,
1483+
{ to: () => target1 },
1484+
{
1485+
default: () => createSlot('header'),
1486+
},
1487+
),
1488+
createComponent(
1489+
VaporTeleport,
1490+
{ to: () => target2 },
1491+
{
1492+
default: () => createSlot('body'),
1493+
},
1494+
),
1495+
]
1496+
},
1497+
},
1498+
{ shadowRoot: false } as any,
1499+
)
1500+
customElements.define('my-el-two-teleport-child', Child)
14931501

1494-
// const App = {
1495-
// render() {
1496-
// return h('my-el-two-teleport-child', null, {
1497-
// default: () => [
1498-
// h('div', { slot: 'header' }, 'header'),
1499-
// h('span', { slot: 'body' }, 'body'),
1500-
// ],
1501-
// })
1502-
// },
1503-
// }
1504-
// const app = createVaporApp(App)
1505-
// app.mount(container)
1506-
// await nextTick()
1507-
// expect(target1.outerHTML).toBe(
1508-
// `<div><div slot="header">header</div></div>`,
1509-
// )
1510-
// expect(target2.outerHTML).toBe(
1511-
// `<span><span slot="body">body</span></span>`,
1512-
// )
1513-
// app.unmount()
1514-
// })
1502+
const App = {
1503+
setup() {
1504+
return createComponentWithFallback('my-el-two-teleport-child', null, {
1505+
default: () => [
1506+
template('<div slot="header">header</div>')(),
1507+
template('<span slot="body">body</span>')(),
1508+
],
1509+
})
1510+
},
1511+
}
1512+
const app = createVaporApp(App)
1513+
app.mount(container)
1514+
await nextTick()
1515+
expect(target1.outerHTML).toBe(
1516+
`<div><div slot="header">header</div><!--slot--></div>`,
1517+
)
1518+
expect(target2.outerHTML).toBe(
1519+
`<span><span slot="body">body</span><!--slot--></span>`,
1520+
)
1521+
app.unmount()
1522+
})
15151523

1516-
// test('render two Teleports w/ shadowRoot false (with disabled)', async () => {
1517-
// const target1 = document.createElement('div')
1518-
// const target2 = document.createElement('span')
1519-
// const Child = defineVaporCustomElement(
1520-
// {
1521-
// render() {
1522-
// return [
1523-
// // with disabled: true
1524-
// h(Teleport, { to: target1, disabled: true }, [
1525-
// renderSlot(this.$slots, 'header'),
1526-
// ]),
1527-
// h(Teleport, { to: target2 }, [renderSlot(this.$slots, 'body')]),
1528-
// ]
1529-
// },
1530-
// },
1531-
// { shadowRoot: false },
1532-
// )
1533-
// customElements.define('my-el-two-teleport-child-0', Child)
1524+
test('render two Teleports w/ shadowRoot false (with disabled)', async () => {
1525+
const target1 = document.createElement('div')
1526+
const target2 = document.createElement('span')
1527+
const Child = defineVaporCustomElement(
1528+
{
1529+
setup() {
1530+
return [
1531+
createComponent(
1532+
VaporTeleport,
1533+
// with disabled: true
1534+
{ to: () => target1, disabled: () => true },
1535+
{
1536+
default: () => createSlot('header'),
1537+
},
1538+
),
1539+
createComponent(
1540+
VaporTeleport,
1541+
{ to: () => target2 },
1542+
{
1543+
default: () => createSlot('body'),
1544+
},
1545+
),
1546+
]
1547+
},
1548+
},
1549+
{ shadowRoot: false } as any,
1550+
)
1551+
customElements.define('my-el-two-teleport-child-0', Child)
15341552

1535-
// const App = {
1536-
// render() {
1537-
// return h('my-el-two-teleport-child-0', null, {
1538-
// default: () => [
1539-
// h('div', { slot: 'header' }, 'header'),
1540-
// h('span', { slot: 'body' }, 'body'),
1541-
// ],
1542-
// })
1543-
// },
1544-
// }
1545-
// const app = createVaporApp(App)
1546-
// app.mount(container)
1547-
// await nextTick()
1548-
// expect(target1.outerHTML).toBe(`<div></div>`)
1549-
// expect(target2.outerHTML).toBe(
1550-
// `<span><span slot="body">body</span></span>`,
1551-
// )
1552-
// app.unmount()
1553-
// })
1553+
const App = {
1554+
setup() {
1555+
return createComponentWithFallback(
1556+
'my-el-two-teleport-child-0',
1557+
null,
1558+
{
1559+
default: () => [
1560+
template('<div slot="header">header</div>')(),
1561+
template('<span slot="body">body</span>')(),
1562+
],
1563+
},
1564+
)
1565+
},
1566+
}
1567+
const app = createVaporApp(App)
1568+
app.mount(container)
1569+
await nextTick()
1570+
expect(target1.outerHTML).toBe(`<div></div>`)
1571+
expect(target2.outerHTML).toBe(
1572+
`<span><span slot="body">body</span><!--slot--></span>`,
1573+
)
1574+
app.unmount()
1575+
})
15541576

15551577
// test('toggle nested custom element with shadowRoot: false', async () => {
15561578
// customElements.define(

0 commit comments

Comments
 (0)