refactor: simplify suspense ssr + adjust behavior

packages/server-renderer/__tests__/renderToString.spec.ts

@@ -8,11 +8,11 @@ import {
   ref,
   defineComponent
 } from 'vue'
-import { escapeHtml, mockError } from '@vue/shared'
+import { escapeHtml, mockWarn } from '@vue/shared'
 import { renderToString, renderComponent } from '../src/renderToString'
 import { ssrRenderSlot } from '../src/helpers/ssrRenderSlot'
 
-mockError()
+mockWarn()
 
 describe('ssr: renderToString', () => {
   test('should apply app context', async () => {

packages/server-renderer/__tests__/ssrSuspense.spec.ts

@@ -1,11 +1,9 @@
 import { createApp, h, Suspense } from 'vue'
 import { renderToString } from '../src/renderToString'
-import { ssrRenderSuspense } from '../src/helpers/ssrRenderSuspense'
-import { ssrRenderComponent } from '../src'
-import { mockError } from '@vue/shared'
+import { mockWarn } from '@vue/shared'
 
 describe('SSR Suspense', () => {
-  mockError()
+  mockWarn()
 
   const ResolvingAsync = {
     async setup() {
@@ -19,161 +17,109 @@ describe('SSR Suspense', () => {
     }
   }
 
-  describe('compiled', () => {
-    test('basic', async () => {
-      const app = createApp({
-        ssrRender(_ctx, _push) {
-          _push(
-            ssrRenderSuspense({
-              default: _push => {
-                _push('<div>async</div>')
-              }
-            })
-          )
-        }
-      })
+  test('content', async () => {
+    const Comp = {
+      render() {
+        return h(Suspense, null, {
+          default: h(ResolvingAsync),
+          fallback: h('div', 'fallback')
+        })
+      }
+    }
 
-      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>')
-              }
-            })
-          )
-        }
-      })
-
-      expect(await renderToString(app)).toBe(
-        `<!--[--><div>fallback</div><!--]-->`
-      )
-      expect('Uncaught error in async setup').toHaveBeenWarned()
-    })
+    expect(await renderToString(createApp(Comp))).toBe(`<div>async</div>`)
   })
 
-  describe('vnode', () => {
-    test('content', async () => {
-      const Comp = {
-        render() {
-          return h(Suspense, null, {
-            default: h(ResolvingAsync),
-            fallback: h('div', 'fallback')
-          })
-        }
+  test('reject', async () => {
+    const Comp = {
+      render() {
+        return h(Suspense, null, {
+          default: h(RejectingAsync),
+          fallback: h('div', 'fallback')
+        })
       }
+    }
 
-      expect(await renderToString(createApp(Comp))).toBe(`<div>async</div>`)
-    })
+    expect(await renderToString(createApp(Comp))).toBe(`<!---->`)
+    expect('Uncaught error in async setup').toHaveBeenWarned()
+    expect('missing template').toHaveBeenWarned()
+  })
 
-    test('fallback', async () => {
-      const Comp = {
-        render() {
-          return h(Suspense, null, {
-            default: h(RejectingAsync),
-            fallback: h('div', 'fallback')
-          })
-        }
+  test('2 components', async () => {
+    const Comp = {
+      render() {
+        return h(Suspense, null, {
+          default: h('div', [h(ResolvingAsync), h(ResolvingAsync)]),
+          fallback: h('div', 'fallback')
+        })
       }
+    }
 
-      expect(await renderToString(createApp(Comp))).toBe(`<div>fallback</div>`)
-      expect('Uncaught error in async setup').toHaveBeenWarned()
-    })
+    expect(await renderToString(createApp(Comp))).toBe(
+      `<div><div>async</div><div>async</div></div>`
+    )
+  })
 
-    test('2 components', async () => {
-      const Comp = {
-        render() {
-          return h(Suspense, null, {
-            default: h('div', [h(ResolvingAsync), h(ResolvingAsync)]),
-            fallback: h('div', 'fallback')
-          })
-        }
+  test('resolving component + rejecting component', async () => {
+    const Comp = {
+      render() {
+        return h(Suspense, null, {
+          default: h('div', [h(ResolvingAsync), h(RejectingAsync)]),
+          fallback: h('div', 'fallback')
+        })
       }
+    }
 
-      expect(await renderToString(createApp(Comp))).toBe(
-        `<div><div>async</div><div>async</div></div>`
-      )
-    })
+    expect(await renderToString(createApp(Comp))).toBe(
+      `<div><div>async</div><!----></div>`
+    )
+    expect('Uncaught error in async setup').toHaveBeenWarned()
+    expect('missing template or render function').toHaveBeenWarned()
+  })
 
-    test('resolving component + rejecting component', async () => {
-      const Comp = {
-        render() {
-          return h(Suspense, null, {
-            default: h('div', [h(ResolvingAsync), h(RejectingAsync)]),
-            fallback: h('div', 'fallback')
-          })
-        }
+  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')
+        })
       }
+    }
 
-      expect(await renderToString(createApp(Comp))).toBe(`<div>fallback</div>`)
-      expect('Uncaught error in async setup').toHaveBeenWarned()
-    })
+    expect(await renderToString(createApp(Comp))).toBe(
+      `<div><div>async</div><div><!----></div></div>`
+    )
+    expect('Uncaught error in async setup').toHaveBeenWarned()
+    expect('missing template').toHaveBeenWarned()
+  })
 
-    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')
-          })
-        }
+  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')
+        })
       }
+    }
 
-      expect(await renderToString(createApp(Comp))).toBe(
-        `<div><div>async</div><div>fallback 2</div></div>`
-      )
-      expect('Uncaught error in async setup').toHaveBeenWarned()
-    })
-
-    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')
-          })
-        }
-      }
-
-      expect(await renderToString(createApp(Comp))).toBe(
-        `<div>fallback 1</div>`
-      )
-      expect('Uncaught error in async setup').toHaveBeenWarned()
-    })
+    expect(await renderToString(createApp(Comp))).toBe(
+      `<div><!----><div><div>async</div></div></div>`
+    )
+    expect('Uncaught error in async setup').toHaveBeenWarned()
+    expect('missing template').toHaveBeenWarned()
   })
 })