chore: use real HTMLFormElement in the browser

Signed-off-by: Logan McAnsh <logan@mcan.sh>
remix-run · Dec 1, 2022 · 31a3c7d · 31a3c7d
1 parent 780fdc6
commit 31a3c7d
Showing 1 changed file with 60 additions and 31 deletions.
diff --git a/packages/form-data/test/form-data.spec.js b/packages/form-data/test/form-data.spec.js
@@ -260,41 +260,70 @@ export const test = (test) => {
     );
   });
 
-  test("Should allow passing a form element",  () => {
-    class FakeForm {
-      get [Symbol.toStringTag]() {
-        return "HTMLFormElement";
+  test("Should allow passing a form element", () => {
+    /** @type {globalThis.HTMLFormElement} */
+    let form;
+
+    if (typeof window === 'undefined') {
+      /** @implements {globalThis.HTMLFormElement} */
+      class FakeForm {
+        get [Symbol.toStringTag]() {
+          return "HTMLFormElement";
+        }
+
+        toString() {
+          return `<form></form>`;
+        }
+
+        // @ts-ignore
+        get elements() {
+          return [
+            {
+              tagName: "INPUT",
+              name: "inside",
+              value: "",
+            },
+            {
+              tagName: "INPUT",
+              name: "outside",
+              value: "",
+              form: "my-form",
+            },
+            {
+              tagName: "INPUT",
+              name: "remember-me",
+              value: "on",
+              checked: true,
+            }
+          ]
+        }
+
+        get id() {
+          return "my-form"
+        }
       }
 
-      get elements() {
-        return [
-          {
-            tagName: "INPUT",
-            name: "inside",
-            value: "",
-          },
-          {
-            tagName: "INPUT",
-            name: "outside",
-            value: "",
-            form: "my-form",
-          },
-          {
-            tagName: "INPUT",
-            name: "remember-me",
-            value: "on",
-            checked: true,
-          }
-        ]
-      }
-
-      get id() {
-        return "my-form"
-      }
+      form = /** @type {globalThis.HTMLFormElement} */ (/** @type {unknown} */ (new FakeForm()))
+    } else {
+      form = document.createElement('form');
+      let inside = document.createElement('input')
+      let outside = document.createElement('input')
+      let checkbox = document.createElement('input')
+
+      form.id = 'my-form'
+      inside.name = 'inside'
+      outside.name = 'outside'
+      outside.setAttribute('form', 'my-form')
+      checkbox.name = "remember-me"
+      checkbox.type = 'checkbox'
+      checkbox.checked = true;
+
+      form.appendChild(inside);
+      form.appendChild(checkbox);
+      document.body.appendChild(form);
+      document.body.appendChild(outside);
     }
 
-    let form = /** @type {globalThis.HTMLFormElement} */ (/** @type {unknown} */ (new FakeForm()))
-
     const formData = new FormData(form);
     assert.equal(formData.has("inside"), true)
     assert.equal(formData.has("outside"), true)