test(browser integration): patch upstream PreviewServer to fix IPv6 i…

…ssue

Patch `page-with` IPv6 bug until upstream is merged

Tracking: kettanaito/page-with#9

test/jest.setup.ts

@@ -1,13 +1,14 @@
 import * as fs from 'fs'
 import * as path from 'path'
 import { invariant } from 'outvariant'
-import { CreateBrowserApi, createBrowser } from 'page-with'
+import { CreateBrowserApi, createBrowser, server } from 'page-with'
 import { ServerApi } from '@open-draft/test-server'
 import { SERVICE_WORKER_BUILD_PATH } from '../config/constants'
 import {
   createWorkerConsoleServer,
   workerConsoleSpy,
 } from './support/workerConsole'
+import { patchServerConnectionInfo } from './patched/PageWithPreviewServer'
 
 let browser: CreateBrowserApi
 let workerConsoleServer: ServerApi
@@ -79,9 +80,25 @@ Object.keys(console).forEach((methodName) => {
         },
       },
     },
-  }).catch((error) => {
-    console.error('Failed to create browser:', error)
   })
+    .then(
+      // NOTE: when upstream patch is fixed, remove this last promise handler
+      (browser) => {
+        patchServerConnectionInfo(
+          // note: we know server connection is up because createBrowser waited `until`
+          // it was up, meaning PreviewServer.listen() set `this.connectionInfo`
+          server as NonNullable<typeof server> & {
+            connectionInfo: NonNullable<typeof server['connectionInfo']>
+          },
+        )
+
+        return browser
+      },
+    )
+
+    .catch((error) => {
+      console.error('Failed to create browser:', error)
+    })
 
   invariant(
     browserInstance,

test/patched/PageWithPreviewServer.ts

@@ -0,0 +1,36 @@
+/**
+ * Patch the `server` variable from `page-with/server`, which is a mutable
+ * variable that is updated during execution of `createBrowser` to contain
+ * the connection info of the preview server which was created for the page.
+ *
+ * This function needs to be called from a scope where that mutable variable
+ * is available. That's why we call it in `jest.browser.setup.ts`.
+ *
+ * When the upstream bug is fixed, remove this file and remove the code that
+ * calls it in `jest.browser.setup.ts`
+ *
+ */
+export const patchServerConnectionInfo = (server: PreviewServer) => {
+  // bug: `PreviewServer.listen()` serializes IPv6 hosts to invalid URL (missing square brackets)
+  // see: node_modules/page-with/lib/server/PreviewServer.js / PreviewServer.listen
+  const conn = server.connectionInfo
+
+  // fix: re-serialize any URL containing an IPv6 host without surrounding brackets
+  if (conn.host.includes(':') && !conn.url.includes(`[${conn.host}]`)) {
+    // note: scheme is hardcoded to `http` to match `PreviewServer.listen()`
+    server.connectionInfo.url = `http://[${conn.host}]:${conn.port}`
+  }
+}
+
+/**
+ * This is the same as the upstream type (but non-nullable), but we don't import
+ * from `page-with` because we we want to access its mutable `server` export,
+ * which gets messy if we import from thw file twice (could access wrong closure)
+ */
+type PreviewServer = {
+  connectionInfo: {
+    port: number
+    host: string
+    url: string
+  }
+}