Make arguments of Native functions optional (#1678)

* Make node optional in Native.fromNode, defaults to window.document * Make window optional in Native.fromWindow, defaults to window
Siteimprove · Sep 2, 2024 · f26c0ec · f26c0ec
1 parent eedabfa
commit f26c0ec
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 8 deletions.
diff --git a/.changeset/neat-papayas-vanish.md b/.changeset/neat-papayas-vanish.md
@@ -0,0 +1,9 @@
+---
+"@siteimprove/alfa-dom": patch
+---
+
+**Added:** `Navive.fromNode` can now be called with no argument, in which case it will default to `window.document`.
+
+It is not possible to provide options this way.
+
+This is useful in settings where the serialisation must be injected into another context (e.g. headless browser), to avoid specifically fetching the document or using a bundler to inject `() => Native.fromNode(window.document)` to read it from inside the other context.
diff --git a/.changeset/rude-hornets-buy.md b/.changeset/rude-hornets-buy.md
@@ -0,0 +1,7 @@
+---
+"@siteimprove/alfa-device": patch
+---
+
+**Added:** `Native.fromWindow` can now be called with no argument and will default to `globalThis.window`.
+
+This is useful in injection contexts where grabbing the window beforehand to inject it is tricky, and bundling a function that wraps `() => Native.fromWindow(window)` to properly serialise it is inconvenient.
diff --git a/packages/alfa-device/src/native.ts b/packages/alfa-device/src/native.ts
@@ -20,25 +20,29 @@ import type { Device, Preference } from "./index.js";
  * @internal
  */
 export namespace Native {
-  export function fromWindow(window: globalThis.Window): Device.JSON {
+  export function fromWindow(
+    myWindow: globalThis.Window = window,
+  ): Device.JSON {
     return toDevice();
 
     function toDevice(): Device.JSON {
       const {
         documentElement: { clientWidth, clientHeight },
-      } = window.document;
+      } = myWindow.document;
 
       return {
         type: "screen",
         viewport: {
           width: clientWidth,
           height: clientHeight,
-          orientation: window.matchMedia("(orientation: landscape)").matches
+          orientation: myWindow.matchMedia("(orientation: landscape)").matches
             ? "landscape"
             : "portrait",
         },
-        display: { resolution: window.devicePixelRatio, scan: "progressive" },
-        scripting: { enabled: !window.matchMedia("(scripting: none)").matches },
+        display: { resolution: myWindow.devicePixelRatio, scan: "progressive" },
+        scripting: {
+          enabled: !myWindow.matchMedia("(scripting: none)").matches,
+        },
         preferences: [...toPreferences()],
       };
     }
@@ -62,7 +66,7 @@ export namespace Native {
       // It seems we need to manually query each preference individually.
       for (const name of Object.keys(preferences) as Array<Preference.Name>) {
         for (const value of preferences[name]) {
-          if (window.matchMedia(`(${name}: ${value})`).matches) {
+          if (myWindow.matchMedia(`(${name}: ${value})`).matches) {
             yield { name, value };
           }
         }

diff --git a/packages/alfa-dom/src/native.ts b/packages/alfa-dom/src/native.ts
@@ -63,7 +63,7 @@ export namespace Native {
   ): Promise<Comment.JSON>;
 
   export async function fromNode(
-    node: globalThis.Document,
+    node?: globalThis.Document,
     options?: Options,
   ): Promise<Document.JSON>;
 
@@ -78,7 +78,7 @@ export namespace Native {
   ): Promise<Node.JSON>;
 
   export async function fromNode(
-    node: globalThis.Node,
+    node: globalThis.Node = globalThis.window.document,
     options?: Options,
   ): Promise<Node.JSON> {
     const { withCrossOrigin = false } = options ?? {};

diff --git a/packages/alfa-dom/test/native.spec.tsx b/packages/alfa-dom/test/native.spec.tsx
@@ -63,6 +63,30 @@ test("Native.fromNode() builds a simple document", async (t) => {
   );
 });
 
+test("Native.fromNode() uses global document if none is provided", async (t) => {
+  const html = "<div id='hello' class='foo'>Hello</div>";
+  // JSDOM DOMWindow is indeed not really compatible with globalThis.window but
+  // for the part we use here, it is sufficient.
+  globalThis.window = new JSDOM(html).window as any;
+  const actual = Node.from(await Native.fromNode()).toJSON();
+
+  t.deepEqual(
+    actual,
+    h
+      .document([
+        <html>
+          <head></head>
+          <body>
+            <div id="hello" class="foo">
+              Hello
+            </div>
+          </body>
+        </html>,
+      ])
+      .toJSON(),
+  );
+});
+
 test("Native.fromNode() builds a document with element's style", async (t) => {
   const actual = await makeJSON("<div style='color: red'>Hello</div>");