first commit

2026-03-10 19:37:31 +03:30
commit 61f56f997c
27684 changed files with 2784175 additions and 0 deletions
--- a/test/development/app-dir/cache-indicator/app/layout.tsx
+++ b/test/development/app-dir/cache-indicator/app/layout.tsx
@@ -0,0 +1,15 @@
+import Link from 'next/link'
+import { ReactNode } from 'react'
+export default function Root({ children }: { children: ReactNode }) {
+  return (
+    <html>
+      <body>
+        <nav>
+          <Link href="/">/index</Link> |{' '}
+          <Link href="/navigation">/navigation</Link>
+        </nav>
+        {children}
+      </body>
+    </html>
+  )
+}
--- a/test/development/app-dir/cache-indicator/app/navigation/loading.tsx
+++ b/test/development/app-dir/cache-indicator/app/navigation/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return <div>Loading...</div>
+}
--- a/test/development/app-dir/cache-indicator/app/navigation/page.tsx
+++ b/test/development/app-dir/cache-indicator/app/navigation/page.tsx
@@ -0,0 +1,41 @@
+import { cacheTag } from 'next/cache'
+import { Suspense } from 'react'
+
+export default function Page() {
+  return (
+    <div id="navigation-page">
+      Hello navigation page!
+      <Suspense fallback={<div>Loading</div>}>
+        <Component />
+      </Suspense>
+      <SlowThing />
+    </div>
+  )
+}
+
+async function Component() {
+  const posts = await getBlogPosts()
+  return (
+    <div>
+      {posts.map((post) => (
+        <div key={post.id}>{post.content}</div>
+      ))}
+    </div>
+  )
+}
+
+async function getBlogPosts() {
+  'use cache'
+  cacheTag('blog-posts')
+  // sleep for 2s
+  await new Promise((resolve) => setTimeout(resolve, 2000))
+
+  return [{ id: 'foo', content: 'bar' }]
+}
+
+async function SlowThing() {
+  // sleep for 2s
+  await new Promise((resolve) => setTimeout(resolve, 2000))
+
+  return <div>Slow Thing</div>
+}
--- a/test/development/app-dir/cache-indicator/app/page.tsx
+++ b/test/development/app-dir/cache-indicator/app/page.tsx
@@ -0,0 +1,3 @@
+export default async function Page() {
+  return <p>Hello, initial load!</p>
+}
--- a/test/development/app-dir/cache-indicator/cache-indicator.test.ts
+++ b/test/development/app-dir/cache-indicator/cache-indicator.test.ts
@@ -0,0 +1,166 @@
+import { nextTestSetup } from 'e2e-utils'
+import { retry } from 'next-test-utils'
+
+const enableCacheComponents = process.env.__NEXT_CACHE_COMPONENTS === 'true'
+
+describe('cache-indicator', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('is none on initial load', async () => {
+    const browser = await next.browser('/')
+
+    const badge = await browser.elementByCss('[data-next-badge]')
+    const cacheStatus = await badge.getAttribute('data-status')
+    expect(cacheStatus).toBe('none')
+  })
+
+  if (enableCacheComponents) {
+    it('renders the cache warming indicator when navigating to a page that needs to warm the cache', async () => {
+      const browser = await next.browser('/')
+
+      // navigate to the navigation page
+      const link = await browser.waitForElementByCss('a[href="/navigation"]')
+      await link.click()
+
+      await retry(async () => {
+        const badge = await browser.elementByCss('[data-next-badge]')
+        const cacheStatus = await badge.getAttribute('data-status')
+        expect(cacheStatus).toBe('prerendering')
+      })
+
+      await retry(async () => {
+        const text = await browser.elementByCss('#navigation-page').text()
+        expect(text).toContain('Hello navigation page!')
+      })
+
+      const badge = await browser.elementByCss('[data-next-badge]')
+      const status = await badge.getAttribute('data-status')
+      expect(status).toBe('none')
+    })
+
+    it('shows cache-bypassing badge when cache is disabled', async () => {
+      const browser = await next.browser('/', {
+        extraHTTPHeaders: { 'cache-control': 'no-cache' },
+      })
+
+      // Wait for the badge to appear and show cache-bypassing status
+      await retry(async () => {
+        const badge = await browser.elementByCss('[data-next-badge]')
+        const cacheBypassingAttr = await badge.getAttribute(
+          'data-cache-bypassing'
+        )
+        expect(cacheBypassingAttr).toBe('true')
+      })
+
+      // Verify the cache bypass badge is visible
+      await retry(async () => {
+        const hasCacheBypassBadge = await browser.hasElementByCss(
+          '[data-cache-bypass-badge]'
+        )
+        expect(hasCacheBypassBadge).toBe(true)
+      })
+
+      // Verify the badge shows "Cache disabled" text
+      const badgeButton = await browser.elementByCss(
+        '[data-cache-bypass-badge] [data-issues-open]'
+      )
+      const badgeText = await badgeButton.text()
+      expect(badgeText).toBe('Cache disabled')
+    })
+
+    it('persists cache-bypassing badge after navigation when cache is disabled', async () => {
+      const browser = await next.browser('/', {
+        extraHTTPHeaders: { 'cache-control': 'no-cache' },
+      })
+
+      // Wait for initial cache-bypassing badge
+      await retry(async () => {
+        const hasCacheBypassBadge = await browser.hasElementByCss(
+          '[data-cache-bypass-badge]'
+        )
+        expect(hasCacheBypassBadge).toBe(true)
+      })
+
+      // Navigate to another page
+      const link = await browser.waitForElementByCss('a[href="/navigation"]')
+      await link.click()
+
+      // Wait for navigation to complete
+      await retry(async () => {
+        const text = await browser.elementByCss('#navigation-page').text()
+        expect(text).toContain('Hello navigation page!')
+      })
+
+      // Verify cache-bypassing badge persists after navigation
+      await retry(async () => {
+        const hasCacheBypassBadge = await browser.hasElementByCss(
+          '[data-cache-bypass-badge]'
+        )
+        expect(hasCacheBypassBadge).toBe(true)
+      })
+
+      // Verify the badge still shows "Cache disabled" text
+      const badgeButton = await browser.elementByCss(
+        '[data-cache-bypass-badge] [data-issues-open]'
+      )
+      const badgeText = await badgeButton.text()
+      expect(badgeText).toBe('Cache disabled')
+    })
+
+    it('opens devtools menu when clicking cache-bypassing badge', async () => {
+      const browser = await next.browser('/', {
+        extraHTTPHeaders: { 'cache-control': 'no-cache' },
+      })
+
+      // Wait for the cache-bypassing badge to appear
+      await retry(async () => {
+        const hasCacheBypassBadge = await browser.hasElementByCss(
+          '[data-cache-bypass-badge]'
+        )
+        expect(hasCacheBypassBadge).toBe(true)
+      })
+
+      // Click the cache bypass badge
+      const badgeButton = await browser.elementByCss(
+        '[data-cache-bypass-badge] [data-issues-open]'
+      )
+      await badgeButton.click()
+
+      // Verify devtools menu opens
+      await retry(async () => {
+        const hasMenu = await browser.hasElementByCss('#nextjs-dev-tools-menu')
+        expect(hasMenu).toBe(true)
+      })
+    })
+
+    it('can dismiss cache-bypassing badge', async () => {
+      const browser = await next.browser('/', {
+        extraHTTPHeaders: { 'cache-control': 'no-cache' },
+      })
+
+      // Wait for the cache-bypassing badge to appear
+      await retry(async () => {
+        const hasCacheBypassBadge = await browser.hasElementByCss(
+          '[data-cache-bypass-badge]'
+        )
+        expect(hasCacheBypassBadge).toBe(true)
+      })
+
+      // Click the collapse button
+      const collapseButton = await browser.elementByCss(
+        '[data-cache-bypass-badge] [data-issues-collapse]'
+      )
+      await collapseButton.click()
+
+      // Verify badge is dismissed
+      await retry(async () => {
+        const hasCacheBypassBadge = await browser.hasElementByCss(
+          '[data-cache-bypass-badge]'
+        )
+        expect(hasCacheBypassBadge).toBe(false)
+      })
+    })
+  }
+})
--- a/test/development/app-dir/cache-indicator/next.config.js
+++ b/test/development/app-dir/cache-indicator/next.config.js
@@ -0,0 +1,6 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {}
+
+module.exports = nextConfig