From 9f40afe28746877e5f8fcf520c0cd960d86a4329 Mon Sep 17 00:00:00 2001 From: Sebastian Sebbie Silbermann Date: Mon, 6 Jan 2025 15:47:37 +0100 Subject: [PATCH] Failing test for client navigation to layout with `React.Suspense` --- .../navigation-layout-suspense/app/layout.js | 7 +++++ .../app/nested/layout.js | 27 +++++++++++++++++++ .../app/nested/page.js | 7 +++++ .../navigation-layout-suspense/app/page.js | 14 ++++++++++ .../navigation-layout-suspense.test.ts | 19 +++++++++++++ .../navigation-layout-suspense/next.config.js | 1 + 6 files changed, 75 insertions(+) create mode 100644 test/e2e/app-dir/navigation-layout-suspense/app/layout.js create mode 100644 test/e2e/app-dir/navigation-layout-suspense/app/nested/layout.js create mode 100644 test/e2e/app-dir/navigation-layout-suspense/app/nested/page.js create mode 100644 test/e2e/app-dir/navigation-layout-suspense/app/page.js create mode 100644 test/e2e/app-dir/navigation-layout-suspense/navigation-layout-suspense.test.ts create mode 100644 test/e2e/app-dir/navigation-layout-suspense/next.config.js diff --git a/test/e2e/app-dir/navigation-layout-suspense/app/layout.js b/test/e2e/app-dir/navigation-layout-suspense/app/layout.js new file mode 100644 index 0000000000000..4ee00a218505a --- /dev/null +++ b/test/e2e/app-dir/navigation-layout-suspense/app/layout.js @@ -0,0 +1,7 @@ +export default function RootLayout({ children }) { + return ( + + {children} + + ) +} diff --git a/test/e2e/app-dir/navigation-layout-suspense/app/nested/layout.js b/test/e2e/app-dir/navigation-layout-suspense/app/nested/layout.js new file mode 100644 index 0000000000000..8f9646c03783f --- /dev/null +++ b/test/e2e/app-dir/navigation-layout-suspense/app/nested/layout.js @@ -0,0 +1,27 @@ +import { Suspense } from 'react' +import Link from 'next/link' + +export const dynamic = 'force-dynamic' + +async function LoadData() { + await fetch('https://next-data-api-endpoint.vercel.app/api/random?b').then( + (res) => res.text() + ) + return
Got API Response
+} + +export default async function Layout(props) { + return ( + <> +
+ + Home Page + +
+ Loading...}> + {props.children} + {props.children} + + + ) +} diff --git a/test/e2e/app-dir/navigation-layout-suspense/app/nested/page.js b/test/e2e/app-dir/navigation-layout-suspense/app/nested/page.js new file mode 100644 index 0000000000000..4daa3fec9f2d1 --- /dev/null +++ b/test/e2e/app-dir/navigation-layout-suspense/app/nested/page.js @@ -0,0 +1,7 @@ +export default function NestedPage() { + return ( + <> +

This is the nested Page

+ + ) +} diff --git a/test/e2e/app-dir/navigation-layout-suspense/app/page.js b/test/e2e/app-dir/navigation-layout-suspense/app/page.js new file mode 100644 index 0000000000000..dedda5587d632 --- /dev/null +++ b/test/e2e/app-dir/navigation-layout-suspense/app/page.js @@ -0,0 +1,14 @@ +import Link from 'next/link' + +export default function Home() { + return ( + <> +
+ + nested Page + +
+

This is the Home Page

+ + ) +} diff --git a/test/e2e/app-dir/navigation-layout-suspense/navigation-layout-suspense.test.ts b/test/e2e/app-dir/navigation-layout-suspense/navigation-layout-suspense.test.ts new file mode 100644 index 0000000000000..c04b61a6c0a9a --- /dev/null +++ b/test/e2e/app-dir/navigation-layout-suspense/navigation-layout-suspense.test.ts @@ -0,0 +1,19 @@ +import { nextTestSetup } from 'e2e-utils' + +describe('app dir - navigation with Suspense in nested layout', () => { + const { next } = nextTestSetup({ + files: __dirname, + }) + + it('resolves data after client navigation to a nested layout with Suspense', async () => { + const browser = await next.browser('/nested') + + await browser.waitForElementByCss('[data-testid="nested-resolved"]') + + await browser.waitForElementByCss('a[href="/"]').click() + + await browser.waitForElementByCss('a[href="/nested"]').click() + + await browser.waitForElementByCss('[data-testid="nested-resolved"]') + }) +}) diff --git a/test/e2e/app-dir/navigation-layout-suspense/next.config.js b/test/e2e/app-dir/navigation-layout-suspense/next.config.js new file mode 100644 index 0000000000000..4ba52ba2c8df6 --- /dev/null +++ b/test/e2e/app-dir/navigation-layout-suspense/next.config.js @@ -0,0 +1 @@ +module.exports = {}