acrylblends 0.6.2 → 0.6.3

package/plugins/acryl-router/src/core/jsx/components.test.tsx

@@ -0,0 +1,936 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/** @jsxImportSource ./ */
+import { JSDOM } from 'jsdom'
+import { raw } from '../helper/html/index.ts'
+import type { HtmlEscapedString } from '../utils/html.ts'
+import { HtmlEscapedCallbackPhase, resolveCallback as rawResolveCallback } from '../utils/html.ts'
+import { ErrorBoundary } from './components.ts'
+import { Suspense, renderToReadableStream, StreamingContext } from './streaming.ts'
+
+const unsafeHtml = '<img src=x onerror=alert(1)>'
+const escapedUnsafeHtml = '&lt;img src=x onerror=alert(1)&gt;'
+
+function resolveCallback(template: string | HtmlEscapedString) {
+  return rawResolveCallback(template, HtmlEscapedCallbackPhase.Stream, false, {})
+}
+
+function replacementResult(html: string) {
+  const document = new JSDOM(html, { runScripts: 'dangerously' }).window.document
+  document.querySelectorAll('template, script').forEach((e) => e.remove())
+  return document.body.innerHTML
+}
+
+async function stringify(node: { toString(): string | Promise<string> }): Promise<string> {
+  return String(
+    await rawResolveCallback(await node.toString(), HtmlEscapedCallbackPhase.Stringify, false, {})
+  )
+}
+
+async function drainStream(stream: ReadableStream<Uint8Array>): Promise<string> {
+  const decoder = new TextDecoder()
+  let result = ''
+  for await (const chunk of stream) {
+    result += decoder.decode(chunk)
+  }
+  return result
+}
+
+const Fallback = () => <div>Out Of Service</div>
+
+describe('ErrorBoundary', () => {
+  let errorBoundaryCounter = 0
+  let suspenseCounter = 0
+  afterEach(() => {
+    errorBoundaryCounter++
+    suspenseCounter++
+  })
+
+  describe('sync', async () => {
+    const Component = ({ error }: { error?: boolean }) => {
+      if (error) {
+        throw new Error('Error')
+      }
+      return <div>Hello</div>
+    }
+
+    it('no error', async () => {
+      const html = (
+        <ErrorBoundary fallback={<Fallback />}>
+          <Component />
+        </ErrorBoundary>
+      )
+
+      expect((await resolveCallback(await html.toString())).toString()).toEqual('<div>Hello</div>')
+
+      errorBoundaryCounter--
+      suspenseCounter--
+    })
+
+    it('error', async () => {
+      const html = (
+        <ErrorBoundary fallback={<Fallback />}>
+          <Component error={true} />
+        </ErrorBoundary>
+      )
+
+      expect((await resolveCallback(await html.toString())).toString()).toEqual(
+        '<div>Out Of Service</div>'
+      )
+
+      suspenseCounter--
+    })
+
+    it('nullish', async () => {
+      const html = (
+        <div>
+          <ErrorBoundary fallback={<Fallback />}>{[null, undefined]}</ErrorBoundary>
+        </div>
+      )
+
+      expect((await resolveCallback(await html.toString())).toString()).toEqual('<div></div>')
+
+      errorBoundaryCounter--
+      suspenseCounter--
+    })
+
+    it('boolean', async () => {
+      const html = (
+        <div>
+          <ErrorBoundary fallback={<Fallback />}>{[true, false]}</ErrorBoundary>
+        </div>
+      )
+
+      expect((await resolveCallback(await html.toString())).toString()).toEqual('<div></div>')
+
+      errorBoundaryCounter--
+      suspenseCounter--
+    })
+
+    it('string content', async () => {
+      const html = <ErrorBoundary fallback={<Fallback />}>{'< ok >'}</ErrorBoundary>
+
+      expect((await resolveCallback(await html.toString())).toString()).toEqual('&lt; ok &gt;')
+
+      errorBoundaryCounter--
+      suspenseCounter--
+    })
+
+    it('error: string content', async () => {
+      const html = (
+        <ErrorBoundary fallback={'< error >'}>
+          <Component error={true} />
+        </ErrorBoundary>
+      )
+
+      expect((await resolveCallback(await html.toString())).toString()).toEqual('&lt; error &gt;')
+
+      errorBoundaryCounter--
+      suspenseCounter--
+    })
+
+    it('error: Promise<string> from fallback', async () => {
+      const html = (
+        <ErrorBoundary fallback={Promise.resolve('< error >')}>
+          <Component error={true} />
+        </ErrorBoundary>
+      )
+
+      expect((await resolveCallback(await html.toString())).toString()).toEqual('&lt; error &gt;')
+
+      errorBoundaryCounter--
+      suspenseCounter--
+    })
+
+    it('error: string content from fallbackRender', async () => {
+      const html = (
+        <ErrorBoundary fallbackRender={() => '< error >'}>
+          <Component error={true} />
+        </ErrorBoundary>
+      )
+
+      expect((await resolveCallback(await html.toString())).toString()).toEqual('&lt; error &gt;')
+
+      errorBoundaryCounter--
+      suspenseCounter--
+    })
+
+    it('error: Promise<string> from fallbackRender', async () => {
+      const html = (
+        <ErrorBoundary fallbackRender={() => Promise.resolve('< error >')}>
+          <Component error={true} />
+        </ErrorBoundary>
+      )
+
+      expect((await resolveCallback(await html.toString())).toString()).toEqual('&lt; error &gt;')
+
+      errorBoundaryCounter--
+      suspenseCounter--
+    })
+  })
+
+  describe('async', async () => {
+    const Component = async ({ error }: { error?: boolean }) => {
+      await new Promise((resolve) => setTimeout(resolve, 10))
+      if (error) {
+        throw new Error('Error')
+      }
+      return <div>Hello</div>
+    }
+
+    it('no error', async () => {
+      const html = (
+        <ErrorBoundary fallback={<Fallback />}>
+          <Component />
+        </ErrorBoundary>
+      )
+
+      expect((await resolveCallback(await html.toString())).toString()).toEqual('<div>Hello</div>')
+
+      errorBoundaryCounter--
+      suspenseCounter--
+    })
+
+    it('error', async () => {
+      const html = (
+        <ErrorBoundary fallback={<Fallback />}>
+          <Component error={true} />
+        </ErrorBoundary>
+      )
+
+      expect((await resolveCallback(await html.toString())).toString()).toEqual(
+        '<div>Out Of Service</div>'
+      )
+
+      suspenseCounter--
+    })
+
+    it('error: string content', async () => {
+      const html = (
+        <ErrorBoundary fallback={'< error >'}>
+          <Component error={true} />
+        </ErrorBoundary>
+      )
+
+      expect((await resolveCallback(await html.toString())).toString()).toEqual('&lt; error &gt;')
+
+      suspenseCounter--
+    })
+
+    it('error: Promise<string> from fallback', async () => {
+      const html = (
+        <ErrorBoundary fallback={Promise.resolve('< error >')}>
+          <Component error={true} />
+        </ErrorBoundary>
+      )
+
+      expect((await resolveCallback(await html.toString())).toString()).toEqual('&lt; error &gt;')
+
+      suspenseCounter--
+    })
+
+    it('error: string content from fallbackRender', async () => {
+      const html = (
+        <ErrorBoundary fallbackRender={() => '< error >'}>
+          <Component error={true} />
+        </ErrorBoundary>
+      )
+
+      expect((await resolveCallback(await html.toString())).toString()).toEqual('&lt; error &gt;')
+
+      suspenseCounter--
+    })
+
+    it('error: Promise<string> from fallbackRender', async () => {
+      const html = (
+        <ErrorBoundary fallbackRender={() => Promise.resolve('< error >')}>
+          <Component error={true} />
+        </ErrorBoundary>
+      )
+
+      expect((await resolveCallback(await html.toString())).toString()).toEqual('&lt; error &gt;')
+
+      suspenseCounter--
+    })
+  })
+
+  describe('async : nested', async () => {
+    const handlers: Record<number, { resolve: (value: unknown) => void; reject: () => void }> = {}
+    const Component = async ({ id }: { id: number }) => {
+      await new Promise((resolve, reject) => (handlers[id] = { resolve, reject }))
+      return <div>{id}</div>
+    }
+
+    it('no error', async () => {
+      const html = (
+        <ErrorBoundary fallback={<Fallback />}>
+          <Component id={1} />
+          <ErrorBoundary fallback={<Fallback />}>
+            <Component id={2} />
+          </ErrorBoundary>
+        </ErrorBoundary>
+      ).toString()
+
+      Object.values(handlers).forEach(({ resolve }) => resolve(undefined))
+
+      expect((await resolveCallback(await html)).toString()).toEqual('<div>1</div><div>2</div>')
+
+      errorBoundaryCounter++
+      suspenseCounter--
+    })
+
+    it('error in parent', async () => {
+      const html = (
+        <ErrorBoundary fallback={<Fallback />}>
+          <Component id={1} />
+          <ErrorBoundary fallback={<Fallback />}>
+            <Component id={2} />
+          </ErrorBoundary>
+        </ErrorBoundary>
+      ).toString()
+
+      handlers[2].resolve(undefined)
+      handlers[1].reject()
+
+      expect((await resolveCallback(await html)).toString()).toEqual('<div>Out Of Service</div>')
+
+      errorBoundaryCounter++
+      suspenseCounter--
+    })
+
+    it('error in child', async () => {
+      const html = (
+        <ErrorBoundary fallback={<Fallback />}>
+          <Component id={1} />
+          <ErrorBoundary fallback={<Fallback />}>
+            <Component id={2} />
+          </ErrorBoundary>
+        </ErrorBoundary>
+      ).toString()
+
+      handlers[1].resolve(undefined)
+      handlers[2].reject()
+
+      expect((await resolveCallback(await html)).toString()).toEqual(
+        '<div>1</div><div>Out Of Service</div>'
+      )
+
+      errorBoundaryCounter++
+      suspenseCounter--
+    })
+  })
+
+  describe('async : setTimeout', async () => {
+    const TimeoutSuccessComponent = async () => {
+      await new Promise((resolve) => setTimeout(resolve, 10))
+      return <div>OK</div>
+    }
+    const TimeoutErrorComponent = async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0))
+      throw new Error('Error')
+    }
+
+    it('fallback', async () => {
+      const html = (
+        <>
+          <TimeoutSuccessComponent />
+          <ErrorBoundary fallback={<Fallback />}>
+            <TimeoutErrorComponent />
+          </ErrorBoundary>
+        </>
+      ).toString()
+
+      expect((await resolveCallback(await html)).toString()).toEqual(
+        '<div>OK</div><div>Out Of Service</div>'
+      )
+
+      suspenseCounter--
+    })
+  })
+
+  describe('streaming', async () => {
+    const Component = async ({ error }: { error?: boolean }) => {
+      await new Promise((resolve) => setTimeout(resolve, 10))
+      if (error) {
+        throw new Error('Error')
+      }
+      return <div>Hello</div>
+    }
+
+    it('no error', async () => {
+      const stream = renderToReadableStream(
+        <ErrorBoundary fallback={<Fallback />}>
+          <Suspense fallback={<p>Loading...</p>}>
+            <Component />
+          </Suspense>
+        </ErrorBoundary>
+      )
+      const chunks = []
+      const textDecoder = new TextDecoder()
+      for await (const chunk of stream as any) {
+        chunks.push(textDecoder.decode(chunk))
+      }
+
+      expect(chunks).toEqual([
+        `<template id="E:${errorBoundaryCounter}"></template><!--E:${errorBoundaryCounter}-->`,
+        `<template data-acryl-target="E:${errorBoundaryCounter}"><template id="H:${suspenseCounter}"></template><p>Loading...</p><!--/$--></template><script>
+((d,c) => {
+c=d.currentScript.previousSibling
+d=d.getElementById('E:${errorBoundaryCounter}')
+if(!d)return
+d.parentElement.insertBefore(c.content,d.nextSibling)
+})(document)
+</script>`,
+        `<template data-acryl-target="H:${suspenseCounter}"><div>Hello</div></template><script>
+((d,c,n) => {
+c=d.currentScript.previousSibling
+d=d.getElementById('H:${suspenseCounter}')
+if(!d)return
+do{n=d.nextSibling;n.remove()}while(n.nodeType!=8||n.nodeValue!='/$')
+d.replaceWith(c.content)
+})(document)
+</script><script>
+((d,c,n) => {
+d=d.getElementById('E:${errorBoundaryCounter}')
+if(!d)return
+n=d.nextSibling
+while(n.nodeType!=8||n.nodeValue!='E:${errorBoundaryCounter}'){n=n.nextSibling}
+n.remove()
+d.remove()
+})(document)
+</script>`,
+      ])
+
+      expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
+        '<div>Hello</div>'
+      )
+    })
+
+    it('with StreamingContext', async () => {
+      const stream = renderToReadableStream(
+        <StreamingContext value={{ scriptNonce: 'test-nonce' }}>
+          <ErrorBoundary fallback={<Fallback />}>
+            <Suspense fallback={<p>Loading...</p>}>
+              <Component />
+            </Suspense>
+          </ErrorBoundary>
+        </StreamingContext>
+      )
+      const chunks = []
+      const textDecoder = new TextDecoder()
+      for await (const chunk of stream as any) {
+        chunks.push(textDecoder.decode(chunk))
+      }
+
+      expect(chunks).toEqual([
+        `<template id="E:${errorBoundaryCounter}"></template><!--E:${errorBoundaryCounter}-->`,
+        `<template data-acryl-target="E:${errorBoundaryCounter}"><template id="H:${suspenseCounter}"></template><p>Loading...</p><!--/$--></template><script nonce="test-nonce">
+((d,c) => {
+c=d.currentScript.previousSibling
+d=d.getElementById('E:${errorBoundaryCounter}')
+if(!d)return
+d.parentElement.insertBefore(c.content,d.nextSibling)
+})(document)
+</script>`,
+        `<template data-acryl-target="H:${suspenseCounter}"><div>Hello</div></template><script nonce="test-nonce">
+((d,c,n) => {
+c=d.currentScript.previousSibling
+d=d.getElementById('H:${suspenseCounter}')
+if(!d)return
+do{n=d.nextSibling;n.remove()}while(n.nodeType!=8||n.nodeValue!='/$')
+d.replaceWith(c.content)
+})(document)
+</script><script>
+((d,c,n) => {
+d=d.getElementById('E:${errorBoundaryCounter}')
+if(!d)return
+n=d.nextSibling
+while(n.nodeType!=8||n.nodeValue!='E:${errorBoundaryCounter}'){n=n.nextSibling}
+n.remove()
+d.remove()
+})(document)
+</script>`,
+      ])
+
+      expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
+        '<div>Hello</div>'
+      )
+    })
+
+    it('error', async () => {
+      const html = (
+        <ErrorBoundary fallback={<Fallback />}>
+          <Component error={true} />
+        </ErrorBoundary>
+      )
+
+      expect((await resolveCallback(await html.toString())).toString()).toEqual(
+        '<div>Out Of Service</div>'
+      )
+    })
+  })
+
+  describe('streaming : contains multiple suspense', async () => {
+    const handlers: Record<number, { resolve: (value: unknown) => void; reject: () => void }> = {}
+    const Component = async ({ id }: { id: number }) => {
+      await new Promise((resolve, reject) => (handlers[id] = { resolve, reject }))
+      return <div>{id}</div>
+    }
+
+    it('no error', async () => {
+      const stream = renderToReadableStream(
+        <ErrorBoundary fallback={<Fallback />}>
+          <Suspense fallback={<p>Loading...</p>}>
+            <Component id={1} />
+          </Suspense>
+          <Suspense fallback={<p>Loading...</p>}>
+            <Component id={2} />
+          </Suspense>
+          <Suspense fallback={<p>Loading...</p>}>
+            <Component id={3} />
+          </Suspense>
+        </ErrorBoundary>
+      )
+
+      Object.values(handlers).forEach(({ resolve }) => resolve(undefined))
+
+      const chunks = []
+      const textDecoder = new TextDecoder()
+      for await (const chunk of stream as any) {
+        chunks.push(textDecoder.decode(chunk))
+      }
+
+      expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
+        '<div>1</div><div>2</div><div>3</div>'
+      )
+    })
+
+    it('error', async () => {
+      const stream = renderToReadableStream(
+        <ErrorBoundary fallback={<Fallback />}>
+          <Suspense fallback={<p>Loading...</p>}>
+            <Component id={1} />
+          </Suspense>
+          <Suspense fallback={<p>Loading...</p>}>
+            <Component id={2} />
+          </Suspense>
+          <Suspense fallback={<p>Loading...</p>}>
+            <Component id={3} />
+          </Suspense>
+        </ErrorBoundary>
+      )
+
+      handlers[1].resolve(undefined)
+      handlers[2].resolve(undefined)
+      handlers[3].reject()
+
+      const chunks = []
+      const textDecoder = new TextDecoder()
+      for await (const chunk of stream as any) {
+        chunks.push(textDecoder.decode(chunk))
+      }
+
+      expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
+        '<div>Out Of Service</div>'
+      )
+    })
+
+    it('renders fallback and reports error once when multiple children reject', async () => {
+      let fallbackRenderCount = 0
+      let onErrorCount = 0
+      const stream = renderToReadableStream(
+        <ErrorBoundary
+          fallbackRender={() => {
+            fallbackRenderCount++
+            return <Fallback />
+          }}
+          onError={() => {
+            onErrorCount++
+          }}
+        >
+          <Suspense fallback={<p>Loading...</p>}>
+            <Component id={1} />
+          </Suspense>
+          <Suspense fallback={<p>Loading...</p>}>
+            <Component id={2} />
+          </Suspense>
+          <Suspense fallback={<p>Loading...</p>}>
+            <Component id={3} />
+          </Suspense>
+        </ErrorBoundary>
+      )
+
+      handlers[1].reject()
+      handlers[2].reject()
+      handlers[3].resolve(undefined)
+
+      const chunks = []
+      const textDecoder = new TextDecoder()
+      for await (const chunk of stream as any) {
+        chunks.push(textDecoder.decode(chunk))
+      }
+
+      expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
+        '<div>Out Of Service</div>'
+      )
+      expect(fallbackRenderCount).toBe(1)
+      expect(onErrorCount).toBe(1)
+    })
+
+    it('preserves callbacks from a thenable fallback', async () => {
+      const fallback = Promise.resolve(
+        raw('<span>Recovering</span>', [
+          ({ phase }) =>
+            phase === HtmlEscapedCallbackPhase.Stream
+              ? Promise.resolve('<span>Recovered</span>')
+              : undefined,
+        ])
+      )
+      const stream = renderToReadableStream(
+        <ErrorBoundary fallback={fallback}>
+          <Suspense fallback={<p>Loading...</p>}>
+            <Component id={1} />
+          </Suspense>
+        </ErrorBoundary>
+      )
+
+      handlers[1].reject()
+
+      const chunks = []
+      const textDecoder = new TextDecoder()
+      for await (const chunk of stream as any) {
+        chunks.push(textDecoder.decode(chunk))
+      }
+
+      expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
+        '<span>Recovering</span><span>Recovered</span>'
+      )
+    })
+
+    it('waits for an in-flight async fallback when multiple children reject', async () => {
+      let resolveFallback!: (value: HtmlEscapedString | PromiseLike<HtmlEscapedString>) => void
+      const fallback = new Promise<HtmlEscapedString>((resolve) => {
+        resolveFallback = resolve
+      })
+
+      const stream = renderToReadableStream(
+        <ErrorBoundary fallback={fallback}>
+          <Suspense fallback={<p>Loading...</p>}>
+            <Component id={1} />
+          </Suspense>
+          <Suspense fallback={<p>Loading...</p>}>
+            <Component id={2} />
+          </Suspense>
+          <Suspense fallback={<p>Loading...</p>}>
+            <Component id={3} />
+          </Suspense>
+        </ErrorBoundary>
+      )
+
+      handlers[1].reject()
+      handlers[2].reject()
+      handlers[3].resolve(undefined)
+      await Promise.resolve()
+      resolveFallback(<Fallback />)
+
+      const chunks = []
+      const textDecoder = new TextDecoder()
+      for await (const chunk of stream as any) {
+        chunks.push(textDecoder.decode(chunk))
+      }
+
+      expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
+        '<div>Out Of Service</div>'
+      )
+    })
+  })
+
+  describe('streaming : nested', async () => {
+    const handlers: Record<number, { resolve: (value: unknown) => void; reject: () => void }> = {}
+    const Component = async ({ id }: { id: number }) => {
+      await new Promise((resolve, reject) => (handlers[id] = { resolve, reject }))
+      return <div>{id}</div>
+    }
+
+    it('no error', async () => {
+      const stream = renderToReadableStream(
+        <ErrorBoundary fallback={<Fallback />}>
+          <Suspense fallback={<p>Loading...</p>}>
+            <Component id={1} />
+          </Suspense>
+          <ErrorBoundary fallback={<Fallback />}>
+            <Suspense fallback={<p>Loading...</p>}>
+              <Component id={2} />
+            </Suspense>
+          </ErrorBoundary>
+        </ErrorBoundary>
+      )
+
+      Object.values(handlers).forEach(({ resolve }) => resolve(undefined))
+
+      const chunks = []
+      const textDecoder = new TextDecoder()
+      for await (const chunk of stream as any) {
+        chunks.push(textDecoder.decode(chunk))
+      }
+
+      expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
+        '<div>1</div><div>2</div>'
+      )
+    })
+
+    it('error in parent', async () => {
+      const stream = renderToReadableStream(
+        <ErrorBoundary fallback={<Fallback />}>
+          <Suspense fallback={<p>Loading...</p>}>
+            <Component id={1} />
+          </Suspense>
+          <ErrorBoundary fallback={<Fallback />}>
+            <Suspense fallback={<p>Loading...</p>}>
+              <Component id={2} />
+            </Suspense>
+          </ErrorBoundary>
+        </ErrorBoundary>
+      )
+
+      handlers[2].resolve(undefined)
+      handlers[1].reject()
+
+      const chunks = []
+      const textDecoder = new TextDecoder()
+      for await (const chunk of stream as any) {
+        chunks.push(textDecoder.decode(chunk))
+      }
+
+      expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
+        '<div>Out Of Service</div>'
+      )
+    })
+
+    it('error in child', async () => {
+      const stream = renderToReadableStream(
+        <ErrorBoundary fallback={<Fallback />}>
+          <Suspense fallback={<p>Loading...</p>}>
+            <Component id={1} />
+          </Suspense>
+          <ErrorBoundary fallback={<Fallback />}>
+            <Suspense fallback={<p>Loading...</p>}>
+              <Component id={2} />
+            </Suspense>
+          </ErrorBoundary>
+        </ErrorBoundary>
+      )
+
+      handlers[1].resolve(undefined)
+      handlers[2].reject()
+
+      const chunks = []
+      const textDecoder = new TextDecoder()
+      for await (const chunk of stream as any) {
+        chunks.push(textDecoder.decode(chunk))
+      }
+
+      expect(replacementResult(`<html><body>${chunks.join('')}</body></html>`)).toEqual(
+        '<div>1</div><div>Out Of Service</div>'
+      )
+    })
+  })
+
+  describe('onError', async () => {
+    const Component = ({ error }: { error?: boolean }) => {
+      if (error) {
+        throw new Error('Error')
+      }
+      return <div>Hello</div>
+    }
+
+    it('no error', async () => {
+      const errors: Error[] = []
+      const html = (
+        <ErrorBoundary fallback={<Fallback />} onError={(err) => errors.push(err)}>
+          <Component />
+        </ErrorBoundary>
+      )
+
+      expect((await resolveCallback(await html.toString())).toString()).toEqual('<div>Hello</div>')
+
+      errorBoundaryCounter--
+      suspenseCounter--
+
+      expect(errors).toEqual([])
+    })
+
+    it('error', async () => {
+      const errors: Error[] = []
+      const html = (
+        <ErrorBoundary fallback={<Fallback />} onError={(err) => errors.push(err)}>
+          <Component error={true} />
+        </ErrorBoundary>
+      )
+
+      expect((await resolveCallback(await html.toString())).toString()).toEqual(
+        '<div>Out Of Service</div>'
+      )
+
+      suspenseCounter--
+
+      expect(errors[0]).toEqual(new Error('Error'))
+    })
+  })
+
+  describe('fallbackRender', async () => {
+    const fallbackRenderer = (error: Error) => <div data-error>{error.message}</div>
+    const Component = ({ error }: { error?: boolean }) => {
+      if (error) {
+        throw new Error('Error')
+      }
+      return <div>Hello</div>
+    }
+
+    it('no error', async () => {
+      const errors: Error[] = []
+      const html = (
+        <ErrorBoundary fallbackRender={fallbackRenderer}>
+          <Component />
+        </ErrorBoundary>
+      )
+
+      expect((await resolveCallback(await html.toString())).toString()).toEqual('<div>Hello</div>')
+
+      errorBoundaryCounter--
+      suspenseCounter--
+
+      expect(errors).toEqual([])
+    })
+
+    it('error', async () => {
+      const html = (
+        <ErrorBoundary fallbackRender={fallbackRenderer}>
+          <Component error={true} />
+        </ErrorBoundary>
+      )
+
+      expect((await resolveCallback(await html.toString())).toString()).toEqual(
+        '<div data-error="true">Error</div>'
+      )
+
+      suspenseCounter--
+    })
+  })
+
+  describe('escaping', () => {
+    const Broken = () => {
+      throw new Error('boom')
+    }
+
+    it('escapes strings when an asynchronous sibling is present', async () => {
+      const Async = async () => <span>done</span>
+      const node = (
+        <ErrorBoundary fallback='error'>
+          {unsafeHtml}
+          <Async />
+        </ErrorBoundary>
+      )
+
+      expect(await stringify(node)).toBe(`${escapedUnsafeHtml}<span>done</span>`)
+      const streamed = await drainStream(renderToReadableStream(node))
+      expect(streamed).toContain(escapedUnsafeHtml)
+      expect(streamed).not.toContain(unsafeHtml)
+    })
+
+    it('escapes untrusted object fallbacks', async () => {
+      const object = { toString: () => unsafeHtml }
+      const asyncObject = { toString: async () => unsafeHtml }
+      const rawObject = { toString: () => raw(unsafeHtml) }
+
+      for (const fallback of [object, asyncObject, rawObject]) {
+        expect(
+          await stringify(
+            <ErrorBoundary fallback={fallback as never}>
+              <Broken />
+            </ErrorBoundary>
+          )
+        ).toBe(escapedUnsafeHtml)
+      }
+    })
+
+    it('preserves an explicitly trusted fallback', async () => {
+      expect(
+        await stringify(
+          <ErrorBoundary fallback={raw('<strong>trusted</strong>')}>
+            <Broken />
+          </ErrorBoundary>
+        )
+      ).toBe('<strong>trusted</strong>')
+    })
+
+    it('does not interpret replacement patterns in content', async () => {
+      const content = "literal $& $` $'"
+      const Async = async () => <span>done</span>
+
+      expect(
+        await stringify(
+          <ErrorBoundary fallback='error'>
+            {content}
+            <Async />
+          </ErrorBoundary>
+        )
+      ).toBe('literal $&amp; $` $&#39;<span>done</span>')
+    })
+
+    it('escapes untrusted object children', async () => {
+      const object = { toString: () => unsafeHtml }
+      const asyncObject = { toString: async () => unsafeHtml }
+      const rawObject = { toString: () => raw(unsafeHtml) }
+
+      for (const child of [object, asyncObject, rawObject]) {
+        const node = <ErrorBoundary fallback='error'>{child as never}</ErrorBoundary>
+        expect(await stringify(node)).toBe(escapedUnsafeHtml)
+        const streamed = await drainStream(renderToReadableStream(node))
+        expect(streamed).toContain(escapedUnsafeHtml)
+        expect(streamed).not.toContain(unsafeHtml)
+      }
+    })
+
+    it('preserves explicitly trusted children', async () => {
+      expect(
+        await stringify(
+          <ErrorBoundary fallback='error'>{raw('<strong>trusted</strong>')}</ErrorBoundary>
+        )
+      ).toBe('<strong>trusted</strong>')
+    })
+
+    it('keeps benign object stringification visible', async () => {
+      expect(await stringify(<ErrorBoundary fallback='error'>{{} as never}</ErrorBoundary>)).toBe(
+        '[object Object]'
+      )
+    })
+
+    it('escapes nested fallback arrays', async () => {
+      expect(
+        await stringify(
+          <ErrorBoundary fallback={[[unsafeHtml]]}>
+            <Broken />
+          </ErrorBoundary>
+        )
+      ).toBe(escapedUnsafeHtml)
+    })
+
+    it('keeps the existing falsy fallbackRender behavior', async () => {
+      expect(
+        await stringify(
+          <ErrorBoundary fallbackRender={() => 0}>
+            <Broken />
+          </ErrorBoundary>
+        )
+      ).toBe('')
+    })
+
+    it('keeps a direct Promise child unchanged', async () => {
+      expect(
+        await stringify(
+          <ErrorBoundary fallback='error'>{Promise.resolve('resolved')}</ErrorBoundary>
+        )
+      ).toBe('[object Promise]')
+    })
+  })
+})