Added fetch support to JSDOMRunner (#27)

e2e-tests/src/assets/some-data.json

@@ -0,0 +1,4 @@
+{
+  "foo": "bar",
+  "baz": 123
+}

e2e-tests/src/fetch-test.html

@@ -0,0 +1,15 @@
+<m-plane color="pink" width="20" height="20" rx="-90"></m-plane>
+<m-light type="spotlight" ry="45" rx="65" rz="-45" x="10" y="10" z="10"></m-light>
+
+<m-label id="json-content" content="loading" y="4.5" font-size="50" width="10" alignment="center" height="1" color="#dddddd"></m-label>
+
+<script>
+  const contentLabel = document.getElementById("json-content");
+  async function fetchData() {
+    const address = `http://localhost:8079/assets/some-data.json`;
+    const res = await fetch(address);
+    const json = await res.json();
+    contentLabel.setAttribute("content", `${JSON.stringify(json)}`);
+  }
+  fetchData();
+</script>

e2e-tests/test/fetch.test.ts

@@ -0,0 +1,17 @@
+import { takeAndCompareScreenshot } from "./testing-utils";
+
+describe("fetch", () => {
+  test("fetch-ed content", async () => {
+    const page = await globalThis.__BROWSER_GLOBAL__.newPage();
+
+    await page.setViewport({ width: 1024, height: 1024 });
+
+    await page.goto("http://localhost:8079/fetch-test.html/reset");
+
+    const textSelector = await page.waitForSelector("m-label");
+    const fullTitle = await textSelector?.evaluate((el) => el.getAttribute("content"));
+    expect(fullTitle).toEqual(`{"foo":"bar","baz":123}`);
+
+    await page.close();
+  }, 60000);
+});

packages/observable-dom/src/JSDOMRunner.ts

@@ -108,6 +108,11 @@ export class JSDOMRunner {
       beforeParse: (window) => {
         this.domWindow = window;
 
+        this.domWindow.fetch = fetch;
+        this.domWindow.Headers = Headers;
+        this.domWindow.Request = Request;
+        this.domWindow.Response = Response;
+
         // This is a polyfill for https://developer.mozilla.org/en-US/docs/Web/API/Document/timeline
         const timeline = {};
         Object.defineProperty(timeline, "currentTime", {