@excom/kit-utils 0.1.0

package/support/tests/fetching.test.ts

@@ -0,0 +1,230 @@
+import {
+  clearFetchCaches,
+  fetchPlainText,
+  fetchTemplate,
+  resolveModuleReference,
+  resolveTemplateContent,
+} from "../../fetching";
+import {
+  afterEach,
+  describe,
+  expect,
+  fixture,
+  it,
+  spyFetch,
+  vi,
+} from "@excom/heft-rig/profiles/default/config/test-utils";
+
+// The template cache is module-wide, so every URL test uses its own path.
+let counter = 0;
+const uniqueUrl = (prefix = "/") => `${prefix}tpl-${++counter}.html`;
+
+describe("fetchTemplate", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("fetches the URL and parses the body into a fragment", async () => {
+    const fetchSpy = spyFetch({ body: `<p class="fetched">hi</p>` });
+    const url = uniqueUrl();
+    const content = await fetchTemplate(url);
+    expect(content).toBeInstanceOf(DocumentFragment);
+    expect(content.firstElementChild?.className).toBe("fetched");
+    expect(fetchSpy).toHaveBeenCalledWith(url, {});
+  });
+
+  it("forwards reqInit to fetch", async () => {
+    const fetchSpy = spyFetch({ body: "<p></p>" });
+    const url = uniqueUrl();
+    const reqInit = { headers: { "x-test": "1" } };
+    await fetchTemplate(url, { reqInit });
+    expect(fetchSpy).toHaveBeenCalledWith(url, reqInit);
+  });
+});
+
+describe("resolveTemplateContent: URL templates", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("returns a promise on the first fetch and a clone synchronously after", async () => {
+    const fetchSpy = spyFetch({ body: `<p class="one">one</p>` });
+    const url = uniqueUrl();
+    const first = resolveTemplateContent(url);
+    expect(first).toBeInstanceOf(Promise);
+    const firstEl = (await first) as Element;
+    expect(firstEl.className).toBe("one");
+    const second = resolveTemplateContent(url) as Element;
+    expect(second).not.toBeInstanceOf(Promise);
+    expect(second.className).toBe("one");
+    expect(second).not.toBe(firstEl);
+    expect(fetchSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("shares one in-flight fetch between concurrent resolves", async () => {
+    const fetchSpy = spyFetch({ body: `<p>shared</p>` }, 2);
+    const url = uniqueUrl("./");
+    const a = resolveTemplateContent(url);
+    const b = resolveTemplateContent(url);
+    expect(a).toBeInstanceOf(Promise);
+    expect(b).toBeInstanceOf(Promise);
+    const [elA, elB] = (await Promise.all([a, b])) as Element[];
+    expect(elA.textContent).toBe("shared");
+    expect(elB.textContent).toBe("shared");
+    expect(elA).not.toBe(elB);
+    expect(fetchSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("bypassCache refetches even when a fragment is cached and replaces it", async () => {
+    let body = `<p>first</p>`;
+    const fetchSpy = spyFetch(() => ({ body }));
+    const url = uniqueUrl("../");
+    await resolveTemplateContent(url);
+    expect((resolveTemplateContent(url) as Element).textContent).toBe("first");
+    body = `<p>second</p>`;
+    const reload = resolveTemplateContent(url, { bypassCache: true });
+    expect(reload).toBeInstanceOf(Promise);
+    expect(((await reload) as Element).textContent).toBe("second");
+    // later reads see the refreshed entry, synchronously
+    const after = resolveTemplateContent(url) as Element;
+    expect(after).not.toBeInstanceOf(Promise);
+    expect(after.textContent).toBe("second");
+    expect(fetchSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it("passes reqInit through on fetch and accepts absolute http URLs", async () => {
+    const fetchSpy = spyFetch({ body: `<p>abs</p>` });
+    const url = `http://example.test${uniqueUrl()}`;
+    const reqInit = { cache: "no-store" as const };
+    await resolveTemplateContent(url, { reqInit });
+    expect(fetchSpy).toHaveBeenCalledWith(url, { reqInit }.reqInit);
+  });
+
+  it("wraps multi-root templates and honours skipCloning", async () => {
+    spyFetch({ body: `<p>a</p><p>b</p>` });
+    const url = uniqueUrl();
+    const wrapped = (await resolveTemplateContent(url)) as Element;
+    expect(wrapped.tagName).toBe("DIV");
+    expect(wrapped.children.length).toBe(2);
+    const single = uniqueUrl();
+    vi.restoreAllMocks();
+    spyFetch({ body: `<p>only</p>` });
+    await resolveTemplateContent(single);
+    const own1 = resolveTemplateContent(single, { skipCloning: true });
+    const own2 = resolveTemplateContent(single, { skipCloning: true });
+    expect(own1).toBe(own2);
+    expect(resolveTemplateContent(single)).not.toBe(own1);
+  });
+});
+
+describe("resolveTemplateContent: selector templates", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("clones a <template> found in the document", () => {
+    fixture(`<template id="tpl-sel"><span class="sel">x</span></template>`);
+    const el = resolveTemplateContent("#tpl-sel") as Element;
+    expect(el).not.toBeInstanceOf(Promise);
+    expect(el.className).toBe("sel");
+    const tpl = document.querySelector("#tpl-sel") as HTMLTemplateElement;
+    expect(tpl.content.children.length).toBe(1);
+    expect(el).not.toBe(tpl.content.firstElementChild);
+  });
+
+  it("resolves :scope relative to the given scope element", () => {
+    const host = fixture<HTMLElement>(
+      `<div><template class="inner-tpl"><i>scoped</i></template></div>`
+    );
+    fixture(`<template class="inner-tpl"><b>other</b></template>`);
+    const el = resolveTemplateContent(":scope > .inner-tpl", {
+      scope: host,
+    }) as Element;
+    expect(el.tagName).toBe("I");
+    const own = resolveTemplateContent(":scope > .inner-tpl", {
+      scope: host,
+      skipCloning: true,
+    }) as Element;
+    expect(own).toBe(host.querySelector("template")!.content.firstElementChild);
+  });
+
+  it("throws when the scope cannot query or the template is missing", () => {
+    expect(() =>
+      resolveTemplateContent("#anything", { scope: {} as Element })
+    ).toThrow("resolveTemplateContent requires a scope with querySelector");
+    expect(() => resolveTemplateContent("#does-not-exist")).toThrow(
+      "Template not found: #does-not-exist"
+    );
+    fixture(`<div id="not-a-template"></div>`);
+    expect(() => resolveTemplateContent("#not-a-template")).toThrow(
+      "Template not found: #not-a-template"
+    );
+  });
+});
+
+describe("resolveModuleReference", () => {
+  it("imports relative to the page origin (unsupported under node)", async () => {
+    await expect(resolveModuleReference("/mods/x.js")).rejects.toThrow();
+  });
+});
+
+describe("fetchPlainText", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("fetches once per URL and caches the text", async () => {
+    const fetchSpy = spyFetch({ body: "plain body" });
+    const url = uniqueUrl("/text/");
+    const reqInit = { method: "GET" };
+    await expect(fetchPlainText(url, { reqInit })).resolves.toBe("plain body");
+    await expect(fetchPlainText(url)).resolves.toBe("plain body");
+    expect(fetchSpy).toHaveBeenCalledTimes(1);
+    expect(fetchSpy).toHaveBeenCalledWith(url, reqInit);
+    const other = uniqueUrl("/text/");
+    await expect(fetchPlainText(other)).resolves.toBe("plain body");
+    expect(fetchSpy).toHaveBeenCalledTimes(2);
+    expect(fetchSpy).toHaveBeenLastCalledWith(other, {});
+  });
+});
+
+describe("clearFetchCaches", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("forgets one URL so the next resolve fetches again", async () => {
+    const fetchSpy = spyFetch({ body: `<p>v1</p>` }, 2);
+    const url = uniqueUrl();
+    await resolveTemplateContent(url);
+    expect(clearFetchCaches(url)).toBe(1);
+    const again = resolveTemplateContent(url);
+    expect(again).toBeInstanceOf(Promise);
+    await again;
+    expect(fetchSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it("forgets plain-text entries too, and everything when no URL is given", async () => {
+    spyFetch({ body: "text" }, 4);
+    const tpl = uniqueUrl();
+    const txt = uniqueUrl("/text-");
+    await resolveTemplateContent(tpl);
+    await fetchPlainText(txt);
+    expect(clearFetchCaches()).toBeGreaterThanOrEqual(2);
+    expect(clearFetchCaches(tpl)).toBe(0);
+    await fetchPlainText(txt);
+    expect(globalThis.fetch).toHaveBeenCalledTimes(3);
+  });
+
+  it("does not resurrect a purged entry when the in-flight fetch settles", async () => {
+    const fetchSpy = spyFetch({ body: `<p>late</p>` }, 2);
+    const url = uniqueUrl();
+    const pending = resolveTemplateContent(url);
+    expect(clearFetchCaches(url)).toBe(1);
+    await pending;
+    const next = resolveTemplateContent(url);
+    expect(next).toBeInstanceOf(Promise);
+    await next;
+    expect(fetchSpy).toHaveBeenCalledTimes(2);
+  });
+});

package/support/tests/form.test.ts

@@ -0,0 +1,297 @@
+import { formToJson, parseFormInputValue } from "../../form";
+import {
+  afterEach,
+  describe,
+  expect,
+  fixture,
+  it,
+  vi,
+} from "@excom/heft-rig/profiles/default/config/test-utils";
+
+const formHtml = `
+  <form action="/api/submit" method="put">
+      <!-- Simple primitives -->
+      <input type="text" name="name" value="John Doe">
+      <input type="email" name="email" value="j@doe.com">
+      <input type="number" name="age" value="50">
+      <input type="range" name="volume" min="0" max="100" value="20">
+      <input type="tel" name="phone" value="123-456-7890">
+      <input type="url" name="website" value="https://example.com">
+      <input type="color" name="favoriteColor" value="#ff0000">
+      <input type="password" name="password" value="secret">
+      <!-- Checkbox -->
+      <input type="checkbox" name="isAdmin" checked>
+      <input type="checkbox" name="isModerator">
+      <!-- Checkbox array -->
+      <input type="checkbox" name="hobbies" value="reading" checked>
+      <input type="checkbox" name="hobbies" value="cooking">
+      <input type="checkbox" name="hobbies" value="gaming" checked>
+      <!-- Radio -->
+      <input type="radio" name="activity" value="running">
+      <input type="radio" name="activity" value="swimming" checked>
+      <!-- Datetimes -->
+      <input type="date" name="birthday" value="1999-10-01">
+      <input type="time" name="wakeupTime" value="08:00">
+      <input type="datetime-local" name="meetingTime" value="2023-10-01T10:00">
+      <input type="month" name="birthMonth" value="1999-10">
+      <input type="week" name="birthWeek" value="1999-W40">
+      <!-- Select -->
+      <select name="country">
+          <option value="USA">United States</option>
+          <option value="CAN" selected>Canada</option>
+          <option value="MEX">Mexico</option>
+      </select>
+      <!-- Select multiple -->
+      <select name="languages" multiple>
+          <option value="english" selected>English</option>
+          <option value="french">French</option>
+          <option value="spanish" selected>Spanish</option>
+          <option value="german">German</option>
+          <option value="chinese">Chinese</option>
+      </select>
+      <!-- Arrays -->
+      <input type="text" name="tags[]" value="smart">
+      <input type="text" name="tags[]" value="athletic">
+      <input type="text" name="tags[]" value="kind">
+      <!-- Nested -->
+      <input type="text" name="address.city" value="Anytown">
+      <input type="text" name="address.state" value="CA">
+      <input type="number" name="address.zip" value="12345">
+      <input type="number" name="address.coordinates[]" value="37.7749">
+      <input type="number" name="address.coordinates[]" value="-122.4194">
+      <!-- Disabled -->
+      <input type="text" name="disabledValue" value="test" disabled>
+      <button type="submit">Submit</button>
+  </form>
+`;
+
+const formJson = {
+  name: "John Doe",
+  email: "j@doe.com",
+  age: 50,
+  volume: 20,
+  phone: "123-456-7890",
+  website: "https://example.com",
+  favoriteColor: "#ff0000",
+  password: "secret",
+  isAdmin: true,
+  isModerator: false,
+  activity: "swimming",
+  hobbies: ["reading", "gaming"],
+  birthday: "1999-10-01",
+  wakeupTime: "08:00",
+  meetingTime: "2023-10-01T10:00",
+  birthMonth: "1999-10",
+  birthWeek: "1999-W40",
+  country: "CAN",
+  languages: ["english", "spanish"],
+  tags: ["smart", "athletic", "kind"],
+  address: {
+    city: "Anytown",
+    state: "CA",
+    zip: 12345,
+    coordinates: [37.7749, -122.4194],
+  },
+};
+
+describe("formToJson", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("converts form to json correctly", async () => {
+    // nested paths + typed values
+    document.body.innerHTML = formHtml;
+    const form = document.querySelector("form");
+    const json = formToJson(form);
+    expect(json).toEqual(formJson);
+  });
+
+  it("converts forms created via fixture() (connected wrapper)", () => {
+    const form = fixture<HTMLFormElement>(formHtml);
+    expect(formToJson(form)).toEqual(formJson);
+  });
+
+  it("returns an empty object for a form with no named controls", () => {
+    const form = fixture<HTMLFormElement>(
+      `<form><input type="text" value="unnamed"><button>Go</button></form>`,
+    );
+    expect(formToJson(form)).toEqual({});
+  });
+
+  it("serializes textareas and empty text values", () => {
+    const form = fixture<HTMLFormElement>(`<form>
+      <textarea name="bio">Hello
+world</textarea>
+      <input type="text" name="empty" value="">
+    </form>`);
+    expect(formToJson(form)).toEqual({ bio: "Hello\nworld", empty: "" });
+  });
+
+  it("types number and range controls, including empty numbers", () => {
+    const form = fixture<HTMLFormElement>(`<form>
+      <input type="number" name="n" value="3.5">
+      <input type="range" name="r" min="0" max="10" value="7">
+      <input type="number" name="blank" value="">
+    </form>`);
+    expect(formToJson(form)).toEqual({ n: 3.5, r: 7, blank: 0 });
+  });
+
+  it("maps value-less checkboxes to booleans", () => {
+    const form = fixture<HTMLFormElement>(`<form>
+      <input type="checkbox" name="on" checked>
+      <input type="checkbox" name="off">
+    </form>`);
+    expect(formToJson(form)).toEqual({ on: true, off: false });
+  });
+
+  it("omits a valued checkbox group with nothing checked", () => {
+    const form = fixture<HTMLFormElement>(`<form>
+      <input type="checkbox" name="hobbies" value="reading">
+      <input type="checkbox" name="hobbies" value="cooking">
+      <input type="text" name="name" value="x">
+    </form>`);
+    expect(formToJson(form)).toEqual({ name: "x" });
+  });
+
+  it("collects a single checked valued checkbox into an array", () => {
+    const form = fixture<HTMLFormElement>(`<form>
+      <input type="checkbox" name="hobbies" value="reading" checked>
+      <input type="checkbox" name="hobbies" value="cooking">
+    </form>`);
+    expect(formToJson(form)).toEqual({ hobbies: ["reading"] });
+  });
+
+  it("omits a radio group with nothing checked", () => {
+    const form = fixture<HTMLFormElement>(`<form>
+      <input type="radio" name="activity" value="running">
+      <input type="radio" name="activity" value="swimming">
+    </form>`);
+    expect(formToJson(form)).toEqual({});
+  });
+
+  it("serializes a single select by its selected option", () => {
+    const form = fixture<HTMLFormElement>(`<form>
+      <select name="single">
+        <option value="a">A</option>
+        <option value="b" selected>B</option>
+      </select>
+    </form>`);
+    expect(formToJson(form)).toEqual({ single: "b" });
+  });
+
+  it("lets the last of several same-named text inputs win", () => {
+    const form = fixture<HTMLFormElement>(`<form>
+      <input type="text" name="dup" value="first">
+      <input type="text" name="dup" value="second">
+    </form>`);
+    expect(formToJson(form)).toEqual({ dup: "second" });
+  });
+
+  it("keeps [] arrays in document order with repeated values", () => {
+    const form = fixture<HTMLFormElement>(`<form>
+      <input type="text" name="tags[]" value="a">
+      <input type="text" name="tags[]" value="a">
+      <input type="number" name="tags[]" value="3">
+    </form>`);
+    expect(formToJson(form)).toEqual({ tags: ["a", "a", 3] });
+  });
+
+  it("builds nested objects and arrays from dotted and [] names", () => {
+    const form = fixture<HTMLFormElement>(`<form>
+      <input type="text" name="a.b.c" value="deep">
+      <input type="number" name="a.list[]" value="1">
+      <input type="number" name="a.list[]" value="2">
+      <input type="checkbox" name="a.flag" checked>
+    </form>`);
+    expect(formToJson(form)).toEqual({
+      a: { b: { c: "deep" }, list: [1, 2], flag: true },
+    });
+  });
+
+  it("looks controls up by name, not by id", () => {
+    // `form.elements.namedItem()` would match the id first
+    const form = fixture<HTMLFormElement>(`<form>
+      <input type="text" id="age" name="label" value="not a number">
+      <input type="number" name="age" value="42">
+    </form>`);
+    expect(formToJson(form)).toEqual({ label: "not a number", age: 42 });
+  });
+
+  it("types controls associated through the form attribute", () => {
+    const wrap = fixture<HTMLElement>(`<section>
+      <form id="f"><input type="text" name="inside" value="in"></form>
+      <input type="number" name="outside" value="8" form="f">
+      <input type="checkbox" name="flag" form="f" checked>
+    </section>`);
+    const form = wrap.querySelector("form") as HTMLFormElement;
+    expect(formToJson(form)).toEqual({ inside: "in", outside: 8, flag: true });
+  });
+
+  it("ignores disabled controls and unnamed controls", () => {
+    const form = fixture<HTMLFormElement>(`<form>
+      <input type="text" name="keep" value="1">
+      <input type="text" name="skip" value="2" disabled>
+      <input type="text" value="3">
+    </form>`);
+    expect(formToJson(form)).toEqual({ keep: "1" });
+  });
+
+  it("serializes thousands of fields with one pass over the controls", () => {
+    const rows = 100;
+    const cols = 26;
+    const inputs: string[] = [];
+    for (let r = 0; r < rows; r++) {
+      for (let c = 0; c < cols; c++) {
+        const ref = String.fromCharCode(65 + c) + r;
+        inputs.push(
+          `<input type="text" name="detail.${ref}" value="${r === 0 ? "=A1" : ref}">`,
+        );
+      }
+    }
+    const form = fixture<HTMLFormElement>(`<form>${inputs.join("")}</form>`);
+    const querySelector = vi.spyOn(form, "querySelector");
+    const querySelectorAll = vi.spyOn(form, "querySelectorAll");
+    const json = formToJson(form) as { detail: Record<string, string> };
+    expect(Object.keys(json.detail)).toHaveLength(rows * cols);
+    expect(json.detail.A0).toBe("=A1");
+    expect(json.detail.Z99).toBe("Z99");
+    // no per-field selector queries: one query for unchecked checkboxes
+    expect(querySelector).not.toHaveBeenCalled();
+    expect(querySelectorAll).toHaveBeenCalledTimes(1);
+  });
+
+  it("skips entries whose name is empty", () => {
+    const form = fixture<HTMLFormElement>(`<form>
+      <input type="checkbox" name="">
+      <input type="text" name="keep" value="k">
+    </form>`);
+    expect(formToJson(form)).toEqual({ keep: "k" });
+  });
+
+  it("parseFormInputValue: passes the value through without a control", () => {
+    const form = fixture<HTMLFormElement>(`<form></form>`);
+    expect(parseFormInputValue(form, undefined, "k", "raw")).toBe("raw");
+  });
+
+  it("parseFormInputValue: radio with nothing checked yields null", () => {
+    const form = fixture<HTMLFormElement>(`<form>
+      <input type="radio" name="pick" value="a">
+      <input type="radio" name="pick" value="b">
+    </form>`);
+    const radio = form.querySelector("input") as HTMLInputElement;
+    expect(parseFormInputValue(form, radio, "pick", "a")).toBe(null);
+    radio.checked = true;
+    expect(parseFormInputValue(form, radio, "pick", "a")).toBe("a");
+  });
+
+  it("parseFormInputValue: checkbox on/off strings map to the checked state", () => {
+    const form = fixture<HTMLFormElement>(`<form>
+      <input type="checkbox" name="flag" checked>
+    </form>`);
+    const box = form.querySelector("input") as HTMLInputElement;
+    expect(parseFormInputValue(form, box, "flag", "on")).toBe(true);
+    box.checked = false;
+    expect(parseFormInputValue(form, box, "flag", "off")).toBe(false);
+  });
+});

package/support/tests/index.test.ts

@@ -0,0 +1,20 @@
+import * as index from "../../index";
+import {
+  describe,
+  expect,
+  it,
+} from "@excom/heft-rig/profiles/default/config/test-utils";
+
+describe("index", () => {
+  it("re-exports the helper modules", () => {
+    expect(index.BatchManager).toBeTypeOf("function");
+    expect(index.deepMerge).toBeTypeOf("function");
+    expect(index.Converter).toBeTypeOf("object");
+    expect(index.TokenList).toBeTypeOf("function");
+    expect(index.resolveTemplateContent).toBeTypeOf("function");
+    expect(index.formToJson).toBeTypeOf("function");
+    expect(index.observeProperty).toBeTypeOf("function");
+    expect(index.QueueManager).toBeTypeOf("function");
+    expect(index.mergeSearchParamsIntoUrl).toBeTypeOf("function");
+  });
+});

package/support/tests/load-dependency.test.ts

@@ -0,0 +1,98 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from "@excom/heft-rig/profiles/default/config/test-utils";
+
+type LoadDependency = typeof import("../../load-dependency").loadDependency;
+
+const win = window as unknown as Record<string, unknown>;
+
+describe("loadDependency", () => {
+  let loadDependency: LoadDependency;
+  let appendChild: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(async () => {
+    vi.resetModules();
+    delete win.__DEPENDENCY_PROMISES__;
+    ({ loadDependency } = await import("../../load-dependency"));
+    /* Keep the `<script>` out of the document so happy-dom never
+     * fetches `src`; tests drive `onload` / `onerror`. */
+    appendChild = vi
+      .spyOn(document.body, "appendChild")
+      .mockImplementation((node) => node);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    delete win.TestDep;
+    delete win.__DEPENDENCY_PROMISES__;
+  });
+
+  const pendingScript = () =>
+    appendChild.mock.calls[0][0] as unknown as HTMLScriptElement;
+
+  it("initialises the shared promise registry once", async () => {
+    expect(window.__DEPENDENCY_PROMISES__).toEqual({});
+    const existing = { Preset: Promise.resolve("preset") };
+    win.__DEPENDENCY_PROMISES__ = existing;
+    vi.resetModules();
+    await import("../../load-dependency");
+    expect(window.__DEPENDENCY_PROMISES__).toBe(existing);
+  });
+
+  it("esm: returns the imported module", async () => {
+    const mod = await loadDependency<{ default: number }>(
+      "esm",
+      "data:text/javascript,export default 42"
+    );
+    expect(mod.default).toBe(42);
+    expect(appendChild).not.toHaveBeenCalled();
+  });
+
+  it("umd: returns an already-present global without a script", async () => {
+    win.TestDep = { ready: true };
+    await expect(loadDependency("umd", "/dep.js", "TestDep")).resolves.toEqual({
+      ready: true,
+    });
+    expect(appendChild).not.toHaveBeenCalled();
+  });
+
+  it("umd: injects a script once and resolves with the global on load", async () => {
+    const first = loadDependency("umd", "/vendor/dep.js", "TestDep");
+    const second = loadDependency("umd", "/vendor/dep.js", "TestDep");
+    expect(appendChild).toHaveBeenCalledTimes(1);
+    const script = pendingScript();
+    expect(script.tagName).toBe("SCRIPT");
+    expect(script.src).toBe(`${window.location.origin}/vendor/dep.js`);
+    expect(window.__DEPENDENCY_PROMISES__.TestDep).toBeInstanceOf(Promise);
+    win.TestDep = { loaded: true };
+    script.onload!(new Event("load"));
+    await expect(first).resolves.toEqual({ loaded: true });
+    await expect(second).resolves.toEqual({ loaded: true });
+    // now that the global exists, later calls short-circuit
+    await expect(
+      loadDependency("umd", "/vendor/dep.js", "TestDep")
+    ).resolves.toEqual({ loaded: true });
+    expect(appendChild).toHaveBeenCalledTimes(1);
+  });
+
+  it("umd: rejects when the script fails to load", async () => {
+    const pending = loadDependency("umd", "/vendor/missing.js", "TestDep");
+    pendingScript().onerror!(new Event("error"));
+    await expect(pending).rejects.toThrow("Failed to load dependency: TestDep");
+  });
+
+  it("rejects invalid requests", async () => {
+    await expect(loadDependency("umd", "/dep.js")).rejects.toThrow(
+      "Invalid dependency load request: umd | /dep.js | undefined"
+    );
+    await expect(
+      loadDependency("cjs" as unknown as "umd", "/dep.js", "X")
+    ).rejects.toThrow("Invalid dependency load request: cjs | /dep.js | X");
+    expect(appendChild).not.toHaveBeenCalled();
+  });
+});