2020-03-10 06:20:30 +08:00
|
|
|
import { createApp, h, Suspense } from 'vue'
|
|
|
|
import { renderToString } from '../src/renderToString'
|
2020-03-11 04:52:08 +08:00
|
|
|
import { ssrRenderSuspense } from '../src/helpers/ssrRenderSuspense'
|
|
|
|
import { ssrRenderComponent } from '../src'
|
2020-03-11 05:13:27 +08:00
|
|
|
import { mockError } from '@vue/shared'
|
2020-03-10 06:20:30 +08:00
|
|
|
|
|
|
|
describe('SSR Suspense', () => {
|
2020-03-11 05:13:27 +08:00
|
|
|
mockError()
|
2020-03-11 03:28:13 +08:00
|
|
|
|
2020-03-10 06:20:30 +08:00
|
|
|
const ResolvingAsync = {
|
|
|
|
async setup() {
|
|
|
|
return () => h('div', 'async')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const RejectingAsync = {
|
|
|
|
setup() {
|
2020-03-11 03:28:13 +08:00
|
|
|
return new Promise((_, reject) => reject('foo'))
|
2020-03-10 06:20:30 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-03-11 04:52:08 +08:00
|
|
|
describe('compiled', () => {
|
|
|
|
test('basic', async () => {
|
|
|
|
const app = createApp({
|
|
|
|
ssrRender(_ctx, _push) {
|
|
|
|
_push(
|
|
|
|
ssrRenderSuspense({
|
|
|
|
default: _push => {
|
|
|
|
_push('<div>async</div>')
|
|
|
|
}
|
|
|
|
})
|
|
|
|
)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
expect(await renderToString(app)).toBe(`<div>async</div>`)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('with async component', async () => {
|
|
|
|
const app = createApp({
|
|
|
|
ssrRender(_ctx, _push) {
|
|
|
|
_push(
|
|
|
|
ssrRenderSuspense({
|
|
|
|
default: _push => {
|
|
|
|
_push(ssrRenderComponent(ResolvingAsync))
|
|
|
|
}
|
|
|
|
})
|
|
|
|
)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
expect(await renderToString(app)).toBe(`<div>async</div>`)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('fallback', async () => {
|
|
|
|
const app = createApp({
|
|
|
|
ssrRender(_ctx, _push) {
|
|
|
|
_push(
|
|
|
|
ssrRenderSuspense({
|
|
|
|
default: _push => {
|
|
|
|
_push(ssrRenderComponent(RejectingAsync))
|
|
|
|
},
|
|
|
|
fallback: _push => {
|
|
|
|
_push('<div>fallback</div>')
|
|
|
|
}
|
|
|
|
})
|
|
|
|
)
|
|
|
|
}
|
|
|
|
})
|
2020-03-10 06:20:30 +08:00
|
|
|
|
2020-03-11 04:52:08 +08:00
|
|
|
expect(await renderToString(app)).toBe(`<div>fallback</div>`)
|
2020-03-11 05:13:27 +08:00
|
|
|
expect('Uncaught error in async setup').toHaveBeenWarned()
|
2020-03-11 04:52:08 +08:00
|
|
|
})
|
2020-03-10 06:20:30 +08:00
|
|
|
})
|
|
|
|
|
2020-03-11 04:52:08 +08:00
|
|
|
describe('vnode', () => {
|
|
|
|
test('content', async () => {
|
|
|
|
const Comp = {
|
|
|
|
render() {
|
|
|
|
return h(Suspense, null, {
|
|
|
|
default: h(ResolvingAsync),
|
|
|
|
fallback: h('div', 'fallback')
|
|
|
|
})
|
|
|
|
}
|
2020-03-10 06:20:30 +08:00
|
|
|
}
|
|
|
|
|
2020-03-11 04:52:08 +08:00
|
|
|
expect(await renderToString(createApp(Comp))).toBe(`<div>async</div>`)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('fallback', async () => {
|
|
|
|
const Comp = {
|
|
|
|
render() {
|
|
|
|
return h(Suspense, null, {
|
|
|
|
default: h(RejectingAsync),
|
|
|
|
fallback: h('div', 'fallback')
|
|
|
|
})
|
|
|
|
}
|
2020-03-10 06:20:30 +08:00
|
|
|
}
|
|
|
|
|
2020-03-11 04:52:08 +08:00
|
|
|
expect(await renderToString(createApp(Comp))).toBe(`<div>fallback</div>`)
|
2020-03-11 05:13:27 +08:00
|
|
|
expect('Uncaught error in async setup').toHaveBeenWarned()
|
2020-03-11 04:52:08 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
test('2 components', async () => {
|
|
|
|
const Comp = {
|
|
|
|
render() {
|
|
|
|
return h(Suspense, null, {
|
|
|
|
default: h('div', [h(ResolvingAsync), h(ResolvingAsync)]),
|
|
|
|
fallback: h('div', 'fallback')
|
|
|
|
})
|
|
|
|
}
|
2020-03-10 06:20:30 +08:00
|
|
|
}
|
|
|
|
|
2020-03-11 04:52:08 +08:00
|
|
|
expect(await renderToString(createApp(Comp))).toBe(
|
|
|
|
`<div><div>async</div><div>async</div></div>`
|
|
|
|
)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('resolving component + rejecting component', async () => {
|
|
|
|
const Comp = {
|
|
|
|
render() {
|
|
|
|
return h(Suspense, null, {
|
|
|
|
default: h('div', [h(ResolvingAsync), h(RejectingAsync)]),
|
|
|
|
fallback: h('div', 'fallback')
|
|
|
|
})
|
|
|
|
}
|
2020-03-10 06:20:30 +08:00
|
|
|
}
|
|
|
|
|
2020-03-11 04:52:08 +08:00
|
|
|
expect(await renderToString(createApp(Comp))).toBe(`<div>fallback</div>`)
|
2020-03-11 05:13:27 +08:00
|
|
|
expect('Uncaught error in async setup').toHaveBeenWarned()
|
2020-03-11 04:52:08 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
test('failing suspense in passing suspense', async () => {
|
|
|
|
const Comp = {
|
|
|
|
render() {
|
|
|
|
return h(Suspense, null, {
|
|
|
|
default: h('div', [
|
|
|
|
h(ResolvingAsync),
|
|
|
|
h(Suspense, null, {
|
|
|
|
default: h('div', [h(RejectingAsync)]),
|
|
|
|
fallback: h('div', 'fallback 2')
|
|
|
|
})
|
|
|
|
]),
|
|
|
|
fallback: h('div', 'fallback 1')
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
2020-03-10 06:20:30 +08:00
|
|
|
|
2020-03-11 04:52:08 +08:00
|
|
|
expect(await renderToString(createApp(Comp))).toBe(
|
|
|
|
`<div><div>async</div><div>fallback 2</div></div>`
|
|
|
|
)
|
2020-03-11 05:13:27 +08:00
|
|
|
expect('Uncaught error in async setup').toHaveBeenWarned()
|
2020-03-11 04:52:08 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
test('passing suspense in failing suspense', async () => {
|
|
|
|
const Comp = {
|
|
|
|
render() {
|
|
|
|
return h(Suspense, null, {
|
|
|
|
default: h('div', [
|
|
|
|
h(RejectingAsync),
|
|
|
|
h(Suspense, null, {
|
|
|
|
default: h('div', [h(ResolvingAsync)]),
|
|
|
|
fallback: h('div', 'fallback 2')
|
|
|
|
})
|
|
|
|
]),
|
|
|
|
fallback: h('div', 'fallback 1')
|
|
|
|
})
|
|
|
|
}
|
2020-03-10 06:20:30 +08:00
|
|
|
}
|
|
|
|
|
2020-03-11 04:52:08 +08:00
|
|
|
expect(await renderToString(createApp(Comp))).toBe(
|
|
|
|
`<div>fallback 1</div>`
|
|
|
|
)
|
2020-03-11 05:13:27 +08:00
|
|
|
expect('Uncaught error in async setup').toHaveBeenWarned()
|
2020-03-11 04:52:08 +08:00
|
|
|
})
|
2020-03-10 06:20:30 +08:00
|
|
|
})
|
|
|
|
})
|