@adobe/ecs 0.1.0 → 0.2.1

package/src/samples/todo/app/app.browser.test.ts

@@ -1,215 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
-import { System } from "../../../index.js";
-import { todo } from "../features/todos/data.js";
-import { row } from "../features/todos/dom.js";
-import { part } from "../shared/elements/elements.test-helper.js";
-import { nextTick, watchTicks } from "../shared/ticks.test-helper.js";
-import { createApp, type App } from "./app.js";
-
-/** The page's markup, as index.html has it. */
-const markup = `
-<header><todo-toggle-all></todo-toggle-all><todo-entry></todo-entry></header>
-<todo-list></todo-list>
-<footer><todo-summary></todo-summary><todo-filters></todo-filters></footer>
-<todo-generate></todo-generate>`;
-
-const found = <K extends keyof HTMLElementTagNameMap>(name: K): HTMLElementTagNameMap[K] => {
-    const element = document.querySelector(name);
-    if (element === null) throw new Error(`No ${name}.`);
-    return element;
-};
-
-let app: App;
-let errors: unknown[];
-const logged = console.error;
-
-beforeEach(async () => {
-    errors = [];
-    console.error = (...values: unknown[]) => errors.push(values);
-    document.body.innerHTML = markup;
-    app = createApp(document.body);
-    await watchTicks(app.world);
-});
-
-afterEach(async () => {
-    await app.dispose();
-    console.error = logged;
-    document.body.replaceChildren();
-    expect(errors).toEqual([]);
-});
-
-const rows = (): HTMLElementTagNameMap["todo-row"][] => [...found("todo-list").querySelectorAll("todo-row")];
-/** What a user sees in the list: each shown row, `x` when done. */
-const shown = (): string[] => rows().filter(row => row.checkVisibility()).map(row => `${row.done ? "x" : "-"} ${row.label}`);
-const left = (): string => part(found("todo-summary"), ".count", HTMLElement).textContent ?? "";
-
-/** Types `text` into the entry and presses Enter. */
-const enter = (text: string): void => {
-    const input = part(found("todo-entry"), "input", HTMLInputElement);
-    input.value = text;
-    input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
-};
-
-/** Enters a todo, and waits for the tick that shows it. */
-const type = async (text: string): Promise<void> => {
-    enter(text);
-    await nextTick();
-};
-
-const rowPart = <E extends Element>(index: number, selector: string, kind: abstract new () => E): E => {
-    const row = rows()[index];
-    if (row === undefined) throw new Error(`No row ${index}.`);
-    return part(row, selector, kind);
-};
-
-describe("the todo app", () => {
-    it("adds, toggles, edits and deletes todos as a user does", async () => {
-        // A blank entry dispatches nothing.
-        enter("   ");
-        await type("Buy milk");
-        await type("Walk the dog");
-        expect(shown()).toEqual(["- Buy milk", "- Walk the dog"]);
-        expect(left()).toBe("2 items left");
-
-        rowPart(1, ".toggle", HTMLInputElement).click();
-        await nextTick();
-        expect(shown()).toEqual(["- Buy milk", "x Walk the dog"]);
-        expect(left()).toBe("1 item left");
-
-        rowPart(0, ".label", HTMLElement).dispatchEvent(new MouseEvent("dblclick"));
-        const edit = rowPart(0, ".edit", HTMLInputElement);
-        edit.value = "Buy oat milk";
-        edit.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
-        await nextTick();
-        expect(shown()).toEqual(["- Buy oat milk", "x Walk the dog"]);
-
-        rowPart(0, ".delete", HTMLButtonElement).click();
-        await nextTick();
-        expect(shown()).toEqual(["x Walk the dog"]);
-        expect(rows()).toHaveLength(1);
-    });
-
-    it("filters, toggles all and clears completed", async () => {
-        for (const text of ["a", "b", "c"]) await type(text);
-        rowPart(1, ".toggle", HTMLInputElement).click();
-        await nextTick();
-        const filter = (name: string): void => part(found("todo-filters"), `[data-filter=${name}]`, HTMLButtonElement).click();
-        filter("active");
-        await nextTick();
-        expect(shown()).toEqual(["- a", "- c"]);
-        filter("completed");
-        await nextTick();
-        expect(shown()).toEqual(["x b"]);
-        filter("all");
-        await nextTick();
-
-        part(found("todo-toggle-all"), "input", HTMLInputElement).click();
-        await nextTick();
-        expect(shown()).toEqual(["x a", "x b", "x c"]);
-        expect(found("todo-toggle-all").checked).toBe(true);
-        part(found("todo-toggle-all"), "input", HTMLInputElement).click();
-        await nextTick();
-        expect(shown()).toEqual(["- a", "- b", "- c"]);
-
-        rowPart(0, ".toggle", HTMLInputElement).click();
-        rowPart(2, ".toggle", HTMLInputElement).click();
-        await nextTick();
-        part(found("todo-summary"), ".clear", HTMLButtonElement).click();
-        await nextTick();
-        expect(shown()).toEqual(["- b"]);
-        expect(rows()).toHaveLength(1);
-    });
-
-    it("moves todos with the keyboard and by dragging", async () => {
-        for (const text of ["a", "b", "c"]) await type(text);
-        rows()[2]?.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowUp", altKey: true, bubbles: true }));
-        await nextTick();
-        expect(shown()).toEqual(["- a", "- c", "- b"]);
-        const [a, , b] = rows();
-        if (a === undefined || b === undefined) throw new Error("No rows.");
-        const dataTransfer = new DataTransfer();
-        a.dispatchEvent(new DragEvent("dragstart", { bubbles: true, composed: true, dataTransfer }));
-        const bounds = b.getBoundingClientRect();
-        b.dispatchEvent(new DragEvent("drop", { bubbles: true, cancelable: true, composed: true, dataTransfer, clientY: bounds.bottom - 1 }));
-        await nextTick();
-        expect(shown()).toEqual(["- c", "- b", "- a"]);
-    });
-
-    it("generates todos and clears them all, leaving no rows", async () => {
-        part(found("todo-generate"), "[data-count='1000']", HTMLButtonElement).click();
-        await nextTick();
-        expect(rows()).toHaveLength(1000);
-        expect(left()).toBe("1000 items left");
-        part(found("todo-toggle-all"), "input", HTMLInputElement).click();
-        await nextTick();
-        part(found("todo-summary"), ".clear", HTMLButtonElement).click();
-        await nextTick();
-        expect(rows()).toHaveLength(0);
-        expect(found("todo-summary").hasAttribute("empty")).toBe(true);
-    });
-
-    it("commits an edit when its field loses focus", async () => {
-        await type("Buy milk");
-        rowPart(0, ".label", HTMLElement).dispatchEvent(new MouseEvent("dblclick"));
-        const edit = rowPart(0, ".edit", HTMLInputElement);
-        edit.value = "Buy oat milk";
-        edit.blur();
-        await nextTick();
-        expect(shown()).toEqual(["- Buy oat milk"]);
-    });
-
-    it("ignores what a row asks once its todo is deleted", async () => {
-        await type("a");
-        await type("b");
-        // Both events come before the delete's run applies, so the edit and toggle find no todo.
-        rowPart(0, ".delete", HTMLButtonElement).click();
-        rowPart(0, ".toggle", HTMLInputElement).click();
-        rows()[0]?.dispatchEvent(new CustomEvent("todo-edit", { detail: { label: "late" }, bubbles: true, composed: true }));
-        await nextTick();
-        expect(shown()).toEqual(["- b"]);
-    });
-
-    it("removes every row and stops listening when disposed", async () => {
-        for (const text of ["a", "b"]) await type(text);
-        await app.dispose();
-        expect(rows()).toHaveLength(0);
-        // Events after disposal start no runs, which would reject.
-        part(found("todo-entry"), "input", HTMLInputElement).value = "c";
-        part(found("todo-entry"), "input", HTMLInputElement).dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
-        expect(rows()).toHaveLength(0);
-    });
-});
-
-// It runs in the tick that gives the todo its row, alongside createRows.
-const failing = System.create({ name: "test/failing", components: { has: [todo] } }, () => {
-    throw new Error("a tick's system failed");
-});
-const failingObserver = System.create({ name: "test/failingObserver", observer: true, components: { has: [row], changed: [row] } }, () => {
-    throw new Error("a tick's observer failed");
-});
-const pass = System.create({ name: "test/pass", observer: true }, () => {});
-
-describe("the todo app's failures", () => {
-    /** The messages of the failures logged. */
-    const tickFailures = (): string[] => errors.flatMap(values => Array.isArray(values) && values[0] === "A run failed" && Array.isArray(values[1])
-        ? values[1].flatMap((failure: unknown) => typeof failure === "object" && failure !== null && "message" in failure ? [String(failure.message)] : [])
-        : []);
-
-    it("are logged when a tick's system fails, once each", async () => {
-        app.world.add(failing);
-        await type("a");
-        app.world.remove(failing);
-        await app.world.run(pass);
-        expect(tickFailures()).toEqual(["a tick's system failed"]);
-        errors.length = 0;
-    });
-
-    it("are logged when a tick's observer fails, by the next pass", async () => {
-        app.world.add(failingObserver);
-        await type("a");
-        app.world.remove(failingObserver);
-        await app.world.run(pass);
-        expect(tickFailures()).toEqual(["a tick's observer failed"]);
-        errors.length = 0;
-    });
-});

package/src/samples/todo/app/app.ts

@@ -1,30 +0,0 @@
-import { World, workers } from "../../../index.js";
-import * as exported from "../features/index.js";
-import { all } from "../shared/connect.js";
-import { define } from "../shared/elements/define.js";
-import type { Resources } from "../shared/feature.js";
-import { logFailures } from "./log-failures.js";
-
-/** The app's features, every one `features/index.ts` exports. Each knows only those it builds on; none knows the app. */
-const features = Object.values(exported);
-
-export type App = { readonly world: World; readonly dispose: () => Promise<void> };
-
-/**
- * Starts the app on the page within `root`, its elements defined: a world whose DOM systems drive the page, holding
- * the fixed elements its features find there, and whose runs the page's events start.
- */
-export const createApp = (root: HTMLElement): App => {
-    for (const feature of features) define(feature.elements);
-    const world = World.create(features.reduce<Resources>((resources, feature) => ({ ...resources, ...feature.resources(root) }), { [workers]: 0 }));
-    for (const { system } of features) if (system !== null) world.add(system);
-    world.add(logFailures);
-    const disconnect = all(...features.map(feature => feature.connect(world, root)));
-    return {
-        world,
-        dispose: async () => {
-            disconnect();
-            await world.dispose();
-        },
-    };
-};

package/src/samples/todo/app/log-failures.test.ts

@@ -1,28 +0,0 @@
-import { afterEach, expect, it, vi } from "vitest";
-import { System, World, workers } from "../../../index.js";
-import { logFailures } from "./log-failures.js";
-
-const fails = System.create({ name: "test/fails" }, () => {
-    throw new Error("broken");
-});
-const failsObserving = System.create({ name: "test/failsObserving", observer: true }, () => {
-    throw new Error("observer broken");
-});
-const nothing = System.create({ name: "test/nothing" }, () => {});
-
-afterEach(() => {
-    vi.restoreAllMocks();
-});
-
-it("logs a run's failures once each, and an observer pass's at the next pass", async () => {
-    const error = vi.spyOn(console, "error").mockImplementation(() => {});
-    await using world = World.create({ [workers]: 0 });
-    world.add(logFailures);
-    await world.run(fails);
-    expect(error).toHaveBeenCalledWith("A run failed", [expect.objectContaining({ kind: "system", message: "broken" })]);
-    world.add(failsObserving);
-    await world.run(nothing);
-    world.remove(failsObserving);
-    await world.run(nothing);
-    expect(error.mock.calls.map(([, failures]) => Array.isArray(failures) ? failures.map(failure => failure.message) : [])).toEqual([["broken"], ["observer broken"]]);
-});

package/src/samples/todo/app/log-failures.ts

@@ -1,7 +0,0 @@
-import { Report, System } from "../../../index.js";
-
-/** Logs what reports say failed, a run's an event started and a tick's alike: each report's errors are written once. */
-export const logFailures = System.create({ name: "app/logFailures", observer: true, components: { read: [Report.errors], changed: [Report.errors] } }, row => {
-    const { failures } = row[Report.errors];
-    if (failures.length > 0) console.error("A run failed", failures);
-});

package/src/samples/todo/app/main.ts

@@ -1,4 +0,0 @@
-import { createApp } from "./app.js";
-
-/** The todo sample's page: its markup holds the fixed elements, and the app's world drives them. */
-createApp(document.body);

package/src/samples/todo/app/profile.perf-browser-test.ts

@@ -1,100 +0,0 @@
-/// <reference types="@vitest/browser-playwright" />
-import { it } from "vitest";
-import { cdp } from "vitest/browser";
-import { Entity, System, World, workers } from "../../../index.js";
-import { bindCompletion } from "../features/completion/dom.js";
-import { bindFilters, filterRows } from "../features/filter/dom.js";
-import { addGenerated } from "../features/generate/model.js";
-import { bindRows, createRows, placeRows } from "../features/todos/dom.js";
-import { toggleTodo } from "../features/todos/model.js";
-import { entityOfElement } from "../shared/attach.js";
-import { createApp, type App } from "./app.js";
-import { logFailures } from "./log-failures.js";
-
-/**
- * Where a run's fixed cost goes in Chromium: runs timed one at a time and back to back, in a world gaining the app's
- * observer systems one by one and in the app at three sizes, then a sampled profile of toggling at 10K. Logged, never
- * asserted: `pnpm test:perf src/samples/todo`.
- */
-
-const nothing = System.create({ name: "profile/nothing" }, () => {});
-const median = (values: readonly number[]): number => [...values].sort((a, b) => a - b)[Math.floor(values.length / 2)] ?? NaN;
-
-/** The median of `repeats` runs awaited one at a time, and the mean of as many issued back to back. */
-const timeRuns = async (run: (repeat: number) => Promise<unknown>, repeats: number): Promise<string> => {
-    const times: number[] = [];
-    for (let repeat = 0; repeat < repeats; repeat++) {
-        const start = performance.now();
-        await run(repeat);
-        times.push(performance.now() - start);
-    }
-    const start = performance.now();
-    const pending: Promise<unknown>[] = [];
-    for (let repeat = 0; repeat < repeats; repeat++) pending.push(run(repeat));
-    await Promise.all(pending);
-    return `${median(times).toFixed(4)} | ${((performance.now() - start) / repeats).toFixed(4)}`;
-};
-
-const markup = "<todo-toggle-all></todo-toggle-all><todo-list></todo-list><todo-summary></todo-summary><todo-filters></todo-filters>";
-
-/** The app on the page with `n` todos and their rows, and its todos in list order. */
-const appWith = async (n: number): Promise<{ readonly app: App; readonly listed: readonly Entity[] }> => {
-    document.body.innerHTML = markup;
-    const app = createApp(document.body);
-    await app.world.run(addGenerated, { count: n });
-    await app.world.run(createRows);
-    return { app, listed: [...document.querySelectorAll("todo-row")].map(entityOfElement) };
-};
-
-/** The share of a profile's samples each function took, by itself, largest first. */
-const selfTimes = (profile: { readonly nodes: readonly { readonly id: number; readonly callFrame: { readonly functionName: string; readonly url: string; readonly lineNumber: number } }[]; readonly samples?: readonly number[] }): string[] => {
-    const nodes = new Map(profile.nodes.map(node => [node.id, node]));
-    const shares = new Map<string, number>();
-    const samples = profile.samples ?? [];
-    for (const sample of samples) {
-        const frame = nodes.get(sample)?.callFrame;
-        if (frame === undefined) continue;
-        const key = `${frame.functionName === "" ? "(anonymous)" : frame.functionName} ${frame.url.split("/").pop()?.split("?")[0] ?? ""}:${frame.lineNumber + 1}`;
-        shares.set(key, (shares.get(key) ?? 0) + 1);
-    }
-    return [...shares].sort((a, b) => b[1] - a[1]).slice(0, 12).map(([key, count]) => `${(100 * count / samples.length).toFixed(1)}% ${key}`);
-};
-
-it("profiles a run's fixed cost", async () => {
-    const lines = ["| Setup | one at a time, ms | back to back, ms per run |", "|---|---:|---:|"];
-    lines.push(`| await of a resolved promise | ${await timeRuns(() => Promise.resolve(), 2001)} |`);
-    lines.push(`| a task: MessageChannel round trip | ${await timeRuns(() => new Promise(resolve => {
-        const channel = new MessageChannel();
-        channel.port1.onmessage = () => {
-            channel.port1.close();
-            resolve(null);
-        };
-        channel.port2.postMessage(null);
-    }), 2001)} |`);
-    {
-        await using world = World.create({ [workers]: 0 });
-        lines.push(`| empty world, a run that changes nothing | ${await timeRuns(() => world.run(nothing), 2001)} |`);
-        for (const system of [bindRows, placeRows, filterRows, bindFilters, bindCompletion, logFailures, createRows]) {
-            world.add(system);
-            lines.push(`| + ${system.name} | ${await timeRuns(() => world.run(nothing), 2001)} |`);
-        }
-    }
-    for (const n of [1000, 10000, 100000]) {
-        const { app, listed } = await appWith(n);
-        lines.push(`| app with ${n} todos, a run that changes nothing | ${await timeRuns(() => app.world.run(nothing), 1001)} |`);
-        lines.push(`| app with ${n} todos, toggle one | ${await timeRuns(repeat => app.world.run(toggleTodo, { entity: listed[(repeat * 7) % n] ?? Entity.none }), 1001)} |`);
-        await app.dispose();
-    }
-    console.log(lines.join("\n"));
-
-    const { app, listed } = await appWith(10000);
-    const session = cdp();
-    await session.send("Profiler.enable");
-    await session.send("Profiler.setSamplingInterval", { interval: 50 });
-    await session.send("Profiler.start");
-    for (let i = 0; i < 4000; i++) await app.world.run(toggleTodo, { entity: listed[(i * 7) % listed.length] ?? Entity.none });
-    const { profile } = await session.send("Profiler.stop");
-    console.log(["Toggling one of 10K, self time by function:", ...selfTimes(profile)].join("\n"));
-    await app.dispose();
-    document.body.replaceChildren();
-});

package/src/samples/todo/app/proportional.browser.test.ts

@@ -1,157 +0,0 @@
-import { afterEach, expect, it } from "vitest";
-import { Entity, type World } from "../../../index.js";
-import { toggleAll } from "../features/completion/model.js";
-import { setFilter } from "../features/filter/model.js";
-import { addGenerated } from "../features/generate/model.js";
-import { TodoRow } from "../features/todos/elements/todo-row.js";
-import { addTodo, deleteTodo, editTodo, moveTodo, toggleTodo } from "../features/todos/model.js";
-import { entityOfElement } from "../shared/attach.js";
-import { nextTick, watchTicks } from "../shared/ticks.test-helper.js";
-import { createApp } from "./app.js";
-
-/**
- * Each operation's work follows what it changed, whatever the list holds: both the DOM's mutations and how often the
- * DOM systems reach rows, since elements drop equal writes and systems skip rows already right, which would hide a
- * system that visits every row. `app/todo.perf-browser-test.ts` times them.
- */
-
-const markup = `<todo-toggle-all></todo-toggle-all><todo-list></todo-list><todo-summary></todo-summary><todo-filters></todo-filters>`;
-
-afterEach(() => {
-    document.body.replaceChildren();
-});
-
-/** How often the DOM systems reached rows: the row properties they write, `hidden`, and what placing reads and calls. */
-let reaches = 0;
-
-/** Counts calls of an accessor's `kind` on `target`, until the returned function puts it back. */
-const countAccessor = (target: object, name: string, kind: "get" | "set"): (() => void) => {
-    const descriptor = Object.getOwnPropertyDescriptor(target, name);
-    const original = descriptor?.[kind];
-    if (descriptor === undefined || original === undefined) throw new Error(`No ${kind} ${name}.`);
-    Object.defineProperty(target, name, {
-        ...descriptor,
-        [kind]: function (this: unknown, ...values: unknown[]): unknown {
-            reaches += 1;
-            return Reflect.apply(original, this, values);
-        },
-    });
-    return () => Object.defineProperty(target, name, descriptor);
-};
-
-/** Counts calls of a method on `target`, until the returned function puts it back. */
-const countMethod = (target: object, name: string): (() => void) => {
-    const descriptor = Object.getOwnPropertyDescriptor(target, name);
-    const original: unknown = descriptor?.value;
-    if (descriptor === undefined || typeof original !== "function") throw new Error(`No method ${name}.`);
-    Object.defineProperty(target, name, {
-        ...descriptor,
-        value: function (this: unknown, ...values: unknown[]): unknown {
-            reaches += 1;
-            return Reflect.apply(original, this, values);
-        },
-    });
-    return () => Object.defineProperty(target, name, descriptor);
-};
-
-const countReaches = (): (() => void) => {
-    const restores = [
-        countAccessor(TodoRow.prototype, "label", "set"),
-        countAccessor(TodoRow.prototype, "done", "set"),
-        countAccessor(HTMLElement.prototype, "hidden", "get"),
-        countAccessor(HTMLElement.prototype, "hidden", "set"),
-        countAccessor(Element.prototype, "nextElementSibling", "get"),
-        countAccessor(Element.prototype, "firstElementChild", "get"),
-        countMethod(Element.prototype, "moveBefore"),
-        countMethod(Node.prototype, "insertBefore"),
-    ];
-    return () => {
-        for (const restore of restores) restore();
-    };
-};
-
-type Work = { readonly mutations: number; readonly reaches: number };
-
-/** The mutations of the page and its open shadow roots, and the rows reached, from `change` until the tick after it. */
-const workOf = async (change: () => Promise<number>): Promise<Work> => {
-    let mutations = 0;
-    const observer = new MutationObserver(records => {
-        mutations += records.length;
-    });
-    const options = { attributes: true, childList: true, characterData: true, subtree: true };
-    observer.observe(document.body, options);
-    for (const element of document.body.querySelectorAll("*")) if (element.shadowRoot !== null) observer.observe(element.shadowRoot, options);
-    reaches = 0;
-    await change();
-    await nextTick();
-    mutations += observer.takeRecords().length;
-    observer.disconnect();
-    return { mutations, reaches };
-};
-
-/** Work less `rows` mutations and `perRow` reaches for each of them. */
-const beyond = (work: Work, rows: number, perRow: number): Work => ({ mutations: work.mutations - rows, reaches: work.reaches - perRow * rows });
-
-/** Each operation's work, on an app holding `n` todos, every other one done. */
-const workWith = async (n: number): Promise<Record<string, Work>> => {
-    document.body.innerHTML = markup;
-    const app = createApp(document.body);
-    await watchTicks(app.world);
-    const { world } = app;
-    await world.run(addGenerated, { count: n });
-    await nextTick();
-    const listed = [...document.querySelectorAll("todo-row")].map(entityOfElement);
-    const at = (index: number): Entity => listed[(index + n) % n] ?? Entity.none;
-    for (let i = 0; i < n; i += 2) await world.run(toggleTodo, { entity: at(i) });
-    await nextTick();
-    const rows = (): HTMLElementTagNameMap["todo-row"][] => [...document.querySelectorAll("todo-row")];
-    const work: Record<string, Work> = {
-        "toggle one": await workOf(() => world.run(toggleTodo, { entity: at(1) })),
-        "edit one": await workOf(() => world.run(editTodo, { entity: at(3), label: "edited" })),
-        "move one": await workOf(() => world.run(moveTodo, { entity: at(-1), before: at(0) })),
-        "add one": await workOf(() => world.run(addTodo, { label: "added" })),
-        "delete one": await workOf(() => world.run(deleteTodo, { entity: at(5) })),
-    };
-    // A new filter passes every row, reading whether it's hidden, and writes those that change.
-    const filtered = await workOf(() => world.run(setFilter, { filter: "active" }));
-    const hidden = rows().filter(row => row.hidden).length;
-    work["filter, beyond each row read and each hidden"] = beyond({ mutations: filtered.mutations, reaches: filtered.reaches - rows().length }, hidden, 1);
-    await world.run(setFilter, { filter: "all" });
-    await nextTick();
-    // Each row marked done gets its label and done written and its visibility read.
-    const notDone = rows().filter(row => !row.done).length;
-    work["toggle all, beyond each row marked done"] = beyond(await workOf(() => world.run(toggleAll, { done: true })), notDone, 3);
-    await app.dispose();
-    return work;
-};
-
-it("does work in proportion to what changed, not to how many todos there are", async () => {
-    const restore = countReaches();
-    try {
-        const small = await workWith(100);
-        const large = await workWith(2000);
-        expect(large).toEqual(small);
-        expect(small).toEqual({
-            // The row's done attribute, and the summary's count; its label, done and visibility, and the summary's
-            // clear button, shown.
-            "toggle one": { mutations: 2, reaches: 4 },
-            // The row's label; its label and done.
-            "edit one": { mutations: 1, reaches: 2 },
-            // The row out of the list and in again; where it is, and the move.
-            "move one": { mutations: 2, reaches: 2 },
-            // The new row into the list, the tabindex and draggable it sets once connected, and the summary's count,
-            // its label being written in a shadow root made after the count began; its label, done, visibility, and
-            // where it goes, and its placing.
-            "add one": { mutations: 4, reaches: 5 },
-            // The row out of the list, and the summary's count.
-            "delete one": { mutations: 2, reaches: 0 },
-            // The filter buttons pressed and released.
-            "filter, beyond each row read and each hidden": { mutations: 2, reaches: 0 },
-            // The summary's count; its clear button.
-            "toggle all, beyond each row marked done": { mutations: 1, reaches: 1 },
-        });
-    }
-    finally {
-        restore();
-    }
-});