Repository: vercel/next.js
Pull request: [test] Unflake rendering indicator test & skip building indicator tests

[Flakiness metric](https://app.datadoghq.com/ci/test/runs?query=test_level%3Atest%20%40git.repository.id%3A%22github.com%2Fvercel%2Fnext.js%22%20%40test.name%3A%28%22Build%20Activity%20Indicator%20Enabled%20-%20%28app%29%20Shows%20build%20indicator%20when%20page%20is%20built%20from%20modifying%22%20OR%20%22Build%20Activity%20Indicator%20Enabled%20-%20%28pages%29%20Shows%20build%20indicator%20when%20page%20is%20built%20from%20modifying%22%20OR%20%22Dev%20Rendering%20Indicator%20Shows%20build%20indicator%20when%20page%20is%20built%20from%20modifying%22%29%20%40test.status%3Afail&agg_m=count&agg_m_source=base&agg_t=count&fromUser=false&index=citest&start=1773322068865&end=1773926868865&paused=false)

In #85083 we introduced a delay of 400 ms before showing the building/rendering indicator, to avoid flashing it for fast operations. For now, we skip the building indicator tests because our simple test apps usually compile much faster than that, and we haven't found a good way to reliably test the indicator without flakiness. We do keep the rendering indicator test, but increase the timeout in the pages to ensure the indicator is shown for long enough to be detected by the test.

Changed files:
filename: test/development/dev-indicator/app/app/rendering/a/page.js
patch: @@ -4,7 +4,7 @@ import { setTimeout } from 'timers/promises'
 
 export default async function Page() {
   await connection()
-  await setTimeout(100)
+  await setTimeout(1000)
 
   return (
     <>

filename: test/development/dev-indicator/app/app/rendering/b/page.js
patch: @@ -4,7 +4,7 @@ import { setTimeout } from 'timers/promises'
 
 export default async function Page() {
   await connection()
-  await setTimeout(100)
+  await setTimeout(1000)
   return (
     <>
       <Link href="/app/rendering/a" id="to-a">

filename: test/development/dev-indicator/dev-rendering-indicator.test.ts
patch: @@ -12,10 +12,10 @@ const installCheckVisible = (browser) => {
       const status = badge ? badge.getAttribute('data-status') : null
 
       // Check if we're showing any status (rendering, compiling, etc.)
-      window.showedBuilder = window.showedBuilder || (
+      window.showedIndicator = window.showedIndicator || (
         statusElement !== null || (status && status !== 'none')
       )
-      if (window.showedBuilder) clearInterval(window.checkInterval)
+      if (window.showedIndicator) clearInterval(window.checkInterval)
     }, 5)
   })()`)
 }
@@ -25,22 +25,24 @@ describe('Dev Rendering Indicator', () => {
     files: __dirname,
   })
 
-  it('Shows build indicator when page is built from modifying', async () => {
+  it('Shows rendering indicator when navigating between pages', 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.eval('window.showedIndicator = 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')
+    const showedRenderingIndicator = await browser.eval(
+      'window.showedIndicator'
+    )
     expect({ showedRenderingIndicator }).toEqual({
       showedRenderingIndicator: true,
     })

filename: test/e2e/build-indicator/test/index.test.ts
patch: @@ -58,42 +58,42 @@ describe('Build Activity Indicator', () => {
   })
 
   if (isNextDev) {
-    describe.each(['pages', 'app'])('Enabled - (%s)', (pagesOrApp) => {
-      const { next } = nextTestSetup({
-        files: join(__dirname, '..'),
-      })
+    // A 400 ms delay was introduced to avoid flashing the indicator for fast
+    // builds. A simple test app like this usually compiles much faster, so we
+    // skip this test for now, until we find a better way to test the indicator.
+    describe.skip('build indicator', () => {
+      describe.each(['pages', 'app'])('Enabled - (%s)', (pagesOrApp) => {
+        const { next } = nextTestSetup({
+          files: join(__dirname, '..'),
+        })
 
-      ;(process.env.IS_TURBOPACK_TEST ? describe.skip : describe)(
-        'webpack only',
-        () => {
-          it('Shows the build indicator when a page is built during navigation', async () => {
-            const browser = await next.browser(
-              pagesOrApp === 'pages' ? '/' : '/app'
-            )
-            await installCheckVisible(browser)
-            await browser.elementByCss('#to-a').click()
-            await retry(async () => {
-              const wasVisible = await browser.eval('window.showedBuilder')
-              expect(wasVisible).toBe(true)
-            })
+        it('Shows the build indicator when a page is built during navigation', async () => {
+          const browser = await next.browser(
+            pagesOrApp === 'pages' ? '/' : '/app'
+          )
+          await installCheckVisible(browser)
+          await browser.elementByCss('#to-a').click()
+          await retry(async () => {
+            const wasVisible = await browser.eval('window.showedBuilder')
+            expect(wasVisible).toBe(true)
           })
-        }
-      )
+        })
 
-      it('Shows build indicator when page is built from modifying', async () => {
-        const browser = await next.browser(
-          pagesOrApp === 'pages' ? '/b' : '/app/b'
-        )
-        await installCheckVisible(browser)
-        const pagePath =
-          pagesOrApp === 'pages' ? 'pages/b.js' : 'app/app/b/page.js'
+        it('Shows build indicator when page is built from modifying', async () => {
+          const browser = await next.browser(
+            pagesOrApp === 'pages' ? '/b' : '/app/b'
+          )
+          await installCheckVisible(browser)
+          const pagePath =
+            pagesOrApp === 'pages' ? 'pages/b.js' : 'app/app/b/page.js'
 
-        await next.patchFile(pagePath, (content) => content.replace('b', 'c'))
+          await next.patchFile(pagePath, (content) => content.replace('b', 'c'))
 
-        await retry(async () => {
-          const wasVisible = await browser.eval('window.showedBuilder')
+          await retry(async () => {
+            const wasVisible = await browser.eval('window.showedBuilder')
 
-          expect(wasVisible).toBe(true)
+            expect(wasVisible).toBe(true)
+          })
         })
       })
     })