chore: add jsdom

Signed-off-by: Logan McAnsh <[email protected]>

Author: mcansh

packages/form-data/package.json

@@ -36,9 +36,11 @@
     "@remix-run/web-blob": "^3.0.4",
     "@remix-run/web-fetch": "^4.2.0",
     "@remix-run/web-file": "^3.0.2",
+    "@types/jsdom": "^16.2.15",
     "@types/node": "15.0.2",
     "git-validate": "2.2.4",
     "husky": "^6.0.0",
+    "jsdom": "^19.0.0",
     "lint-staged": "^11.0.0",
     "playwright-test": "^7.2.0",
     "prettier": "^2.3.0",

packages/form-data/test/form-data.spec.js

@@ -1,6 +1,7 @@
 import { FormData } from "@remix-run/web-form-data";
 import * as lib from "@remix-run/web-form-data";
 import { File, Blob } from "@remix-run/web-file";
+import { JSDOM } from 'jsdom';
 import { assert } from "./test.js";
 
 /**
@@ -239,30 +240,6 @@ export const test = (test) => {
     assert.equal("blob", file.name);
   });
 
-  test("Allows passing a form element", () => {
-    const form = document.createElement("form");
-    const insideInput = document.createElement("input");
-    const outsideInput = document.createElement("input");
-
-    outsideInput.type = "text";
-    outsideInput.name = "form";
-    outsideInput.value = "outside";
-    outsideInput.setAttribute("form", "my-form");
-
-    insideInput.type = "text";
-    insideInput.name = "form";
-    insideInput.value = "inside";
-
-    form.appendChild(insideInput);
-    form.id = "my-form";
-
-    document.body.appendChild(form);
-    document.body.appendChild(outsideInput);
-
-    const formData = new FormData(form);
-    assert.equal(formData.getAll("form"), ["inside", "outside"]);
-  })
-
   test.skip("complicated form", () => {
     const data = new FormData();
     data.append("blobs", new Blob(["basic"]));
@@ -283,4 +260,39 @@ export const test = (test) => {
       "rename.md"
     );
   });
+
+  test("Should allow passing a form element", () => {
+    test.before(() => {
+      const { window } = new JSDOM('<main></main>');
+      // @ts-ignore
+      global.window = window;
+      global.document = window.document;
+      global.navigator = window.navigator;
+      global.getComputedStyle = window.getComputedStyle;
+    })
+
+    test("pass a form element", () => {
+      const form = document.createElement("form");
+      const insideInput = document.createElement("input");
+      const outsideInput = document.createElement("input");
+
+      outsideInput.type = "text";
+      outsideInput.name = "form";
+      outsideInput.value = "outside";
+      outsideInput.setAttribute("form", "my-form");
+
+      insideInput.type = "text";
+      insideInput.name = "form";
+      insideInput.value = "inside";
+
+      form.appendChild(insideInput);
+      form.id = "my-form";
+
+      document.body.appendChild(form);
+      document.body.appendChild(outsideInput);
+
+      const formData = new FormData(form);
+      assert.equal(formData.getAll("form"), ["inside", "outside"]);
+    })
+  })
 };