test: move middleware-i18n to test variants

Author: pieh

tests/e2e/edge-middleware.test.ts

@@ -11,6 +11,7 @@ type ExtendedWindow = Window & {
 type ExtendedFixtures = {
   edgeOrNodeMiddleware: Fixture
   edgeOrNodeMiddlewarePages: Fixture
+  edgeOrNodeMiddlewareI18n: Fixture
 }
 
 for (const { expectedRuntime, label, testWithSwitchableMiddlewareRuntime } of [
@@ -34,6 +35,14 @@ for (const { expectedRuntime, label, testWithSwitchableMiddlewareRuntime } of [
           scope: 'worker',
         },
       ],
+      edgeOrNodeMiddlewareI18n: [
+        async ({ middlewareI18n }, use) => {
+          await use(middlewareI18n)
+        },
+        {
+          scope: 'worker',
+        },
+      ],
     }),
   },
   hasNodeMiddlewareSupport()
@@ -57,6 +66,14 @@ for (const { expectedRuntime, label, testWithSwitchableMiddlewareRuntime } of [
               scope: 'worker',
             },
           ],
+          edgeOrNodeMiddlewareI18n: [
+            async ({ middlewareI18nNode }, use) => {
+              await use(middlewareI18nNode)
+            },
+            {
+              scope: 'worker',
+            },
+          ],
         }),
       }
     : undefined,
@@ -73,6 +90,8 @@ for (const { expectedRuntime, label, testWithSwitchableMiddlewareRuntime } of [
 
       const h1 = page.locator('h1')
       await expect(h1).toHaveText('Other')
+
+      expect(await res?.headerValue('x-runtime')).toEqual(expectedRuntime)
     })
 
     test('Does not run middleware at the origin', async ({ page, edgeOrNodeMiddleware }) => {
@@ -101,12 +120,15 @@ for (const { expectedRuntime, label, testWithSwitchableMiddlewareRuntime } of [
       expect(await rewritten?.headerValue('x-added-rewrite-target')).toBeNull()
       const h1 = page.locator('h1')
       await expect(h1).toHaveText('Hello rewrite')
+
+      expect(await direct?.headerValue('x-runtime')).toEqual(expectedRuntime)
     })
 
     test('Supports CJS dependencies in Edge Middleware', async ({ page, edgeOrNodeMiddleware }) => {
       const res = await page.goto(`${edgeOrNodeMiddleware.url}/test/next`)
 
       expect(await res?.headerValue('x-cjs-module-works')).toEqual('true')
+      expect(await res?.headerValue('x-runtime')).toEqual(expectedRuntime)
     })
 
     if (expectedRuntime !== 'node') {
@@ -212,62 +234,67 @@ for (const { expectedRuntime, label, testWithSwitchableMiddlewareRuntime } of [
           })
         }
       })
-      if (expectedRuntime !== 'node') {
-        test.describe('with 18n', () => {
-          for (const testConfig of testConfigs) {
-            test.describe(testConfig.describeLabel, () => {
-              for (const { localeLabel, pageWithLinksPathname } of [
-                { localeLabel: 'implicit default locale', pageWithLinksPathname: '/link' },
-                { localeLabel: 'explicit default locale', pageWithLinksPathname: '/en/link' },
-                { localeLabel: 'explicit non-default locale', pageWithLinksPathname: '/fr/link' },
-              ]) {
-                test.describe(localeLabel, () => {
-                  test('json data fetch', async ({ middlewareI18n, page }) => {
-                    const dataFetchPromise = new Promise<Response>((resolve) => {
-                      page.on('response', (response) => {
-                        if (response.url().includes(testConfig.jsonPathMatcher)) {
-                          resolve(response)
-                        }
-                      })
+
+      test.describe('with 18n', () => {
+        for (const testConfig of testConfigs) {
+          test.describe(testConfig.describeLabel, () => {
+            for (const { localeLabel, pageWithLinksPathname } of [
+              { localeLabel: 'implicit default locale', pageWithLinksPathname: '/link' },
+              { localeLabel: 'explicit default locale', pageWithLinksPathname: '/en/link' },
+              { localeLabel: 'explicit non-default locale', pageWithLinksPathname: '/fr/link' },
+            ]) {
+              test.describe(localeLabel, () => {
+                test('json data fetch', async ({ edgeOrNodeMiddlewareI18n, page }) => {
+                  const dataFetchPromise = new Promise<Response>((resolve) => {
+                    page.on('response', (response) => {
+                      if (response.url().includes(testConfig.jsonPathMatcher)) {
+                        resolve(response)
+                      }
                     })
+                  })
 
-                    await page.goto(`${middlewareI18n.url}${pageWithLinksPathname}`)
+                  const pageResponse = await page.goto(
+                    `${edgeOrNodeMiddlewareI18n.url}${pageWithLinksPathname}`,
+                  )
+                  expect(await pageResponse?.headerValue('x-runtime')).toEqual(expectedRuntime)
 
-                    await page.hover(`[data-link="${testConfig.selector}"]`)
+                  await page.hover(`[data-link="${testConfig.selector}"]`)
 
-                    const dataResponse = await dataFetchPromise
+                  const dataResponse = await dataFetchPromise
 
-                    expect(dataResponse.ok()).toBe(true)
-                  })
+                  expect(dataResponse.ok()).toBe(true)
+                })
 
-                  test('navigation', async ({ middlewareI18n, page }) => {
-                    await page.goto(`${middlewareI18n.url}${pageWithLinksPathname}`)
+                test('navigation', async ({ edgeOrNodeMiddlewareI18n, page }) => {
+                  const pageResponse = await page.goto(
+                    `${edgeOrNodeMiddlewareI18n.url}${pageWithLinksPathname}`,
+                  )
+                  expect(await pageResponse?.headerValue('x-runtime')).toEqual(expectedRuntime)
 
-                    await page.evaluate(() => {
-                      // set some value to window to check later if browser did reload and lost this state
-                      ;(window as ExtendedWindow).didReload = false
-                    })
+                  await page.evaluate(() => {
+                    // set some value to window to check later if browser did reload and lost this state
+                    ;(window as ExtendedWindow).didReload = false
+                  })
 
-                    await page.click(`[data-link="${testConfig.selector}"]`)
+                  await page.click(`[data-link="${testConfig.selector}"]`)
 
-                    // wait for page to be rendered
-                    await page.waitForSelector(`[data-page="${testConfig.selector}"]`)
+                  // wait for page to be rendered
+                  await page.waitForSelector(`[data-page="${testConfig.selector}"]`)
 
-                    // check if browser navigation worked by checking if state was preserved
-                    const browserNavigationWorked =
-                      (await page.evaluate(() => {
-                        return (window as ExtendedWindow).didReload
-                      })) === false
+                  // check if browser navigation worked by checking if state was preserved
+                  const browserNavigationWorked =
+                    (await page.evaluate(() => {
+                      return (window as ExtendedWindow).didReload
+                    })) === false
 
-                    // we expect client navigation to work without browser reload
-                    expect(browserNavigationWorked).toBe(true)
-                  })
+                  // we expect client navigation to work without browser reload
+                  expect(browserNavigationWorked).toBe(true)
                 })
-              }
-            })
-          }
-        })
-      }
+              })
+            }
+          })
+        }
+      })
     })
 
     if (expectedRuntime !== 'node') {

tests/fixtures/middleware-i18n/middleware-node.ts

@@ -0,0 +1,5 @@
+export { middleware } from './middleware-shared'
+
+export const config = {
+  runtime: 'nodejs',
+}

tests/fixtures/middleware-i18n/middleware.js renamed to tests/fixtures/middleware-i18n/middleware-shared.ts

@@ -1,6 +1,19 @@
+import type { NextRequest } from 'next/server'
 import { NextResponse } from 'next/server'
 
-export async function middleware(request) {
+export async function middleware(request: NextRequest) {
+  const response = getResponse(request)
+
+  if (response) {
+    response.headers.append('Deno' in globalThis ? 'x-deno' : 'x-node', Date.now().toString())
+    // report Next.js Middleware Runtime (not the execution runtime, but target runtime)
+    // @ts-expect-error EdgeRuntime global not declared
+    response.headers.append('x-runtime', typeof EdgeRuntime !== 'undefined' ? EdgeRuntime : 'node')
+    response.headers.set('x-hello-from-middleware-res', 'hello')
+  }
+}
+
+const getResponse = (request: NextRequest) => {
   const url = request.nextUrl
 
   // this is needed for tests to get the BUILD_ID

tests/fixtures/middleware-i18n/middleware.ts

@@ -0,0 +1 @@
+export { middleware } from './middleware-shared'

tests/fixtures/middleware-i18n/next.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   output: 'standalone',
+  distDir: process.env.NEXT_DIST_DIR ?? '.next',
   eslint: {
     ignoreDuringBuilds: true,
   },
@@ -10,6 +11,7 @@ module.exports = {
   experimental: {
     clientRouterFilter: true,
     clientRouterFilterRedirects: true,
+    nodeMiddleware: true,
   },
   redirects() {
     return [

tests/fixtures/middleware-i18n/package.json

@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "postinstall": "next build",
+    "postinstall": "npm run build",
     "dev": "next dev",
-    "build": "next build"
+    "build": "node ../../utils/build-variants.mjs"
   },
   "dependencies": {
     "next": "latest",

tests/fixtures/middleware-i18n/test-variants.json

@@ -0,0 +1,21 @@
+{
+  "node-middleware": {
+    "distDir": ".next-node-middleware",
+    "files": {
+      "middleware.ts": "middleware-node.ts"
+    },
+    "test": {
+      "dependencies": {
+        "next": [
+          {
+            "versionConstraint": ">=15.2.0",
+            "canaryOnly": true
+          },
+          {
+            "versionConstraint": ">=15.5.0"
+          }
+        ]
+      }
+    }
+  }
+}