vue3-yuanma/packages/runtime-core/__tests__/rendererSuspense.spec.ts

552 lines
13 KiB
TypeScript
Raw Normal View History

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,
onUnmounted
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-11 23:09:16 +08:00
it('basic usage (nested + multiple deps)', async () => {
const msg = ref('hello')
const AsyncChild = createAsyncComponent({
setup(props: { msg: string }) {
return () => h('div', props.msg)
}
})
2019-09-10 05:24:42 +08:00
2019-09-10 05:28:35 +08:00
const AsyncChild2 = createAsyncComponent(
2019-09-11 23:09:16 +08:00
{
setup(props: { msg: string }) {
return () => h('div', props.msg)
}
},
10
2019-09-10 05:28:35 +08:00
)
2019-09-10 05:24:42 +08:00
const Mid = {
setup() {
return () =>
h(AsyncChild, {
msg: msg.value
})
}
}
const Comp = {
setup() {
2019-09-10 05:28:35 +08:00
return () =>
h(Suspense, [msg.value, h(Mid), h(AsyncChild2, { msg: 'child 2' })])
2019-09-10 05:24:42 +08:00
}
}
const root = nodeOps.createElement('div')
render(h(Comp), root)
expect(serializeInner(root)).toBe(`<!---->`)
await Promise.all(deps)
await nextTick()
2019-09-10 05:28:35 +08:00
expect(serializeInner(root)).toBe(
`<!---->hello<div>hello</div><div>child 2</div><!---->`
)
2019-09-10 05:24:42 +08:00
})
2019-09-10 05:28:35 +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>`)
})
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
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'])
})
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
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([])
})
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')
}
})
2019-09-10 05:28:35 +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
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-10 23:17:26 +08:00
test.todo('error handling')
2019-09-11 00:08:30 +08:00
test.todo('new async dep after resolve should cause suspense to restart')
2019-09-11 00:08:30 +08:00
test.todo('portal inside suspense')
2019-09-10 05:24:42 +08:00
})