chore(CI): Split trailing-slashes suite cases into smaller suites, port to more modern e2e framework (vercel#78890)

Same basic idea as vercel#78787

This test suite has a lot of timeouts with rspack, which causes it to take a long time to run (though not quite long enough that it breaks the job).

In general, large test suites are good to break up, because they benefit from parallelism.

---

In addition to breaking this test suite up, I also ported it to the new framework, as the way it was patching `next.config.js` was causing problems, since the old integration tests are not run in isolated directories.

Author: bgw

test/e2e/trailing-slashes/basepath.test.ts

@@ -0,0 +1,34 @@
+/* eslint-env jest */
+
+import {
+  testShouldRedirect,
+  testLinkShouldRewriteTo,
+} from './shared-tests.util'
+import { nextTestSetup, isNextDev } from 'e2e-utils'
+
+// we don't need to exhaustively test this, just do some basic sanity checks
+// for use in combiantion with basePath
+;(isNextDev ? describe : describe.skip)(
+  'Trailing slashes in development mode, with basepath, trailingSlash: true',
+  () => {
+    const { next } = nextTestSetup({
+      files: __dirname,
+      nextConfig: {
+        trailingSlash: true,
+        basePath: '/docs',
+      },
+    })
+
+    testShouldRedirect(next, [
+      ['/docs/about', '/docs/about/'],
+      ['/docs', '/docs/'],
+      ['/docs/catch-all/hello/world', '/docs/catch-all/hello/world/'],
+      ['/docs/catch-all/hello.world/', '/docs/catch-all/hello.world'],
+    ])
+
+    testLinkShouldRewriteTo(next, [
+      ['/docs/linker?href=/about', '/docs/about/'],
+      ['/docs/linker?href=/', '/docs/'],
+    ])
+  }
+)

test/integration/trailing-slashes/pages/404.js renamed to test/e2e/trailing-slashes/pages/404.js

@@ -0,0 +1,122 @@
+/* eslint-env jest */
+
+// These tests are defined here and used in `app-dir.test.ts` and
+// `pages-dir.test.ts` so that both test suites can be run in parallel.
+
+import type { Playwright } from 'next-webdriver'
+
+import cheerio from 'cheerio'
+import type { NextInstance } from 'e2e-utils'
+
+export function testShouldRedirect(
+  next: NextInstance,
+  expectations: [string, string][]
+) {
+  it.each(expectations)(
+    '%s should redirect to %s',
+    async (route, expectedLocation) => {
+      const res = await next.fetch(route, { redirect: 'manual' })
+      expect(res.status).toBe(308)
+      const { pathname } = new URL(res.headers.get('location'))
+      expect(pathname).toBe(expectedLocation)
+    }
+  )
+}
+
+export function testShouldResolve(
+  next: NextInstance,
+  expectations: [string, string, string][]
+) {
+  it.each(expectations)(
+    '%s should resolve to %s, with router path %s',
+    async (route, expectedPage, expectedRouterPath) => {
+      const res = await next.fetch(route, { redirect: 'error' })
+      expect(res.status).toBe(200)
+      const $ = cheerio.load(await res.text())
+      expect($('#page-marker').text()).toBe(expectedPage)
+      expect($('#router-pathname').text()).toBe(expectedRouterPath)
+    }
+  )
+
+  it.each(expectations)(
+    '%s should client side render %s, with router path %s',
+    async (route, expectedPage, expectedRouterPath) => {
+      let browser: Playwright | undefined
+      try {
+        browser = await next.browser(route)
+
+        await browser.waitForElementByCss('#hydration-marker')
+        const text = await browser.elementByCss('#page-marker').text()
+        expect(text).toBe(expectedPage)
+        const routerPathname = await browser
+          .elementByCss('#router-pathname')
+          .text()
+        expect(routerPathname).toBe(expectedRouterPath)
+      } finally {
+        if (browser) await browser.close()
+      }
+    }
+  )
+}
+
+export function testExternalLinkShouldRewriteTo(
+  next: NextInstance,
+  expectations: [string, string][]
+) {
+  it.each(expectations)(
+    '%s should have href %s',
+    async (linkPage, expectedHref) => {
+      const $ = await next.render$(linkPage)
+      expect($('#link').attr('href')).toBe(expectedHref)
+    }
+  )
+}
+
+export function testLinkShouldRewriteTo(
+  next: NextInstance,
+  expectations: [string, string][]
+) {
+  it.each(expectations)(
+    '%s should have href %s',
+    async (linkPage, expectedHref) => {
+      const $ = await next.render$(linkPage)
+      expect($('#link').attr('href')).toBe(expectedHref)
+    }
+  )
+
+  it.each(expectations)(
+    '%s should navigate to %s',
+    async (linkPage, expectedHref) => {
+      let browser: Playwright | undefined
+      try {
+        browser = await next.browser(linkPage)
+        await browser.elementByCss('#link').click()
+
+        await browser.waitForElementByCss('#hydration-marker')
+        const url = new URL(await browser.eval('window.location.href'))
+        const pathname = url.href.slice(url.origin.length)
+        expect(pathname).toBe(expectedHref)
+      } finally {
+        if (browser) await browser.close()
+      }
+    }
+  )
+
+  it.each(expectations)(
+    '%s should push route to %s',
+    async (linkPage, expectedHref) => {
+      let browser: Playwright | undefined
+      try {
+        browser = await next.browser(linkPage)
+        await browser.elementByCss('#route-pusher').click()
+
+        await browser.waitForElementByCss('#hydration-marker')
+        const url = new URL(await browser.eval('window.location.href'))
+        const pathname = url.href.slice(url.origin.length)
+        expect(pathname).toBe(expectedHref)
+      } finally {
+        if (browser) await browser.close()
+      }
+    }
+  )
+}

test/integration/trailing-slashes/pages/about.js renamed to test/e2e/trailing-slashes/pages/about.js

@@ -0,0 +1,86 @@
+/* eslint-env jest */
+/* eslint-disable jest/no-standalone-expect */
+
+import {
+  testShouldRedirect,
+  testLinkShouldRewriteTo,
+  testShouldResolve,
+  testExternalLinkShouldRewriteTo,
+} from './shared-tests.util'
+import { nextTestSetup } from 'e2e-utils'
+import { join } from 'path'
+
+describe('Trailing slashes with trailingSlash: true', () => {
+  const { next, isNextStart } = nextTestSetup({
+    files: __dirname,
+    nextConfig: {
+      trailingSlash: true,
+    },
+  })
+
+  testShouldRedirect(next, [
+    ['/about', '/about/'],
+    ['/catch-all/hello/world', '/catch-all/hello/world/'],
+    ['/catch-all/hello.world/', '/catch-all/hello.world'],
+  ])
+
+  testShouldResolve(next, [
+    // visited url, expected page, expected router path
+    ['/', '/index.js', '/'],
+    ['/about/', '/about.js', '/about'],
+    [
+      '/catch-all/hello/world/',
+      '/catch-all/[...slug].js',
+      '/catch-all/[...slug]',
+    ],
+    ['/about/?hello=world', '/about.js', '/about'],
+  ])
+
+  testLinkShouldRewriteTo(next, [
+    ['/linker?href=/', '/'],
+    ['/linker?href=/about', '/about/'],
+    ['/linker?href=/about/', '/about/'],
+    ['/linker?href=/about?hello=world', '/about/?hello=world'],
+    ['/linker?href=/about/?hello=world', '/about/?hello=world'],
+    ['/linker?href=/catch-all/hello/', '/catch-all/hello/'],
+    ['/linker?href=/catch-all/hello.world/', '/catch-all/hello.world'],
+  ])
+
+  testExternalLinkShouldRewriteTo(next, [
+    [
+      `/external-linker?href=${encodeURI('https://nextjs.org')}`,
+      'https://nextjs.org',
+    ],
+    [
+      `/external-linker?href=${encodeURI('https://nextjs.org/')}`,
+      'https://nextjs.org/',
+    ],
+  ])
+
+  // only prod builds have a manifest
+  ;(isNextStart ? it : it.skip)(
+    'should have a trailing redirect in the routesmanifest',
+    async () => {
+      const manifest = await next.readJSON(
+        join('.next', 'routes-manifest.json')
+      )
+      expect(manifest).toEqual(
+        expect.objectContaining({
+          redirects: expect.arrayContaining([
+            expect.objectContaining({
+              source:
+                '/:file((?!\\.well-known(?:/.*)?)(?:[^/]+/)*[^/]+\\.\\w+)/',
+              destination: '/:file',
+              statusCode: 308,
+            }),
+            expect.objectContaining({
+              source: '/:notfile((?!\\.well-known(?:/.*)?)(?:[^/]+/)*[^/\\.]+)',
+              destination: '/:notfile/',
+              statusCode: 308,
+            }),
+          ]),
+        })
+      )
+    }
+  )
+})