@antelopejs/dms 0.8.3 → 0.9.0

package/frontend-vue/tests/email-layout.test.ts

@@ -3,8 +3,16 @@ import { createSSRApp, defineComponent, h } from "vue";
 import { renderToString } from "vue/server-renderer";
 import EmailLayout from "../layers/dms-layout/app/emails/components/EmailLayout.vue";
 import { emailLogoUrl } from "../layers/dms-layout/app/emails/components/index";
+import type { DmsLogoSources } from "../layers/dms-core/shared/types/app-config";
+
+/** `branding.logo` as an email reads it: a path stands for `default.light`. */
+interface EmailLogos {
+  default?: Partial<DmsLogoSources>;
+  email?: Partial<DmsLogoSources>;
+}
 
 const PUBLIC_BASE = "https://admin.example.com";
+const DARK_SOURCE_MEDIA = 'media="(prefers-color-scheme: dark)"';
 const ELEMENTS: Record<string, string> = {
   EHtml: "html",
   EHead: "head",
@@ -29,12 +37,11 @@ function element(tag: string) {
 
 async function renderLayout(
   props: Record<string, unknown>,
-  logo = "/images/logo.png",
+  logo: string | EmailLogos = "/images/logo.png",
   clientBaseUrl = PUBLIC_BASE,
 ): Promise<string> {
-  vi.stubGlobal("useDmsAppConfig", () => ({
-    branding: { logo: { default: { light: logo } } },
-  }));
+  const logos = typeof logo === "string" ? { default: { light: logo } } : logo;
+  vi.stubGlobal("useDmsAppConfig", () => ({ branding: { logo: logos } }));
   vi.stubGlobal("useDmsRuntimeConfig", () => ({
     public: { dms: { clientBaseUrl } },
   }));
@@ -92,6 +99,61 @@ describe("EmailLayout", () => {
   });
 });
 
+describe("EmailLayout email logo", () => {
+  const guarded = { title: "Hi", publicLogoOnly: true };
+
+  it("draws the email logo in place of the default one", async () => {
+    const html = await renderLayout(guarded, {
+      default: { light: "/images/logo.svg" },
+      email: { light: "/branding/email.png" },
+    });
+    expect(html).toContain(
+      `<img src="${PUBLIC_BASE}/branding/email.png" alt="Logo">`,
+    );
+    expect(html).not.toContain("<picture>");
+  });
+
+  it("offers the dark email logo to the clients in dark mode", async () => {
+    const html = await renderLayout(guarded, {
+      email: { light: "/branding/email.png", dark: "/branding/email-dark.png" },
+    });
+    expect(html).toContain(
+      `<picture><source ${DARK_SOURCE_MEDIA} srcset="${PUBLIC_BASE}/branding/email-dark.png"><img src="${PUBLIC_BASE}/branding/email.png" alt="Logo"></picture>`,
+    );
+  });
+
+  it("keeps a single image when the dark logo is the same or unusable", async () => {
+    for (const dark of ["/branding/email.png", "/branding/email-dark.svg"]) {
+      const html = await renderLayout(guarded, {
+        email: { light: "/branding/email.png", dark },
+      });
+      expect(html).not.toContain("<picture>");
+      expect(html).toContain(
+        `<img src="${PUBLIC_BASE}/branding/email.png" alt="Logo">`,
+      );
+    }
+  });
+
+  it("draws no dark logo without a light one", async () => {
+    const html = await renderLayout(guarded, {
+      default: { light: "/images/logo.svg" },
+      email: { light: "", dark: "/branding/email-dark.png" },
+    });
+    expect(html).not.toContain("<img");
+    expect(html).not.toContain("<source");
+  });
+
+  it("falls back to the default logo without an email one", async () => {
+    const html = await renderLayout(guarded, {
+      default: { light: "/images/logo.png", dark: "/images/logo-dark.png" },
+    });
+    expect(html).not.toContain("<picture>");
+    expect(html).toContain(
+      `<img src="${PUBLIC_BASE}/images/logo.png" alt="Logo">`,
+    );
+  });
+});
+
 describe("emailLogoUrl", () => {
   it("resolves a root path against the public base URL", () => {
     expect(emailLogoUrl("/logo.png", PUBLIC_BASE)).toBe(

package/frontend-vue/tests/error-page-message.test.ts

@@ -61,9 +61,9 @@ function installRuntime() {
   }));
 }
 
-function mountError(statusCode: number) {
+function mountError(statusCode: number, message = TECHNICAL_MESSAGE) {
   app = createApp(ErrorPage, {
-    error: { statusCode, message: TECHNICAL_MESSAGE },
+    error: { statusCode, message },
   });
   app.config.globalProperties.$t = (key: string) => key;
   app.component("DmsAppLogo", Passthrough);
@@ -96,3 +96,26 @@ it.each([HTTP_NOT_FOUND, HTTP_FORBIDDEN])(
 it("still shows the message of an unexpected error", () => {
   expect(mountError(500)).toContain(TECHNICAL_MESSAGE);
 });
+
+it("never shows the backend's address a failed request names", () => {
+  const text = mountError(
+    502,
+    '[GET] "http://10.0.0.4:5010/dms/page?path=%2Fprojects": 502 Bad Gateway',
+  );
+  expect(text).toContain("502 Bad Gateway");
+  expect(text).not.toContain("10.0.0.4");
+  expect(text).not.toContain("/dms/page");
+});
+
+it("drops an address anywhere in the message, and an empty remainder", async () => {
+  const { publicErrorMessage } = await import(
+    "../layers/dms-layout/app/build/utils/publicErrorMessage"
+  );
+  expect(
+    publicErrorMessage(
+      "fetch failed: connect ECONNREFUSED http://127.0.0.1:5010/api",
+    ),
+  ).toBe("fetch failed: connect ECONNREFUSED");
+  expect(publicErrorMessage("http://127.0.0.1:5010/api")).toBeUndefined();
+  expect(publicErrorMessage(undefined)).toBeUndefined();
+});

package/frontend-vue/tests/favicon.test.ts

@@ -0,0 +1,131 @@
+// @vitest-environment jsdom
+/**
+ * The favicon plugin: the `<link rel="icon">` tags it declares from
+ * `branding.logo.favicon`, their type and color-scheme media, and the icon
+ * following an app config the loader replaces in development.
+ */
+import { useHead } from "@unhead/vue";
+import {
+  createHead as createClientHead,
+  renderDOMHead,
+} from "@unhead/vue/client";
+import { createHead, renderSSRHead } from "@unhead/vue/server";
+import { createApp, createSSRApp, nextTick, ref } from "vue";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import layoutAppConfig from "../layers/dms-layout/app/app.config";
+import type { DmsLogoSources } from "../layers/dms-core/shared/types/app-config";
+
+interface FaviconAppConfig {
+  branding: { logo?: { favicon?: Partial<DmsLogoSources> } };
+}
+
+const ANTELOPE_ICON = "/images/antelope-logo/icon.svg";
+const ICON_TAG_START = '<link rel="icon"';
+// The loader keeps the merged app config in a ref and swaps it on a
+// development update; `useDmsAppConfig()` returns its current value.
+const appConfig = ref<FaviconAppConfig>({ branding: {} });
+
+vi.stubGlobal("defineDmsPlugin", (setup: unknown) => setup);
+vi.stubGlobal("useHead", useHead);
+vi.stubGlobal("useDmsAppConfig", () => appConfig.value);
+
+const { default: faviconPlugin } = await import(
+  "../layers/dms-layout/app/plugins/favicon"
+);
+
+function useFavicon(favicon?: Partial<DmsLogoSources>): void {
+  appConfig.value = { branding: { logo: { favicon } } };
+}
+
+// unhead adds its own charset and viewport tags around them.
+async function renderIconTags(): Promise<string[]> {
+  const app = createSSRApp({ render: () => null });
+  const head = createHead();
+  app.use(head);
+  app.runWithContext(() => faviconPlugin({} as never));
+  const { headTags } = await renderSSRHead(head);
+  return headTags.split("\n").filter((tag) => tag.startsWith(ICON_TAG_START));
+}
+
+beforeEach(() => {
+  appConfig.value = { branding: {} };
+  document.head.innerHTML = "";
+});
+
+describe("server render", () => {
+  it("declares the DMS's collapsed icon by default", async () => {
+    appConfig.value = layoutAppConfig;
+
+    expect(await renderIconTags()).toEqual([
+      `<link rel="icon" href="${ANTELOPE_ICON}" type="image/svg+xml">`,
+    ]);
+  });
+
+  it("declares a light and a dark icon that follow the system scheme", async () => {
+    useFavicon({
+      light: "/branding/icon-light.png",
+      dark: "/branding/icon-dark.png",
+    });
+
+    expect(await renderIconTags()).toEqual([
+      '<link rel="icon" href="/branding/icon-light.png" type="image/png" media="(prefers-color-scheme: light)">',
+      '<link rel="icon" href="/branding/icon-dark.png" type="image/png" media="(prefers-color-scheme: dark)">',
+    ]);
+  });
+
+  it.each([
+    ["/favicon.ico", "image/x-icon"],
+    ["/branding/icon.WEBP", "image/webp"],
+    ["https://cdn.example.com/icon.svg?v=2", "image/svg+xml"],
+  ])("types %s as %s", async (icon, type) => {
+    useFavicon({ light: icon, dark: icon });
+
+    expect(await renderIconTags()).toEqual([
+      `<link rel="icon" href="${icon}" type="${type}">`,
+    ]);
+  });
+
+  it("leaves the type out for an extension it does not know", async () => {
+    useFavicon({ light: "/icon", dark: "/icon" });
+
+    expect(await renderIconTags()).toEqual(['<link rel="icon" href="/icon">']);
+  });
+
+  it("declares the one file it has when the other mode has none", async () => {
+    useFavicon({ light: "/icon.png", dark: "" });
+
+    expect(await renderIconTags()).toEqual([
+      '<link rel="icon" href="/icon.png" type="image/png">',
+    ]);
+  });
+
+  it("declares no icon without a favicon, leaving the loader's placeholder", async () => {
+    expect(await renderIconTags()).toEqual([]);
+  });
+});
+
+describe("in the browser", () => {
+  it("swaps the icon when the app config is replaced", async () => {
+    useFavicon({ light: "/before.png", dark: "/before.png" });
+    const app = createApp({ render: () => null });
+    const head = createClientHead();
+    app.use(head);
+    app.runWithContext(() => faviconPlugin({} as never));
+    await renderDOMHead(head);
+    expect(
+      document.head.querySelector("link[rel=icon]")?.getAttribute("href"),
+    ).toBe("/before.png");
+
+    useFavicon({ light: "/after.svg", dark: "/after-dark.svg" });
+    await nextTick();
+    await renderDOMHead(head);
+
+    const icons = [...document.head.querySelectorAll("link[rel=icon]")].map(
+      (link) => [link.getAttribute("href"), link.getAttribute("media")],
+    );
+    expect(icons).toEqual([
+      ["/after.svg", "(prefers-color-scheme: light)"],
+      ["/after-dark.svg", "(prefers-color-scheme: dark)"],
+    ]);
+  });
+});

package/frontend-vue/tests/file-fields-ssr.test.ts

@@ -0,0 +1,145 @@
+// @vitest-environment jsdom
+/**
+ * The stored files of the file and image fields and of their table previews,
+ * through the runtime's real async data: a server render reads their
+ * metadata and renders the names and pictures, and the browser hydrates with
+ * it without asking again.
+ */
+import {
+  type App,
+  type Component,
+  computed,
+  type FunctionalComponent,
+  h,
+  inject,
+  nextTick,
+  onBeforeUnmount,
+  onScopeDispose,
+  ref,
+  shallowReactive,
+  useId,
+  watch,
+} from "vue";
+import { afterEach, beforeEach, 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 FilePreview from "../layers/dms-ui/app/components/table-view/FilePreview.vue";
+import ImagePreview from "../layers/dms-ui/app/components/table-view/ImagePreview.vue";
+import { hydrate, serverRender, stubApiData } from "./helpers/api-data-runtime";
+
+const METADATA: Record<string, Record<string, unknown>> = {
+  "documents/brief.pdf": {
+    resourceKey: "documents/brief.pdf",
+    filename: "brief.pdf",
+    size: 2048,
+    mimetype: "application/pdf",
+    url: "https://files.test/brief.pdf",
+  },
+  "covers/cover.png": {
+    resourceKey: "covers/cover.png",
+    filename: "cover.png",
+    size: 4096,
+    mimetype: "image/png",
+    url: "https://files.test/cover.png",
+  },
+};
+
+const authFetch = vi.fn(
+  async (_url: string, options: { query: { resourceKey: string } }) =>
+    METADATA[options.query.resourceKey],
+);
+const mounted: App[] = [];
+
+const passthrough: FunctionalComponent = (_, { slots }) =>
+  h("span", slots.default?.());
+const renderTag =
+  (tag: string): FunctionalComponent =>
+  (props) =>
+    h(tag, props.src ? { src: props.src } : {});
+
+function register(app: App): void {
+  app.config.globalProperties.$t = (key: string) => key;
+  for (const name of ["UFileUpload", "ULink", "UTooltip"])
+    app.component(name, passthrough);
+  for (const name of ["UButton", "UIcon", "UInput"])
+    app.component(name, renderTag("i"));
+  app.component("UAvatar", renderTag("img"));
+  app.component("UModal", () => null);
+}
+
+beforeEach(() => {
+  vi.stubGlobal("ref", ref);
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("watch", watch);
+  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("CONTENT_LANGUAGE_HEADER", "x-content-language");
+  stubApiData(authFetch as never);
+  vi.stubGlobal("useUploadWithProgress", () => ({
+    uploadWithProgress: vi.fn(),
+  }));
+  vi.stubGlobal("useFormField", () => ({
+    emitFormChange: vi.fn(),
+    color: ref(undefined),
+    highlight: ref(undefined),
+    ariaAttrs: ref(undefined),
+  }));
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal(
+    "useDmsCookie",
+    (_key: string, options: { default: () => unknown }) =>
+      ref(options.default()),
+  );
+  vi.stubGlobal("useToast", () => ({ add: vi.fn() }));
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+  vi.unstubAllEnvs();
+  vi.unstubAllGlobals();
+  authFetch.mockClear();
+});
+
+it.each<[string, Component, Record<string, unknown>, string]>([
+  ["a file field", File, { modelValue: "documents/brief.pdf" }, "brief.pdf"],
+  [
+    "an image field",
+    Image,
+    { modelValue: { key: "covers/cover.png", alt: "Cover" } },
+    "https://files.test/cover.png",
+  ],
+  [
+    "a table's file cell",
+    FilePreview,
+    { resourceKey: "documents/brief.pdf" },
+    "brief.pdf",
+  ],
+  [
+    "a table's image cell",
+    ImagePreview,
+    { images: [{ key: "covers/cover.png" }] },
+    "https://files.test/cover.png",
+  ],
+])(
+  "renders %s's stored file on the server, and the browser does not read it again",
+  async (_name, component, props, shown) => {
+    const root = { render: () => h(component, props) };
+    vi.stubEnv("SSR", true);
+    const { html, payload } = await serverRender(root, register);
+    vi.stubEnv("SSR", false);
+    expect(html).toContain(shown);
+    expect(authFetch).toHaveBeenCalledTimes(1);
+
+    authFetch.mockClear();
+    const { app, container } = hydrate(root, html, payload, register);
+    mounted.push(app);
+    await nextTick();
+    await new Promise((done) => setTimeout(done, 0));
+    expect(authFetch).not.toHaveBeenCalled();
+    expect(container.innerHTML).toContain(shown);
+  },
+);

package/frontend-vue/tests/file-read-urls.test.ts

@@ -1,31 +1,116 @@
-import { effectScope, onScopeDispose, ref } from "vue";
+// @vitest-environment jsdom
+/**
+ * Stored files' read URLs through the runtime's real async data: a key
+ * resolved in a component's setup is read with the page (the server waits for
+ * it and hands it over), every component showing a file shares its read, and
+ * in the browser the URL is read again before it expires and a failure that
+ * may heal is retried.
+ */
+import {
+  computed,
+  defineComponent,
+  effectScope,
+  h,
+  inject,
+  nextTick,
+  onScopeDispose,
+  ref,
+  shallowReactive,
+  watch,
+  type App,
+} from "vue";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  browserRuntime,
+  hydrate,
+  mountInBrowser,
+  serverRender,
+  stubApiData,
+} from "./helpers/api-data-runtime";
 import { useFileReadUrls } from "../layers/dms-ui/app/composables/useFileReadUrls";
+import { FORM_CONTENT_LANGUAGE_KEY } from "../layers/dms-ui/app/composables/form/types/content-language";
 
 const RESOURCE_KEY = "localized/private.png";
 const START_TIME = new Date("2026-09-14T12:00:00Z");
 const URL_TTL_MS = 60000;
 
 const authFetch = vi.fn();
+const mounted: App[] = [];
 
-describe("file read URLs", () => {
-  beforeEach(() => {
+/** An avatar as the identity cell draws it: resolved from an immediate watcher. */
+const Avatar = defineComponent({
+  props: { fileKey: { type: String, required: true } },
+  setup(props) {
+    const { getUrl, resolve } = useFileReadUrls();
+    watch(
+      () => props.fileKey,
+      (key) => void resolve(key),
+      { immediate: true },
+    );
+    return () => h("img", { src: getUrl(props.fileKey) ?? "" });
+  },
+});
+
+const metadataCalls = () =>
+  authFetch.mock.calls.filter(([url]) => url === "/api/files/metadata");
+
+beforeEach(() => {
+  vi.stubEnv("SSR", false);
+  vi.stubGlobal("CONTENT_LANGUAGE_HEADER", "x-content-language");
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("watch", watch);
+  vi.stubGlobal("onScopeDispose", onScopeDispose);
+  vi.stubGlobal("shallowReactive", shallowReactive);
+  vi.stubGlobal("inject", inject);
+  stubApiData(authFetch);
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+  vi.unstubAllEnvs();
+  vi.useRealTimers();
+  vi.unstubAllGlobals();
+  vi.resetAllMocks();
+});
+
+describe("file read URLs in a server render", () => {
+  it("renders the URL a setup resolves, and the browser hydrates without asking again", async () => {
+    authFetch.mockResolvedValue({
+      url: "https://example.test/avatar",
+      expiresAt: Date.now() + URL_TTL_MS,
+    });
+    const Row = defineComponent({
+      setup: () => () =>
+        h("div", [
+          h(Avatar, { fileKey: RESOURCE_KEY }),
+          h(Avatar, { fileKey: RESOURCE_KEY }),
+        ]),
+    });
+
+    vi.stubEnv("SSR", true);
+    const { html, payload } = await serverRender(Row);
     vi.stubEnv("SSR", false);
-    vi.useFakeTimers();
-    vi.setSystemTime(START_TIME);
-    vi.stubGlobal("ref", ref);
-    vi.stubGlobal("onScopeDispose", onScopeDispose);
-    vi.stubGlobal("inject", () => "*");
-    vi.stubGlobal("FORM_CONTENT_LANGUAGE_KEY", Symbol());
-    vi.stubGlobal("CONTENT_LANGUAGE_HEADER", "x-content-language");
-    vi.stubGlobal("useAuthFetch", () => ({ $authFetch: authFetch }));
+    expect(html).toBe(
+      '<div><img src="https://example.test/avatar"><img src="https://example.test/avatar"></div>',
+    );
+    // Two avatars of one file: one read.
+    expect(metadataCalls()).toHaveLength(1);
+
+    authFetch.mockClear();
+    const { app, container } = hydrate(Row, html, payload);
+    mounted.push(app);
+    await nextTick();
+    await new Promise((done) => setTimeout(done, 0));
+    expect(authFetch).not.toHaveBeenCalled();
+    expect(container.innerHTML).toBe(html);
   });
+});
 
-  afterEach(() => {
-    vi.unstubAllEnvs();
-    vi.useRealTimers();
-    vi.unstubAllGlobals();
-    vi.resetAllMocks();
+describe("file read URLs in the browser", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(START_TIME);
+    browserRuntime();
   });
 
   it("preserves expiry and refreshes a visible URL before it expires", async () => {
@@ -74,15 +159,23 @@ describe("file read URLs", () => {
 
   it("uses the full localized form language for metadata authorization", async () => {
     authFetch.mockResolvedValue({ url: "https://example.test/file" });
-    const scope = effectScope();
-    const urls = scope.run(() => useFileReadUrls("private"))!;
-    await urls.resolve(RESOURCE_KEY);
-
+    const Field = defineComponent({
+      setup() {
+        const { getUrl, resolve } = useFileReadUrls("private");
+        void resolve(RESOURCE_KEY);
+        return () => h("img", { src: getUrl(RESOURCE_KEY) ?? "" });
+      },
+    });
+    const { app } = mountInBrowser(Field, (application) =>
+      application.provide(FORM_CONTENT_LANGUAGE_KEY, "*"),
+    );
+    mounted.push(app);
+    await vi.advanceTimersByTimeAsync(0);
     expect(authFetch).toHaveBeenCalledWith("/api/files/metadata", {
       query: { resourceKey: RESOURCE_KEY, storage: "private" },
       headers: { "x-content-language": "*" },
+      signal: expect.any(AbortSignal),
     });
-    scope.stop();
   });
 
   it("retries the first failed lookup while the component stays mounted", async () => {
@@ -91,13 +184,26 @@ describe("file read URLs", () => {
       .mockResolvedValueOnce({ url: "https://example.test/recovered" });
     const scope = effectScope();
     const urls = scope.run(() => useFileReadUrls())!;
-    await urls.resolve(RESOURCE_KEY);
+    await urls.resolve(RESOURCE_KEY).catch(() => {});
     expect(urls.getUrl(RESOURCE_KEY)).toBeUndefined();
     await vi.advanceTimersByTimeAsync(5000);
     expect(urls.getUrl(RESOURCE_KEY)).toBe("https://example.test/recovered");
     scope.stop();
   });
 
+  it("does not retry a file the server refuses", async () => {
+    authFetch.mockRejectedValue(
+      Object.assign(new Error("Not found"), { statusCode: 404 }),
+    );
+    const scope = effectScope();
+    const urls = scope.run(() => useFileReadUrls())!;
+    await urls.resolve(RESOURCE_KEY).catch(() => {});
+    await vi.advanceTimersByTimeAsync(60000);
+    expect(authFetch).toHaveBeenCalledTimes(1);
+    expect(urls.getUrl(RESOURCE_KEY)).toBeUndefined();
+    scope.stop();
+  });
+
   it("does not restart refresh timers when an in-flight lookup finishes after disposal", async () => {
     let finish!: (value: unknown) => void;
     authFetch.mockReturnValue(
@@ -113,23 +219,28 @@ describe("file read URLs", () => {
       url: "https://example.test/late",
       expiresAt: Date.now() + URL_TTL_MS,
     });
-    await pending;
+    await pending.catch(() => {});
     await vi.advanceTimersByTimeAsync(URL_TTL_MS * 2);
     expect(authFetch).toHaveBeenCalledTimes(1);
     expect(vi.getTimerCount()).toBe(0);
   });
 
-  it("resolves metadata during SSR without scheduling browser refresh timers", async () => {
-    vi.stubEnv("SSR", true);
-    authFetch.mockResolvedValue({
-      url: "https://example.test/ssr",
-      expiresAt: Date.now() + URL_TTL_MS,
+  it("reads a key resolved after the setup, as an upload's", async () => {
+    authFetch.mockResolvedValue({ url: "https://example.test/uploaded" });
+    const key = ref<string | null>(null);
+    const Uploaded = defineComponent({
+      setup() {
+        const { getUrl, resolve } = useFileReadUrls();
+        watch(key, (value) => value && void resolve(value));
+        return () => h("img", { src: key.value ? getUrl(key.value) : "" });
+      },
     });
-    const scope = effectScope();
-    const urls = scope.run(() => useFileReadUrls())!;
-    await urls.resolve(RESOURCE_KEY);
-    expect(urls.getUrl(RESOURCE_KEY)).toBe("https://example.test/ssr");
-    expect(vi.getTimerCount()).toBe(0);
-    scope.stop();
+    const { app, container } = mountInBrowser(Uploaded);
+    mounted.push(app);
+    key.value = "uploads/new.png";
+    await vi.advanceTimersByTimeAsync(0);
+    expect(container.querySelector("img")?.getAttribute("src")).toBe(
+      "https://example.test/uploaded",
+    );
   });
 });

package/frontend-vue/tests/file-unavailable.test.ts

@@ -7,11 +7,13 @@ import {
   inject,
   onScopeDispose,
   ref,
+  shallowReactive,
   watch,
   type App,
 } from "vue";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import File from "../layers/dms-ui/app/components/form/components/File.vue";
+import { browserRuntime, stubApiData } from "./helpers/api-data-runtime";
 
 const STORED_KEY = "files/profile/avatar.pdf";
 const authFetch = vi.fn();
@@ -29,6 +31,7 @@ function mountFile(): { app: App; container: HTMLElement } {
     render: () => h(File, { modelValue: STORED_KEY }),
   });
   app.config.globalProperties.$t = (key: string) => key;
+  browserRuntime(app);
   app.component("UFileUpload", passthrough);
   app.component("ULink", passthrough);
   app.component("UButton", defineComponent({ setup: () => () => h("button") }));
@@ -54,7 +57,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(),
   }));