From 60071f2e8cf26b88e67383ab2506b32ea17463d2 Mon Sep 17 00:00:00 2001
From: klaasman <mail@klaaslandsman.nl>
Date: Mon, 22 Mar 2021 12:16:56 +0100
Subject: [PATCH 1/3] Fix detection of anchor click events inside svg

---
 packages/next/client/link.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/next/client/link.tsx b/packages/next/client/link.tsx
index d3d018a79d79a79..d761f1a5c44aaa0 100644
--- a/packages/next/client/link.tsx
+++ b/packages/next/client/link.tsx
@@ -86,7 +86,10 @@ function linkClicked(
 ): void {
   const { nodeName } = e.currentTarget
 
-  if (nodeName === 'A' && (isModifiedEvent(e) || !isLocalURL(href))) {
+  // anchors inside an svg have a lowercase nodeName
+  const isAnchorNodeName = nodeName.toUpperCase() === 'A'
+
+  if (isAnchorNodeName && (isModifiedEvent(e) || !isLocalURL(href))) {
     // ignore click for browser’s default behavior
     return
   }

From 3117964490f017652745c9812ab469c25851d729 Mon Sep 17 00:00:00 2001
From: klaasman <mail@klaaslandsman.nl>
Date: Wed, 24 Mar 2021 12:22:18 +0100
Subject: [PATCH 2/3] Write integration test

---
 package.json                                  |  1 +
 .../client-navigation/pages/nav/index.js      | 13 +++++++--
 .../client-navigation/test/index.test.js      | 29 ++++++++++++++++---
 test/lib/next-webdriver.d.ts                  |  4 ++-
 test/lib/wd-chain.js                          | 13 +++++++--
 yarn.lock                                     |  5 ++++
 6 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 591aa3760456a53..54a48960c904767 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "@types/fs-extra": "8.1.0",
     "@types/http-proxy": "1.17.3",
     "@types/jest": "24.0.13",
+    "@types/selenium-webdriver": "4.0.11",
     "@types/string-hash": "1.1.1",
     "@typescript-eslint/eslint-plugin": "2.17.0",
     "@typescript-eslint/parser": "2.17.0",
diff --git a/test/integration/client-navigation/pages/nav/index.js b/test/integration/client-navigation/pages/nav/index.js
index 7326eaf577e0a55..b2c42dd5db46d7c 100644
--- a/test/integration/client-navigation/pages/nav/index.js
+++ b/test/integration/client-navigation/pages/nav/index.js
@@ -78,14 +78,23 @@ export default class extends Component {
         </Link>
         <Link href="/nav/on-click?count=1">
           <a id="on-click-link" style={linkStyle}>
-            A element with onClick
+            An element with onClick
           </a>
         </Link>
         <Link href="/nav/about">
           <a id="target-link" target="_blank">
-            A element with target
+            An element with target
           </a>
         </Link>
+
+        <svg>
+          <Link href="/nav/about">
+            <a id="in-svg-link">
+              <text>An element in SVG</text>
+            </a>
+          </Link>
+        </svg>
+
         <button
           onClick={() => this.visitQueryStringPage()}
           style={linkStyle}
diff --git a/test/integration/client-navigation/test/index.test.js b/test/integration/client-navigation/test/index.test.js
index 3e73719dd690d64..8055a1273d870a0 100644
--- a/test/integration/client-navigation/test/index.test.js
+++ b/test/integration/client-navigation/test/index.test.js
@@ -13,6 +13,7 @@ import {
   check,
 } from 'next-test-utils'
 import webdriver from 'next-webdriver'
+import { Key } from 'selenium-webdriver'
 import { join } from 'path'
 import renderingSuite from './rendering'
 
@@ -210,13 +211,34 @@ describe('Client Navigation', () => {
     it('should not navigate if the <a/> tag has a target', async () => {
       const browser = await webdriver(context.appPort, '/nav')
 
-      const counterText = await browser
+      await browser
         .elementByCss('#increase')
         .click()
         .elementByCss('#target-link')
         .click()
-        .elementByCss('#counter')
-        .text()
+
+      await waitFor(1000)
+
+      const counterText = await browser.elementByCss('#counter').text()
+
+      expect(counterText).toBe('Counter: 1')
+      await browser.close()
+    })
+
+    it('should not navigate if the click-event is modified', async () => {
+      const browser = await webdriver(context.appPort, '/nav')
+
+      await browser
+        .elementByCss('#increase')
+        .click()
+        .elementByCss('#about-link')
+        .click({ modifierKey: Key.COMMAND })
+        .elementByCss('#in-svg-link')
+        .click({ modifierKey: Key.COMMAND })
+
+      await waitFor(1000)
+
+      const counterText = await browser.elementByCss('#counter').text()
 
       expect(counterText).toBe('Counter: 1')
       await browser.close()
@@ -443,7 +465,6 @@ describe('Client Navigation', () => {
       }
     })
   })
-
   describe('resets scroll at the correct time', () => {
     it('should reset scroll before the new page runs its lifecycles (<Link />)', async () => {
       let browser
diff --git a/test/lib/next-webdriver.d.ts b/test/lib/next-webdriver.d.ts
index 08587bdf1b7107b..3a6130d1a0e0be9 100644
--- a/test/lib/next-webdriver.d.ts
+++ b/test/lib/next-webdriver.d.ts
@@ -1,3 +1,5 @@
+import { Key } from 'selenium-webdriver'
+
 interface Chain {
   elementByCss: (selector: string) => Chain
   elementById: () => Chain
@@ -8,7 +10,7 @@ interface Chain {
   getComputedCss: () => Chain
   getAttribute: () => Chain
   hasElementByCssSelector: () => Chain
-  click: () => Chain
+  click: (opts?: { modifierKey?: keyof typeof Key }) => Chain
   elementsByCss: () => Chain
   waitForElementByCss: () => Chain
   eval: () => Chain
diff --git a/test/lib/wd-chain.js b/test/lib/wd-chain.js
index 2dbbdabb6541fab..869aa8a98f9316c 100644
--- a/test/lib/wd-chain.js
+++ b/test/lib/wd-chain.js
@@ -75,9 +75,18 @@ export default class Chain {
     return this.eval(`document.querySelector('${sel}')`)
   }
 
-  click() {
+  click({ modifierKey } = {}) {
     return this.updateChain((el) => {
-      return el.click().then(() => el)
+      if (modifierKey !== undefined) {
+        return this.browser
+          .actions()
+          .keyDown(modifierKey)
+          .click(el)
+          .perform()
+          .then(() => el)
+      } else {
+        return el.click().then(() => el)
+      }
     })
   }
 
diff --git a/yarn.lock b/yarn.lock
index 82fea169295face..e23f669b3325f57 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3190,6 +3190,11 @@
     "@types/glob" "*"
     "@types/node" "*"
 
+"@types/selenium-webdriver@4.0.11":
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-4.0.11.tgz#740d1b3a47badec6784015ee8f3e89d3cb5fd985"
+  integrity sha512-VHv3kVxdploPZRa5Epsrgae9f8Wp0B+TVj3L93Yv0nB2RCRGRTKuhz/vRUZR4yItLqzdIxsxALe3qT3yqTAJTg==
+
 "@types/semver@7.3.1":
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.1.tgz#7a9a5d595b6d873f338c867dcef64df289468cfa"

From b747b66c1243bd29f1f04b1d6f168be948fefda4 Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Sun, 6 Feb 2022 14:17:28 -0600
Subject: [PATCH 3/3] Update test

---
 .../client-navigation/pages/nav/index.js         | 16 +++++++++++++---
 .../client-navigation/test/index.test.js         | 16 ++++++++--------
 test/lib/browsers/base.ts                        | 11 ++++++++++-
 test/lib/browsers/playwright.ts                  | 16 ++++++++++++++++
 4 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/test/integration/client-navigation/pages/nav/index.js b/test/integration/client-navigation/pages/nav/index.js
index b2c42dd5db46d7c..bf4abf1646acfe7 100644
--- a/test/integration/client-navigation/pages/nav/index.js
+++ b/test/integration/client-navigation/pages/nav/index.js
@@ -87,10 +87,20 @@ export default class extends Component {
           </a>
         </Link>
 
-        <svg>
+        <svg
+          width={24}
+          height={24}
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <Link href="/nav/about">
-            <a id="in-svg-link">
-              <text>An element in SVG</text>
+            <a id="in-svg-link" style={{ display: 'block' }}>
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0Zm4.5 18a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"
+                fill="#335BF1"
+              />
             </a>
           </Link>
         </svg>
diff --git a/test/integration/client-navigation/test/index.test.js b/test/integration/client-navigation/test/index.test.js
index 8e416e232f15806..b4b711702e0233a 100644
--- a/test/integration/client-navigation/test/index.test.js
+++ b/test/integration/client-navigation/test/index.test.js
@@ -13,7 +13,6 @@ import {
   check,
 } from 'next-test-utils'
 import webdriver from 'next-webdriver'
-import { Key } from 'selenium-webdriver'
 import { join } from 'path'
 import renderingSuite from './rendering'
 
@@ -198,14 +197,15 @@ describe('Client Navigation', () => {
     it('should not navigate if the click-event is modified', async () => {
       const browser = await webdriver(context.appPort, '/nav')
 
-      await browser
-        .elementByCss('#increase')
-        .click()
-        .elementByCss('#about-link')
-        .click({ modifierKey: Key.COMMAND })
-        .elementByCss('#in-svg-link')
-        .click({ modifierKey: Key.COMMAND })
+      await browser.elementByCss('#increase').click()
+
+      const key = process.platform === 'darwin' ? 'Meta' : 'Control'
+
+      await browser.keydown(key)
+
+      await browser.elementByCss('#in-svg-link').click()
 
+      await browser.keyup(key)
       await waitFor(1000)
 
       const counterText = await browser.elementByCss('#counter').text()
diff --git a/test/lib/browsers/base.ts b/test/lib/browsers/base.ts
index e9abaf63aeb6196..80975aee58ab0f9 100644
--- a/test/lib/browsers/base.ts
+++ b/test/lib/browsers/base.ts
@@ -29,7 +29,16 @@ export class BrowserInterface {
   elementById(selector: string): BrowserInterface {
     return this
   }
-  click(): BrowserInterface {
+  click(opts?: { modifierKey?: boolean }): BrowserInterface {
+    return this
+  }
+  keydown(key: string): BrowserInterface {
+    return this
+  }
+  keyup(key: string): BrowserInterface {
+    return this
+  }
+  focusPage(): BrowserInterface {
     return this
   }
   type(text: string): BrowserInterface {
diff --git a/test/lib/browsers/playwright.ts b/test/lib/browsers/playwright.ts
index 419d865a1872d8a..bcd5ac59730d47f 100644
--- a/test/lib/browsers/playwright.ts
+++ b/test/lib/browsers/playwright.ts
@@ -165,6 +165,10 @@ class Playwright extends BrowserInterface {
     return this.chain(async () => context.clearCookies())
   }
 
+  focusPage() {
+    return this.chain(() => page.bringToFront())
+  }
+
   private wrapElement(el: ElementHandle, selector: string) {
     ;(el as any).selector = selector
     ;(el as any).text = () => el.innerText()
@@ -237,6 +241,18 @@ class Playwright extends BrowserInterface {
     return this.eval(`!!document.querySelector('${selector}')`) as any
   }
 
+  keydown(key: string): BrowserInterface {
+    return this.chain((el) => {
+      return page.keyboard.down(key).then(() => el)
+    })
+  }
+
+  keyup(key: string): BrowserInterface {
+    return this.chain((el) => {
+      return page.keyboard.up(key).then(() => el)
+    })
+  }
+
   click() {
     return this.chain((el) => {
       return el.click().then(() => el)