acrylblends 0.6.3 → 0.6.4

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

@@ -1,936 +0,0 @@
-/* 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]')
-    })
-  })
-})