add tests for hooks and use heads hook for postRenderHeads

Jason Gao · Jason Gao · commit 702857db4c8c · 2022-03-26T18:53:10.000-04:00
diff --git a/packages/fastify-renderer/src/node/DocumentTemplate.tsx b/packages/fastify-renderer/src/node/DocumentTemplate.tsx
@@ -6,7 +6,6 @@ export interface TemplateData<Props> {
   tail: NodeJS.ReadableStream
   content: string | NodeJS.ReadableStream
   props: Props
-  postRenderHead: NodeJS.ReadableStream
 }
 
 /** A template renders out a full HTML document given the content for the document and the scripts for the document, and can optionally grab values out of the props to use for other bits like the page title, metatags, or non-client-side-hydrated body content. */
@@ -20,7 +19,6 @@ export const DefaultDocumentTemplate: Template = (data: TemplateData<any>) => te
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>${data.props.title || 'Fastify Renderer App'}</title>
     ${data.head}
-    ${data.postRenderHead}
   </head>
   <body>
     <div id="fstrapp">${data.content}</div>
diff --git a/packages/fastify-renderer/src/node/renderers/react/ReactRenderer.tsx b/packages/fastify-renderer/src/node/renderers/react/ReactRenderer.tsx
@@ -82,6 +82,7 @@ export class ReactRenderer implements Renderer {
 
     try {
       const url = this.entrypointRequirePathForServer(render)
+
       // we load all the context needed for this render from one `loadModule` call, which is really important for keeping the same copy of React around in all of the different bits that touch it.
       const { React, ReactDOMServer, Router, RenderBusContext, Layout, Entrypoint } = (await this.loadModule(url))
         .default
@@ -204,8 +205,9 @@ export class ReactRenderer implements Renderer {
 
   private renderStreamingTemplate<Props>(app: JSX.Element, bus: RenderBus, ReactDOMServer: any, render: Render<Props>) {
     this.runHeadHooks(bus)
-    // Do nothing for now when using streaming template
-    bus.push('postRenderHead', null)
+    // There are not postRenderHead hooks for streaming templates
+    // so let's end the head stack
+    bus.push('head', null)
     const contentStream = ReactDOMServer.renderToNodeStream(app)
     contentStream.on('end', () => {
       this.runTailHooks(bus)
@@ -216,7 +218,6 @@ export class ReactRenderer implements Renderer {
       head: bus.stack('head'),
       tail: bus.stack('tail'),
       props: render.props,
-      postRenderHead: bus.stack('postRenderHead'),
     })
   }
 
@@ -236,18 +237,17 @@ export class ReactRenderer implements Renderer {
       head: bus.stack('head'),
       tail: bus.stack('tail'),
       props: render.props,
-      postRenderHead: bus.stack('postRenderHead'),
     })
   }
 
   private runPostRenderHeadHooks(bus: RenderBus) {
     // Run any heads hooks that might want to push something after the content
     for (const hook of this.plugin.hooks) {
       if (hook.postRenderHeads) {
-        bus.push('postRenderHead', hook.postRenderHeads())
+        bus.push('head', hook.postRenderHeads())
       }
     }
-    bus.push('postRenderHead', null)
+    bus.push('head', null)
   }
 
   private runHeadHooks(bus: RenderBus) {
@@ -257,7 +257,6 @@ export class ReactRenderer implements Renderer {
         bus.push('head', hook.heads())
       }
     }
-    bus.push('head', null)
   }
 
   private runTailHooks(bus: RenderBus) {
diff --git a/packages/fastify-renderer/test/helpers.ts b/packages/fastify-renderer/test/helpers.ts
@@ -1,9 +1,12 @@
 import fastify, { FastifyServerOptions } from 'fastify'
 import fastifyAccepts from 'fastify-accepts'
 import Middie from 'middie'
+import path from 'path'
+import { Readable } from 'stream'
 import { FastifyRendererOptions, FastifyRendererPlugin } from '../src/node/Plugin'
 import { RenderBus } from '../src/node/RenderBus'
 import { ReactRenderer, ReactRendererOptions } from '../src/node/renderers/react/ReactRenderer'
+import { Render } from '../src/node/renderers/Renderer'
 
 const logLevel = process.env.LOG_LEVEL || 'error'
 
@@ -26,3 +29,22 @@ export const newReactRenderer = (options?: ReactRendererOptions): ReactRenderer
   const plugin = newFastifyRendererPlugin({ renderer: options })
   return plugin.renderer as ReactRenderer
 }
+
+export const getMockRender = <T>(props: T): Render<T> => {
+  return {
+    props,
+    renderable: path.resolve(__dirname, 'fixtures', 'test-module.tsx'),
+    url: 'test-url',
+    layout: path.resolve(__dirname, 'fixtures', 'test-layout.tsx'),
+    base: '',
+    document: (data) => Readable.from(''),
+    request: {
+      url: 'test-url',
+    } as any,
+    reply: {
+      send: (payload: unknown) => {
+        throw new Error('Send is not implemented')
+      },
+    } as any,
+  }
+}
diff --git a/packages/fastify-renderer/test/renderers/ReactRenderer.spec.ts b/packages/fastify-renderer/test/renderers/ReactRenderer.spec.ts
@@ -1,7 +1,10 @@
-// import { ReactRenderer } from "../../src/node/renderers/react/ReactRenderer";
+import path from 'path'
+import React from 'react'
 import { DefaultDocumentTemplate } from '../../src/node/DocumentTemplate'
 import { RenderableRoute } from '../../src/node/renderers/Renderer'
-import { newReactRenderer } from '../helpers'
+import { getMockRender, newReactRenderer, newRenderBus } from '../helpers'
+
+const testLayoutComponent = require.resolve(path.join(__dirname, '..', 'fixtures', 'test-layout.tsx'))
 
 describe('ReactRenderer', () => {
   test('should create an instance and initialize the client module path', async () => {
@@ -45,6 +48,37 @@ describe('ReactRenderer', () => {
     test.skip('should throw on rendering failure', async () => {
       return
     })
+
+    test('should call postRenderHooks after dom render', async () => {
+      const renderer = newReactRenderer()
+      const callOrder: string[] = []
+      renderer.plugin.hooks = [
+        {
+          heads: () => {
+            callOrder.push('heads')
+            return 'heads'
+          },
+          postRenderHeads: () => {
+            callOrder.push('postRenderHeads')
+            return 'postRenderHeads'
+          },
+        },
+      ]
+
+      renderer['renderSynchronousTemplate'](
+        React.createElement(testLayoutComponent, {}),
+        newRenderBus(),
+        {
+          renderToString: () => {
+            callOrder.push('render')
+            return 'test'
+          },
+        },
+        getMockRender({})
+      )
+
+      expect(callOrder).toEqual(['heads', 'render', 'postRenderHeads'])
+    })
   })
 
   describe('buildVirtualClientEntrypointModuleID()', () => {
diff --git a/packages/fastify-renderer/test/routes.spec.ts b/packages/fastify-renderer/test/routes.spec.ts
@@ -4,7 +4,27 @@ import { newFastify } from './helpers'
 
 const testComponent = require.resolve(path.join(__dirname, 'fixtures', 'test-module.tsx'))
 const testLayoutComponent = require.resolve(path.join(__dirname, 'fixtures', 'test-layout.tsx'))
-const options = { vite: { root: __dirname, logLevel: (process.env.LOG_LEVEL ?? 'info') as any } }
+const options = {
+  vite: { root: __dirname, logLevel: (process.env.LOG_LEVEL ?? 'info') as any },
+  devMode: true,
+  renderer: {
+    mode: 'sync' as const,
+    type: 'react' as const,
+  },
+  hooks: [
+    {
+      heads: () => {
+        return 'head'
+      },
+      transform: (app) => {
+        return app
+      },
+      postRenderHeads: () => {
+        return 'postRenderHead'
+      },
+    },
+  ],
+}
 
 describe('FastifyRenderer', () => {
   let server
@@ -73,4 +93,28 @@ describe('FastifyRenderer', () => {
     expect(response.statusCode).toEqual(201)
     expect(response.body).toEqual('hello')
   })
+
+  test('should call hooks in correct order', async () => {
+    const callOrder: string[] = []
+    jest.spyOn(options.hooks[0], 'heads').mockImplementation(() => {
+      callOrder.push('heads')
+      return 'head'
+    })
+    jest.spyOn(options.hooks[0], 'transform').mockImplementation((app) => {
+      callOrder.push('transforms')
+      return app
+    })
+    jest.spyOn(options.hooks[0], 'postRenderHeads').mockImplementation(() => {
+      callOrder.push('postRenders')
+      return 'postRender'
+    })
+
+    await server.inject({
+      method: 'GET',
+      url: '/render-test',
+      headers: { Accept: 'text/html' },
+    })
+
+    expect(callOrder).toEqual(['transforms', 'heads', 'postRenders'])
+  })
 })
