add a test

vercel · ztanner · Apr 23, 2024 · Apr 23, 2024 · Apr 23, 2024 · Apr 23, 2024
commit ec6cba1fe64b7fbb045554d9b8e87b224a340f65
diff --git a/...interception-dynamic-segment-middleware/app/[locale]/@modal/(.)[username]/p/[id]/page.tsx b/...interception-dynamic-segment-middleware/app/[locale]/@modal/(.)[username]/p/[id]/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return 'intercepted'
+}
diff --git a/test/e2e/app-dir/interception-dynamic-segment-middleware/app/[locale]/@modal/default.tsx b/test/e2e/app-dir/interception-dynamic-segment-middleware/app/[locale]/@modal/default.tsx
@@ -0,0 +1 @@
+export default () => null
diff --git a/...e/app-dir/interception-dynamic-segment-middleware/app/[locale]/[username]/p/[id]/page.tsx b/...e/app-dir/interception-dynamic-segment-middleware/app/[locale]/[username]/p/[id]/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return 'not intercepted'
+}
diff --git a/test/e2e/app-dir/interception-dynamic-segment-middleware/app/[locale]/layout.tsx b/test/e2e/app-dir/interception-dynamic-segment-middleware/app/[locale]/layout.tsx
@@ -0,0 +1,14 @@
+export default function Layout({
+  children,
+  modal,
+}: {
+  children: React.ReactNode
+  modal: React.ReactNode
+}) {
+  return (
+    <>
+      <div id="children">{children}</div>
+      <div id="modal">{modal}</div>
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/interception-dynamic-segment-middleware/app/[locale]/page.tsx b/test/e2e/app-dir/interception-dynamic-segment-middleware/app/[locale]/page.tsx
@@ -0,0 +1,9 @@
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <div>
+      <Link href="/foo/p/1">Foo</Link> <Link href="/foo/p/1">Foo</Link>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/interception-dynamic-segment-middleware/app/default.tsx b/test/e2e/app-dir/interception-dynamic-segment-middleware/app/default.tsx
@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}
diff --git a/test/e2e/app-dir/interception-dynamic-segment-middleware/app/layout.tsx b/test/e2e/app-dir/interception-dynamic-segment-middleware/app/layout.tsx
@@ -0,0 +1,9 @@
+export default function Layout(props: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>
+        <div>{props.children}</div>
+      </body>
+    </html>
+  )
+}
diff --git a/...r/interception-dynamic-segment-middleware/interception-dynamic-segment-middleware.test.ts b/...r/interception-dynamic-segment-middleware/interception-dynamic-segment-middleware.test.ts
@@ -0,0 +1,23 @@
+import { createNextDescribe } from 'e2e-utils'
+import { check } from 'next-test-utils'
+
+createNextDescribe(
+  'interception-dynamic-segment-middleware',
+  {
+    files: __dirname,
+  },
+  ({ next }) => {
+    it('should work when interception route is paired with a dynamic segment & middleware', async () => {
+      const browser = await next.browser('/')
+
+      await browser.elementByCss('[href="/foo/p/1"]').click()
+      await check(() => browser.elementById('modal').text(), /intercepted/)
+      await browser.refresh()
+      await check(() => browser.elementById('modal').text(), '')
+      await check(
+        () => browser.elementById('children').text(),
+        /not intercepted/
+      )
+    })
+  }
+)
diff --git a/test/e2e/app-dir/interception-dynamic-segment-middleware/middleware.ts b/test/e2e/app-dir/interception-dynamic-segment-middleware/middleware.ts
@@ -0,0 +1,16 @@
+import { NextResponse, type NextRequest } from 'next/server'
+
+export default async function middleware(request: NextRequest) {
+  const locale = 'en'
+  const { pathname } = request.nextUrl
+  const pathnameHasLocale =
+    pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
+  if (pathnameHasLocale) return
+
+  request.nextUrl.pathname = `/en${pathname}`
+  return NextResponse.rewrite(request.nextUrl)
+}
+
+export const config = {
+  matcher: ['/((?!api|_next|_vercel|.*\\..*).*)'],
+}
diff --git a/test/e2e/app-dir/interception-dynamic-segment-middleware/next.config.js b/test/e2e/app-dir/interception-dynamic-segment-middleware/next.config.js
@@ -0,0 +1,6 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {}
+
+module.exports = nextConfig