test: test suspense fallback

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

@@ -10,7 +10,7 @@ import {
 } from '@vue/runtime-test'
 
 describe('renderer: suspense', () => {
-  it('should work', async () => {
+  it('basic usage (nested + multiple deps)', async () => {
     const msg = ref('hello')
     const deps: Promise<any>[] = []
 
@@ -59,7 +59,6 @@ describe('renderer: suspense', () => {
     }
 
     const Comp = {
-      name: 'root',
       setup() {
         return () =>
           h(Suspense, [msg.value, h(Mid), h(AsyncChild2, { msg: 'child 2' })])
@@ -77,13 +76,50 @@ describe('renderer: suspense', () => {
     )
   })
 
-  test.todo('buffer mounted/updated hooks & watch callbacks')
+  test('fallback content', async () => {
+    const deps: Promise<any>[] = []
+
+    const Async = {
+      async setup() {
+        const p = new Promise(r => setTimeout(r, 1))
+        deps.push(p)
+        await p
+        // test resume for returning bindings
+        return {
+          msg: 'async'
+        }
+      },
+      render(this: any) {
+        return h('div', this.msg)
+      }
+    }
+
+    const Comp = {
+      setup() {
+        return () =>
+          h(Suspense, null, {
+            default: h(Async),
+            fallback: h('div', 'fallback')
+          })
+      }
+    }
 
-  test.todo('fallback content')
+    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.todo('buffer mounted/updated hooks & watch callbacks')
 
   test.todo('content update before suspense resolve')
 
   test.todo('unmount before suspense resolve')
 
   test.todo('nested suspense')
+
+  test.todo('error handling')
 })

packages/runtime-core/src/suspense.ts

@@ -1,5 +1,6 @@
 import { VNode, normalizeVNode } from './vnode'
 import { ShapeFlags } from '.'
+import { isFunction } from '@vue/shared'
 
 export const SuspenseSymbol = __DEV__ ? Symbol('Suspense key') : Symbol()
 
@@ -48,16 +49,16 @@ export function normalizeSuspenseChildren(
   content: VNode
   fallback: VNode
 } {
-  const { shapeFlag } = vnode
-  const children = vnode.children as any
+  const { shapeFlag, children } = vnode
   if (shapeFlag & ShapeFlags.SLOTS_CHILDREN) {
+    const { default: d, fallback } = children as any
     return {
-      content: normalizeVNode(children.default()),
-      fallback: normalizeVNode(children.fallback ? children.fallback() : null)
+      content: normalizeVNode(isFunction(d) ? d() : d),
+      fallback: normalizeVNode(isFunction(fallback) ? fallback() : fallback)
     }
   } else {
     return {
-      content: normalizeVNode(children),
+      content: normalizeVNode(children as any),
       fallback: normalizeVNode(null)
     }
   }