test: layout test references

This commit is contained in:
Evan You 2019-08-22 22:15:39 -04:00
parent daf67397ae
commit ce51ca30d8
6 changed files with 194 additions and 181 deletions

View File

@ -1 +1,3 @@
// reference: https://vue-composition-api-rfc.netlify.com/api.html#provide-inject
describe('api: provide/inject', () => {}) describe('api: provide/inject', () => {})

View File

@ -1 +1,3 @@
// reference: https://vue-composition-api-rfc.netlify.com/api.html#lifecycle-hooks
describe('api: lifecycle hooks', () => {}) describe('api: lifecycle hooks', () => {})

View File

@ -0,0 +1,3 @@
// reference: https://vue-composition-api-rfc.netlify.com/api.html#setup
describe('api: setup context', () => {})

View File

@ -1 +1,3 @@
// reference: https://vue-composition-api-rfc.netlify.com/api.html#watch
describe('api: watch', () => {}) describe('api: watch', () => {})

View File

@ -1,3 +1,5 @@
// reference: https://github.com/vuejs/vue/blob/dev/test/unit/modules/vdom/patch/children.spec.js
describe('vdom: unkeyed children', () => { describe('vdom: unkeyed children', () => {
test.todo('append') test.todo('append')

View File

@ -1,199 +1,201 @@
import { // These tests are outdated.
createVNode as h,
render,
nodeOps,
NodeTypes,
TestElement,
Fragment,
reactive,
serialize,
nextTick,
resetOps,
dumpOps,
NodeOpTypes
} from '@vue/runtime-test'
describe('vdom: fragment', () => { // import {
it('should allow returning multiple component root nodes', async () => { // createVNode as h,
class App extends Component { // render,
render() { // nodeOps,
return [h('div', 'one'), 'two'] // NodeTypes,
} // TestElement,
} // Fragment,
const root = nodeOps.createElement('div') // reactive,
await render(h(App), root) // serialize,
expect(serialize(root)).toBe(`<div><div>one</div>two</div>`) // nextTick,
expect(root.children.length).toBe(2) // resetOps,
expect(root.children[0]).toMatchObject({ // dumpOps,
type: NodeTypes.ELEMENT, // NodeOpTypes
tag: 'div' // } from '@vue/runtime-test'
})
expect((root.children[0] as TestElement).children[0]).toMatchObject({
type: NodeTypes.TEXT,
text: 'one'
})
expect(root.children[1]).toMatchObject({
type: NodeTypes.TEXT,
text: 'two'
})
})
it('should be able to explicitly create fragments', async () => { // describe('vdom: fragment', () => {
class App extends Component { // it('should allow returning multiple component root nodes', async () => {
render() { // class App extends Component {
return h('div', [h(Fragment, [h('div', 'one'), 'two'])]) // render() {
} // return [h('div', 'one'), 'two']
} // }
const root = nodeOps.createElement('div') // }
await render(h(App), root) // const root = nodeOps.createElement('div')
const parent = root.children[0] as TestElement // await render(h(App), root)
expect(serialize(parent)).toBe(`<div><div>one</div>two</div>`) // expect(serialize(root)).toBe(`<div><div>one</div>two</div>`)
}) // expect(root.children.length).toBe(2)
// expect(root.children[0]).toMatchObject({
// type: NodeTypes.ELEMENT,
// tag: 'div'
// })
// expect((root.children[0] as TestElement).children[0]).toMatchObject({
// type: NodeTypes.TEXT,
// text: 'one'
// })
// expect(root.children[1]).toMatchObject({
// type: NodeTypes.TEXT,
// text: 'two'
// })
// })
it('should be able to patch fragment children (unkeyed)', async () => { // it('should be able to explicitly create fragments', async () => {
const state = observable({ ok: true }) // class App extends Component {
class App extends Component { // render() {
render() { // return h('div', [h(Fragment, [h('div', 'one'), 'two'])])
return state.ok // }
? createFragment( // }
[h('div', 'one'), createTextVNode('two')], // const root = nodeOps.createElement('div')
ChildrenFlags.NONE_KEYED_VNODES // await render(h(App), root)
) // const parent = root.children[0] as TestElement
: createFragment( // expect(serialize(parent)).toBe(`<div><div>one</div>two</div>`)
[h('div', 'foo'), createTextVNode('bar'), createTextVNode('baz')], // })
ChildrenFlags.NONE_KEYED_VNODES
)
}
}
const root = nodeOps.createElement('div')
await render(h(App), root)
expect(serialize(root)).toBe(`<div><div>one</div>two</div>`) // it('should be able to patch fragment children (unkeyed)', async () => {
// const state = observable({ ok: true })
// class App extends Component {
// render() {
// return state.ok
// ? createFragment(
// [h('div', 'one'), createTextVNode('two')],
// ChildrenFlags.NONE_KEYED_VNODES
// )
// : createFragment(
// [h('div', 'foo'), createTextVNode('bar'), createTextVNode('baz')],
// ChildrenFlags.NONE_KEYED_VNODES
// )
// }
// }
// const root = nodeOps.createElement('div')
// await render(h(App), root)
state.ok = false // expect(serialize(root)).toBe(`<div><div>one</div>two</div>`)
await nextTick()
expect(serialize(root)).toBe(`<div><div>foo</div>barbaz</div>`)
})
it('should be able to patch fragment children (implicitly keyed)', async () => { // state.ok = false
const state = observable({ ok: true }) // await nextTick()
class App extends Component { // expect(serialize(root)).toBe(`<div><div>foo</div>barbaz</div>`)
render() { // })
return state.ok
? [h('div', 'one'), 'two']
: [h('pre', 'foo'), 'bar', 'baz']
}
}
const root = nodeOps.createElement('div')
await await render(h(App), root)
expect(serialize(root)).toBe(`<div><div>one</div>two</div>`) // it('should be able to patch fragment children (implicitly keyed)', async () => {
// const state = observable({ ok: true })
// class App extends Component {
// render() {
// return state.ok
// ? [h('div', 'one'), 'two']
// : [h('pre', 'foo'), 'bar', 'baz']
// }
// }
// const root = nodeOps.createElement('div')
// await await render(h(App), root)
state.ok = false // expect(serialize(root)).toBe(`<div><div>one</div>two</div>`)
await nextTick()
expect(serialize(root)).toBe(`<div><pre>foo</pre>barbaz</div>`)
})
it('should be able to patch fragment children (explcitly keyed)', async () => { // state.ok = false
const state = observable({ ok: true }) // await nextTick()
class App extends Component { // expect(serialize(root)).toBe(`<div><pre>foo</pre>barbaz</div>`)
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')
await render(h(App), root)
expect(serialize(root)).toBe(`<div><div>one</div><div>two</div></div>`) // it('should be able to patch fragment children (explcitly keyed)', async () => {
// const state = observable({ ok: true })
// class App extends Component {
// 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')
// await render(h(App), root)
resetOps() // expect(serialize(root)).toBe(`<div><div>one</div><div>two</div></div>`)
state.ok = false
await nextTick()
expect(serialize(root)).toBe(`<div><div>two</div><div>one</div></div>`)
const ops = dumpOps()
// should be moving nodes instead of re-creating them
expect(ops.some(op => op.type === NodeOpTypes.CREATE)).toBe(false)
})
it('should be able to move fragment', async () => { // resetOps()
const state = observable({ ok: true }) // state.ok = false
class App extends Component { // await nextTick()
render() { // expect(serialize(root)).toBe(`<div><div>two</div><div>one</div></div>`)
return state.ok // const ops = dumpOps()
? h('div', [ // // should be moving nodes instead of re-creating them
h('div', { key: 1 }, 'outer'), // expect(ops.some(op => op.type === NodeOpTypes.CREATE)).toBe(false)
h(Fragment, { key: 2 }, [ // })
h('div', { key: 1 }, 'one'),
h('div', { key: 2 }, 'two')
])
])
: h('div', [
h(Fragment, { key: 2 }, [
h('div', { key: 2 }, 'two'),
h('div', { key: 1 }, 'one')
]),
h('div', { key: 1 }, 'outer')
])
}
}
const root = nodeOps.createElement('div')
await render(h(App), root)
const parent = root.children[0] as TestElement
expect(serialize(parent)).toBe( // it('should be able to move fragment', async () => {
`<div><div>outer</div><div>one</div><div>two</div></div>` // const state = observable({ ok: true })
) // class App extends Component {
// render() {
// return state.ok
// ? h('div', [
// h('div', { key: 1 }, 'outer'),
// h(Fragment, { key: 2 }, [
// h('div', { key: 1 }, 'one'),
// h('div', { key: 2 }, 'two')
// ])
// ])
// : h('div', [
// h(Fragment, { key: 2 }, [
// h('div', { key: 2 }, 'two'),
// h('div', { key: 1 }, 'one')
// ]),
// h('div', { key: 1 }, 'outer')
// ])
// }
// }
// const root = nodeOps.createElement('div')
// await render(h(App), root)
// const parent = root.children[0] as TestElement
resetOps() // expect(serialize(parent)).toBe(
state.ok = false // `<div><div>outer</div><div>one</div><div>two</div></div>`
await nextTick() // )
expect(serialize(parent)).toBe(
`<div><div>two</div><div>one</div><div>outer</div></div>`
)
const ops = dumpOps()
// should be moving nodes instead of re-creating them
expect(ops.some(op => op.type === NodeOpTypes.CREATE)).toBe(false)
})
it('should be able to handle nested fragments', async () => { // resetOps()
const state = observable({ ok: true }) // state.ok = false
class App extends Component { // await nextTick()
render() { // expect(serialize(parent)).toBe(
return state.ok // `<div><div>two</div><div>one</div><div>outer</div></div>`
? [ // )
h('div', { key: 1 }, 'outer'), // const ops = dumpOps()
h(Fragment, { key: 2 }, [ // // should be moving nodes instead of re-creating them
h('div', { key: 1 }, 'one'), // expect(ops.some(op => op.type === NodeOpTypes.CREATE)).toBe(false)
h('div', { key: 2 }, 'two') // })
])
]
: [
h(Fragment, { key: 2 }, [
h('div', { key: 2 }, 'two'),
h('div', { key: 1 }, 'one')
]),
h('div', { key: 1 }, 'outer')
]
}
}
const root = nodeOps.createElement('div') // it('should be able to handle nested fragments', async () => {
await render(h(App), root) // const state = observable({ ok: true })
// class App extends Component {
// render() {
// return state.ok
// ? [
// h('div', { key: 1 }, 'outer'),
// h(Fragment, { key: 2 }, [
// h('div', { key: 1 }, 'one'),
// h('div', { key: 2 }, 'two')
// ])
// ]
// : [
// h(Fragment, { key: 2 }, [
// h('div', { key: 2 }, 'two'),
// h('div', { key: 1 }, 'one')
// ]),
// h('div', { key: 1 }, 'outer')
// ]
// }
// }
expect(serialize(root)).toBe( // const root = nodeOps.createElement('div')
`<div><div>outer</div><div>one</div><div>two</div></div>` // await render(h(App), root)
)
resetOps() // expect(serialize(root)).toBe(
state.ok = false // `<div><div>outer</div><div>one</div><div>two</div></div>`
await nextTick() // )
expect(serialize(root)).toBe(
`<div><div>two</div><div>one</div><div>outer</div></div>` // resetOps()
) // state.ok = false
const ops = dumpOps() // await nextTick()
// should be moving nodes instead of re-creating them // expect(serialize(root)).toBe(
expect(ops.some(op => op.type === NodeOpTypes.CREATE)).toBe(false) // `<div><div>two</div><div>one</div><div>outer</div></div>`
}) // )
}) // const ops = dumpOps()
// // should be moving nodes instead of re-creating them
// expect(ops.some(op => op.type === NodeOpTypes.CREATE)).toBe(false)
// })
// })