theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

test: refactor fragment tests to reduce scope

Browse Source
This commit is contained in:
Evan You 2019-08-26 21:49:12 -04:00
parent cb3866890f
commit a20eeac7fe
1 changed files with 112 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

226
packages/runtime-core/__tests__/vdomFragment.spec.ts
View File

@ -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