@uniflowed/react-testing 0.0.0-alpha.2 → 0.0.0-alpha.5

package/internal/dom.js

@@ -14,6 +14,67 @@
 
 import { Window } from "happy-dom";
 
+/**
+ * A function this module found on a window and knows nothing else about.
+ *
+ * `mixed` in and `mixed` out is the whole contract: these are copied across
+ * for React and for components to call, and nothing here ever calls one.
+ */
+type HostFunction = (...args: $ReadOnlyArray<mixed>) => mixed;
+
+/**
+ * Values kept by name, which is all this module knows about a window, the
+ * global object, or a Storage.
+ *
+ * The indexer is the honest shape rather than a placeholder for a type nobody
+ * wrote: the work this module does is to read names out of a list and hand the
+ * values to `Object.defineProperty`. It does not call them, construct them, or
+ * look inside them, so `mixed` is the amount it knows.
+ */
+type Named = { readonly [string]: mixed };
+
+/**
+ * A window, as this module uses one.
+ *
+ * A table of globals to copy, plus the three functions that are *bound* rather
+ * than copied — and those are named because binding is the one thing an
+ * indexer cannot describe. `typeof win[name] === "function"` refines a `mixed`
+ * to a function whose parameters Flow does not know, and `.bind` is not
+ * something that can be done to one of those:
+ *
+ *     error[incompatible-use]: Cannot call `value.bind` because
+ *     `unknown function` is not a function type.
+ *
+ * So the list of functions to bind, which used to be a `FUNCTIONS` array
+ * beside the other three arrays, is this part of the type instead. One list
+ * rather than two, and it is the one the checker reads.
+ *
+ * `happy-dom` ships TypeScript rather than Flow, so `new Window(…)` is `any`.
+ * This annotation is the first statement anywhere about what comes back, not a
+ * cast that discards one.
+ */
+type HostWindow = {
+  readonly getComputedStyle?: HostFunction,
+  readonly requestAnimationFrame?: HostFunction,
+  readonly cancelAnimationFrame?: HostFunction,
+  readonly [string]: mixed,
+};
+
+/**
+ * The global object, under the one description this module has of it.
+ *
+ * `globalThis` is a namespace to the checker rather than an object, so
+ * `globalThis[name]` is not an expression that can be written —
+ * `Cannot access namespace globalThis with computed property using string` —
+ * and reading an installed global by a name from a list is what deciding
+ * whether to install one requires. Naming the same object as a table says what
+ * those reads are: a name in, and no claim at all about what comes out.
+ *
+ * Writes still go through `define`, because they have to be
+ * `Object.defineProperty`; see the reason there.
+ */
+const globals: Named = globalThis;
+
 /**
  * The document's own classes, which always replace whatever the host had.
  *
@@ -22,6 +83,14 @@ import { Window } from "happy-dom";
  * "parameter 1 is not of type 'Event'" for every event this module had no more
  * specific constructor for. Whatever the host already had, the document's own
  * classes are the ones that work with the document.
+ *
+ * The list is also the list of questions the rest of the package can ask.
+ * `internal/queries.js` and `internal/events.js` narrow an `Element` with
+ * `instanceof HTMLInputElement` rather than reading `.value` off a cast, and
+ * an `instanceof` against a name that was never installed is not a `false` —
+ * it is `ReferenceError: HTMLFieldSetElement is not defined`, from a line
+ * about clicking a tab. So a class this package needs to *recognise* belongs
+ * here as much as one the document needs to accept.
  */
 const CLASSES = [
   "Node",
@@ -31,6 +100,7 @@ const CLASSES = [
   "HTMLTextAreaElement",
   "HTMLSelectElement",
   "HTMLButtonElement",
+  "HTMLFieldSetElement",
   "HTMLAnchorElement",
   "SVGElement",
   "Event",
@@ -47,11 +117,6 @@ const CLASSES = [
   "IntersectionObserver",
 ];
 
-/**
- * Functions that read the window they came from, so they are bound to it.
- */
-const FUNCTIONS = ["getComputedStyle", "requestAnimationFrame", "cancelAnimationFrame"];
-
 /**
  * Objects a page has, installed only where the host has none.
  *
@@ -59,9 +124,47 @@ const FUNCTIONS = ["getComputedStyle", "requestAnimationFrame", "cancelAnimation
  * with no setter, and assigning to it throws. A test does not need it
  * replaced — it needs it to exist.
  */
-const OBJECTS = ["location", "history", "localStorage", "sessionStorage", "navigator"];
+const OBJECTS = ["location", "history", "navigator"];
 
-let installed: mixed = null;
+/**
+ * Storage, which is installed where the host has none *or has one that does
+ * not work*.
+ *
+ * Node defines `globalThis.localStorage` and leaves it empty unless the
+ * process was started with `--localstorage-file`:
+ *
+ * ```text
+ * typeof globalThis.localStorage        // "object"
+ * globalThis.localStorage.setItem       // undefined
+ * ```
+ *
+ * So "the host already has one" is the wrong question, and asking it left
+ * every `useStorage` test writing into an object with no `setItem` —
+ * `globalThis.localStorage.setItem is not a function`, from a line that had
+ * nothing to do with the hook under test. The question is whether it works.
+ */
+const STORAGE = ["localStorage", "sessionStorage"];
+
+/**
+ * Whether a value is a Storage a test can actually use.
+ *
+ * The four methods, not one: a half-implemented shim that has `getItem` and
+ * no `removeItem` fails later and further away than one that is absent.
+ */
+function isUsableStorage(value: mixed): boolean {
+  if (value == null || typeof value !== "object") {
+    return false;
+  }
+  const storage: Named = value;
+  return (
+    typeof storage.getItem === "function" &&
+    typeof storage.setItem === "function" &&
+    typeof storage.removeItem === "function" &&
+    typeof storage.clear === "function"
+  );
+}
+
+let installed: HostWindow | null = null;
 
 /**
  * Install a DOM on the global object, once.
@@ -71,7 +174,8 @@ let installed: mixed = null;
  * not replace the document — replacing it mid-process would strand every React
  * root already mounted in the old one.
  */
-export function installDom(): mixed {
+export function installDom(): HostWindow {
+  installActEnvironment();
   if (installed != null) {
     return installed;
   }
@@ -83,36 +187,83 @@ export function installDom(): mixed {
     return installed;
   }
 
-  const win = new Window({ url: "http://localhost/" });
+  const win: HostWindow = new Window({ url: "http://localhost/" });
 
   for (const name of CLASSES) {
-    const value = (win as any)[name];
+    const value = win[name];
     if (value !== undefined) {
       define(name, value);
     }
   }
-  for (const name of FUNCTIONS) {
-    const value = (win as any)[name];
-    if (typeof value === "function") {
-      define(name, value.bind(win));
+  // The three by name rather than from a list: see `HostWindow`.
+  defineBound("getComputedStyle", win.getComputedStyle, win);
+  defineBound("requestAnimationFrame", win.requestAnimationFrame, win);
+  defineBound("cancelAnimationFrame", win.cancelAnimationFrame, win);
+  for (const name of OBJECTS) {
+    const value = win[name];
+    if (value !== undefined && globals[name] === undefined) {
+      define(name, value);
     }
   }
-  for (const name of OBJECTS) {
-    const value = (win as any)[name];
-    if (value !== undefined && globalThis[name] === undefined) {
+  for (const name of STORAGE) {
+    if (isUsableStorage(globals[name])) {
+      continue;
+    }
+    const value = win[name];
+    if (isUsableStorage(value)) {
       define(name, value);
     }
   }
 
   // React reads these to decide it is in a browser and to pick its event
   // system, and they must be the objects the elements belong to.
-  define("window", win as any);
-  define("document", (win as any).document);
+  define("window", win);
+  define("document", win.document);
 
   installed = win;
   return installed;
 }
 
+/**
+ * Tell React that this process is running tests.
+ *
+ * React cannot tell a test from a production render, so `act` warns "The
+ * current testing environment is not configured to support act(...)" unless
+ * the harness says so. Every render in this package goes through `act`, so
+ * without this every component test printed the warning — 73 times in one
+ * file of this repository — and a warning worth reading was lost among them.
+ *
+ * Separate from the document because the two are independent: a project
+ * already running in a browser has a DOM and still has to say it is testing.
+ */
+export function installActEnvironment(): void {
+  if (declared) {
+    return;
+  }
+  declared = true;
+  define("IS_REACT_ACT_ENVIRONMENT", true);
+}
+
+/**
+ * Turn the act environment on or off.
+ *
+ * `waitFor` stands it down for the length of a wait; see the reason there.
+ */
+export function setActEnvironment(active: boolean): void {
+  declared = true;
+  define("IS_REACT_ACT_ENVIRONMENT", active);
+}
+
+/**
+ * Whether the flag has been installed, tracked separately from its value.
+ *
+ * Every query calls `installDom`, which installs the act environment, and
+ * every query inside a `waitFor` therefore ran while `waitFor` had stood the
+ * environment down. Reading the flag to decide whether to set it turned it
+ * back on at the first assertion, so only the first poll of a wait was quiet.
+ */
+let declared = false;
+
 /**
  * Assign a global, even where the host declared it as a getter.
  *
@@ -128,8 +279,34 @@ function define(name: string, value: mixed): void {
   });
 }
 
+/** Install one of the window's own functions, still reading that window. */
+function defineBound(name: string, fn: HostFunction | void, win: HostWindow): void {
+  if (typeof fn === "function") {
+    define(name, fn.bind(win));
+  }
+}
+
 /** The document tests query, installing one if the process has none. */
 export function documentOf(): Document {
   installDom();
-  return globalThis.document as any;
+  return globalThis.document;
+}
+
+/**
+ * The body a test renders into and queries, installing a document first.
+ *
+ * Separate from `documentOf` because `Document.body` is `HTMLBodyElement |
+ * null` — a document with no `<body>` is a document a parser can produce — and
+ * both callers want the element rather than the question. A document this
+ * module installed has a body, and a document the host already had is a page,
+ * which also has one; the throw is for the third case, and it says what is
+ * missing rather than leaving `Cannot read properties of null (reading
+ * 'appendChild')` to be read at a line about rendering.
+ */
+export function bodyOf(): HTMLElement {
+  const body = documentOf().body;
+  if (body == null) {
+    throw new Error("@uniflowed/react-testing: the document has no <body> to render into");
+  }
+  return body;
 }

package/internal/events.js

@@ -15,8 +15,22 @@
 // not at all under a bare `click` event, and a test that only fires `click`
 // would pass while the feature was broken.
 
+import { bodyOf, documentOf } from "./dom.js";
+import { displayValue } from "./queries.js";
 import { actively } from "./render.js";
 
+/**
+ * What a caller wants the event to carry.
+ *
+ * An indexer, because which properties are meaningful is decided by the event's
+ * *interface* and the interface is decided by the name — `{ key: "Escape" }`
+ * for a `keydown`, `{ clientX: 40 }` for a `pointermove` — and the name is a
+ * string a caller computes. There is no type that says "the initialisers of
+ * whichever interface `name` maps to", so this says what is true: names in,
+ * and what each one means is the DOM's business.
+ */
+export type EventInit = { readonly [string]: mixed };
+
 /** Event constructors by DOM event name, with the right interface for each. */
 const EVENT_TYPES: { readonly [string]: string } = {
   click: "MouseEvent",
@@ -66,22 +80,71 @@ const ALSO_BUBBLES: { readonly [string]: string } = {
   blur: "focusout",
 };
 
-function construct(name: string, init: { readonly [string]: mixed }): Event {
-  const interfaceName = EVENT_TYPES[name] ?? "Event";
-  const Constructor = (globalThis as any)[interfaceName] ?? globalThis.Event;
-  const options = {
-    bubbles: !NON_BUBBLING.has(name),
-    cancelable: true,
-    ...init,
-  };
+/**
+ * The event a name asks for, built by the document's own class for it.
+ *
+ * # Why `Constructor` is `any`
+ *
+ * Neither half of this can be typed.
+ *
+ * Reading it: `globalThis` is a namespace to the checker rather than an
+ * object, and the value under a computed name is `mixed`, which cannot be
+ * `new`ed — refining a `mixed` with `typeof x === "function"` gives a function
+ * whose signature Flow says it does not know.
+ *
+ * Calling it: this is the half that is not uf's to fix. Flow's library
+ * definitions declare every event initialiser dictionary with *writable*
+ * properties — `MouseEvent$MouseEventInit` has `clientX?: number`, not
+ * `readonly clientX?: number` — so those properties are invariant, and no
+ * value whose type was computed rather than written inline can be passed to
+ * one. `{ readonly [string]: mixed }` fails on variance before it fails on
+ * anything else:
+ *
+ *     error[incompatible-variance]: property `bubbles` is read-only in
+ *     `EventInit` but writable in `Event$Init`
+ *     error[incompatible-type]: in property `clientX`: `unknown` is not
+ *     exactly the same as `number`
+ *
+ * — twelve of those for `MouseEvent` alone, and Flow's own advice in the
+ * message is to make the library definition's property readonly. So an
+ * `EventInit` cannot reach an event constructor under any spelling, and this
+ * stays one cast at one line rather than a dozen errors at every call.
+ */
+function construct(name: string, init: EventInit): Event {
+  // One cast, covering the lookup and both constructions; see above.
+  const classes: any = globalThis;
+  const Constructor = classes[EVENT_TYPES[name] ?? "Event"] ?? classes.Event;
+  const options = optionsFor(name, init);
   try {
     return new Constructor(name, options);
   } catch {
     // A host whose constructor is stricter than the init we were handed.
-    return new globalThis.Event(name, options);
+    return new classes.Event(name, options);
   }
 }
 
+/**
+ * The defaults an event is built with, under whatever the caller asked for.
+ *
+ * Written as a loop rather than `{ bubbles, cancelable, ...init }` because
+ * spreading an indexer is something Flow declines to compute a type for —
+ * "the indexer `string` may overwrite properties with explicit keys in a way
+ * that Flow cannot track", which is precisely what this is for. Its
+ * suggestion, spreading `init` first, would reverse the precedence and stop a
+ * caller from passing `bubbles: false`; the loop keeps the caller on top,
+ * which is what the spread said.
+ */
+function optionsFor(name: string, init: EventInit): EventInit {
+  const options: { [string]: mixed } = {
+    bubbles: !NON_BUBBLING.has(name),
+    cancelable: true,
+  };
+  for (const key of Object.keys(init)) {
+    options[key] = init[key];
+  }
+  return options;
+}
+
 /**
  * Dispatch one event, inside `act`.
  *
@@ -89,11 +152,7 @@ function construct(name: string, init: { readonly [string]: mixed }): Event {
  * `preventDefault`, which is what `dispatchEvent` reports and what a test
  * asserting "the form did not submit" needs.
  */
-export function dispatch(
-  target: EventTarget,
-  name: string,
-  init?: { readonly [string]: mixed },
-): boolean {
+export function dispatch(target: EventTarget, name: string, init?: EventInit): boolean {
   const event = construct(name, init ?? {});
   const paired = ALSO_BUBBLES[name];
   let ran = true;
@@ -114,19 +173,57 @@ export function dispatch(
  * A proxy rather than a written-out table: the set of DOM events is long,
  * grows, and every entry would be the same line. `fireEvent(target, name)`
  * also works, for an event whose name is computed.
+ *
+ * # Why the type is still `any`, and what was tried
+ *
+ * The type this wants is a function that also answers to every event name.
+ * Written with an indexer:
+ *
+ *     type FireEvent = {
+ *       (target: EventTarget, name: string, init?: EventInit): boolean,
+ *       readonly [string]: (target: EventTarget, init?: EventInit) => boolean,
+ *     };
+ *
+ * Flow declines the indexer, and is right to. As an `interface`, so the
+ * assignment gets far enough to say why, it reads "an unknown property that
+ * may exist on the inexact function is incompatible with `Firer`" — the value
+ * is a function, a function has `name`, `length`, `call`, `apply` and `bind`,
+ * and the trap below hands those back as themselves because `property in base`
+ * is true for them. None of the five is a DOM event, so the lie is unreachable
+ * from any real call, but a type is not something to be right about on
+ * average.
+ *
+ * The written-out table the runtime deliberately is not — a call signature
+ * plus a named property per event — fails earlier and for a reason no list of
+ * names would fix:
+ *
+ *     error[incompatible-type]: Cannot assign `new Proxy(...)` to `fireEvent`
+ *     because `(target: EventTarget, name: string, init?: EventInit) =>
+ *     boolean` is incompatible with `FireEvent`.
+ *     Functions without statics are not compatible with objects.
+ *
+ * A `Proxy` over a function *is* a function, and Flow will not treat a
+ * function with no statics as an object with properties whatever those
+ * properties are. So no type at all can be assigned to this value: typing
+ * `fireEvent` means changing what it is — a function carrying real static
+ * properties, one per event name, which is a table of a hundred-odd entries
+ * that stops answering to the hundred-and-first. That is a design decision
+ * about a published API and not a cast to remove in passing.
+ *
+ * Left as `any` rather than renamed to `$FlowFixMe`, which would move it out
+ * of `flow/unclear-type`'s sight without moving it out of the package.
  */
 export const fireEvent: any = new Proxy(
-  (target: EventTarget, name: string, init?: { readonly [string]: mixed }) =>
-    dispatch(target, name, init),
+  (target: EventTarget, name: string, init?: EventInit) => dispatch(target, name, init),
   {
     get(base, property) {
       if (typeof property !== "string") {
-        return (base as any)[property];
+        return Reflect.get(base, property);
       }
       if (property in base) {
-        return (base as any)[property];
+        return Reflect.get(base, property);
       }
-      return (target: EventTarget, init?: { readonly [string]: mixed }) =>
+      return (target: EventTarget, init?: EventInit) =>
         dispatch(target, property.toLowerCase(), init);
     },
   },
@@ -134,16 +231,23 @@ export const fireEvent: any = new Proxy(
 
 /** Set a control's value the way a browser does, so React sees the change. */
 function setValue(element: HTMLElement, value: string): void {
-  const target: any = element;
   // React tracks the last value it wrote on the node and skips an `input`
   // event whose value it believes it already knows. Writing through the
   // prototype's setter is what a browser does and what clears that.
-  const prototype = Object.getPrototypeOf(target);
-  const descriptor = Object.getOwnPropertyDescriptor(prototype, "value");
-  if (descriptor?.set != null) {
-    descriptor.set.call(target, value);
-  } else {
-    target.value = value;
+  const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(element), "value");
+  const set = descriptor?.set;
+  if (set != null) {
+    set.call(element, value);
+  } else if (
+    element instanceof HTMLInputElement ||
+    element instanceof HTMLTextAreaElement ||
+    element instanceof HTMLSelectElement
+  ) {
+    // The fallback, for a host whose control classes keep `value` as an own
+    // property rather than an accessor on the prototype. The three classes are
+    // the ones `displayValue` reads, so what a test writes is what a
+    // `ByDisplayValue` query can find.
+    element.value = value;
   }
 }
 
@@ -170,12 +274,46 @@ function describeKey(key: string): {| key: string, code: string, text: string |
   return { key, code: `Key${key.toUpperCase()}`, text: key };
 }
 
-/** Elements the tab order includes, in document order. */
+/**
+ * Elements the tab order includes, in document order.
+ *
+ * `instanceof HTMLElement` rather than a cast, and it is not only the
+ * checker's question: the next thing done to one of these is `focus`, and
+ * `focus` is a method of `HTMLElement`. The declared return type has always
+ * said `HTMLElement` while the selector could match an `Element` — Flow said
+ * so, "in array element: `Element` is incompatible with `HTMLElement`" — and
+ * anything that reached here without being one would have been handed to a
+ * `(element as any).focus?.()` that silently did nothing, swallowing the Tab.
+ */
 function tabbable(): Array<HTMLElement> {
   const selector =
     'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-  return Array.from(globalThis.document.querySelectorAll(selector)).filter(
-    (element: any) => element.getAttribute("aria-hidden") !== "true",
+  const order = [];
+  for (const element of documentOf().querySelectorAll(selector)) {
+    if (element instanceof HTMLElement && element.getAttribute("aria-hidden") !== "true") {
+      order.push(element);
+    }
+  }
+  return order;
+}
+
+/**
+ * Whether a control is disabled, for the elements that can be.
+ *
+ * The classes rather than `(element as any).disabled === true`, which was the
+ * same question asked in a way that answered `any`. `disabled` belongs to the
+ * form controls and to `fieldset`; on a `div` it is an attribute React put in
+ * the markup and not a property, which is why the old test was `=== true`
+ * rather than truthiness, and why the answer for one is still `false`.
+ */
+function isDisabled(element: HTMLElement): boolean {
+  return (
+    (element instanceof HTMLButtonElement ||
+      element instanceof HTMLInputElement ||
+      element instanceof HTMLSelectElement ||
+      element instanceof HTMLTextAreaElement ||
+      element instanceof HTMLFieldSetElement) &&
+    element.disabled
   );
 }
 
@@ -190,8 +328,8 @@ function tabbable(): Array<HTMLElement> {
  */
 export const userEvent = {
   /** Press and release, with the events a real click produces, in order. */
-  async click(element: HTMLElement, init?: { readonly [string]: mixed }): Promise<void> {
-    if ((element as any).disabled === true) {
+  async click(element: HTMLElement, init?: EventInit): Promise<void> {
+    if (isDisabled(element)) {
       return;
     }
     dispatch(element, "pointerdown", init);
@@ -224,8 +362,11 @@ export const userEvent = {
     for (const character of text) {
       const { key, code, text: printable } = describeKey(character);
       dispatch(element, "keydown", { key, code });
-      if (printable != null && printable !== "\n") {
-        setValue(element, `${(element as any).value ?? ""}${printable}`);
+      // Nothing is typed into an element that shows no value; see `keyboard`
+      // for what that used to do instead.
+      const current = displayValue(element);
+      if (printable != null && printable !== "\n" && current != null) {
+        setValue(element, `${current}${printable}`);
         dispatch(element, "input", { data: printable });
       }
       dispatch(element, "keyup", { key, code });
@@ -243,12 +384,22 @@ export const userEvent = {
 
   /** Press keys at whatever has focus. Named keys go in braces: `{Enter}`. */
   async keyboard(sequence: string): Promise<void> {
-    const target: any = globalThis.document.activeElement ?? globalThis.document.body;
+    const target = documentOf().activeElement ?? bodyOf();
     for (const token of parseKeys(sequence)) {
       const { key, code, text } = describeKey(token);
       dispatch(target, "keydown", { key, code });
-      if (text != null && text !== "\n" && target.value !== undefined) {
-        setValue(target, `${target.value ?? ""}${text}`);
+      // `displayValue` rather than `target.value !== undefined`.
+      //
+      // The two agree about every control a person can type into, and differ
+      // about `<button>`, `<option>`, `<progress>` and the rest of the
+      // elements that have a `value` property without showing one: pressing
+      // Space at a focused button used to write `button.value = " "` and
+      // dispatch an `input` event at it, which no browser does — Space on a
+      // button is a click. Nothing in this repository's suite depended on it,
+      // and `ui.test.js` presses Space at a switch on the way past.
+      const current = displayValue(target);
+      if (text != null && text !== "\n" && current != null) {
+        setValue(target, `${current}${text}`);
         dispatch(target, "input", { data: text });
       }
       dispatch(target, "keyup", { key, code });
@@ -262,8 +413,10 @@ export const userEvent = {
     if (order.length === 0) {
       return;
     }
-    const active: any = globalThis.document.activeElement;
-    const at = order.indexOf(active);
+    const active = documentOf().activeElement;
+    // `indexOf` needs an element; a document with nothing focused is the same
+    // "not in the order" that `indexOf` answers `-1` to, said in front.
+    const at = active == null ? -1 : order.indexOf(active);
     const shift = options?.shift ?? false;
     const next =
       at < 0
@@ -281,9 +434,14 @@ export const userEvent = {
     values: string | $ReadOnlyArray<string>,
   ): Promise<void> {
     const wanted = typeof values === "string" ? [values] : values;
-    const select: any = element;
-    for (const option of Array.from(select.options ?? [])) {
-      (option as any).selected = wanted.includes((option as any).value);
+    // Only a `select` has options; anything else has none, which is what
+    // `select.options ?? []` used to say. The events are dispatched either
+    // way, because a component listening for `change` on something that is not
+    // a select is a component under test and not this function's business.
+    if (element instanceof HTMLSelectElement) {
+      for (const option of Array.from(element.options)) {
+        option.selected = wanted.includes(option.value);
+      }
     }
     dispatch(element, "input");
     dispatch(element, "change");
@@ -293,20 +451,19 @@ export const userEvent = {
   /** Move focus away, which is what makes a blur-validated field validate. */
   async tabAway(element: HTMLElement): Promise<void> {
     dispatch(element, "blur");
-    (element as any).blur?.();
+    element.blur();
     await settle();
   },
 };
 
 function focus(element: HTMLElement): void {
-  const previous: any = globalThis.document.activeElement;
-  if (previous === element) {
+  if (documentOf().activeElement === element) {
     return;
   }
   actively(() => {
-    (element as any).focus?.();
+    element.focus();
   });
-  if (globalThis.document.activeElement !== element) {
+  if (documentOf().activeElement !== element) {
     // A host whose `focus` does not move `activeElement`; the events are what
     // components listen for, so dispatch them regardless.
     dispatch(element, "focus");