@antelopejs/dms 0.8.3 → 0.9.1

package/frontend-vue/tests/table-list-data-requests.test.ts

@@ -0,0 +1,154 @@
+// @vitest-environment jsdom
+/**
+ * The requests behind a table view's list and counters, through the
+ * runtime's real async data: a query rebuilt equal by value reads nothing
+ * again, one that changes reads again, and each request carries the run's
+ * abort signal, so a run replaced or dropped cancels its request.
+ */
+import { computed, createApp, defineComponent, h, nextTick, ref } from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { TableViewColumn } from "../layers/dms-ui/app/composables/table-view/types";
+
+const engine = await import("#dms/frontend-module");
+vi.stubGlobal("computed", computed);
+vi.stubGlobal("useDmsAsyncData", engine.useDmsAsyncData);
+
+const { useTableRows } = await import(
+  "../layers/dms-ui/app/build/composables/table-view/useTableRows"
+);
+const { useTableCountsData, useTableListData } = await import(
+  "../layers/dms-ui/app/build/composables/table-view/useTableListData"
+);
+
+const LOCATION = "/api/orders";
+const COLUMNS = [{ id: "total", accessorKey: "total" }] as TableViewColumn[];
+
+interface Call {
+  url: string;
+  query?: Record<string, unknown>;
+  signal?: AbortSignal;
+}
+
+const calls: Call[] = [];
+const api = (async (url: string, options: Omit<Call, "url"> = {}) => {
+  calls.push({ url, ...options });
+  return url.endsWith("/count/batch")
+    ? { all: 1 }
+    : { results: [], total: 0, offset: 0, limit: 10 };
+}) as never;
+
+const unmounts: Array<() => void> = [];
+
+beforeEach(() => {
+  calls.length = 0;
+});
+
+afterEach(() => {
+  unmounts.splice(0).forEach((unmount) => unmount());
+});
+
+async function settle() {
+  await nextTick();
+  await new Promise((done) => setTimeout(done, 0));
+  await nextTick();
+}
+
+/** A table whose query is rebuilt on each `tick`, to `limit`'s value. */
+async function mountTable() {
+  const tick = ref(0);
+  const limit = ref(10);
+  const Table = defineComponent({
+    setup() {
+      const rows = useTableRows({ api, location: LOCATION, columns: COLUMNS });
+      const keys = { componentId: "orders", pageId: "sales", rows };
+      const archiveQuery = computed(() => (void tick.value, {}));
+      useTableListData({
+        ...keys,
+        query: computed(() => (void tick.value, { limit: limit.value })),
+        archiveQuery,
+        isSelfManaged: computed(() => false),
+      });
+      useTableCountsData({
+        ...keys,
+        queries: computed(() => (void tick.value, [{ id: "all", query: {} }])),
+        archiveQuery,
+      });
+      return () => h("i");
+    },
+  });
+  const app = createApp(Table);
+  engine.provideDmsFrontendRuntime(
+    app,
+    engine.createDmsFrontendRuntime(undefined, {}),
+  );
+  app.mount(document.createElement("div"));
+  unmounts.push(() => app.unmount());
+  await settle();
+  return { tick, limit };
+}
+
+describe("a table view's list and counters", () => {
+  it("read nothing again for a query rebuilt equal", async () => {
+    const { tick } = await mountTable();
+    expect(calls.map(({ url }) => url).sort()).toEqual([
+      `${LOCATION}/count/batch`,
+      `${LOCATION}/list`,
+    ]);
+    calls.length = 0;
+
+    tick.value += 1;
+    await settle();
+
+    expect(calls).toEqual([]);
+  });
+
+  it("read the list again for a query that changes", async () => {
+    const { limit } = await mountTable();
+    calls.length = 0;
+
+    limit.value = 20;
+    await settle();
+
+    expect(calls.map(({ url, query }) => [url, query?.limit])).toEqual([
+      [`${LOCATION}/list`, 20],
+    ]);
+  });
+
+  it("send each request with its run's abort signal", async () => {
+    await mountTable();
+
+    expect(calls).toHaveLength(2);
+    for (const call of calls) expect(call.signal).toBeInstanceOf(AbortSignal);
+  });
+});
+
+describe("a source table's requests", () => {
+  const source = {
+    fetchUrl: "/api/report",
+    capabilities: {
+      filter: false,
+      search: false,
+      sort: false,
+      paginate: false,
+    },
+  };
+
+  it("carry the signal given to the list and the counters", async () => {
+    const rows = useTableRows({
+      api,
+      location: LOCATION,
+      columns: COLUMNS,
+      source: source as never,
+    });
+    const controller = new AbortController();
+    await rows.list({}, controller.signal).catch(() => undefined);
+    await rows
+      .countBatch([{ id: "all", query: {} }], controller.signal)
+      .catch(() => undefined);
+
+    expect(calls.map(({ signal }) => signal)).toEqual([
+      controller.signal,
+      controller.signal,
+    ]);
+  });
+});

package/frontend-vue/tests/table-retry-loading.test.ts

@@ -0,0 +1,37 @@
+/**
+ * The renderer keeps a failed list's `error` while the next run is in flight,
+ * as Nuxt does. A table retrying its list (its retry button, a filter, a page)
+ * shows that run, its skeleton or the rows it has, rather than the error panel
+ * of the answer it may replace: the failure the table reads is the settled
+ * one.
+ */
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const tableView = readFileSync(
+  resolve(__dirname, "../layers/dms-ui/app/components/table-view/TableView.vue"),
+  "utf8",
+);
+
+describe("a table retrying its list after a failure", () => {
+  it("reads the failure of settled runs only", () => {
+    expect(tableView).toMatch(
+      /const settledError = computed\(\(\) =>\s*status\.value === "pending" \? null : error\.value,?\s*\);/,
+    );
+  });
+
+  it("draws its skeleton and hides its error panel while the retry runs", () => {
+    const firstPage = tableView.slice(
+      tableView.indexOf("const isFirstPageLoading"),
+    );
+    expect(firstPage.slice(0, firstPage.indexOf(";"))).toMatch(
+      /!settledError\.value/,
+    );
+    const panel = tableView.slice(tableView.indexOf("const listLoadError"));
+    expect(panel.slice(0, panel.indexOf("});"))).toMatch(
+      /const failure = settledError\.value;\s*if \(!failure\) return undefined;/,
+    );
+    expect(panel.slice(0, panel.indexOf("});"))).not.toMatch(/error\.value/);
+  });
+});

package/frontend-vue/tests/table-source-navigation.test.ts

@@ -19,7 +19,6 @@ import type { TableViewColumn } from "../layers/dms-ui/app/composables/table-vie
 
 const engine = await import("#dms/frontend-module");
 vi.stubGlobal("useDmsAsyncData", engine.useDmsAsyncData);
-vi.stubGlobal("useDmsLazyAsyncData", engine.useDmsLazyAsyncData);
 
 const { useTableRows } = await import(
   "../layers/dms-ui/app/build/composables/table-view/useTableRows"

package/frontend-vue/tests/table-source-period-scope.test.ts

@@ -19,7 +19,6 @@ import type { TableViewColumn } from "../layers/dms-ui/app/composables/table-vie
 
 const engine = await import("#dms/frontend-module");
 vi.stubGlobal("useDmsAsyncData", engine.useDmsAsyncData);
-vi.stubGlobal("useDmsLazyAsyncData", engine.useDmsLazyAsyncData);
 
 const { useTableRows } = await import(
   "../layers/dms-ui/app/build/composables/table-view/useTableRows"

package/frontend-vue/tests/table-view-views.test.ts

@@ -228,7 +228,7 @@ describe("useTableViews", () => {
         });
       },
     };
-    vi.stubGlobal("useUserSession", () => ({
+    vi.stubGlobal("useDmsUserSession", () => ({
       user: ref({ _id: options.userId ?? "u1" }),
     }));
     vi.stubGlobal("useDmsRoute", () => ({ query: options.query ?? {} }));

package/frontend-vue/tests/top-list-card-actions.test.ts

@@ -6,6 +6,7 @@
 import { createSSRApp, defineComponent, h, ref } from "vue";
 import { renderToString } from "vue/server-renderer";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useRealDataEngine } from "./fixtures/dataEngine";
 import TopListCard from "../layers/dms-ui/app/components/top-list/TopListCard.vue";
 
 vi.mock("../layers/dms-ui/app/composables/chart/useChartFetch", () => ({
@@ -55,6 +56,8 @@ async function render(props: Record<string, unknown>): Promise<string> {
   return renderToString(app);
 }
 
+beforeEach(() => useRealDataEngine());
+
 beforeEach(() => {
   vi.stubGlobal("useI18n", () => ({ locale: ref("en-US"), t: String }));
   vi.stubGlobal("useTranslation", () => ({

package/frontend-vue/tests/top-list-card-period-badge-ssr.test.ts

@@ -0,0 +1,212 @@
+// @vitest-environment jsdom
+/**
+ * A TopListCard's period badge across a server render and its hydration,
+ * through the runtime's real payload: once its selector set up before it, the
+ * server prints the preset whatever it knows of the browser's time zone (a
+ * preset reads the same in every zone, and a relative one at every instant),
+ * and the browser hydrates it without a mismatch. A selector further down the
+ * page leaves a skeleton on both sides, which the label replaces once mounted.
+ */
+import {
+  createSSRApp,
+  defineComponent,
+  h,
+  nextTick,
+  onBeforeUnmount,
+  ref,
+  type App,
+  type Component,
+} from "vue";
+import { renderToString } from "vue/server-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { PeriodPreset } from "../layers/dms-core/app/composables/period/types";
+import { browserTimeZone } from "../layers/dms-core/app/utils/regional";
+import TopListCard from "../layers/dms-ui/app/components/top-list/TopListCard.vue";
+
+vi.mock("../layers/dms-ui/app/composables/chart/useChartFetch", () => ({
+  useChartFetch: () => ({
+    data: ref({ items: [{ id: "pro", title: "Pro", value: 12 }] }),
+    isLoading: ref(false),
+  }),
+}));
+
+const engine = await import("#dms/frontend-module");
+const { usePeriod } = await import(
+  "../layers/dms-core/app/composables/period/usePeriod"
+);
+const { registerPeriodScope } = await import(
+  "../layers/dms-core/app/composables/period/usePeriodScope"
+);
+const { TIME_ZONE_COOKIE } = await import(
+  "../layers/dms-core/app/composables/period/periodTimeZone"
+);
+
+const SCOPE = "dashboard";
+const SKELETON = "SKELETON";
+
+function selector(preset: PeriodPreset): Component {
+  return defineComponent({
+    setup() {
+      const period = usePeriod({ defaultPreset: preset });
+      onBeforeUnmount(registerPeriodScope(SCOPE, period.state));
+      return () => h("i");
+    },
+  });
+}
+
+// A skeleton carries an aria-label; the badge renders its label.
+const Slot = defineComponent({
+  props: { ariaLabel: String },
+  setup:
+    (props, { slots }) =>
+    () =>
+      h("span", props.ariaLabel ? SKELETON : slots.default?.()),
+});
+
+const Card = defineComponent({
+  setup: () => () =>
+    h(TopListCard, {
+      title: "Top plans",
+      componentId: "plans",
+      pageId: "dashboard",
+      fetchUrl: "/api/plans/top",
+      periodScope: SCOPE,
+    }),
+});
+
+function page(children: Component[]): App {
+  const app = createSSRApp({
+    render: () =>
+      h(
+        "main",
+        children.map((child) => h(child)),
+      ),
+  });
+  for (const name of ["DmsCard", "UBadge", "USkeleton", "DmsTopListRow"])
+    app.component(name, Slot);
+  return app;
+}
+
+function zoneCookie(zone: string): string {
+  return `${TIME_ZONE_COOKIE}=${encodeURIComponent(JSON.stringify(zone))}`;
+}
+
+async function serverRender(children: Component[], cookies?: string) {
+  const runtime = engine.createDmsFrontendRuntime(undefined, {}, true, cookies);
+  const app = page(children);
+  engine.provideDmsFrontendRuntime(app, runtime);
+  engine.setDmsServerRuntimeResolver(() => runtime);
+  // What the server sees: no `window`.
+  const browserWindow = globalThis.window;
+  vi.stubGlobal("window", undefined);
+  try {
+    const html = await renderToString(app);
+    return { html, payload: engine.serializeDmsPayload(runtime) };
+  } finally {
+    vi.stubGlobal("window", browserWindow);
+  }
+}
+
+const mounted: App[] = [];
+
+async function hydrate(
+  children: Component[],
+  { html, payload }: { html: string; payload: unknown },
+) {
+  const browser = engine.createDmsFrontendRuntime(undefined, {});
+  engine.restoreDmsPayload(
+    browser,
+    structuredClone(payload) as Parameters<typeof engine.restoreDmsPayload>[1],
+  );
+  const container = document.createElement("div");
+  container.innerHTML = html;
+  const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+  const error = vi.spyOn(console, "error").mockImplementation(() => {});
+  try {
+    const app = page(children);
+    engine.provideDmsFrontendRuntime(app, browser);
+    app.mount(container);
+    mounted.push(app);
+    await nextTick();
+    const mismatches = [...warn.mock.calls, ...error.mock.calls].filter(
+      (call) => /hydration|mismatch/i.test(String(call[0])),
+    );
+    return { container, mismatches };
+  } finally {
+    warn.mockRestore();
+    error.mockRestore();
+  }
+}
+
+/** The card head's badge: its preset label, or its skeleton. */
+function badge(html: string): string {
+  const label = /dms\.period\.presets\.[a-z0-9-]+/.exec(html)?.[0];
+  if (label) return label;
+  return html.includes(SKELETON) ? SKELETON : "none";
+}
+
+beforeEach(() => {
+  vi.stubGlobal("useI18n", () => ({ locale: ref("en-US"), t: String }));
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (text: string) => text,
+  }));
+  vi.stubGlobal("useComponentEvent", () => ({}));
+  vi.stubGlobal("useWatch", () => ({ state: ref({}) }));
+  vi.stubGlobal("useDmsState", engine.useDmsState);
+  vi.stubGlobal("useDmsCookie", engine.useDmsCookie);
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+  vi.unstubAllGlobals();
+});
+
+describe("a TopListCard's period badge across hydration", () => {
+  it("is in the server's HTML, and hydrates without a mismatch", async () => {
+    const children = [selector("this-month"), Card];
+    const rendered = await serverRender(
+      children,
+      zoneCookie(browserTimeZone()),
+    );
+    expect(badge(rendered.html)).toBe("dms.period.presets.this-month");
+
+    const { container, mismatches } = await hydrate(children, rendered);
+    expect(mismatches).toEqual([]);
+    expect(badge(container.innerHTML)).toBe("dms.period.presets.this-month");
+  });
+
+  it("is rendered before the browser's time zone is known", async () => {
+    const children = [selector("this-month"), Card];
+    const rendered = await serverRender(children);
+    expect(badge(rendered.html)).toBe("dms.period.presets.this-month");
+
+    const { mismatches } = await hydrate(children, rendered);
+    expect(mismatches).toEqual([]);
+  });
+
+  it("names a relative preset too", async () => {
+    const children = [selector("last-24h"), Card];
+    const rendered = await serverRender(
+      children,
+      zoneCookie(browserTimeZone()),
+    );
+    expect(badge(rendered.html)).toBe("dms.period.presets.last-24h");
+
+    const { mismatches } = await hydrate(children, rendered);
+    expect(mismatches).toEqual([]);
+  });
+
+  it("waits for a selector set up after the card, on both sides", async () => {
+    const children = [Card, selector("last-year")];
+    const rendered = await serverRender(
+      children,
+      zoneCookie(browserTimeZone()),
+    );
+    expect(badge(rendered.html)).toBe(SKELETON);
+
+    const { container, mismatches } = await hydrate(children, rendered);
+    expect(mismatches).toEqual([]);
+    await nextTick();
+    expect(badge(container.innerHTML)).toBe("dms.period.presets.last-year");
+  });
+});

package/frontend-vue/tests/top-list-card-period-badge.test.ts

@@ -0,0 +1,79 @@
+/**
+ * A TopListCard tied to a period selector names the selector's preset in its
+ * head. The preset is the same name on both sides: the server prints it, and
+ * the browser hydrates it, rather than a skeleton until the card mounts.
+ */
+import { computed, createSSRApp, defineComponent, h, ref } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useRealDataEngine } from "./fixtures/dataEngine";
+import { registerPeriodScope } from "../layers/dms-core/app/composables/period/usePeriodScope";
+import type { PeriodState } from "../layers/dms-core/app/composables/period/types";
+import TopListCard from "../layers/dms-ui/app/components/top-list/TopListCard.vue";
+
+vi.mock("../layers/dms-ui/app/composables/chart/useChartFetch", () => ({
+  useChartFetch: () => ({
+    data: ref({ items: [{ id: "pro", title: "Pro", value: 12 }] }),
+    isLoading: ref(false),
+  }),
+}));
+
+const Tagged = (tag: string) =>
+  defineComponent({
+    setup:
+      (_, { slots }) =>
+      () =>
+        h("div", { [`data-${tag}`]: "" }, slots.default?.()),
+  });
+
+async function render(beforeCard?: () => void): Promise<string> {
+  const app = createSSRApp({
+    setup() {
+      beforeCard?.();
+      return () =>
+        h(TopListCard, {
+          title: "Top plans",
+          componentId: "plans",
+          pageId: "dashboard",
+          periodScope: "dashboard-period",
+        });
+    },
+  });
+  app.component("DmsCard", Tagged("card"));
+  app.component("UBadge", Tagged("badge"));
+  app.component("USkeleton", Tagged("skeleton"));
+  app.component("UIcon", Tagged("icon"));
+  app.component("DmsTopListRow", Tagged("row"));
+  return renderToString(app);
+}
+
+beforeEach(() => {
+  useRealDataEngine();
+  vi.stubGlobal("useI18n", () => ({ locale: ref("en-US"), t: String }));
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (text: string) => text,
+  }));
+  vi.stubGlobal("useComponentEvent", () => ({}));
+  vi.stubGlobal("useWatch", () => ({ state: ref({}) }));
+});
+
+afterEach(() => vi.unstubAllGlobals());
+
+describe("TopListCard period badge", () => {
+  it("prints the preset of a selector set up before it", async () => {
+    const html = await render(() => {
+      registerPeriodScope(
+        "dashboard-period",
+        computed(() => ({ preset: "last_30_days" }) as PeriodState),
+      );
+    });
+    expect(html).toContain("dms.period.presets.last_30_days");
+    expect(html).not.toContain("data-skeleton");
+  });
+
+  it("holds the badge's place while no selector is known", async () => {
+    const html = await render();
+    expect(html).toContain("data-skeleton");
+    expect(html).not.toContain("data-badge");
+  });
+});

package/frontend-vue/tests/top-list-card-value-suffix.test.ts

@@ -5,6 +5,7 @@
 import { createSSRApp, defineComponent, h, ref } from "vue";
 import { renderToString } from "vue/server-renderer";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useRealDataEngine } from "./fixtures/dataEngine";
 import TopListCard from "../layers/dms-ui/app/components/top-list/TopListCard.vue";
 
 const rows = ref<Array<Record<string, unknown>>>([]);
@@ -55,6 +56,8 @@ function values(html: string): string[] {
   );
 }
 
+beforeEach(() => useRealDataEngine());
+
 beforeEach(() => {
   rows.value = [
     { id: "a", title: "GET /orders", value: 1864 },

package/frontend-vue/tests/trailing-deduper.test.ts

@@ -71,4 +71,26 @@ describe("createTrailingDeduper", () => {
 
     expect(task).toHaveBeenCalledTimes(2);
   });
+
+  it("lets a join share the run in flight without queueing a pass", async () => {
+    const first = deferred();
+    const task = vi.fn(() => first.promise);
+    const deduper = createTrailingDeduper();
+
+    const inFlight = deduper.run(task);
+    const joined = deduper.join(task);
+    first.resolve();
+    await Promise.all([inFlight, joined]);
+
+    expect(task).toHaveBeenCalledTimes(1);
+  });
+
+  it("starts a run for a join when nothing is in flight", async () => {
+    const task = vi.fn(async () => undefined);
+    const deduper = createTrailingDeduper();
+
+    await deduper.join(task);
+
+    expect(task).toHaveBeenCalledTimes(1);
+  });
 });

package/frontend-vue/tests/use-api-data-update.test.ts

@@ -0,0 +1,119 @@
+// @vitest-environment jsdom
+/**
+ * Updating what `useApiData` read, through the runtime's real async data:
+ * `useDmsData(key)` puts a write's answer in place (and back when the write
+ * fails) or applies a realtime change, in every component showing the read,
+ * without reading it again. The URL form names its key with `key`.
+ */
+import { createApp, defineComponent, h, nextTick, type App } from "vue";
+import { afterAll, afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+interface Task {
+  id: string;
+  title: string;
+}
+
+const engine = await import("#dms/frontend-module");
+vi.stubGlobal("useDmsFetch", engine.useDmsFetch);
+vi.stubGlobal("useDmsAsyncData", engine.useDmsAsyncData);
+const requests: string[] = [];
+const backend: Record<string, Task[]> = {
+  "/api/tasks": [{ id: "1", title: "Write" }],
+  "/api/archive": [{ id: "9", title: "Old" }],
+};
+vi.stubGlobal("useAuthFetch", () => ({
+  $authFetch: async (url: string) => {
+    requests.push(url);
+    return structuredClone(backend[url]);
+  },
+}));
+const { useApiData } = await import(
+  "../layers/dms-core/app/composables/auth/useApiData"
+);
+
+const settle = () => new Promise((done) => setTimeout(done, 10));
+const apps: App[] = [];
+
+function mount(setup: () => () => ReturnType<typeof h>): HTMLElement {
+  const runtime = engine.createDmsFrontendRuntime(undefined, {});
+  const app = createApp(defineComponent({ setup }));
+  engine.provideDmsFrontendRuntime(app, runtime);
+  const element = document.createElement("div");
+  app.mount(element);
+  apps.push(app);
+  return element;
+}
+
+const titles = (tasks: Task[] | null | undefined) =>
+  (tasks ?? []).map((task) => task.title).join(",");
+
+beforeEach(() => {
+  requests.length = 0;
+});
+
+afterEach(() => {
+  apps.splice(0).forEach((app) => app.unmount());
+});
+
+afterAll(() => vi.unstubAllGlobals());
+
+describe("useDmsData on a useApiData read", () => {
+  it("puts a write's answer in place, and back when the write fails, without reading again", async () => {
+    let tasks: ReturnType<typeof engine.useDmsData<Task[]>> | undefined;
+    const element = mount(() => {
+      const list = useApiData<Task[]>("/api/tasks", { key: "tasks" });
+      const other = useApiData<Task[]>("/api/tasks", { key: "tasks" });
+      tasks = engine.useDmsData<Task[]>("tasks");
+      return () =>
+        h("p", `${titles(list.data.value)}|${titles(other.data.value)}`);
+    });
+    await settle();
+    expect(element.textContent).toBe("Write|Write");
+
+    const previous = tasks!.data.value!;
+    tasks!.data.value = [...previous, { id: "2", title: "Review" }];
+    await nextTick();
+    expect(element.textContent).toBe("Write,Review|Write,Review");
+
+    // The write failed: what was there comes back.
+    tasks!.data.value = previous;
+    await nextTick();
+    expect(element.textContent).toBe("Write|Write");
+    expect(requests).toEqual(["/api/tasks"]);
+  });
+
+  it("applies a realtime change to a read another component shows", async () => {
+    const Archive = defineComponent({
+      setup() {
+        // In place changes need a deep read: reads are shallow by default.
+        const { data } = useApiData<Task[]>(
+          "task-archive",
+          ({ $authFetch, signal }) =>
+            $authFetch<Task[]>("/api/archive", { signal }),
+          { deep: true },
+        );
+        return () => h("p", titles(data.value));
+      },
+    });
+    let archive: ReturnType<typeof engine.useDmsData<Task[]>> | undefined;
+    const element = mount(() => {
+      // A realtime listener of the page, which reads nothing itself.
+      archive = engine.useDmsData<Task[]>("task-archive");
+      return () => h("div", [h(Archive)]);
+    });
+    expect(archive!.data.value).toBeUndefined();
+    await settle();
+    expect(element.textContent).toBe("Old");
+
+    // The event names the task it renamed.
+    archive!.data.value = archive!.data.value!.map((task) =>
+      task.id === "9" ? { ...task, title: "Renamed" } : task,
+    );
+    await nextTick();
+    expect(element.textContent).toBe("Renamed");
+    archive!.data.value![0]!.title = "Renamed again";
+    await nextTick();
+    expect(element.textContent).toBe("Renamed again");
+    expect(requests).toEqual(["/api/archive"]);
+  });
+});