From 5dc5ef062633a7677a62256041c76c60684578dd Mon Sep 17 00:00:00 2001 From: devjiwonchoi Date: Sat, 7 Dec 2024 02:20:05 +0900 Subject: [PATCH] test: split basic HMR test into multiple files --- ...basic-no-base-path-no-asset-prefix.test.ts | 0 ...asic-no-base-path-yes-asset-prefix.test.ts | 113 ++++++++++++++++++ ...asic-yes-base-path-no-asset-prefix.test.ts | 113 ++++++++++++++++++ ...sic-yes-base-path-yes-asset-prefix.test.ts | 113 ++++++++++++++++++ 4 files changed, 339 insertions(+) create mode 100644 test/development/basic/hmr/basic-no-base-path-no-asset-prefix.test.ts create mode 100644 test/development/basic/hmr/basic-no-base-path-yes-asset-prefix.test.ts create mode 100644 test/development/basic/hmr/basic-yes-base-path-no-asset-prefix.test.ts create mode 100644 test/development/basic/hmr/basic-yes-base-path-yes-asset-prefix.test.ts diff --git a/test/development/basic/hmr/basic-no-base-path-no-asset-prefix.test.ts b/test/development/basic/hmr/basic-no-base-path-no-asset-prefix.test.ts new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/test/development/basic/hmr/basic-no-base-path-yes-asset-prefix.test.ts b/test/development/basic/hmr/basic-no-base-path-yes-asset-prefix.test.ts new file mode 100644 index 00000000000000..7187168823ebaf --- /dev/null +++ b/test/development/basic/hmr/basic-no-base-path-yes-asset-prefix.test.ts @@ -0,0 +1,113 @@ +import { join } from 'path' +import { + assertHasRedbox, + getBrowserBodyText, + retry, + waitFor, +} from 'next-test-utils' +import { createNext, nextTestSetup } from 'e2e-utils' + +const nextConfig = { basePath: '', assetPrefix: '/asset-prefix' } + +describe(`HMR - basic, nextConfig: ${JSON.stringify(nextConfig)}`, () => { + const { next } = nextTestSetup({ + files: join(__dirname, '../../fixtures'), + nextConfig, + patchFileDelay: 500, + }) + const { basePath } = nextConfig + + it('should have correct router.isReady for auto-export page', async () => { + let browser = await next.browser(basePath + '/auto-export-is-ready') + + expect(await browser.elementByCss('#ready').text()).toBe('yes') + expect(JSON.parse(await browser.elementByCss('#query').text())).toEqual({}) + + browser = await next.browser(basePath + '/auto-export-is-ready?hello=world') + + await retry(async () => { + expect(await browser.elementByCss('#ready').text()).toBe('yes') + }) + expect(JSON.parse(await browser.elementByCss('#query').text())).toEqual({ + hello: 'world', + }) + }) + + it('should have correct router.isReady for getStaticProps page', async () => { + let browser = await next.browser(basePath + '/gsp-is-ready') + + expect(await browser.elementByCss('#ready').text()).toBe('yes') + expect(JSON.parse(await browser.elementByCss('#query').text())).toEqual({}) + + browser = await next.browser(basePath + '/gsp-is-ready?hello=world') + + await retry(async () => { + expect(await browser.elementByCss('#ready').text()).toBe('yes') + }) + expect(JSON.parse(await browser.elementByCss('#query').text())).toEqual({ + hello: 'world', + }) + }) + + it('should have correct compile timing after fixing error', async () => { + const pageName = 'pages/auto-export-is-ready.js' + const originalContent = await next.readFile(pageName) + + try { + const browser = await next.browser(basePath + '/auto-export-is-ready') + const outputLength = next.cliOutput.length + await next.patchFile( + pageName, + `import hello from 'non-existent'\n` + originalContent + ) + await assertHasRedbox(browser) + await waitFor(3000) + await next.patchFile(pageName, originalContent) + await retry(async () => { + expect(next.cliOutput.substring(outputLength)).toMatch(/Compiled.*?/i) + }) + const compileTimeStr = next.cliOutput.substring(outputLength) + + const matches = [ + ...compileTimeStr.match(/Compiled.*? in ([\d.]{1,})\s?(?:s|ms)/i), + ] + const [, compileTime, timeUnit] = matches + + let compileTimeMs = parseFloat(compileTime) + if (timeUnit === 's') { + compileTimeMs = compileTimeMs * 1000 + } + expect(compileTimeMs).toBeLessThan(3000) + } finally { + await next.patchFile(pageName, originalContent) + } + }) + + it('should reload the page when the server restarts', async () => { + const browser = await next.browser(basePath + '/hmr/about') + await retry(async () => { + expect(await getBrowserBodyText(browser)).toMatch( + /This is the about page/ + ) + }) + + await next.destroy() + + let reloadPromise = new Promise((resolve) => { + browser.on('request', (req) => { + if (req.url().endsWith('/hmr/about')) { + resolve(req.url()) + } + }) + }) + + const secondNext = await createNext({ + files: join(__dirname, '../../fixtures'), + nextConfig, + forcedPort: next.appPort, + }) + + await reloadPromise + await secondNext.destroy() + }) +}) diff --git a/test/development/basic/hmr/basic-yes-base-path-no-asset-prefix.test.ts b/test/development/basic/hmr/basic-yes-base-path-no-asset-prefix.test.ts new file mode 100644 index 00000000000000..233ad493f6fbff --- /dev/null +++ b/test/development/basic/hmr/basic-yes-base-path-no-asset-prefix.test.ts @@ -0,0 +1,113 @@ +import { join } from 'path' +import { + assertHasRedbox, + getBrowserBodyText, + retry, + waitFor, +} from 'next-test-utils' +import { createNext, nextTestSetup } from 'e2e-utils' + +const nextConfig = { basePath: '/docs', assetPrefix: '' } + +describe(`HMR - basic, nextConfig: ${JSON.stringify(nextConfig)}`, () => { + const { next } = nextTestSetup({ + files: join(__dirname, '../../fixtures'), + nextConfig, + patchFileDelay: 500, + }) + const { basePath } = nextConfig + + it('should have correct router.isReady for auto-export page', async () => { + let browser = await next.browser(basePath + '/auto-export-is-ready') + + expect(await browser.elementByCss('#ready').text()).toBe('yes') + expect(JSON.parse(await browser.elementByCss('#query').text())).toEqual({}) + + browser = await next.browser(basePath + '/auto-export-is-ready?hello=world') + + await retry(async () => { + expect(await browser.elementByCss('#ready').text()).toBe('yes') + }) + expect(JSON.parse(await browser.elementByCss('#query').text())).toEqual({ + hello: 'world', + }) + }) + + it('should have correct router.isReady for getStaticProps page', async () => { + let browser = await next.browser(basePath + '/gsp-is-ready') + + expect(await browser.elementByCss('#ready').text()).toBe('yes') + expect(JSON.parse(await browser.elementByCss('#query').text())).toEqual({}) + + browser = await next.browser(basePath + '/gsp-is-ready?hello=world') + + await retry(async () => { + expect(await browser.elementByCss('#ready').text()).toBe('yes') + }) + expect(JSON.parse(await browser.elementByCss('#query').text())).toEqual({ + hello: 'world', + }) + }) + + it('should have correct compile timing after fixing error', async () => { + const pageName = 'pages/auto-export-is-ready.js' + const originalContent = await next.readFile(pageName) + + try { + const browser = await next.browser(basePath + '/auto-export-is-ready') + const outputLength = next.cliOutput.length + await next.patchFile( + pageName, + `import hello from 'non-existent'\n` + originalContent + ) + await assertHasRedbox(browser) + await waitFor(3000) + await next.patchFile(pageName, originalContent) + await retry(async () => { + expect(next.cliOutput.substring(outputLength)).toMatch(/Compiled.*?/i) + }) + const compileTimeStr = next.cliOutput.substring(outputLength) + + const matches = [ + ...compileTimeStr.match(/Compiled.*? in ([\d.]{1,})\s?(?:s|ms)/i), + ] + const [, compileTime, timeUnit] = matches + + let compileTimeMs = parseFloat(compileTime) + if (timeUnit === 's') { + compileTimeMs = compileTimeMs * 1000 + } + expect(compileTimeMs).toBeLessThan(3000) + } finally { + await next.patchFile(pageName, originalContent) + } + }) + + it('should reload the page when the server restarts', async () => { + const browser = await next.browser(basePath + '/hmr/about') + await retry(async () => { + expect(await getBrowserBodyText(browser)).toMatch( + /This is the about page/ + ) + }) + + await next.destroy() + + let reloadPromise = new Promise((resolve) => { + browser.on('request', (req) => { + if (req.url().endsWith('/hmr/about')) { + resolve(req.url()) + } + }) + }) + + const secondNext = await createNext({ + files: join(__dirname, '../../fixtures'), + nextConfig, + forcedPort: next.appPort, + }) + + await reloadPromise + await secondNext.destroy() + }) +}) diff --git a/test/development/basic/hmr/basic-yes-base-path-yes-asset-prefix.test.ts b/test/development/basic/hmr/basic-yes-base-path-yes-asset-prefix.test.ts new file mode 100644 index 00000000000000..025a10bcd31638 --- /dev/null +++ b/test/development/basic/hmr/basic-yes-base-path-yes-asset-prefix.test.ts @@ -0,0 +1,113 @@ +import { join } from 'path' +import { + assertHasRedbox, + getBrowserBodyText, + retry, + waitFor, +} from 'next-test-utils' +import { createNext, nextTestSetup } from 'e2e-utils' + +const nextConfig = { basePath: '/docs', assetPrefix: '/asset-prefix' } + +describe(`HMR - basic, nextConfig: ${JSON.stringify(nextConfig)}`, () => { + const { next } = nextTestSetup({ + files: join(__dirname, '../../fixtures'), + nextConfig, + patchFileDelay: 500, + }) + const { basePath } = nextConfig + + it('should have correct router.isReady for auto-export page', async () => { + let browser = await next.browser(basePath + '/auto-export-is-ready') + + expect(await browser.elementByCss('#ready').text()).toBe('yes') + expect(JSON.parse(await browser.elementByCss('#query').text())).toEqual({}) + + browser = await next.browser(basePath + '/auto-export-is-ready?hello=world') + + await retry(async () => { + expect(await browser.elementByCss('#ready').text()).toBe('yes') + }) + expect(JSON.parse(await browser.elementByCss('#query').text())).toEqual({ + hello: 'world', + }) + }) + + it('should have correct router.isReady for getStaticProps page', async () => { + let browser = await next.browser(basePath + '/gsp-is-ready') + + expect(await browser.elementByCss('#ready').text()).toBe('yes') + expect(JSON.parse(await browser.elementByCss('#query').text())).toEqual({}) + + browser = await next.browser(basePath + '/gsp-is-ready?hello=world') + + await retry(async () => { + expect(await browser.elementByCss('#ready').text()).toBe('yes') + }) + expect(JSON.parse(await browser.elementByCss('#query').text())).toEqual({ + hello: 'world', + }) + }) + + it('should have correct compile timing after fixing error', async () => { + const pageName = 'pages/auto-export-is-ready.js' + const originalContent = await next.readFile(pageName) + + try { + const browser = await next.browser(basePath + '/auto-export-is-ready') + const outputLength = next.cliOutput.length + await next.patchFile( + pageName, + `import hello from 'non-existent'\n` + originalContent + ) + await assertHasRedbox(browser) + await waitFor(3000) + await next.patchFile(pageName, originalContent) + await retry(async () => { + expect(next.cliOutput.substring(outputLength)).toMatch(/Compiled.*?/i) + }) + const compileTimeStr = next.cliOutput.substring(outputLength) + + const matches = [ + ...compileTimeStr.match(/Compiled.*? in ([\d.]{1,})\s?(?:s|ms)/i), + ] + const [, compileTime, timeUnit] = matches + + let compileTimeMs = parseFloat(compileTime) + if (timeUnit === 's') { + compileTimeMs = compileTimeMs * 1000 + } + expect(compileTimeMs).toBeLessThan(3000) + } finally { + await next.patchFile(pageName, originalContent) + } + }) + + it('should reload the page when the server restarts', async () => { + const browser = await next.browser(basePath + '/hmr/about') + await retry(async () => { + expect(await getBrowserBodyText(browser)).toMatch( + /This is the about page/ + ) + }) + + await next.destroy() + + let reloadPromise = new Promise((resolve) => { + browser.on('request', (req) => { + if (req.url().endsWith('/hmr/about')) { + resolve(req.url()) + } + }) + }) + + const secondNext = await createNext({ + files: join(__dirname, '../../fixtures'), + nextConfig, + forcedPort: next.appPort, + }) + + await reloadPromise + await secondNext.destroy() + }) +})