fix development mode bug with pages with "+" and other special charac…

…ters (#28122)

* add encodeURIComponent so certain characters don't bug out (fixes #22099)

* add integration test for pr #28122

packages/next/client/dev/on-demand-entries-utils.js

@@ -19,7 +19,9 @@ export function setupPing(assetPrefix, pathnameFn, retry) {
   closePing()
 
   evtSource = getEventSourceWrapper({
-    path: `${assetPrefix}/_next/webpack-hmr?page=${currentPage}`,
+    path: `${assetPrefix}/_next/webpack-hmr?page=${encodeURIComponent(
+      currentPage
+    )}`,
     timeout: 5000,
   })
 

test/integration/development-hmr-refresh/pages/with+Special&Chars=.js

@@ -0,0 +1,9 @@
+export default function Page() {
+  return (
+    <>
+      if this page reloads during development mode, then the browser did not
+      connect to the on demand entries handler. see on-demand-entry-handler.ts
+      and on-demand-entries-utils.js
+    </>
+  )
+}

test/integration/development-hmr-refresh/test/index.test.js

@@ -0,0 +1,30 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import webdriver from 'next-webdriver'
+import { findPort, launchApp, killApp, waitFor } from 'next-test-utils'
+
+jest.setTimeout(1000 * 60 * 2)
+
+const appDir = join(__dirname, '../')
+
+let app
+let appPort
+
+beforeAll(async () => {
+  appPort = await findPort()
+  app = await launchApp(appDir, appPort)
+})
+
+// see issue #22099
+it('page should not reload when the file is not changed', async () => {
+  const browser = await webdriver(appPort, '/with+Special&Chars=')
+
+  browser.eval(`window.doesNotReloadCheck = true`)
+
+  await waitFor(10000)
+
+  expect(await browser.eval('window.doesNotReloadCheck')).toBe(true)
+})
+
+afterAll(() => killApp(app))