Repository: vercel/next.js
Pull request: Tests: Move build-indicator test to test/development

## What?

Move build-indicator test to be isolated using the modern test utils. It's still flaking so ruling out the other causes.


Closes PACK-5427

Changed files:
filename: test/e2e/build-indicator/test/index.test.ts
patch: @@ -0,0 +1,86 @@
+/* eslint-env jest */
+import { join } from 'path'
+import { retry } from 'next-test-utils'
+import { nextTestSetup, isNextDev, isNextStart } from 'e2e-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]')
+      if(!indicator) return
+      window.showedBuilder = window.showedBuilder || (
+        indicator.getAttribute('data-next-mark-loading') === 'true'
+      )
+      if (window.showedBuilder) clearInterval(window.checkInterval)
+    }, 5)
+  })()`)
+}
+
+describe('Build Activity Indicator', () => {
+  // Use describe.skip so that this suite does not fail with "no tests" during deploy tests.
+  ;(isNextStart ? describe : describe.skip)('Invalid position config', () => {
+    const { next } = nextTestSetup({
+      files: join(__dirname, '..'),
+      skipStart: true,
+      startServerTimeout: 1000,
+      nextConfig: {
+        devIndicators: {
+          // Intentionally invalid position to test error
+          position: 'ttop-leff' as any,
+        },
+      },
+    })
+
+    it('should validate position config', async () => {
+      const result = await next.build()
+
+      expect(result.exitCode).toBe(1)
+      expect(result.cliOutput).toContain(
+        `Invalid "devIndicator.position" provided, expected one of top-left, top-right, bottom-left, bottom-right, received ttop-leff`
+      )
+    })
+  })
+
+  if (isNextDev) {
+    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 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 retry(async () => {
+          const wasVisible = await browser.eval('window.showedBuilder')
+
+          expect(wasVisible).toBe(true)
+        })
+      })
+    })
+  }
+})

filename: test/integration/build-indicator/test/index.test.js
patch: @@ -1,115 +0,0 @@
-/* eslint-env jest */
-
-import fs from 'fs-extra'
-import { join } from 'path'
-import webdriver from 'next-webdriver'
-import { findPort, launchApp, killApp, retry } from 'next-test-utils'
-import stripAnsi from 'strip-ansi'
-
-const appDir = join(__dirname, '..')
-const nextConfig = join(appDir, 'next.config.js')
-let appPort
-let app
-
-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('Build Activity Indicator', () => {
-  it('should validate position config', async () => {
-    let stderr = ''
-    const configPath = join(appDir, 'next.config.js')
-    await fs.writeFile(
-      configPath,
-      `
-      module.exports = {
-        devIndicators: {
-          position: 'ttop-leff'
-        }
-      }
-    `
-    )
-    const app = await launchApp(appDir, await findPort(), {
-      onStderr(msg) {
-        stderr += msg
-      },
-    }).catch((err) => {
-      console.error('got err', err)
-    })
-    await fs.remove(configPath)
-
-    await retry(async () => {
-      const content = stripAnsi(stderr)
-      expect(content).toMatch(
-        new RegExp(
-          `Invalid "devIndicator.position" provided, expected one of top-left, top-right, bottom-left, bottom-right, received ttop-leff`
-        )
-      )
-    })
-
-    if (app) {
-      await killApp(app)
-    }
-  })
-
-  describe.each(['pages', 'app'])('Enabled - (%s)', (pagesOrApp) => {
-    beforeAll(async () => {
-      await fs.remove(nextConfig)
-      appPort = await findPort()
-      app = await launchApp(appDir, appPort)
-    })
-    afterAll(() => killApp(app))
-    ;(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 webdriver(
-            appPort,
-            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)
-          })
-
-          await browser.close()
-        })
-      }
-    )
-
-    it('Shows build indicator when page is built from modifying', async () => {
-      const browser = await webdriver(
-        appPort,
-        pagesOrApp === 'pages' ? '/b' : '/app/b'
-      )
-      await installCheckVisible(browser)
-      const pagePath = join(
-        appDir,
-        pagesOrApp === 'pages' ? 'pages/b.js' : 'app/app/b/page.js'
-      )
-      const origContent = await fs.readFile(pagePath, 'utf8')
-      const newContent = origContent.replace('b', 'c')
-
-      await fs.writeFile(pagePath, newContent, 'utf8')
-
-      await retry(async () => {
-        const wasVisible = await browser.eval('window.showedBuilder')
-
-        expect(wasVisible).toBe(true)
-      })
-      await fs.writeFile(pagePath, origContent, 'utf8')
-      await browser.close()
-    })
-  })
-})