From 8f6dd894b2936d1c0aa73bb139b0aabfb35b78ce Mon Sep 17 00:00:00 2001
From: Jiwon Choi <devjiwonchoi@gmail.com>
Date: Tue, 10 Dec 2024 07:05:50 +0900
Subject: [PATCH] test: move HMR Full Reload test to a separate file (#73591)

> [!NOTE]
> The "Test new tests for flakes" may fail due to the number of tests in
a single `hmr.test.ts` file.
> The follow-up stacks are to resolve the issue.

### Why?

Moved to a separate file to run the test in parallel.
---
 test/development/basic/hmr.test.ts            | 84 ----------------
 .../development/basic/hmr/full-reload.test.ts | 96 +++++++++++++++++++
 2 files changed, 96 insertions(+), 84 deletions(-)
 create mode 100644 test/development/basic/hmr/full-reload.test.ts

diff --git a/test/development/basic/hmr.test.ts b/test/development/basic/hmr.test.ts
index e84d32c202851..ca8b5010f5f87 100644
--- a/test/development/basic/hmr.test.ts
+++ b/test/development/basic/hmr.test.ts
@@ -1147,90 +1147,6 @@ describe.each([
     })
   })
 
-  describe('Full reload', () => {
-    it('should warn about full reload in cli output - anonymous page function', async () => {
-      const start = next.cliOutput.length
-      const browser = await webdriver(
-        next.url,
-        basePath + '/hmr/anonymous-page-function'
-      )
-      const cliWarning =
-        'Fast Refresh had to perform a full reload when ./pages/hmr/anonymous-page-function.js changed. Read more: https://nextjs.org/docs/messages/fast-refresh-reload'
-
-      expect(await browser.elementByCss('p').text()).toBe('hello world')
-      expect(next.cliOutput.slice(start)).not.toContain(cliWarning)
-
-      const currentFileContent = await next.readFile(
-        './pages/hmr/anonymous-page-function.js'
-      )
-      const newFileContent = currentFileContent.replace(
-        '<p>hello world</p>',
-        '<p id="updated">hello world!!!</p>'
-      )
-      await next.patchFile(
-        './pages/hmr/anonymous-page-function.js',
-        newFileContent
-      )
-
-      expect(await browser.waitForElementByCss('#updated').text()).toBe(
-        'hello world!!!'
-      )
-
-      // CLI warning
-      expect(next.cliOutput.slice(start)).toContain(cliWarning)
-
-      // Browser warning
-      const browserLogs = await browser.log()
-      expect(
-        browserLogs.some(({ message }) =>
-          message.includes(
-            "Fast Refresh will perform a full reload when you edit a file that's imported by modules outside of the React rendering tree."
-          )
-        )
-      ).toBeTruthy()
-    })
-
-    it('should warn about full reload in cli output - runtime-error', async () => {
-      const start = next.cliOutput.length
-      const browser = await webdriver(next.url, basePath + '/hmr/runtime-error')
-      const cliWarning =
-        'Fast Refresh had to perform a full reload due to a runtime error.'
-
-      await retry(async () => {
-        expect(await getRedboxHeader(browser)).toMatch(
-          /ReferenceError: whoops is not defined/
-        )
-      })
-      expect(next.cliOutput.slice(start)).not.toContain(cliWarning)
-
-      const currentFileContent = await next.readFile(
-        './pages/hmr/runtime-error.js'
-      )
-      const newFileContent = currentFileContent.replace(
-        'whoops',
-        '<p id="updated">whoops</p>'
-      )
-      await next.patchFile('./pages/hmr/runtime-error.js', newFileContent)
-
-      expect(await browser.waitForElementByCss('#updated').text()).toBe(
-        'whoops'
-      )
-
-      // CLI warning
-      expect(next.cliOutput.slice(start)).toContain(cliWarning)
-
-      // Browser warning
-      const browserLogs = await browser.log()
-      expect(
-        browserLogs.some(({ message }) =>
-          message.includes(
-            '[Fast Refresh] performing full reload because your application had an unrecoverable error'
-          )
-        )
-      ).toBeTruthy()
-    })
-  })
-
   if (!process.env.TURBOPACK) {
     it('should have client HMR events in trace file', async () => {
       const traceData = await next.readFile('.next/trace')
diff --git a/test/development/basic/hmr/full-reload.test.ts b/test/development/basic/hmr/full-reload.test.ts
new file mode 100644
index 0000000000000..adc5b088b73f8
--- /dev/null
+++ b/test/development/basic/hmr/full-reload.test.ts
@@ -0,0 +1,96 @@
+import type { NextConfig } from 'next'
+import { getRedboxHeader, retry } from 'next-test-utils'
+import { nextTestSetup } from 'e2e-utils'
+
+describe.each([
+  { basePath: '', assetPrefix: '' },
+  { basePath: '', assetPrefix: '/asset-prefix' },
+  { basePath: '/docs', assetPrefix: '' },
+  { basePath: '/docs', assetPrefix: '/asset-prefix' },
+])('HMR - Full Reload, nextConfig: %o', (nextConfig: Partial<NextConfig>) => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+    nextConfig,
+    patchFileDelay: 500,
+  })
+  const { basePath } = nextConfig
+
+  it('should warn about full reload in cli output - anonymous page function', async () => {
+    const start = next.cliOutput.length
+    const browser = await next.browser(
+      basePath + '/hmr/anonymous-page-function'
+    )
+    const cliWarning =
+      'Fast Refresh had to perform a full reload when ./pages/hmr/anonymous-page-function.js changed. Read more: https://nextjs.org/docs/messages/fast-refresh-reload'
+
+    expect(await browser.elementByCss('p').text()).toBe('hello world')
+    expect(next.cliOutput.slice(start)).not.toContain(cliWarning)
+
+    const currentFileContent = await next.readFile(
+      './pages/hmr/anonymous-page-function.js'
+    )
+    const newFileContent = currentFileContent.replace(
+      '<p>hello world</p>',
+      '<p id="updated">hello world!!!</p>'
+    )
+    await next.patchFile(
+      './pages/hmr/anonymous-page-function.js',
+      newFileContent
+    )
+
+    expect(await browser.waitForElementByCss('#updated').text()).toBe(
+      'hello world!!!'
+    )
+
+    // CLI warning
+    expect(next.cliOutput.slice(start)).toContain(cliWarning)
+
+    // Browser warning
+    const browserLogs = await browser.log()
+    expect(
+      browserLogs.some(({ message }) =>
+        message.includes(
+          "Fast Refresh will perform a full reload when you edit a file that's imported by modules outside of the React rendering tree."
+        )
+      )
+    ).toBeTruthy()
+  })
+
+  it('should warn about full reload in cli output - runtime-error', async () => {
+    const start = next.cliOutput.length
+    const browser = await next.browser(basePath + '/hmr/runtime-error')
+    const cliWarning =
+      'Fast Refresh had to perform a full reload due to a runtime error.'
+
+    await retry(async () => {
+      expect(await getRedboxHeader(browser)).toMatch(
+        /ReferenceError: whoops is not defined/
+      )
+    })
+    expect(next.cliOutput.slice(start)).not.toContain(cliWarning)
+
+    const currentFileContent = await next.readFile(
+      './pages/hmr/runtime-error.js'
+    )
+    const newFileContent = currentFileContent.replace(
+      'whoops',
+      '<p id="updated">whoops</p>'
+    )
+    await next.patchFile('./pages/hmr/runtime-error.js', newFileContent)
+
+    expect(await browser.waitForElementByCss('#updated').text()).toBe('whoops')
+
+    // CLI warning
+    expect(next.cliOutput.slice(start)).toContain(cliWarning)
+
+    // Browser warning
+    const browserLogs = await browser.log()
+    expect(
+      browserLogs.some(({ message }) =>
+        message.includes(
+          '[Fast Refresh] performing full reload because your application had an unrecoverable error'
+        )
+      )
+    ).toBeTruthy()
+  })
+})