From 168e557f22c4684b7b6bbd45ad7f74dc6ac93add Mon Sep 17 00:00:00 2001
From: Jon Jensen <jonj@netflix.com>
Date: Thu, 5 Jan 2023 16:44:15 -0700
Subject: [PATCH] test(react-router-dom): streamline jsdom submitter bug
 workaround
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Work around the submitter bug in just one place, and link to my jsdom PR
which will fix it, so that the workaround can be removed sooner rather
than later 🤞

This workaround refactor also establishes a pattern for other jsdom bug
polyfills which will be landing in forthcoming RR PRs (the bugs aren't
relevant in the current test suite, but will be in the PRs 😅)
---
 .changeset/slow-trees-notice.md               |  5 ++
 contributors.yml                              |  1 +
 .../__tests__/data-browser-router-test.tsx    | 77 ++-----------------
 .../polyfills/SubmitEvent.submitter.ts        | 26 +++++++
 packages/react-router-dom/__tests__/setup.ts  |  2 +
 5 files changed, 41 insertions(+), 70 deletions(-)
 create mode 100644 .changeset/slow-trees-notice.md
 create mode 100644 packages/react-router-dom/__tests__/polyfills/SubmitEvent.submitter.ts

diff --git a/.changeset/slow-trees-notice.md b/.changeset/slow-trees-notice.md
new file mode 100644
index 0000000000..5c235db5cb
--- /dev/null
+++ b/.changeset/slow-trees-notice.md
@@ -0,0 +1,5 @@
+---
+"react-router-dom": patch
+---
+
+Streamline jsdom bug workaround in tests
diff --git a/contributors.yml b/contributors.yml
index 866b89355d..d8b827c9b7 100644
--- a/contributors.yml
+++ b/contributors.yml
@@ -74,6 +74,7 @@
 - JakubDrozd
 - janpaepke
 - jasonpaulos
+- jenseng
 - JesusTheHun
 - jimniels
 - jmargeta
diff --git a/packages/react-router-dom/__tests__/data-browser-router-test.tsx b/packages/react-router-dom/__tests__/data-browser-router-test.tsx
index b1c8ebace3..7148b45192 100644
--- a/packages/react-router-dom/__tests__/data-browser-router-test.tsx
+++ b/packages/react-router-dom/__tests__/data-browser-router-test.tsx
@@ -1506,14 +1506,7 @@ function testDomRouter(
       function Comp() {
         let location = useLocation();
         return (
-          <Form
-            onSubmit={(e) => {
-              // jsdom doesn't handle submitter so we add it here
-              // See https://github.com/jsdom/jsdom/issues/3117
-              // @ts-expect-error
-              e.nativeEvent.submitter = e.currentTarget.querySelector("button");
-            }}
-          >
+          <Form>
             <p>{location.pathname + location.search}</p>
             <input name="a" defaultValue="1" />
             <button type="submit" name="b" value="2">
@@ -1587,15 +1580,7 @@ function testDomRouter(
         let location = useLocation();
         let data = useActionData() as string | undefined;
         return (
-          <Form
-            method="post"
-            onSubmit={(e) => {
-              // jsdom doesn't handle submitter so we add it here
-              // See https://github.com/jsdom/jsdom/issues/3117
-              // @ts-expect-error
-              e.nativeEvent.submitter = e.currentTarget.querySelector("button");
-            }}
-          >
+          <Form method="post">
             <p>{location.pathname + location.search}</p>
             {data && <p>{data}</p>}
             <input name="a" defaultValue="1" />
@@ -1683,16 +1668,7 @@ function testDomRouter(
         let navigation = useNavigation();
         return (
           <div>
-            <Form
-              method="post"
-              onSubmit={(e) => {
-                // jsdom doesn't handle submitter so we add it here
-                // See https://github.com/jsdom/jsdom/issues/3117
-                // @ts-expect-error
-                e.nativeEvent.submitter =
-                  e.currentTarget.querySelector("button");
-              }}
-            >
+            <Form method="post">
               <input name="test" value="value" />
               <button type="submit" formMethod="get">
                 Submit Form
@@ -2501,16 +2477,7 @@ function testDomRouter(
 
         function FormPage() {
           return (
-            <Form
-              method="post"
-              onSubmit={(e) => {
-                // jsdom doesn't handle submitter so we add it here
-                // See https://github.com/jsdom/jsdom/issues/3117
-                // @ts-expect-error
-                e.nativeEvent.submitter =
-                  e.currentTarget.querySelector("button");
-              }}
-            >
+            <Form method="post">
               <input name="a" defaultValue="1" />
               <input name="b" defaultValue="2" />
               <button name="c" value="3" type="submit">
@@ -2538,16 +2505,7 @@ function testDomRouter(
         function FormPage() {
           let submit = useSubmit();
           return (
-            <Form
-              method="post"
-              onSubmit={(e) => {
-                // jsdom doesn't handle submitter so we add it here
-                // See https://github.com/jsdom/jsdom/issues/3117
-                // @ts-expect-error
-                e.nativeEvent.submitter =
-                  e.currentTarget.querySelector("button");
-              }}
-            >
+            <Form method="post">
               <input name="a" defaultValue="1" />
               <input name="b" defaultValue="2" />
               <button
@@ -2581,16 +2539,7 @@ function testDomRouter(
 
         function FormPage() {
           return (
-            <Form
-              method="post"
-              onSubmit={(e) => {
-                // jsdom doesn't handle submitter so we add it here
-                // See https://github.com/jsdom/jsdom/issues/3117
-                // @ts-expect-error
-                e.nativeEvent.submitter =
-                  e.currentTarget.querySelector("button");
-              }}
-            >
+            <Form method="post">
               <input name="a" defaultValue="1" />
               <input name="b" defaultValue="2" />
               <button name="b" value="3" type="submit">
@@ -2617,16 +2566,7 @@ function testDomRouter(
         function FormPage() {
           let submit = useSubmit();
           return (
-            <Form
-              method="post"
-              onSubmit={(e) => {
-                // jsdom doesn't handle submitter so we add it here
-                // See https://github.com/jsdom/jsdom/issues/3117
-                // @ts-expect-error
-                e.nativeEvent.submitter =
-                  e.currentTarget.querySelector("button");
-              }}
-            >
+            <Form method="post">
               <input name="a" defaultValue="1" />
               <input name="b" defaultValue="2" />
               <button
@@ -3104,9 +3044,6 @@ function testDomRouter(
           </TestDataRouter>
         );
 
-        // Note: jsdom doesn't properly attach event.submitter for
-        // <button type="submit"> clicks, so we have to use an input to drive
-        // this.  See https://github.com/jsdom/jsdom/issues/3117
         function Comp() {
           let fetcher = useFetcher();
           return (
diff --git a/packages/react-router-dom/__tests__/polyfills/SubmitEvent.submitter.ts b/packages/react-router-dom/__tests__/polyfills/SubmitEvent.submitter.ts
new file mode 100644
index 0000000000..5c5e3ad027
--- /dev/null
+++ b/packages/react-router-dom/__tests__/polyfills/SubmitEvent.submitter.ts
@@ -0,0 +1,26 @@
+// Polyfill jsdom SubmitEvent.submitter, until https://github.com/jsdom/jsdom/pull/3481 is merged
+if (
+  typeof SubmitEvent === "undefined" ||
+  !SubmitEvent.prototype.hasOwnProperty("submitter")
+) {
+  let maybeSubmitter;
+  window.addEventListener(
+    "click",
+    (event) => {
+      if ((event.target as any)?.form) maybeSubmitter = event.target;
+      setImmediate(() => {
+        // if this click doesn't imminently trigger a submit event, then forget it
+        maybeSubmitter = undefined;
+      });
+    },
+    { capture: true }
+  );
+  window.addEventListener(
+    "submit",
+    (event: any) => {
+      if (maybeSubmitter?.form === event.target)
+        event.submitter = maybeSubmitter;
+    },
+    { capture: true }
+  );
+}
diff --git a/packages/react-router-dom/__tests__/setup.ts b/packages/react-router-dom/__tests__/setup.ts
index 0ead4f8f7a..52cf53a073 100644
--- a/packages/react-router-dom/__tests__/setup.ts
+++ b/packages/react-router-dom/__tests__/setup.ts
@@ -1,5 +1,7 @@
 import { fetch, Request, Response } from "@remix-run/web-fetch";
 
+import "./polyfills/SubmitEvent.submitter";
+
 // https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#configuring-your-testing-environment
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;