[test] Add test for dev rendering indicator

eps1lon · eps1lon · commit dddb84c4ecd6 · 2025-06-05T18:15:07.000+02:00
diff --git a/test/development/dev-indicator/app/app/rendering/a/page.js b/test/development/dev-indicator/app/app/rendering/a/page.js
@@ -0,0 +1,16 @@
+import Link from 'next/link'
+import { connection } from 'next/server'
+import { setTimeout } from 'timers/promises'
+
+export default async function Page() {
+  await connection()
+  await setTimeout(100)
+
+  return (
+    <>
+      <Link href="/app/rendering/b" id="to-b">
+        Go to b
+      </Link>
+    </>
+  )
+}
diff --git a/test/development/dev-indicator/app/app/rendering/b/page.js b/test/development/dev-indicator/app/app/rendering/b/page.js
@@ -0,0 +1,15 @@
+import Link from 'next/link'
+import { connection } from 'next/server'
+import { setTimeout } from 'timers/promises'
+
+export default async function Page() {
+  await connection()
+  await setTimeout(100)
+  return (
+    <>
+      <Link href="/app/rendering/a" id="to-a">
+        Go to a
+      </Link>
+    </>
+  )
+}
diff --git a/test/development/dev-indicator/app/layout.js b/test/development/dev-indicator/app/layout.js
@@ -0,0 +1,7 @@
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/development/dev-indicator/dev-rendering-indicator.test.ts b/test/development/dev-indicator/dev-rendering-indicator.test.ts
@@ -0,0 +1,44 @@
+/* eslint-env jest */
+
+import { nextTestSetup } from 'e2e-utils'
+import { retry } from 'next-test-utils'
+
+const installCheckVisible = (browser) => {
+  return browser.eval(`(function() {
+      window.checkInterval = setInterval(function() {
+      const root = document.querySelector('nextjs-portal').shadowRoot;
+      const indicator = root.querySelector('[data-next-mark]')
+      window.showedBuilder = window.showedBuilder || (
+        indicator.getAttribute('data-next-mark-loading') === 'true'
+      )
+      if (window.showedBuilder) clearInterval(window.checkInterval)
+    }, 5)
+  })()`)
+}
+
+describe('Dev Rendering Indicator', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('Shows build indicator when page is built from modifying', async () => {
+    // Ensure both pages are built first so that we don't confuse it with build indicator
+    await Promise.all([
+      next.fetch('/app/rendering/a'),
+      next.fetch('/app/rendering/b'),
+    ])
+    const browser = await next.browser('/app/rendering/a')
+    await installCheckVisible(browser)
+    await browser.eval('window.showedBuilder = false')
+
+    await browser.elementByCss('[href="/app/rendering/b"]').click()
+    await retry(async () => {
+      await browser.elementByCss('[href="/app/rendering/a"]')
+    })
+
+    const showedRenderingIndicator = await browser.eval('window.showedBuilder')
+    expect({ showedRenderingIndicator }).toEqual({
+      showedRenderingIndicator: true,
+    })
+  })
+})
