tests

lubieowoce · lubieowoce · commit 116998abd4a2 · 2025-09-03T12:18:18.000+02:00
diff --git a/test/e2e/app-dir/segment-cache/no-prefetch/app/layout.tsx b/test/e2e/app-dir/segment-cache/no-prefetch/app/layout.tsx
@@ -0,0 +1,8 @@
+export default function RootLayout({ children }: LayoutProps<'/'>) {
+  return (
+    <html>
+      <head></head>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/segment-cache/no-prefetch/app/page.tsx b/test/e2e/app-dir/segment-cache/no-prefetch/app/page.tsx
@@ -0,0 +1,12 @@
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <main>
+      <h1>Home</h1>
+      <Link href="/with-loading" prefetch={false}>
+        Go to /with-loading (no prefetch)
+      </Link>
+    </main>
+  )
+}
diff --git a/test/e2e/app-dir/segment-cache/no-prefetch/app/with-loading/client.tsx b/test/e2e/app-dir/segment-cache/no-prefetch/app/with-loading/client.tsx
@@ -0,0 +1,10 @@
+'use client'
+
+import { use } from 'react'
+
+const infinitePromise = new Promise<never>(() => {})
+
+export function SuspendForeverOnClient() {
+  use(infinitePromise)
+  return null
+}
diff --git a/test/e2e/app-dir/segment-cache/no-prefetch/app/with-loading/loading.tsx b/test/e2e/app-dir/segment-cache/no-prefetch/app/with-loading/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return <div id="loading-component">Loading...</div>
+}
diff --git a/test/e2e/app-dir/segment-cache/no-prefetch/app/with-loading/page.tsx b/test/e2e/app-dir/segment-cache/no-prefetch/app/with-loading/page.tsx
@@ -0,0 +1,12 @@
+import { connection } from 'next/server'
+import { SuspendForeverOnClient } from './client'
+
+export default async function Page() {
+  await connection()
+  return (
+    <main>
+      {/* Block on the client to make sure that the loading boundary works correctly. */}
+      <SuspendForeverOnClient />
+    </main>
+  )
+}
diff --git a/test/e2e/app-dir/segment-cache/no-prefetch/next.config.js b/test/e2e/app-dir/segment-cache/no-prefetch/next.config.js
@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+module.exports = {
+  experimental: {
+    clientSegmentCache: true,
+    clientParamParsing: true,
+  },
+  productionBrowserSourceMaps: true,
+}
diff --git a/test/e2e/app-dir/segment-cache/no-prefetch/no-prefetch.test.ts b/test/e2e/app-dir/segment-cache/no-prefetch/no-prefetch.test.ts
@@ -0,0 +1,29 @@
+import { nextTestSetup } from 'e2e-utils'
+import { createRouterAct } from '../router-act'
+
+describe('navigating without a prefetch', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('can show a loading boundary from the dynamic response', async () => {
+    let act: ReturnType<typeof createRouterAct>
+    const browser = await next.browser('/', {
+      beforePageLoad(page) {
+        act = createRouterAct(page)
+      },
+    })
+
+    // Navigate to a dynamic page with a `loading.tsx` without a prefetch.
+    await act(async () => {
+      await browser.elementByCss('a[href="/with-loading"]').click()
+    })
+
+    // The page suspends on the client, so we should display the `loading` that we got from the dynamic response.
+    expect(
+      await browser
+        .elementByCss('#loading-component', { state: 'visible' })
+        .text()
+    ).toContain('Loading...')
+  })
+})

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default function Loading() {`
	`2`	`+ return <div id="loading-component">Loading...</div>`
	`3`	`+}`