refactor: adjust internal vnode types + more dts tests
This commit is contained in:
Evan You
@@ -22,7 +22,7 @@ describe('keep-alive', () => {
|
||||
one = {
|
||||
name: 'one',
|
||||
data: () => ({ msg: 'one' }),
|
||||
render() {
|
||||
render(this: any) {
|
||||
return h('div', this.msg)
|
||||
},
|
||||
created: jest.fn(),
|
||||
@@ -34,7 +34,7 @@ describe('keep-alive', () => {
|
||||
two = {
|
||||
name: 'two',
|
||||
data: () => ({ msg: 'two' }),
|
||||
render() {
|
||||
render(this: any) {
|
||||
return h('div', this.msg)
|
||||
},
|
||||
created: jest.fn(),
|
||||
|
||||
715
packages/runtime-core/__tests__/components/Suspense.spec.ts
Normal file
715
packages/runtime-core/__tests__/components/Suspense.spec.ts
Normal file
@@ -0,0 +1,715 @@
|
||||
import {
|
||||
h,
|
||||
ref,
|
||||
Suspense,
|
||||
ComponentOptions,
|
||||
render,
|
||||
nodeOps,
|
||||
serializeInner,
|
||||
nextTick,
|
||||
onMounted,
|
||||
watch,
|
||||
onUnmounted,
|
||||
onErrorCaptured
|
||||
} from '@vue/runtime-test'
|
||||
|
||||
describe('renderer: suspense', () => {
|
||||
const deps: Promise<any>[] = []
|
||||
|
||||
beforeEach(() => {
|
||||
deps.length = 0
|
||||
})
|
||||
|
||||
// a simple async factory for testing purposes only.
|
||||
function createAsyncComponent<T extends ComponentOptions>(
|
||||
comp: T,
|
||||
delay: number = 0
|
||||
) {
|
||||
return {
|
||||
setup(props: any, { slots }: any) {
|
||||
const p = new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
resolve(() => h(comp, props, slots))
|
||||
}, delay)
|
||||
})
|
||||
// in Node 12, due to timer/nextTick mechanism change, we have to wait
|
||||
// an extra tick to avoid race conditions
|
||||
deps.push(p.then(() => Promise.resolve()))
|
||||
return p
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
test('fallback content', async () => {
|
||||
const Async = createAsyncComponent({
|
||||
render() {
|
||||
return h('div', 'async')
|
||||
}
|
||||
})
|
||||
|
||||
const Comp = {
|
||||
setup() {
|
||||
return () =>
|
||||
h(Suspense, null, {
|
||||
default: h(Async),
|
||||
fallback: h('div', 'fallback')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const root = nodeOps.createElement('div')
|
||||
render(h(Comp), root)
|
||||
expect(serializeInner(root)).toBe(`<div>fallback</div>`)
|
||||
|
||||
await Promise.all(deps)
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(`<div>async</div>`)
|
||||
})
|
||||
|
||||
test('nested async deps', async () => {
|
||||
const calls: string[] = []
|
||||
|
||||
const AsyncOuter = createAsyncComponent({
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
calls.push('outer mounted')
|
||||
})
|
||||
return () => h(AsyncInner)
|
||||
}
|
||||
})
|
||||
|
||||
const AsyncInner = createAsyncComponent(
|
||||
{
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
calls.push('inner mounted')
|
||||
})
|
||||
return () => h('div', 'inner')
|
||||
}
|
||||
},
|
||||
10
|
||||
)
|
||||
|
||||
const Comp = {
|
||||
setup() {
|
||||
return () =>
|
||||
h(Suspense, null, {
|
||||
default: h(AsyncOuter),
|
||||
fallback: h('div', 'fallback')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const root = nodeOps.createElement('div')
|
||||
render(h(Comp), root)
|
||||
expect(serializeInner(root)).toBe(`<div>fallback</div>`)
|
||||
expect(calls).toEqual([])
|
||||
|
||||
await deps[0]
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(`<div>fallback</div>`)
|
||||
expect(calls).toEqual([])
|
||||
|
||||
await Promise.all(deps)
|
||||
await nextTick()
|
||||
expect(calls).toEqual([`outer mounted`, `inner mounted`])
|
||||
expect(serializeInner(root)).toBe(`<div>inner</div>`)
|
||||
})
|
||||
|
||||
test('onResolve', async () => {
|
||||
const Async = createAsyncComponent({
|
||||
render() {
|
||||
return h('div', 'async')
|
||||
}
|
||||
})
|
||||
|
||||
const onResolve = jest.fn()
|
||||
|
||||
const Comp = {
|
||||
setup() {
|
||||
return () =>
|
||||
h(
|
||||
Suspense,
|
||||
{
|
||||
onResolve
|
||||
},
|
||||
{
|
||||
default: h(Async),
|
||||
fallback: h('div', 'fallback')
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const root = nodeOps.createElement('div')
|
||||
render(h(Comp), root)
|
||||
expect(serializeInner(root)).toBe(`<div>fallback</div>`)
|
||||
expect(onResolve).not.toHaveBeenCalled()
|
||||
|
||||
await Promise.all(deps)
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(`<div>async</div>`)
|
||||
expect(onResolve).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
test('buffer mounted/updated hooks & watch callbacks', async () => {
|
||||
const deps: Promise<any>[] = []
|
||||
const calls: string[] = []
|
||||
const toggle = ref(true)
|
||||
|
||||
const Async = {
|
||||
async setup() {
|
||||
const p = new Promise(r => setTimeout(r, 1))
|
||||
// extra tick needed for Node 12+
|
||||
deps.push(p.then(() => Promise.resolve()))
|
||||
|
||||
watch(() => {
|
||||
calls.push('watch callback')
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
calls.push('mounted')
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
calls.push('unmounted')
|
||||
})
|
||||
|
||||
await p
|
||||
return () => h('div', 'async')
|
||||
}
|
||||
}
|
||||
|
||||
const Comp = {
|
||||
setup() {
|
||||
return () =>
|
||||
h(Suspense, null, {
|
||||
default: toggle.value ? h(Async) : null,
|
||||
fallback: h('div', 'fallback')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const root = nodeOps.createElement('div')
|
||||
render(h(Comp), root)
|
||||
expect(serializeInner(root)).toBe(`<div>fallback</div>`)
|
||||
expect(calls).toEqual([])
|
||||
|
||||
await Promise.all(deps)
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(`<div>async</div>`)
|
||||
expect(calls).toEqual([`watch callback`, `mounted`])
|
||||
|
||||
// effects inside an already resolved suspense should happen at normal timing
|
||||
toggle.value = false
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(`<!---->`)
|
||||
expect(calls).toEqual([`watch callback`, `mounted`, 'unmounted'])
|
||||
})
|
||||
|
||||
test('content update before suspense resolve', async () => {
|
||||
const Async = createAsyncComponent({
|
||||
setup(props: { msg: string }) {
|
||||
return () => h('div', props.msg)
|
||||
}
|
||||
})
|
||||
|
||||
const msg = ref('foo')
|
||||
|
||||
const Comp = {
|
||||
setup() {
|
||||
return () =>
|
||||
h(Suspense, null, {
|
||||
default: h(Async, { msg: msg.value }),
|
||||
fallback: h('div', `fallback ${msg.value}`)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const root = nodeOps.createElement('div')
|
||||
render(h(Comp), root)
|
||||
expect(serializeInner(root)).toBe(`<div>fallback foo</div>`)
|
||||
|
||||
// value changed before resolve
|
||||
msg.value = 'bar'
|
||||
await nextTick()
|
||||
// fallback content should be updated
|
||||
expect(serializeInner(root)).toBe(`<div>fallback bar</div>`)
|
||||
|
||||
await Promise.all(deps)
|
||||
await nextTick()
|
||||
// async component should receive updated props/slots when resolved
|
||||
expect(serializeInner(root)).toBe(`<div>bar</div>`)
|
||||
})
|
||||
|
||||
// mount/unmount hooks should not even fire
|
||||
test('unmount before suspense resolve', async () => {
|
||||
const deps: Promise<any>[] = []
|
||||
const calls: string[] = []
|
||||
const toggle = ref(true)
|
||||
|
||||
const Async = {
|
||||
async setup() {
|
||||
const p = new Promise(r => setTimeout(r, 1))
|
||||
deps.push(p)
|
||||
|
||||
watch(() => {
|
||||
calls.push('watch callback')
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
calls.push('mounted')
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
calls.push('unmounted')
|
||||
})
|
||||
|
||||
await p
|
||||
return () => h('div', 'async')
|
||||
}
|
||||
}
|
||||
|
||||
const Comp = {
|
||||
setup() {
|
||||
return () =>
|
||||
h(Suspense, null, {
|
||||
default: toggle.value ? h(Async) : null,
|
||||
fallback: h('div', 'fallback')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const root = nodeOps.createElement('div')
|
||||
render(h(Comp), root)
|
||||
expect(serializeInner(root)).toBe(`<div>fallback</div>`)
|
||||
expect(calls).toEqual([])
|
||||
|
||||
// remove the async dep before it's resolved
|
||||
toggle.value = false
|
||||
await nextTick()
|
||||
// should cause the suspense to resolve immediately
|
||||
expect(serializeInner(root)).toBe(`<!---->`)
|
||||
|
||||
await Promise.all(deps)
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(`<!---->`)
|
||||
// should discard effects
|
||||
expect(calls).toEqual([])
|
||||
})
|
||||
|
||||
test('unmount suspense after resolve', async () => {
|
||||
const toggle = ref(true)
|
||||
const unmounted = jest.fn()
|
||||
|
||||
const Async = createAsyncComponent({
|
||||
setup() {
|
||||
onUnmounted(unmounted)
|
||||
return () => h('div', 'async')
|
||||
}
|
||||
})
|
||||
|
||||
const Comp = {
|
||||
setup() {
|
||||
return () =>
|
||||
toggle.value
|
||||
? h(Suspense, null, {
|
||||
default: h(Async),
|
||||
fallback: h('div', 'fallback')
|
||||
})
|
||||
: null
|
||||
}
|
||||
}
|
||||
|
||||
const root = nodeOps.createElement('div')
|
||||
render(h(Comp), root)
|
||||
expect(serializeInner(root)).toBe(`<div>fallback</div>`)
|
||||
|
||||
await Promise.all(deps)
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(`<div>async</div>`)
|
||||
expect(unmounted).not.toHaveBeenCalled()
|
||||
|
||||
toggle.value = false
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(`<!---->`)
|
||||
expect(unmounted).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
test('unmount suspense before resolve', async () => {
|
||||
const toggle = ref(true)
|
||||
const mounted = jest.fn()
|
||||
const unmounted = jest.fn()
|
||||
|
||||
const Async = createAsyncComponent({
|
||||
setup() {
|
||||
onMounted(mounted)
|
||||
onUnmounted(unmounted)
|
||||
return () => h('div', 'async')
|
||||
}
|
||||
})
|
||||
|
||||
const Comp = {
|
||||
setup() {
|
||||
return () =>
|
||||
toggle.value
|
||||
? h(Suspense, null, {
|
||||
default: h(Async),
|
||||
fallback: h('div', 'fallback')
|
||||
})
|
||||
: null
|
||||
}
|
||||
}
|
||||
|
||||
const root = nodeOps.createElement('div')
|
||||
render(h(Comp), root)
|
||||
expect(serializeInner(root)).toBe(`<div>fallback</div>`)
|
||||
|
||||
toggle.value = false
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(`<!---->`)
|
||||
expect(mounted).not.toHaveBeenCalled()
|
||||
expect(unmounted).not.toHaveBeenCalled()
|
||||
|
||||
await Promise.all(deps)
|
||||
await nextTick()
|
||||
// should not resolve and cause unmount
|
||||
expect(mounted).not.toHaveBeenCalled()
|
||||
expect(unmounted).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
test('nested suspense (parent resolves first)', async () => {
|
||||
const calls: string[] = []
|
||||
|
||||
const AsyncOuter = createAsyncComponent(
|
||||
{
|
||||
setup: () => {
|
||||
onMounted(() => {
|
||||
calls.push('outer mounted')
|
||||
})
|
||||
return () => h('div', 'async outer')
|
||||
}
|
||||
},
|
||||
1
|
||||
)
|
||||
|
||||
const AsyncInner = createAsyncComponent(
|
||||
{
|
||||
setup: () => {
|
||||
onMounted(() => {
|
||||
calls.push('inner mounted')
|
||||
})
|
||||
return () => h('div', 'async inner')
|
||||
}
|
||||
},
|
||||
10
|
||||
)
|
||||
|
||||
const Inner = {
|
||||
setup() {
|
||||
return () =>
|
||||
h(Suspense, null, {
|
||||
default: h(AsyncInner),
|
||||
fallback: h('div', 'fallback inner')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const Comp = {
|
||||
setup() {
|
||||
return () =>
|
||||
h(Suspense, null, {
|
||||
default: [h(AsyncOuter), h(Inner)],
|
||||
fallback: h('div', 'fallback outer')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const root = nodeOps.createElement('div')
|
||||
render(h(Comp), root)
|
||||
expect(serializeInner(root)).toBe(`<div>fallback outer</div>`)
|
||||
|
||||
await deps[0]
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(
|
||||
`<!----><div>async outer</div><div>fallback inner</div><!---->`
|
||||
)
|
||||
expect(calls).toEqual([`outer mounted`])
|
||||
|
||||
await Promise.all(deps)
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(
|
||||
`<!----><div>async outer</div><div>async inner</div><!---->`
|
||||
)
|
||||
expect(calls).toEqual([`outer mounted`, `inner mounted`])
|
||||
})
|
||||
|
||||
test('nested suspense (child resolves first)', async () => {
|
||||
const calls: string[] = []
|
||||
|
||||
const AsyncOuter = createAsyncComponent(
|
||||
{
|
||||
setup: () => {
|
||||
onMounted(() => {
|
||||
calls.push('outer mounted')
|
||||
})
|
||||
return () => h('div', 'async outer')
|
||||
}
|
||||
},
|
||||
10
|
||||
)
|
||||
|
||||
const AsyncInner = createAsyncComponent(
|
||||
{
|
||||
setup: () => {
|
||||
onMounted(() => {
|
||||
calls.push('inner mounted')
|
||||
})
|
||||
return () => h('div', 'async inner')
|
||||
}
|
||||
},
|
||||
1
|
||||
)
|
||||
|
||||
const Inner = {
|
||||
setup() {
|
||||
return () =>
|
||||
h(Suspense, null, {
|
||||
default: h(AsyncInner),
|
||||
fallback: h('div', 'fallback inner')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const Comp = {
|
||||
setup() {
|
||||
return () =>
|
||||
h(Suspense, null, {
|
||||
default: [h(AsyncOuter), h(Inner)],
|
||||
fallback: h('div', 'fallback outer')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const root = nodeOps.createElement('div')
|
||||
render(h(Comp), root)
|
||||
expect(serializeInner(root)).toBe(`<div>fallback outer</div>`)
|
||||
|
||||
await deps[1]
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(`<div>fallback outer</div>`)
|
||||
expect(calls).toEqual([])
|
||||
|
||||
await Promise.all(deps)
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(
|
||||
`<!----><div>async outer</div><div>async inner</div><!---->`
|
||||
)
|
||||
expect(calls).toEqual([`inner mounted`, `outer mounted`])
|
||||
})
|
||||
|
||||
test('error handling', async () => {
|
||||
const Async = {
|
||||
async setup() {
|
||||
throw new Error('oops')
|
||||
}
|
||||
}
|
||||
|
||||
const Comp = {
|
||||
setup() {
|
||||
const error = ref<Error | null>(null)
|
||||
onErrorCaptured(e => {
|
||||
error.value = e
|
||||
return true
|
||||
})
|
||||
|
||||
return () =>
|
||||
error.value
|
||||
? h('div', error.value.message)
|
||||
: h(Suspense, null, {
|
||||
default: h(Async),
|
||||
fallback: h('div', 'fallback')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const root = nodeOps.createElement('div')
|
||||
render(h(Comp), root)
|
||||
expect(serializeInner(root)).toBe(`<div>fallback</div>`)
|
||||
|
||||
await Promise.all(deps)
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(`<div>oops</div>`)
|
||||
})
|
||||
|
||||
it('combined usage (nested async + nested suspense + multiple deps)', async () => {
|
||||
const msg = ref('nested msg')
|
||||
const calls: number[] = []
|
||||
|
||||
const AsyncChildWithSuspense = createAsyncComponent({
|
||||
setup(props: { msg: string }) {
|
||||
onMounted(() => {
|
||||
calls.push(0)
|
||||
})
|
||||
return () =>
|
||||
h(Suspense, null, {
|
||||
default: h(AsyncInsideNestedSuspense, { msg: props.msg }),
|
||||
fallback: h('div', 'nested fallback')
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const AsyncInsideNestedSuspense = createAsyncComponent(
|
||||
{
|
||||
setup(props: { msg: string }) {
|
||||
onMounted(() => {
|
||||
calls.push(2)
|
||||
})
|
||||
return () => h('div', props.msg)
|
||||
}
|
||||
},
|
||||
20
|
||||
)
|
||||
|
||||
const AsyncChildParent = createAsyncComponent({
|
||||
setup(props: { msg: string }) {
|
||||
onMounted(() => {
|
||||
calls.push(1)
|
||||
})
|
||||
return () => h(NestedAsyncChild, { msg: props.msg })
|
||||
}
|
||||
})
|
||||
|
||||
const NestedAsyncChild = createAsyncComponent(
|
||||
{
|
||||
setup(props: { msg: string }) {
|
||||
onMounted(() => {
|
||||
calls.push(3)
|
||||
})
|
||||
return () => h('div', props.msg)
|
||||
}
|
||||
},
|
||||
10
|
||||
)
|
||||
|
||||
const MiddleComponent = {
|
||||
setup() {
|
||||
return () =>
|
||||
h(AsyncChildWithSuspense, {
|
||||
msg: msg.value
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const Comp = {
|
||||
setup() {
|
||||
return () =>
|
||||
h(Suspense, null, {
|
||||
default: [
|
||||
h(MiddleComponent),
|
||||
h(AsyncChildParent, {
|
||||
msg: 'root async'
|
||||
})
|
||||
],
|
||||
fallback: h('div', 'root fallback')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const root = nodeOps.createElement('div')
|
||||
render(h(Comp), root)
|
||||
expect(serializeInner(root)).toBe(`<div>root fallback</div>`)
|
||||
expect(calls).toEqual([])
|
||||
|
||||
/**
|
||||
* <Root>
|
||||
* <Suspense>
|
||||
* <MiddleComponent>
|
||||
* <AsyncChildWithSuspense> (0: resolves on macrotask)
|
||||
* <Suspense>
|
||||
* <AsyncInsideNestedSuspense> (2: resolves on macrotask + 20ms)
|
||||
* <AsyncChildParent> (1: resolves on macrotask)
|
||||
* <NestedAsyncChild> (3: resolves on macrotask + 10ms)
|
||||
*/
|
||||
|
||||
// both top level async deps resolved, but there is another nested dep
|
||||
// so should still be in fallback state
|
||||
await Promise.all([deps[0], deps[1]])
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(`<div>root fallback</div>`)
|
||||
expect(calls).toEqual([])
|
||||
|
||||
// root suspense all deps resolved. should show root content now
|
||||
// with nested suspense showing fallback content
|
||||
await deps[3]
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(
|
||||
`<!----><div>nested fallback</div><div>root async</div><!---->`
|
||||
)
|
||||
expect(calls).toEqual([0, 1, 3])
|
||||
|
||||
// change state for the nested component before it resolves
|
||||
msg.value = 'nested changed'
|
||||
|
||||
// all deps resolved, nested suspense should resolve now
|
||||
await Promise.all(deps)
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(
|
||||
`<!----><div>nested changed</div><div>root async</div><!---->`
|
||||
)
|
||||
expect(calls).toEqual([0, 1, 3, 2])
|
||||
|
||||
// should update just fine after resolve
|
||||
msg.value = 'nested changed again'
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(
|
||||
`<!----><div>nested changed again</div><div>root async</div><!---->`
|
||||
)
|
||||
})
|
||||
|
||||
test('new async dep after resolve should cause suspense to restart', async () => {
|
||||
const toggle = ref(false)
|
||||
|
||||
const ChildA = createAsyncComponent({
|
||||
setup() {
|
||||
return () => h('div', 'Child A')
|
||||
}
|
||||
})
|
||||
|
||||
const ChildB = createAsyncComponent({
|
||||
setup() {
|
||||
return () => h('div', 'Child B')
|
||||
}
|
||||
})
|
||||
|
||||
const Comp = {
|
||||
setup() {
|
||||
return () =>
|
||||
h(Suspense, null, {
|
||||
default: [h(ChildA), toggle.value ? h(ChildB) : null],
|
||||
fallback: h('div', 'root fallback')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const root = nodeOps.createElement('div')
|
||||
render(h(Comp), root)
|
||||
expect(serializeInner(root)).toBe(`<div>root fallback</div>`)
|
||||
|
||||
await deps[0]
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(`<!----><div>Child A</div><!----><!---->`)
|
||||
|
||||
toggle.value = true
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(`<div>root fallback</div>`)
|
||||
|
||||
await deps[1]
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(
|
||||
`<!----><div>Child A</div><div>Child B</div><!---->`
|
||||
)
|
||||
})
|
||||
|
||||
test.todo('portal inside suspense')
|
||||
})
|
||||
Reference in New Issue
Block a user