add navigation test

vercel · Sep 6, 2024 · fd73701 · fd73701
1 parent bf48448
commit fd73701
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 8 deletions.
diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
@@ -319,13 +319,7 @@ async function generateFlight(
         flightRouterState,
         isFirst: true,
         // For flight, render metadata inside leaf page
-        rscPayloadHead: (
-          <>
-            <NonIndex ctx={ctx} />
-            {/* Adding requestId as react key to make metadata remount for each render */}
-            <MetadataTree key={requestId} />
-          </>
-        ),
+        rscPayloadHead: <MetadataTree key={requestId} />,
         injectedCSS: new Set(),
         injectedJS: new Set(),
         injectedFontPreloadTags: new Set(),
@@ -531,8 +525,8 @@ async function ReactServerError({
 
   const head = (
     <>
-      <NonIndex ctx={ctx} />
       {/* Adding requestId as react key to make metadata remount for each render */}
+      <NonIndex ctx={ctx} />
       <MetadataTree key={requestId} />
       {process.env.NODE_ENV === 'development' && (
         <meta name="next-error" content="not-found" />

diff --git a/test/e2e/app-dir/metadata-navigation/app/(cart)/product/layout.tsx b/test/e2e/app-dir/metadata-navigation/app/(cart)/product/layout.tsx
@@ -0,0 +1,13 @@
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Product Layout',
+}
+
+export default function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return <>{children}</>
+}
diff --git a/test/e2e/app-dir/metadata-navigation/app/(cart)/product/page.tsx b/test/e2e/app-dir/metadata-navigation/app/(cart)/product/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>Product page content</div>
+}
diff --git a/test/e2e/app-dir/metadata-navigation/app/@header/layout.tsx b/test/e2e/app-dir/metadata-navigation/app/@header/layout.tsx
@@ -0,0 +1,7 @@
+type LayoutProps = {
+  children: React.ReactNode
+}
+
+export default function Layout({ children }: LayoutProps) {
+  return <div>{children}</div>
+}
diff --git a/test/e2e/app-dir/metadata-navigation/app/@header/page.tsx b/test/e2e/app-dir/metadata-navigation/app/@header/page.tsx
@@ -0,0 +1,12 @@
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <div>
+      <div>Home header</div>
+      <Link href="/product" id="product-link">
+        Product
+      </Link>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/metadata-navigation/app/@header/product/layout.tsx b/test/e2e/app-dir/metadata-navigation/app/@header/product/layout.tsx
@@ -0,0 +1,7 @@
+type LayoutProps = {
+  children: React.ReactNode
+}
+
+export default function Layout({ children }: LayoutProps) {
+  return <>{children}</>
+}
diff --git a/test/e2e/app-dir/metadata-navigation/app/@header/product/page.tsx b/test/e2e/app-dir/metadata-navigation/app/@header/product/page.tsx
@@ -0,0 +1,12 @@
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <div>
+      <h1 id="product-title">Product header</h1>
+      <Link href="/" id="home-link">
+        Go to Home page
+      </Link>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/metadata-navigation/app/layout.tsx b/test/e2e/app-dir/metadata-navigation/app/layout.tsx
@@ -0,0 +1,23 @@
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Home Layout',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  header,
+  children,
+}: Readonly<{
+  header: React.ReactNode
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body className={`antialiased bg-gray-50 text-black`}>
+        {header}
+        {children}
+      </body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/metadata-navigation/app/page.tsx b/test/e2e/app-dir/metadata-navigation/app/page.tsx
@@ -0,0 +1,7 @@
+export default function Home() {
+  return (
+    <div>
+      <h3 id="home-title">Home page content</h3>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/metadata-navigation/metadata-navigation.test.ts b/test/e2e/app-dir/metadata-navigation/metadata-navigation.test.ts
@@ -0,0 +1,30 @@
+import { createNextDescribe } from 'e2e-utils'
+
+createNextDescribe(
+  'app-dir - metadata-navigation',
+  {
+    files: __dirname,
+  },
+  ({ next }) => {
+    it('should show the index title', async () => {
+      const browser = await next.browser('/')
+      expect(browser.elementByCss('title').text()).toBe('Home Layout')
+    })
+
+    it('should show target page metadata after navigation', async () => {
+      const browser = await next.browser('/')
+      await browser.elementByCss('#product-link').click()
+      await browser.waitForElementByCss('#product-title')
+      expect(await browser.elementByCss('title').text()).toBe('Product Layout')
+    })
+
+    it('should show target page metadata after navigation with back', async () => {
+      const browser = await next.browser('/')
+      await browser.elementByCss('#product-link').click()
+      await browser.waitForElementByCss('#product-title')
+      await browser.elementByCss('#back-link').click()
+      await browser.waitForElementByCss('#home-title')
+      expect(await browser.elementByCss('title').text()).toBe('Home Layout')
+    })
+  }
+)