From 53c1e78da23c562262531848686401060177de4b Mon Sep 17 00:00:00 2001 From: "jj@jjsweb.site" Date: Thu, 18 Nov 2021 12:38:53 -0600 Subject: [PATCH 1/3] Fix accessing router before ready for HMR ping --- packages/next/client/dev/amp-dev.js | 4 ++- .../client/dev/on-demand-entries-client.js | 18 +++++++++--- test/.eslintrc.json | 16 ----------- .../dynamic-routing/test/index.test.js | 28 +++++++++++++++++++ test/lib/browsers/base.ts | 3 ++ test/lib/browsers/playwright.ts | 21 ++++++++++---- 6 files changed, 64 insertions(+), 26 deletions(-) delete mode 100644 test/.eslintrc.json diff --git a/packages/next/client/dev/amp-dev.js b/packages/next/client/dev/amp-dev.js index 89e53bc8aafe5..f9e0c1b9e81cc 100644 --- a/packages/next/client/dev/amp-dev.js +++ b/packages/next/client/dev/amp-dev.js @@ -94,4 +94,6 @@ connectHMR({ path: '/_next/webpack-hmr', }) displayContent() -initOnDemandEntries() + +const data = JSON.parse(document.getElementById('__NEXT_DATA__').textContent) +initOnDemandEntries(data.page) diff --git a/packages/next/client/dev/on-demand-entries-client.js b/packages/next/client/dev/on-demand-entries-client.js index 9d917fe8ff735..349f95f5c22de 100644 --- a/packages/next/client/dev/on-demand-entries-client.js +++ b/packages/next/client/dev/on-demand-entries-client.js @@ -1,10 +1,20 @@ import Router from 'next/router' import { addMessageListener, sendMessage } from './error-overlay/websocket' -export default async () => { - setInterval(() => { - sendMessage(JSON.stringify({ event: 'ping', page: Router.pathname })) - }, 2500) +export default async (page) => { + if (page) { + // in AMP the router isn't initialized on the client and + // client-transitions don't occur so ping initial page + setInterval(() => { + sendMessage(JSON.stringify({ event: 'ping', page })) + }, 2500) + } else { + Router.ready(() => { + setInterval(() => { + sendMessage(JSON.stringify({ event: 'ping', page: Router.pathname })) + }, 2500) + }) + } addMessageListener((event) => { if (event.data.indexOf('{') === -1) return diff --git a/test/.eslintrc.json b/test/.eslintrc.json deleted file mode 100644 index 0a7931deefc6d..0000000000000 --- a/test/.eslintrc.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "extends": ["next"], - "rules": { - "import/no-anonymous-default-export": "off", - "react/display-name": "off", - "@next/next/no-img-element": "off", - "jsx-a11y/alt-text": "off", - "@next/next/no-css-tags": "off", - "@next/next/no-page-custom-font": "off", - "@next/next/no-sync-scripts": "off", - "react/no-unescaped-entities": "off", - "@next/next/no-html-link-for-pages": "off", - "react/no-unknown-property": "off", - "@next/next/google-font-display": "off" - } -} diff --git a/test/integration/dynamic-routing/test/index.test.js b/test/integration/dynamic-routing/test/index.test.js index 07485f5d8913f..00bf9cbf8b3fe 100644 --- a/test/integration/dynamic-routing/test/index.test.js +++ b/test/integration/dynamic-routing/test/index.test.js @@ -28,6 +28,34 @@ const appDir = join(__dirname, '../') const buildIdPath = join(appDir, '.next/BUILD_ID') function runTests(dev) { + if (dev) { + it('should have error after pinging WebSocket', async () => { + const browser = await webdriver(appPort, '/') + await browser.eval(`(function() { + window.uncaughtErrs = [] + window.addEventListener('uncaughtexception', function (err) { + window.uncaught.push(err) + }) + })()`) + const curFrames = [...(await browser.websocketFrames())] + await check(async () => { + const frames = await browser.websocketFrames() + const newFrames = frames.slice(curFrames.length) + // console.error({newFrames, curFrames, frames}); + + return newFrames.some((frame) => { + try { + const data = JSON.parse(frame.payload) + if (data.event === 'pong') return true + } catch (_) {} + }) + ? 'success' + : JSON.stringify(newFrames) + }, 'success') + expect(await browser.eval('window.uncaughtErrs.length')).toBe(0) + }) + } + it('should support long URLs for dynamic routes', async () => { const res = await fetchViaHTTP( appPort, diff --git a/test/lib/browsers/base.ts b/test/lib/browsers/base.ts index a13297b262543..bdebbfed6064a 100644 --- a/test/lib/browsers/base.ts +++ b/test/lib/browsers/base.ts @@ -78,6 +78,9 @@ export class BrowserInterface { async log(): Promise { return [] } + async websocketFrames(): Promise { + return [] + } async url(): Promise { return '' } diff --git a/test/lib/browsers/playwright.ts b/test/lib/browsers/playwright.ts index b62f2deceaeef..45e669226c911 100644 --- a/test/lib/browsers/playwright.ts +++ b/test/lib/browsers/playwright.ts @@ -15,6 +15,7 @@ let page: Page let browser: Browser let context: BrowserContext let pageLogs: Array<{ source: string; message: string }> = [] +let websocketFrames: Array<{ payload: string | Buffer }> = [] const tracePlaywright = process.env.TRACE_PLAYWRIGHT @@ -71,6 +72,7 @@ class Playwright extends BrowserInterface { } page = await context.newPage() pageLogs = [] + websocketFrames = [] page.on('console', (msg) => { console.log('browser log:', msg) @@ -83,25 +85,30 @@ class Playwright extends BrowserInterface { console.error('page error', error) }) - if (tracePlaywright) { - page.on('websocket', (ws) => { + page.on('websocket', (ws) => { + if (tracePlaywright) { page .evaluate(`console.log('connected to ws at ${ws.url()}')`) .catch(() => {}) + ws.on('close', () => page .evaluate(`console.log('closed websocket ${ws.url()}')`) .catch(() => {}) ) - ws.on('framereceived', (frame) => { + } + ws.on('framereceived', (frame) => { + websocketFrames.push({ payload: frame.payload }) + + if (tracePlaywright) { if (!frame.payload.includes('pong')) { page .evaluate(`console.log('received ws message ${frame.payload}')`) .catch(() => {}) } - }) + } }) - } + }) if (tracePlaywright) { await context.tracing.start({ @@ -310,6 +317,10 @@ class Playwright extends BrowserInterface { return this.chain(() => pageLogs) as any } + async websocketFrames() { + return this.chain(() => websocketFrames) as any + } + async url() { return this.chain(() => page.evaluate('window.location.href')) as any } From 40327c24abe3e31795298439192c7e11594b0ebb Mon Sep 17 00:00:00 2001 From: "jj@jjsweb.site" Date: Thu, 18 Nov 2021 12:44:17 -0600 Subject: [PATCH 2/3] update test name --- test/integration/dynamic-routing/test/index.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/integration/dynamic-routing/test/index.test.js b/test/integration/dynamic-routing/test/index.test.js index 00bf9cbf8b3fe..6974c3211ec0b 100644 --- a/test/integration/dynamic-routing/test/index.test.js +++ b/test/integration/dynamic-routing/test/index.test.js @@ -29,7 +29,7 @@ const buildIdPath = join(appDir, '.next/BUILD_ID') function runTests(dev) { if (dev) { - it('should have error after pinging WebSocket', async () => { + it('should not have error after pinging WebSocket', async () => { const browser = await webdriver(appPort, '/') await browser.eval(`(function() { window.uncaughtErrs = [] From 9b633156aac23f86f78ff9a1f03fc8f7600abb29 Mon Sep 17 00:00:00 2001 From: "jj@jjsweb.site" Date: Thu, 18 Nov 2021 12:57:02 -0600 Subject: [PATCH 3/3] lint-fix --- packages/next/client/dev/amp-dev.js | 1 - test/integration/dynamic-routing/test/index.test.js | 3 ++- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/next/client/dev/amp-dev.js b/packages/next/client/dev/amp-dev.js index f9e0c1b9e81cc..0f556b72d9838 100644 --- a/packages/next/client/dev/amp-dev.js +++ b/packages/next/client/dev/amp-dev.js @@ -95,5 +95,4 @@ connectHMR({ }) displayContent() -const data = JSON.parse(document.getElementById('__NEXT_DATA__').textContent) initOnDemandEntries(data.page) diff --git a/test/integration/dynamic-routing/test/index.test.js b/test/integration/dynamic-routing/test/index.test.js index 6974c3211ec0b..7be7e6b00a462 100644 --- a/test/integration/dynamic-routing/test/index.test.js +++ b/test/integration/dynamic-routing/test/index.test.js @@ -46,8 +46,9 @@ function runTests(dev) { return newFrames.some((frame) => { try { const data = JSON.parse(frame.payload) - if (data.event === 'pong') return true + return data.event === 'pong' } catch (_) {} + return false }) ? 'success' : JSON.stringify(newFrames)