@antelopejs/dms 0.8.3 → 0.9.0

package/frontend-vue/tests/fixtures/dataEngine.ts

@@ -0,0 +1,44 @@
+/**
+ * The renderer's real data layer for a test: its async data, state and cookie
+ * composables, and dms-core's `useApiData` over the test's `useAuthFetch`
+ * stub, as the auto-imports a layer reaches. Each call starts a fresh runtime
+ * — a browser one under jsdom, a server one otherwise — so no data a test
+ * loaded leaks into the next.
+ */
+import { createApp } from "vue";
+import { vi } from "vitest";
+
+const engine = await import("#dms/frontend-module");
+const { useApiData, useApiPagedData } = await import(
+  "../../layers/dms-core/app/composables/auth/useApiData"
+);
+
+const ENGINE_GLOBALS = {
+  useDmsAsyncData: engine.useDmsAsyncData,
+  useDmsFetch: engine.useDmsFetch,
+  useDmsPagedData: engine.useDmsPagedData,
+  useDmsState: engine.useDmsState,
+  useDmsCookie: engine.useDmsCookie,
+  useApiData,
+  useApiPagedData,
+};
+
+export function useRealDataEngine(): ReturnType<
+  typeof engine.createDmsFrontendRuntime
+> {
+  for (const [name, composable] of Object.entries(ENGINE_GLOBALS))
+    vi.stubGlobal(name, composable);
+  const isServer = typeof window === "undefined";
+  const runtime = engine.createDmsFrontendRuntime(
+    undefined,
+    undefined,
+    isServer,
+  );
+  if (isServer) engine.setDmsServerRuntimeResolver(() => runtime);
+  else
+    engine.provideDmsFrontendRuntime(
+      createApp({ render: () => null }),
+      runtime,
+    );
+  return runtime;
+}

package/frontend-vue/tests/form-load-error.test.ts

@@ -1,5 +1,5 @@
 import { readFileSync } from "node:fs";
-import { createSSRApp, defineComponent, h, ref } from "vue";
+import { createSSRApp, defineComponent, h, nextTick, ref } from "vue";
 import { renderToString } from "vue/server-renderer";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import FormLoadError from "../layers/dms-ui/app/build/components/form/FormLoadError.vue";
@@ -66,6 +66,41 @@ describe("a form's record load", () => {
     expect(apply).toHaveBeenCalledWith(ROW);
   });
 
+  it("takes a later read of the record, its values becoming the saved ones", async () => {
+    const apply = vi.fn();
+    const onReloaded = vi.fn();
+    const source = loadOf(ROW, null);
+    trackFormRecordLoad(source, apply, { onReloaded });
+    const fresh = { values: { email: "fresh@example.com" }, initial: {} };
+    source.data.value = fresh;
+    await nextTick();
+    expect(apply).toHaveBeenLastCalledWith(fresh);
+    expect(onReloaded).toHaveBeenCalledOnce();
+  });
+
+  it("leaves a later read out while the user edits", async () => {
+    const apply = vi.fn();
+    const onReloaded = vi.fn();
+    const source = loadOf(ROW, null);
+    trackFormRecordLoad(source, apply, {
+      isEditing: () => true,
+      onReloaded,
+    });
+    source.data.value = { values: { email: "other@example.com" }, initial: {} };
+    await nextTick();
+    expect(apply).toHaveBeenCalledOnce();
+    expect(onReloaded).not.toHaveBeenCalled();
+  });
+
+  it("stops showing the cached record once a later read is refused", async () => {
+    const apply = vi.fn();
+    const source = loadOf(ROW, null);
+    const load = trackFormRecordLoad(source, apply);
+    source.error.value = FORBIDDEN;
+    await nextTick();
+    expect(load.failure.value).toBe("forbidden");
+  });
+
   it("applies a record that loaded", () => {
     const apply = vi.fn();
     const load = trackFormRecordLoad(loadOf(ROW, null), apply);
@@ -74,6 +109,25 @@ describe("a form's record load", () => {
   });
 });
 
+describe("Form.vue", () => {
+  const source = readFileSync(
+    new URL("../layers/dms-ui/app/components/form/Form.vue", import.meta.url),
+    "utf8",
+  );
+
+  it("leaves reading the record again on mount to the data layer", () => {
+    // The renderer reads cached data again on each mount (stale while
+    // revalidate): no status reset forces it any more.
+    expect(source).not.toMatch(/status\.value\s*=\s*"idle"/);
+  });
+
+  it("keys the record's load on the record it reads", () => {
+    expect(source).toMatch(
+      /`form-\$\{props\.componentId\}-\$\{props\.pageId\}-\$\{resolvedFetchUrl\.value/,
+    );
+  });
+});
+
 describe("a form about a record its address names none of", () => {
   const FETCH_URL = "/api/tasks/get?id={{query.id}}";
 

package/frontend-vue/tests/helpers/api-data-runtime.ts

@@ -0,0 +1,77 @@
+/**
+ * `useApiData` on the runtime's real async data, over a fake `$authFetch`:
+ * what a layer component reads, a server render of it, and the browser
+ * hydrating its HTML.
+ */
+import { createApp, createSSRApp, type App, type Component } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { vi } from "vitest";
+import type { DmsFrontendRuntime, DmsPayload } from "#dms/frontend-module";
+
+export const engine = await import("#dms/frontend-module");
+const { useApiData } = await import(
+  "../../layers/dms-core/app/composables/auth/useApiData"
+);
+
+/** Stubs the globals `useApiData` reads, `$authFetch` being `authFetch`. */
+export function stubApiData(authFetch: (...args: never[]) => unknown): void {
+  vi.stubGlobal("useDmsFetch", engine.useDmsFetch);
+  vi.stubGlobal("useDmsAsyncData", engine.useDmsAsyncData);
+  vi.stubGlobal("useDmsState", engine.useDmsState);
+  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: authFetch }));
+  vi.stubGlobal("useApiData", useApiData);
+}
+
+/** A browser runtime: `useApiData` outside a component reads through it. */
+export function browserRuntime(app: App = createApp({})): DmsFrontendRuntime {
+  const runtime = engine.createDmsFrontendRuntime();
+  engine.provideDmsFrontendRuntime(app, runtime);
+  return runtime;
+}
+
+/** Renders `root` as a server would: its HTML and the payload it hands over. */
+export async function serverRender(
+  root: Component,
+  setup?: (app: App) => void,
+): Promise<{ html: string; payload: DmsPayload }> {
+  const runtime = engine.createDmsFrontendRuntime(undefined, {}, true);
+  const app = createSSRApp(root);
+  engine.provideDmsFrontendRuntime(app, runtime);
+  setup?.(app);
+  const html = await renderToString(app);
+  return {
+    html,
+    payload: structuredClone(engine.serializeDmsPayload(runtime)),
+  };
+}
+
+/** Hydrates the server's `html` with its `payload`, as the browser does. */
+export function hydrate(
+  root: Component,
+  html: string,
+  payload: DmsPayload,
+  setup?: (app: App) => void,
+): { app: App; container: HTMLElement } {
+  const runtime = engine.createDmsFrontendRuntime();
+  engine.restoreDmsPayload(runtime, payload);
+  const container = document.createElement("div");
+  container.innerHTML = html;
+  const app = createSSRApp(root);
+  engine.provideDmsFrontendRuntime(app, runtime);
+  setup?.(app);
+  app.mount(container);
+  return { app, container };
+}
+
+/** Mounts `root` in the browser, past the hydration (a client navigation). */
+export function mountInBrowser(
+  root: Component,
+  setup?: (app: App) => void,
+): { app: App; container: HTMLElement } {
+  const container = document.createElement("div");
+  const app = createApp(root);
+  browserRuntime(app);
+  setup?.(app);
+  app.mount(container);
+  return { app, container };
+}

package/frontend-vue/tests/image-hydration-ids.test.ts

@@ -1,19 +1,20 @@
 // @vitest-environment jsdom
 import {
   computed,
-  createSSRApp,
   defineComponent,
   h,
   inject,
   onBeforeUnmount,
+  onScopeDispose,
   ref,
+  shallowReactive,
   useId,
   watch,
   type App,
 } from "vue";
-import { renderToString } from "vue/server-renderer";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import Image from "../layers/dms-ui/app/components/form/components/Image.vue";
+import { hydrate, serverRender, stubApiData } from "./helpers/api-data-runtime";
 
 const STORED_IMAGE = { key: "files/profile/cover.png", alt: "Cover" };
 
@@ -25,16 +26,14 @@ const passthrough = defineComponent({
       slots.default?.(),
 });
 
-function createImageApp(): App {
-  const app = createSSRApp({
-    render: () => h(Image, { modelValue: STORED_IMAGE }),
-  });
+const Root = { render: () => h(Image, { modelValue: STORED_IMAGE }) };
+
+function register(app: App): void {
   app.component("UButton", defineComponent({ setup: () => () => h("button") }));
   app.component("UIcon", defineComponent({ setup: () => () => h("span") }));
   app.component("UInput", defineComponent({ setup: () => () => h("input") }));
   app.component("UTooltip", passthrough);
   app.component("UModal", defineComponent({ setup: () => () => null }));
-  return app;
 }
 
 beforeEach(() => {
@@ -44,12 +43,17 @@ beforeEach(() => {
   vi.stubGlobal("inject", inject);
   vi.stubGlobal("useId", useId);
   vi.stubGlobal("onBeforeUnmount", onBeforeUnmount);
+  vi.stubGlobal("onScopeDispose", onScopeDispose);
+  vi.stubGlobal("shallowReactive", shallowReactive);
   vi.stubGlobal("FORM_FIELD_LOADING_KEY", Symbol());
   vi.stubGlobal("FORM_CONTENT_LANGUAGE_KEY", Symbol());
   vi.stubGlobal("CONTENT_LANGUAGE_HEADER", "x-content-language");
-  vi.stubGlobal("useAuthFetch", () => ({
-    $authFetch: () => new Promise(() => undefined),
-  }));
+  stubApiData((async () => ({
+    resourceKey: STORED_IMAGE.key,
+    filename: "cover.png",
+    size: 10,
+    url: "https://files.test/cover.png",
+  })) as never);
   vi.stubGlobal("useUploadWithProgress", () => ({
     uploadWithProgress: vi.fn(),
   }));
@@ -72,15 +76,16 @@ afterEach(() => {
 });
 
 it("hydrates a stored single image without an attribute mismatch", async () => {
-  const html = await renderToString(createImageApp());
-  const container = document.createElement("div");
-  container.innerHTML = html;
+  vi.stubEnv("SSR", true);
+  const { html, payload } = await serverRender(Root, register);
+  vi.unstubAllEnvs();
   const warnings: string[] = [];
-  const app = createImageApp();
-  app.config.warnHandler = (message) => warnings.push(message);
   const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
 
-  app.mount(container);
+  const { app, container } = hydrate(Root, html, payload, (application) => {
+    register(application);
+    application.config.warnHandler = (message) => warnings.push(message);
+  });
 
   expect(warnings.filter((message) => message.includes("Hydration"))).toEqual(
     [],

package/frontend-vue/tests/image-reference-preservation.test.ts

@@ -2,30 +2,29 @@ import { readFileSync } from "node:fs";
 import { transpileModule } from "typescript";
 import {
   computed,
-  createSSRApp,
+  createApp,
   defineComponent,
   effectScope,
   getCurrentInstance,
   h,
   nextTick,
   onScopeDispose,
-  onServerPrefetch,
   reactive,
   ref,
+  shallowReactive,
   watch,
   useId,
+  type App,
   type EffectScope,
   type Ref,
 } from "vue";
-import { renderToString } from "vue/server-renderer";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import Image from "../layers/dms-ui/app/components/form/components/Image.vue";
 import { useKeyboardPlatform } from "../layers/dms-ui/app/composables/global/keyboardPlatform";
 import { fieldErrorId } from "../layers/dms-core/app/composables/useFieldErrors";
-import {
-  isDefinitiveMetadataFailure,
-  resolveMetadataRetryDelay,
-} from "../layers/dms-ui/app/utils/metadataRetry";
+import { useFileMetadata } from "../layers/dms-ui/app/build/composables/files/useFileMetadata";
+import { FORM_CONTENT_LANGUAGE_KEY } from "../layers/dms-ui/app/composables/form/types/content-language";
+import { engine, serverRender, stubApiData } from "./helpers/api-data-runtime";
 
 interface ImageValue {
   key: string;
@@ -47,13 +46,14 @@ interface ImageHarness {
   emitValue: () => void;
   removeItem: (id: string) => void;
   addFiles: (files: File[]) => void;
-  fetchItemMetadata: (item: GalleryEntry, force?: boolean) => Promise<void>;
 }
 
 const emit = vi.fn();
 const authFetch = vi.fn();
 const upload = vi.fn();
 let scope: EffectScope;
+// The application the script runs in: its DMS runtime reads the metadata.
+let app: App;
 const props = reactive({ modelValue: [] as ImageValue[], multiple: true });
 const original: ImageValue = {
   key: "legacy/private.png",
@@ -78,15 +78,26 @@ function loadImage(): ImageHarness {
     .replaceAll("import.meta.env.SSR", "false")
     .replace(/^export type /gm, "type ");
   const { outputText } = transpileModule(source, {});
-  return scope.run(() =>
-    new Function(
-      `${outputText}; return { items, emitValue, removeItem, addFiles, fetchItemMetadata };`,
-    )(),
+  return app.runWithContext(() =>
+    scope.run(() =>
+      new Function(
+        `${outputText}; return { items, emitValue, removeItem, addFiles };`,
+      )(),
+    ),
   )!;
 }
 
+/** Lets the metadata reads answer. */
+const settle = async () => {
+  for (let tick = 0; tick < 5; tick++) await nextTick();
+  await new Promise((done) => setTimeout(done, 0));
+};
+
 beforeEach(() => {
   scope = effectScope();
+  app = createApp({});
+  engine.provideDmsFrontendRuntime(app, engine.createDmsFrontendRuntime());
+  vi.stubEnv("SSR", false);
   props.modelValue = [original, sibling];
   authFetch.mockImplementation((_url, options) =>
     options.query?.resourceKey === original.key
@@ -98,8 +109,8 @@ beforeEach(() => {
         }),
   );
   vi.stubGlobal("defineProps", () => props);
-  vi.stubGlobal("isDefinitiveMetadataFailure", isDefinitiveMetadataFailure);
-  vi.stubGlobal("resolveMetadataRetryDelay", resolveMetadataRetryDelay);
+  vi.stubGlobal("useFileMetadata", useFileMetadata);
+  vi.stubGlobal("shallowReactive", shallowReactive);
   vi.stubGlobal("defineEmits", () => emit);
   vi.stubGlobal("ref", ref);
   vi.stubGlobal("computed", computed);
@@ -107,10 +118,9 @@ beforeEach(() => {
   vi.stubGlobal("inject", () => null);
   vi.stubGlobal("useId", () => (getCurrentInstance() ? useId() : "image"));
   vi.stubGlobal("FORM_FIELD_LOADING_KEY", Symbol());
-  vi.stubGlobal("FORM_CONTENT_LANGUAGE_KEY", Symbol());
   vi.stubGlobal("CONTENT_LANGUAGE_HEADER", "x-content-language");
   vi.stubGlobal("onBeforeUnmount", onScopeDispose);
-  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: authFetch }));
+  stubApiData(authFetch);
   vi.stubGlobal("useUploadWithProgress", () => ({
     uploadWithProgress: upload,
   }));
@@ -135,13 +145,14 @@ beforeEach(() => {
 
 afterEach(() => {
   scope.stop();
+  vi.unstubAllEnvs();
   vi.unstubAllGlobals();
   vi.resetAllMocks();
 });
 
 it("preserves a denied image when another image is removed", async () => {
   const image = loadImage();
-  await nextTick();
+  await settle();
   expect(image.items.value[0]!.status).toBe("unavailable");
   image.removeItem(image.items.value[1]!.id);
   expect(emit).toHaveBeenLastCalledWith("update:modelValue", [original]);
@@ -149,7 +160,7 @@ it("preserves a denied image when another image is removed", async () => {
 
 it("preserves a denied image on value echo without reinitializing its identity", async () => {
   const image = loadImage();
-  await nextTick();
+  await settle();
   const id = image.items.value[0]!.id;
   props.modelValue = [{ ...original }, { ...sibling }];
   await nextTick();
@@ -163,7 +174,7 @@ it("preserves a denied image on value echo without reinitializing its identity",
 
 it("removes a denied reference only when explicitly removed", async () => {
   const image = loadImage();
-  await nextTick();
+  await settle();
   image.removeItem(image.items.value[0]!.id);
   expect(emit).toHaveBeenLastCalledWith("update:modelValue", [
     { ...sibling, principal: true },
@@ -172,7 +183,7 @@ it("removes a denied reference only when explicitly removed", async () => {
 
 it("excludes a failed new upload while retaining existing references", async () => {
   const image = loadImage();
-  await nextTick();
+  await settle();
   authFetch.mockRejectedValueOnce(new Error("Upload failed"));
   image.addFiles([new File(["bytes"], "new.png", { type: "image/png" })]);
   await vi.waitFor(() =>
@@ -187,35 +198,34 @@ it("excludes a failed new upload while retaining existing references", async ()
 });
 
 it("keeps the denied image and its explicit deletion control in rendered markup", async () => {
-  vi.stubGlobal("useAuthFetch", () => ({
-    $authFetch: () => {
-      const denied = Promise.reject(new Error("403"));
-      onServerPrefetch(() => denied.catch(() => undefined));
-      return denied;
-    },
-  }));
-  const app = createSSRApp({
-    render: () => h(Image, { modelValue: [original], multiple: true }),
-  });
-  app.component(
-    "UButton",
-    defineComponent({
-      props: ["label"],
-      setup: (buttonProps) => () => h("button", buttonProps.label),
-    }),
+  authFetch.mockRejectedValue(
+    Object.assign(new Error("Forbidden"), { statusCode: 403 }),
   );
-  app.component("UIcon", defineComponent({ setup: () => () => h("span") }));
-  app.component(
-    "UTooltip",
-    defineComponent({
-      setup:
-        (_, { slots }) =>
-        () =>
-          slots.default?.(),
-    }),
+  const register = (app: App) => {
+    app.component(
+      "UButton",
+      defineComponent({
+        props: ["label"],
+        setup: (buttonProps) => () => h("button", buttonProps.label),
+      }),
+    );
+    app.component("UIcon", defineComponent({ setup: () => () => h("span") }));
+    app.component(
+      "UTooltip",
+      defineComponent({
+        setup:
+          (_, { slots }) =>
+          () =>
+            slots.default?.(),
+      }),
+    );
+    app.component("UModal", defineComponent({ setup: () => () => null }));
+  };
+  vi.stubEnv("SSR", true);
+  const { html } = await serverRender(
+    { render: () => h(Image, { modelValue: [original], multiple: true }) },
+    register,
   );
-  app.component("UModal", defineComponent({ setup: () => () => null }));
-  const html = await renderToString(app);
   expect(html).toContain("dms.form.image.file_unavailable");
   expect(html).not.toContain("dms.form.image.upload_failed");
   expect(html).toContain("dms.form.image.delete</button>");
@@ -225,11 +235,7 @@ it("keeps the denied image and its explicit deletion control in rendered markup"
 it("refreshes an expiring image preview and retries a transient failure", async () => {
   vi.useFakeTimers();
   vi.setSystemTime(new Date("2026-09-14T12:00:00Z"));
-  const contentLanguageKey = Symbol();
-  vi.stubGlobal("FORM_CONTENT_LANGUAGE_KEY", contentLanguageKey);
-  vi.stubGlobal("inject", (key: symbol) =>
-    key === contentLanguageKey ? "*" : null,
-  );
+  app.provide(FORM_CONTENT_LANGUAGE_KEY, "*");
   props.modelValue = [original];
   authFetch
     .mockReset()
@@ -248,7 +254,7 @@ it("refreshes an expiring image preview and retries a transient failure", async
     });
 
   const image = loadImage();
-  await nextTick();
+  await vi.advanceTimersByTimeAsync(0);
   await vi.advanceTimersByTimeAsync(55000);
   expect(image.items.value[0]!.url).toBe("https://example.test/first.png");
   await vi.advanceTimersByTimeAsync(1000);

package/frontend-vue/tests/input-number-adjust.test.ts

@@ -78,9 +78,23 @@ async function mount(props: Record<string, unknown>) {
   app.component("UInputNumber", NumberField);
   app.mount(host);
   await nextTick();
+  await untilListenersAttached();
   return { value, adjustments, input: host.querySelector("input")! };
 }
 
+// Vue ignores an event that reaches one of its listeners in the millisecond
+// that listener was attached (runtime-dom's `_vts` check, against events
+// fired while the patch that attached it runs). Enter bubbles from the field's
+// own listener to the wrapper's, so an Enter fired in the millisecond of the
+// mount never settled the field: about one run in two. A person never types
+// that fast, so the field is used once the clock has moved on.
+async function untilListenersAttached() {
+  const attached = Date.now();
+  while (Date.now() <= attached) {
+    await new Promise((resolve) => setTimeout(resolve, 1));
+  }
+}
+
 async function type(input: HTMLInputElement, text: string) {
   input.value = text;
   input.dispatchEvent(new Event("input", { bubbles: true }));

package/frontend-vue/tests/key-value-list-copy.test.ts

@@ -6,6 +6,7 @@
  */
 import { createApp, defineComponent, h, reactive, ref } from "vue";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useRealDataEngine } from "./fixtures/dataEngine";
 import { createI18n } from "vue-i18n";
 
 const i18n = createI18n({
@@ -66,6 +67,8 @@ function copyButtons(root: HTMLElement): HTMLButtonElement[] {
   return [...root.querySelectorAll<HTMLButtonElement>("button[title]")];
 }
 
+beforeEach(() => useRealDataEngine());
+
 beforeEach(() => {
   fetchedItems = [];
   copied.splice(0);

package/frontend-vue/tests/member-role-picker.test.ts

@@ -16,6 +16,7 @@ import {
   formStateInjectionKey,
 } from "@nuxt/ui/composables/useFormField";
 import { sameFormValue } from "../layers/dms-ui/app/build/composables/unsaved-changes/formValue";
+import { browserRuntime, stubApiData } from "./helpers/api-data-runtime";
 
 const ROLES_URL = "/settings/workspace/members/role-options";
 const ROLE_OPTIONS = {
@@ -74,6 +75,7 @@ async function mountPicker(props: Record<string, unknown> = {}) {
     },
   });
   app = createApp(Field);
+  browserRuntime(app);
   const stub = (tag: string) =>
     defineComponent({
       setup:
@@ -110,7 +112,7 @@ beforeEach(() => {
   vi.stubGlobal("useI18n", () => ({ t: translate }));
   authFetch.mockReset();
   authFetch.mockResolvedValue(ROLE_OPTIONS);
-  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: authFetch }));
+  stubApiData(authFetch);
   fieldError.value = undefined;
   formState.value = {};
   model.value = [];
@@ -127,7 +129,7 @@ afterEach(() => {
 it("offers the server's roles and picks and unpicks them", async () => {
   await mountPicker();
 
-  expect(authFetch).toHaveBeenCalledWith(ROLES_URL);
+  expect(authFetch).toHaveBeenCalledWith(ROLES_URL, expect.anything());
   expect(
     [...host.querySelectorAll("button[data-value]")].map((b) =>
       b.textContent?.trim(),

package/frontend-vue/tests/menu-sync-reconnect.test.ts

@@ -0,0 +1,47 @@
+import { nextTick, ref } from "vue";
+import { describe, expect, it, vi } from "vitest";
+
+vi.stubGlobal("defineDmsPlugin", (setup: unknown) => setup);
+const { watchRealtimeReconnects } = await import(
+  "../layers/dms-layout/app/plugins/dms-menu-sync.client"
+);
+
+// A realtime stream that drops and opens again missed the menu events sent
+// meanwhile: the menu resyncs once it is back, but not on the first opening,
+// which follows the page load that brought the current menu.
+
+describe("the menu resync on a realtime reconnect", () => {
+  it("leaves the first opening alone and resyncs on each reopening", async () => {
+    const sessionId = ref<string | undefined>(undefined);
+    const onReconnect = vi.fn();
+    watchRealtimeReconnects(sessionId, onReconnect);
+
+    sessionId.value = "session-1";
+    await nextTick();
+    expect(onReconnect).not.toHaveBeenCalled();
+
+    sessionId.value = undefined;
+    await nextTick();
+    sessionId.value = "session-2";
+    await nextTick();
+    expect(onReconnect).toHaveBeenCalledOnce();
+
+    sessionId.value = undefined;
+    await nextTick();
+    sessionId.value = "session-3";
+    await nextTick();
+    expect(onReconnect).toHaveBeenCalledTimes(2);
+  });
+
+  it("counts a stream already open when it starts as its first opening", async () => {
+    const sessionId = ref<string | undefined>("session-1");
+    const onReconnect = vi.fn();
+    watchRealtimeReconnects(sessionId, onReconnect);
+
+    sessionId.value = undefined;
+    await nextTick();
+    sessionId.value = "session-2";
+    await nextTick();
+    expect(onReconnect).toHaveBeenCalledOnce();
+  });
+});

package/frontend-vue/tests/metadata-retry.test.ts

@@ -10,12 +10,14 @@ import {
   onBeforeUnmount,
   onScopeDispose,
   ref,
+  shallowReactive,
   useId,
   watch,
 } from "vue";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import File from "../layers/dms-ui/app/components/form/components/File.vue";
 import Image from "../layers/dms-ui/app/components/form/components/Image.vue";
+import { browserRuntime, stubApiData } from "./helpers/api-data-runtime";
 import {
   isDefinitiveMetadataFailure,
   resolveMetadataRetryDelay,
@@ -80,6 +82,7 @@ function mountField(field: FieldCase): { app: App; container: HTMLElement } {
   const app = createApp({
     render: () => h(field.component, { modelValue: field.modelValue }),
   });
+  browserRuntime(app);
   app.config.globalProperties.$t = (key: string) => key;
   for (const name of ["UFileUpload", "ULink", "UTooltip"])
     app.component(name, passthrough);
@@ -104,7 +107,8 @@ beforeEach(() => {
   vi.stubGlobal("FORM_FIELD_LOADING_KEY", Symbol());
   vi.stubGlobal("FORM_CONTENT_LANGUAGE_KEY", Symbol());
   vi.stubGlobal("CONTENT_LANGUAGE_HEADER", "x-content-language");
-  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: authFetch }));
+  vi.stubGlobal("shallowReactive", shallowReactive);
+  stubApiData(authFetch);
   vi.stubGlobal("useUploadWithProgress", () => ({
     uploadWithProgress: vi.fn(),
   }));