test: refactor fragment tests to reduce scope
This commit is contained in:
parent
cb3866890f
commit
a20eeac7fe
@ -5,14 +5,12 @@ import {
|
|||||||
nodeOps,
|
nodeOps,
|
||||||
NodeTypes,
|
NodeTypes,
|
||||||
TestElement,
|
TestElement,
|
||||||
serialize,
|
|
||||||
Fragment,
|
Fragment,
|
||||||
reactive,
|
|
||||||
nextTick,
|
|
||||||
PatchFlags,
|
PatchFlags,
|
||||||
resetOps,
|
resetOps,
|
||||||
dumpOps,
|
dumpOps,
|
||||||
NodeOpTypes
|
NodeOpTypes,
|
||||||
|
serializeInner
|
||||||
} from '@vue/runtime-test'
|
} from '@vue/runtime-test'
|
||||||
|
|
||||||
describe('vdom: fragment', () => {
|
describe('vdom: fragment', () => {
|
||||||
@ -26,7 +24,7 @@ describe('vdom: fragment', () => {
|
|||||||
const root = nodeOps.createElement('div')
|
const root = nodeOps.createElement('div')
|
||||||
render(h(App), root)
|
render(h(App), root)
|
||||||
|
|
||||||
expect(serialize(root)).toBe(`<div><!----><div>one</div>two<!----></div>`)
|
expect(serializeInner(root)).toBe(`<!----><div>one</div>two<!---->`)
|
||||||
expect(root.children.length).toBe(4)
|
expect(root.children.length).toBe(4)
|
||||||
expect(root.children[0]).toMatchObject({
|
expect(root.children[0]).toMatchObject({
|
||||||
type: NodeTypes.COMMENT
|
type: NodeTypes.COMMENT
|
||||||
@ -49,38 +47,29 @@ describe('vdom: fragment', () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
it('explicitly create fragments', () => {
|
it('explicitly create fragments', () => {
|
||||||
const App = {
|
|
||||||
render() {
|
|
||||||
return h('div', [h(Fragment, [h('div', 'one'), 'two'])])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const root = nodeOps.createElement('div')
|
const root = nodeOps.createElement('div')
|
||||||
render(h(App), root)
|
render(h('div', [h(Fragment, [h('div', 'one'), 'two'])]), root)
|
||||||
const parent = root.children[0] as TestElement
|
const parent = root.children[0] as TestElement
|
||||||
expect(serialize(parent)).toBe(`<div><!----><div>one</div>two<!----></div>`)
|
expect(serializeInner(parent)).toBe(`<!----><div>one</div>two<!---->`)
|
||||||
})
|
})
|
||||||
|
|
||||||
it('patch fragment children (manual, keyed)', async () => {
|
it('patch fragment children (manual, keyed)', () => {
|
||||||
const state = reactive({ ok: true })
|
|
||||||
const App = {
|
|
||||||
render() {
|
|
||||||
return state.ok
|
|
||||||
? [h('div', { key: 1 }, 'one'), h('div', { key: 2 }, 'two')]
|
|
||||||
: [h('div', { key: 2 }, 'two'), h('div', { key: 1 }, 'one')]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const root = nodeOps.createElement('div')
|
const root = nodeOps.createElement('div')
|
||||||
render(h(App), root)
|
render(
|
||||||
|
h(Fragment, [h('div', { key: 1 }, 'one'), h('div', { key: 2 }, 'two')]),
|
||||||
expect(serialize(root)).toBe(
|
root
|
||||||
`<div><!----><div>one</div><div>two</div><!----></div>`
|
)
|
||||||
|
expect(serializeInner(root)).toBe(
|
||||||
|
`<!----><div>one</div><div>two</div><!---->`
|
||||||
)
|
)
|
||||||
|
|
||||||
resetOps()
|
resetOps()
|
||||||
state.ok = false
|
render(
|
||||||
await nextTick()
|
h(Fragment, [h('div', { key: 2 }, 'two'), h('div', { key: 1 }, 'one')]),
|
||||||
expect(serialize(root)).toBe(
|
root
|
||||||
`<div><!----><div>two</div><div>one</div><!----></div>`
|
)
|
||||||
|
expect(serializeInner(root)).toBe(
|
||||||
|
`<!----><div>two</div><div>one</div><!---->`
|
||||||
)
|
)
|
||||||
const ops = dumpOps()
|
const ops = dumpOps()
|
||||||
// should be moving nodes instead of re-creating or patching them
|
// should be moving nodes instead of re-creating or patching them
|
||||||
@ -91,27 +80,17 @@ describe('vdom: fragment', () => {
|
|||||||
])
|
])
|
||||||
})
|
})
|
||||||
|
|
||||||
it('patch fragment children (manual, unkeyed)', async () => {
|
it('patch fragment children (manual, unkeyed)', () => {
|
||||||
const state = reactive({ ok: true })
|
|
||||||
const App = {
|
|
||||||
render() {
|
|
||||||
return state.ok
|
|
||||||
? [h('div', 'one'), h('div', 'two')]
|
|
||||||
: [h('div', 'two'), h('div', 'one')]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const root = nodeOps.createElement('div')
|
const root = nodeOps.createElement('div')
|
||||||
render(h(App), root)
|
render(h(Fragment, [h('div', 'one'), h('div', 'two')]), root)
|
||||||
|
expect(serializeInner(root)).toBe(
|
||||||
expect(serialize(root)).toBe(
|
`<!----><div>one</div><div>two</div><!---->`
|
||||||
`<div><!----><div>one</div><div>two</div><!----></div>`
|
|
||||||
)
|
)
|
||||||
|
|
||||||
resetOps()
|
resetOps()
|
||||||
state.ok = false
|
render(h(Fragment, [h('div', 'two'), h('div', 'one')]), root)
|
||||||
await nextTick()
|
expect(serializeInner(root)).toBe(
|
||||||
expect(serialize(root)).toBe(
|
`<!----><div>two</div><div>one</div><!---->`
|
||||||
`<div><!----><div>two</div><div>one</div><!----></div>`
|
|
||||||
)
|
)
|
||||||
const ops = dumpOps()
|
const ops = dumpOps()
|
||||||
// should be patching nodes instead of moving or re-creating them
|
// should be patching nodes instead of moving or re-creating them
|
||||||
@ -125,68 +104,54 @@ describe('vdom: fragment', () => {
|
|||||||
])
|
])
|
||||||
})
|
})
|
||||||
|
|
||||||
it('patch fragment children (compiler generated, unkeyed)', async () => {
|
it('patch fragment children (compiler generated, unkeyed)', () => {
|
||||||
const state = reactive({ ok: true })
|
const root = nodeOps.createElement('div')
|
||||||
const App = {
|
render(
|
||||||
render() {
|
createVNode(Fragment, 0, [h('div', 'one'), 'two'], PatchFlags.UNKEYED),
|
||||||
return state.ok
|
root
|
||||||
? createVNode(
|
|
||||||
Fragment,
|
|
||||||
0,
|
|
||||||
[h('div', 'one'), 'two'],
|
|
||||||
PatchFlags.UNKEYED
|
|
||||||
)
|
)
|
||||||
: createVNode(
|
expect(serializeInner(root)).toBe(`<!----><div>one</div>two<!---->`)
|
||||||
|
|
||||||
|
render(
|
||||||
|
createVNode(
|
||||||
Fragment,
|
Fragment,
|
||||||
0,
|
0,
|
||||||
[h('div', 'foo'), 'bar', 'baz'],
|
[h('div', 'foo'), 'bar', 'baz'],
|
||||||
PatchFlags.UNKEYED
|
PatchFlags.UNKEYED
|
||||||
|
),
|
||||||
|
root
|
||||||
)
|
)
|
||||||
}
|
expect(serializeInner(root)).toBe(`<!----><div>foo</div>barbaz<!---->`)
|
||||||
}
|
|
||||||
const root = nodeOps.createElement('div')
|
|
||||||
render(h(App), root)
|
|
||||||
|
|
||||||
expect(serialize(root)).toBe(`<div><!----><div>one</div>two<!----></div>`)
|
|
||||||
|
|
||||||
state.ok = false
|
|
||||||
await nextTick()
|
|
||||||
expect(serialize(root)).toBe(
|
|
||||||
`<div><!----><div>foo</div>barbaz<!----></div>`
|
|
||||||
)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('patch fragment children (compiler generated, keyed)', async () => {
|
it('patch fragment children (compiler generated, keyed)', () => {
|
||||||
const state = reactive({ ok: true })
|
const root = nodeOps.createElement('div')
|
||||||
const App = {
|
|
||||||
render() {
|
render(
|
||||||
return state.ok
|
createVNode(
|
||||||
? createVNode(
|
|
||||||
Fragment,
|
Fragment,
|
||||||
0,
|
0,
|
||||||
[h('div', { key: 1 }, 'one'), h('div', { key: 2 }, 'two')],
|
[h('div', { key: 1 }, 'one'), h('div', { key: 2 }, 'two')],
|
||||||
PatchFlags.KEYED
|
PatchFlags.KEYED
|
||||||
|
),
|
||||||
|
root
|
||||||
)
|
)
|
||||||
: createVNode(
|
expect(serializeInner(root)).toBe(
|
||||||
|
`<!----><div>one</div><div>two</div><!---->`
|
||||||
|
)
|
||||||
|
|
||||||
|
resetOps()
|
||||||
|
render(
|
||||||
|
createVNode(
|
||||||
Fragment,
|
Fragment,
|
||||||
0,
|
0,
|
||||||
[h('div', { key: 2 }, 'two'), h('div', { key: 1 }, 'one')],
|
[h('div', { key: 2 }, 'two'), h('div', { key: 1 }, 'one')],
|
||||||
PatchFlags.KEYED
|
PatchFlags.KEYED
|
||||||
|
),
|
||||||
|
root
|
||||||
)
|
)
|
||||||
}
|
expect(serializeInner(root)).toBe(
|
||||||
}
|
`<!----><div>two</div><div>one</div><!---->`
|
||||||
const root = nodeOps.createElement('div')
|
|
||||||
render(h(App), root)
|
|
||||||
|
|
||||||
expect(serialize(root)).toBe(
|
|
||||||
`<div><!----><div>one</div><div>two</div><!----></div>`
|
|
||||||
)
|
|
||||||
|
|
||||||
resetOps()
|
|
||||||
state.ok = false
|
|
||||||
await nextTick()
|
|
||||||
expect(serialize(root)).toBe(
|
|
||||||
`<div><!----><div>two</div><div>one</div><!----></div>`
|
|
||||||
)
|
)
|
||||||
const ops = dumpOps()
|
const ops = dumpOps()
|
||||||
// should be moving nodes instead of re-creating or patching them
|
// should be moving nodes instead of re-creating or patching them
|
||||||
@ -197,39 +162,34 @@ describe('vdom: fragment', () => {
|
|||||||
])
|
])
|
||||||
})
|
})
|
||||||
|
|
||||||
it('move fragment', async () => {
|
it('move fragment', () => {
|
||||||
const state = reactive({ ok: true })
|
const root = nodeOps.createElement('div')
|
||||||
const App = {
|
render(
|
||||||
render() {
|
h('div', [
|
||||||
return state.ok
|
|
||||||
? h('div', [
|
|
||||||
h('div', { key: 1 }, 'outer'),
|
h('div', { key: 1 }, 'outer'),
|
||||||
h(Fragment, { key: 2 }, [
|
h(Fragment, { key: 2 }, [
|
||||||
h('div', { key: 1 }, 'one'),
|
h('div', { key: 1 }, 'one'),
|
||||||
h('div', { key: 2 }, 'two')
|
h('div', { key: 2 }, 'two')
|
||||||
])
|
])
|
||||||
])
|
]),
|
||||||
: h('div', [
|
root
|
||||||
|
)
|
||||||
|
expect(serializeInner(root)).toBe(
|
||||||
|
`<div><div>outer</div><!----><div>one</div><div>two</div><!----></div>`
|
||||||
|
)
|
||||||
|
|
||||||
|
resetOps()
|
||||||
|
render(
|
||||||
|
h('div', [
|
||||||
h(Fragment, { key: 2 }, [
|
h(Fragment, { key: 2 }, [
|
||||||
h('div', { key: 2 }, 'two'),
|
h('div', { key: 2 }, 'two'),
|
||||||
h('div', { key: 1 }, 'one')
|
h('div', { key: 1 }, 'one')
|
||||||
]),
|
]),
|
||||||
h('div', { key: 1 }, 'outer')
|
h('div', { key: 1 }, 'outer')
|
||||||
])
|
]),
|
||||||
}
|
root
|
||||||
}
|
|
||||||
const root = nodeOps.createElement('div')
|
|
||||||
render(h(App), root)
|
|
||||||
const parent = root.children[0] as TestElement
|
|
||||||
|
|
||||||
expect(serialize(parent)).toBe(
|
|
||||||
`<div><div>outer</div><!----><div>one</div><div>two</div><!----></div>`
|
|
||||||
)
|
)
|
||||||
|
expect(serializeInner(root)).toBe(
|
||||||
resetOps()
|
|
||||||
state.ok = false
|
|
||||||
await nextTick()
|
|
||||||
expect(serialize(parent)).toBe(
|
|
||||||
`<div><!----><div>two</div><div>one</div><!----><div>outer</div></div>`
|
`<div><!----><div>two</div><div>one</div><!----><div>outer</div></div>`
|
||||||
)
|
)
|
||||||
const ops = dumpOps()
|
const ops = dumpOps()
|
||||||
@ -247,40 +207,36 @@ describe('vdom: fragment', () => {
|
|||||||
])
|
])
|
||||||
})
|
})
|
||||||
|
|
||||||
it('handle nested fragments', async () => {
|
it('handle nested fragments', () => {
|
||||||
const state = reactive({ ok: true })
|
const root = nodeOps.createElement('div')
|
||||||
const App = {
|
|
||||||
render() {
|
render(
|
||||||
return state.ok
|
h(Fragment, [
|
||||||
? [
|
|
||||||
h('div', { key: 1 }, 'outer'),
|
h('div', { key: 1 }, 'outer'),
|
||||||
h(Fragment, { key: 2 }, [
|
h(Fragment, { key: 2 }, [
|
||||||
h('div', { key: 1 }, 'one'),
|
h('div', { key: 1 }, 'one'),
|
||||||
h('div', { key: 2 }, 'two')
|
h('div', { key: 2 }, 'two')
|
||||||
])
|
])
|
||||||
]
|
]),
|
||||||
: [
|
root
|
||||||
|
)
|
||||||
|
expect(serializeInner(root)).toBe(
|
||||||
|
`<!----><div>outer</div><!----><div>one</div><div>two</div><!----><!---->`
|
||||||
|
)
|
||||||
|
|
||||||
|
resetOps()
|
||||||
|
render(
|
||||||
|
h(Fragment, [
|
||||||
h(Fragment, { key: 2 }, [
|
h(Fragment, { key: 2 }, [
|
||||||
h('div', { key: 2 }, 'two'),
|
h('div', { key: 2 }, 'two'),
|
||||||
h('div', { key: 1 }, 'one')
|
h('div', { key: 1 }, 'one')
|
||||||
]),
|
]),
|
||||||
h('div', { key: 1 }, 'outer')
|
h('div', { key: 1 }, 'outer')
|
||||||
]
|
]),
|
||||||
}
|
root
|
||||||
}
|
|
||||||
|
|
||||||
const root = nodeOps.createElement('div')
|
|
||||||
render(h(App), root)
|
|
||||||
|
|
||||||
expect(serialize(root)).toBe(
|
|
||||||
`<div><!----><div>outer</div><!----><div>one</div><div>two</div><!----><!----></div>`
|
|
||||||
)
|
)
|
||||||
|
expect(serializeInner(root)).toBe(
|
||||||
resetOps()
|
`<!----><!----><div>two</div><div>one</div><!----><div>outer</div><!---->`
|
||||||
state.ok = false
|
|
||||||
await nextTick()
|
|
||||||
expect(serialize(root)).toBe(
|
|
||||||
`<div><!----><!----><div>two</div><div>one</div><!----><div>outer</div><!----></div>`
|
|
||||||
)
|
)
|
||||||
const ops = dumpOps()
|
const ops = dumpOps()
|
||||||
// should be moving nodes instead of re-creating them
|
// should be moving nodes instead of re-creating them
|
||||||
|
Loading…
Reference in New Issue
Block a user