2019-09-10 05:24:42 +08:00
|
|
|
import {
|
|
|
|
h,
|
|
|
|
ref,
|
|
|
|
Suspense,
|
|
|
|
ComponentOptions,
|
|
|
|
render,
|
|
|
|
nodeOps,
|
|
|
|
serializeInner,
|
2019-09-11 23:09:16 +08:00
|
|
|
nextTick,
|
|
|
|
onMounted,
|
|
|
|
watch,
|
2019-09-12 13:52:14 +08:00
|
|
|
onUnmounted,
|
|
|
|
onErrorCaptured
|
2019-09-10 05:24:42 +08:00
|
|
|
} from '@vue/runtime-test'
|
|
|
|
|
|
|
|
describe('renderer: suspense', () => {
|
2019-09-11 23:09:16 +08:00
|
|
|
const deps: Promise<any>[] = []
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
deps.length = 0
|
|
|
|
})
|
2019-09-10 05:24:42 +08:00
|
|
|
|
2019-09-11 23:09:16 +08:00
|
|
|
// a simple async factory for testing purposes only.
|
|
|
|
function createAsyncComponent<T extends ComponentOptions>(
|
|
|
|
comp: T,
|
|
|
|
delay: number = 0
|
|
|
|
) {
|
|
|
|
return {
|
2019-09-10 05:24:42 +08:00
|
|
|
async setup(props: any, { slots }: any) {
|
2019-09-11 23:09:16 +08:00
|
|
|
const p: Promise<T> = new Promise(r => setTimeout(() => r(comp), delay))
|
2019-09-10 05:24:42 +08:00
|
|
|
deps.push(p)
|
|
|
|
const Inner = await p
|
|
|
|
return () => h(Inner, props, slots)
|
|
|
|
}
|
2019-09-11 23:09:16 +08:00
|
|
|
}
|
|
|
|
}
|
2019-09-10 05:24:42 +08:00
|
|
|
|
2019-09-10 23:17:26 +08:00
|
|
|
test('fallback content', async () => {
|
2019-09-11 23:09:16 +08:00
|
|
|
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>`)
|
|
|
|
})
|
|
|
|
|
2019-09-12 11:44:37 +08:00
|
|
|
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>`)
|
|
|
|
|
|
|
|
await deps[0]
|
|
|
|
await nextTick()
|
|
|
|
expect(serializeInner(root)).toBe(`<div>fallback</div>`)
|
|
|
|
|
|
|
|
await Promise.all(deps)
|
|
|
|
await nextTick()
|
|
|
|
expect(serializeInner(root)).toBe(`<div>inner</div>`)
|
|
|
|
})
|
|
|
|
|
2019-09-11 23:09:16 +08:00
|
|
|
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 () => {
|
2019-09-10 23:17:26 +08:00
|
|
|
const deps: Promise<any>[] = []
|
2019-09-11 23:09:16 +08:00
|
|
|
const calls: string[] = []
|
|
|
|
const toggle = ref(true)
|
2019-09-10 23:17:26 +08:00
|
|
|
|
|
|
|
const Async = {
|
|
|
|
async setup() {
|
|
|
|
const p = new Promise(r => setTimeout(r, 1))
|
|
|
|
deps.push(p)
|
2019-09-11 23:09:16 +08:00
|
|
|
|
|
|
|
watch(() => {
|
|
|
|
calls.push('watch callback')
|
|
|
|
})
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
calls.push('mounted')
|
|
|
|
})
|
|
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
calls.push('unmounted')
|
|
|
|
})
|
|
|
|
|
2019-09-10 23:17:26 +08:00
|
|
|
await p
|
2019-09-12 01:22:18 +08:00
|
|
|
return () => h('div', 'async')
|
2019-09-10 23:17:26 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const Comp = {
|
|
|
|
setup() {
|
|
|
|
return () =>
|
|
|
|
h(Suspense, null, {
|
2019-09-11 23:09:16 +08:00
|
|
|
default: toggle.value ? h(Async) : null,
|
2019-09-10 23:17:26 +08:00
|
|
|
fallback: h('div', 'fallback')
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
2019-09-10 23:01:11 +08:00
|
|
|
|
2019-09-10 23:17:26 +08:00
|
|
|
const root = nodeOps.createElement('div')
|
|
|
|
render(h(Comp), root)
|
|
|
|
expect(serializeInner(root)).toBe(`<div>fallback</div>`)
|
2019-09-11 23:09:16 +08:00
|
|
|
expect(calls).toEqual([])
|
2019-09-10 23:17:26 +08:00
|
|
|
|
|
|
|
await Promise.all(deps)
|
|
|
|
await nextTick()
|
|
|
|
expect(serializeInner(root)).toBe(`<div>async</div>`)
|
2019-09-11 23:09:16 +08:00
|
|
|
expect(calls).toEqual([`watch callback`, `mounted`])
|
2019-09-10 05:28:35 +08:00
|
|
|
|
2019-09-11 23:09:16 +08:00
|
|
|
// 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'])
|
|
|
|
})
|
2019-09-11 22:09:00 +08:00
|
|
|
|
2019-09-12 01:22:18 +08:00
|
|
|
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>`)
|
|
|
|
})
|
2019-09-10 05:28:35 +08:00
|
|
|
|
2019-09-11 23:09:16 +08:00
|
|
|
// mount/unmount hooks should not even fire
|
2019-09-12 01:22:18 +08:00
|
|
|
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([])
|
|
|
|
|
|
|
|
// remvoe 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([])
|
|
|
|
})
|
|
|
|
|
2019-09-12 11:44:37 +08:00
|
|
|
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()
|
2019-09-12 01:22:18 +08:00
|
|
|
|
2019-09-12 11:44:37 +08:00
|
|
|
const Async = createAsyncComponent({
|
|
|
|
setup() {
|
|
|
|
onMounted(mounted)
|
|
|
|
onUnmounted(unmounted)
|
|
|
|
return () => h('div', 'async')
|
|
|
|
}
|
|
|
|
})
|
2019-09-10 05:28:35 +08:00
|
|
|
|
2019-09-12 11:44:37 +08:00
|
|
|
const Comp = {
|
|
|
|
setup() {
|
|
|
|
return () =>
|
|
|
|
toggle.value
|
|
|
|
? h(Suspense, null, {
|
|
|
|
default: h(Async),
|
|
|
|
fallback: h('div', 'fallback')
|
|
|
|
})
|
|
|
|
: null
|
|
|
|
}
|
|
|
|
}
|
2019-09-10 23:17:26 +08:00
|
|
|
|
2019-09-12 11:44:37 +08:00
|
|
|
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`])
|
|
|
|
})
|
2019-09-11 23:09:16 +08:00
|
|
|
|
2019-09-12 13:52:14 +08:00
|
|
|
test('error handling', async () => {
|
|
|
|
const Async = {
|
|
|
|
async setup() {
|
|
|
|
throw new Error('oops')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const Comp = {
|
|
|
|
setup() {
|
|
|
|
const error = ref<any>(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>`)
|
|
|
|
})
|
2019-09-11 00:08:30 +08:00
|
|
|
|
2019-09-12 22:31:56 +08:00
|
|
|
it('combined usage (nested async + nested suspense + multiple deps)', async () => {
|
|
|
|
const msg = ref('nested msg')
|
2019-09-12 22:40:17 +08:00
|
|
|
const calls: number[] = []
|
2019-09-12 22:31:56 +08:00
|
|
|
|
|
|
|
const AsyncChildWithSuspense = createAsyncComponent({
|
|
|
|
setup(props: { msg: string }) {
|
2019-09-12 22:40:17 +08:00
|
|
|
onMounted(() => {
|
|
|
|
calls.push(0)
|
|
|
|
})
|
2019-09-12 22:31:56 +08:00
|
|
|
return () =>
|
|
|
|
h(Suspense, null, {
|
|
|
|
default: h(AsyncInsideNestedSuspense, { msg: props.msg }),
|
|
|
|
fallback: h('div', 'nested fallback')
|
|
|
|
})
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
const AsyncInsideNestedSuspense = createAsyncComponent(
|
|
|
|
{
|
|
|
|
setup(props: { msg: string }) {
|
2019-09-12 22:40:17 +08:00
|
|
|
onMounted(() => {
|
|
|
|
calls.push(2)
|
|
|
|
})
|
2019-09-12 22:31:56 +08:00
|
|
|
return () => h('div', props.msg)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
20
|
|
|
|
)
|
|
|
|
|
|
|
|
const AsyncChildParent = createAsyncComponent({
|
|
|
|
setup(props: { msg: string }) {
|
2019-09-12 22:40:17 +08:00
|
|
|
onMounted(() => {
|
|
|
|
calls.push(1)
|
|
|
|
})
|
2019-09-12 22:31:56 +08:00
|
|
|
return () => h(NestedAsyncChild, { msg: props.msg })
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
const NestedAsyncChild = createAsyncComponent(
|
|
|
|
{
|
|
|
|
setup(props: { msg: string }) {
|
2019-09-12 22:40:17 +08:00
|
|
|
onMounted(() => {
|
|
|
|
calls.push(3)
|
|
|
|
})
|
2019-09-12 22:31:56 +08:00
|
|
|
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>`)
|
2019-09-12 22:40:17 +08:00
|
|
|
expect(calls).toEqual([])
|
2019-09-12 22:31:56 +08:00
|
|
|
|
|
|
|
/**
|
|
|
|
* <Root>
|
|
|
|
* <Suspense>
|
|
|
|
* <MiddleComponent>
|
2019-09-12 22:40:17 +08:00
|
|
|
* <AsyncChildWithSuspense> (0: resolves on macrotask)
|
2019-09-12 22:31:56 +08:00
|
|
|
* <Suspense>
|
2019-09-12 22:40:17 +08:00
|
|
|
* <AsyncInsideNestedSuspense> (2: resolves on macrotask + 20ms)
|
|
|
|
* <AsyncChildParent> (1: resolves on macrotask)
|
|
|
|
* <NestedAsyncChild> (3: resolves on macrotask + 10ms)
|
2019-09-12 22:31:56 +08:00
|
|
|
*/
|
|
|
|
|
|
|
|
// 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>`)
|
2019-09-12 22:40:17 +08:00
|
|
|
expect(calls).toEqual([])
|
2019-09-12 22:31:56 +08:00
|
|
|
|
|
|
|
// 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><!---->`
|
|
|
|
)
|
2019-09-12 22:40:17 +08:00
|
|
|
expect(calls).toEqual([0, 1, 3])
|
|
|
|
|
|
|
|
// change state for the nested component before it resolves
|
|
|
|
msg.value = 'nested changed'
|
2019-09-12 22:31:56 +08:00
|
|
|
|
|
|
|
// all deps resolved, nested suspense should resolve now
|
|
|
|
await Promise.all(deps)
|
|
|
|
await nextTick()
|
|
|
|
expect(serializeInner(root)).toBe(
|
2019-09-12 22:40:17 +08:00
|
|
|
`<!----><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><!---->`
|
2019-09-12 22:31:56 +08:00
|
|
|
)
|
|
|
|
})
|
|
|
|
|
2019-09-13 00:16:01 +08:00
|
|
|
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><!---->`
|
|
|
|
)
|
|
|
|
})
|
2019-09-12 11:44:37 +08:00
|
|
|
|
2019-09-11 00:08:30 +08:00
|
|
|
test.todo('portal inside suspense')
|
2019-09-10 05:24:42 +08:00
|
|
|
})
|