Add basic navigation test for Segment Cache

Almost nothing in the Segment Cache is implemented yet — all navigations result in a cache miss. This just confirms that when a cache miss occurs, it successfully navigates to the next page.
vercel · Nov 15, 2024 · 32c16a3 · 32c16a3
1 parent 4ab3e39
commit 32c16a3
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 0 deletions.
diff --git a/test/e2e/app-dir/segment-cache/basic/app/layout.tsx b/test/e2e/app-dir/segment-cache/basic/app/layout.tsx
@@ -0,0 +1,11 @@
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/segment-cache/basic/app/page.tsx b/test/e2e/app-dir/segment-cache/basic/app/page.tsx
@@ -0,0 +1,5 @@
+import Link from 'next/link'
+
+export default function Page() {
+  return <Link href="/test">Go to test page</Link>
+}
diff --git a/test/e2e/app-dir/segment-cache/basic/app/streaming-text.tsx b/test/e2e/app-dir/segment-cache/basic/app/streaming-text.tsx
@@ -0,0 +1,26 @@
+import { Suspense } from 'react'
+import { connection } from 'next/server'
+
+async function DynamicText({ text }) {
+  await connection()
+  return text
+}
+
+export function StreamingText({
+  static: staticText,
+  dynamic,
+}: {
+  static: string
+  dynamic: string
+}) {
+  return (
+    <div data-streaming-text>
+      <div>{staticText}</div>
+      <div>
+        <Suspense fallback={`Loading... [${dynamic}]`}>
+          <DynamicText text={dynamic} />
+        </Suspense>
+      </div>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/segment-cache/basic/app/test/@nav/page.tsx b/test/e2e/app-dir/segment-cache/basic/app/test/@nav/page.tsx
@@ -0,0 +1,9 @@
+import { StreamingText } from '../../streaming-text'
+
+export default function Page() {
+  return (
+    <div id="nav">
+      <StreamingText static="Static in nav" dynamic="Dynamic in nav" />
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/segment-cache/basic/app/test/layout.tsx b/test/e2e/app-dir/segment-cache/basic/app/test/layout.tsx
@@ -0,0 +1,17 @@
+import { StreamingText } from '../streaming-text'
+
+export default function Layout({
+  nav,
+  children,
+}: {
+  nav: React.ReactNode
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      <StreamingText static="Static in layout" dynamic="Dynamic in layout" />
+      <div>{nav}</div>
+      <div>{children}</div>
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/segment-cache/basic/app/test/page.tsx b/test/e2e/app-dir/segment-cache/basic/app/test/page.tsx
@@ -0,0 +1,5 @@
+import { StreamingText } from '../streaming-text'
+
+export default function Page() {
+  return <StreamingText static="Static in page" dynamic="Dynamic in page" />
+}
diff --git a/test/e2e/app-dir/segment-cache/basic/next.config.js b/test/e2e/app-dir/segment-cache/basic/next.config.js
@@ -0,0 +1,12 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  experimental: {
+    ppr: true,
+    dynamicIO: true,
+    clientSegmentCache: true,
+  },
+}
+
+module.exports = nextConfig
diff --git a/test/e2e/app-dir/segment-cache/basic/segment-cache-basic.test.ts b/test/e2e/app-dir/segment-cache/basic/segment-cache-basic.test.ts
@@ -0,0 +1,28 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('segment cache (basic tests)', () => {
+  const { next, isNextDev, skipped } = nextTestSetup({
+    files: __dirname,
+    skipDeployment: true,
+  })
+  if (isNextDev || skipped) {
+    test('ppr is disabled', () => {})
+    return
+  }
+
+  it('basic navigation', async () => {
+    const browser = await next.browser('/')
+
+    // Navigate to the test page
+    const link = await browser.elementByCss('a')
+    await link.click()
+
+    // Confirm that the content has streamed in and the URL has updated
+    // as expected
+    const nav = await browser.elementById('nav')
+    expect(await nav.innerHTML()).toMatchInlineSnapshot(
+      `"<div data-streaming-text="true"><div>Static in nav</div><div>Dynamic in nav</div></div>"`
+    )
+    expect(new URL(await browser.url()).pathname).toBe('/test')
+  })
+})