@antelopejs/dms 0.8.3 → 0.9.1

package/frontend-vue/tests/builtin-emails.test.ts

@@ -4,6 +4,7 @@ import { renderToString } from "vue/server-renderer";
 import { createI18n } from "vue-i18n";
 import en from "../layers/dms-layout/i18n/locales/layout-en-GB.json";
 import fr from "../layers/dms-layout/i18n/locales/layout-fr-FR.json";
+import type { DmsBrandingLogo } from "../layers/dms-core/shared/types/app-config";
 
 interface EmailModule {
   default: Component;
@@ -17,6 +18,10 @@ const emailModules = import.meta.glob<EmailModule>(
 const PUBLIC_BASE = "https://admin.example.com";
 const PUBLIC_PNG_LOGO = "/images/logo.png";
 const SVG_LOGO = "/images/logo.svg";
+const EMAIL_LOGOS: Partial<DmsBrandingLogo> = {
+  default: { light: SVG_LOGO, dark: SVG_LOGO },
+  email: { light: "/branding/email.png", dark: "/branding/email-dark.png" },
+};
 const ELEMENTS: Record<string, string> = {
   EHtml: "html",
   EHead: "head",
@@ -41,6 +46,11 @@ function element(tag: string) {
   });
 }
 
+/** A path stands for `branding.logo.default.light`. */
+function brandingLogo(logo: string | Partial<DmsBrandingLogo>) {
+  return typeof logo === "string" ? { default: { light: logo } } : logo;
+}
+
 function templateName(path: string): string {
   return path.split("/").pop()?.replace(".vue", "") ?? path;
 }
@@ -56,11 +66,11 @@ const EMAIL_PROPS = {
 
 async function renderEmail(
   component: Component,
-  logo: string,
+  logo: string | Partial<DmsBrandingLogo>,
   locale = "en",
 ): Promise<string> {
   vi.stubGlobal("useDmsAppConfig", () => ({
-    branding: { logo: { default: { light: logo } } },
+    branding: { logo: brandingLogo(logo) },
   }));
   vi.stubGlobal("useDmsRuntimeConfig", () => ({
     public: { dms: { clientBaseUrl: PUBLIC_BASE } },
@@ -100,6 +110,17 @@ describe("built-in emails", () => {
     expect(html).toContain(`<img src="${PUBLIC_BASE}${PUBLIC_PNG_LOGO}"`);
   });
 
+  it.each(templates)(
+    "%s draws the email logo, with its dark variant",
+    async (_name, component) => {
+      const html = await renderEmail(component, EMAIL_LOGOS);
+      expect(html).toContain(
+        `<source media="(prefers-color-scheme: dark)" srcset="${PUBLIC_BASE}/branding/email-dark.png">`,
+      );
+      expect(html).toContain(`<img src="${PUBLIC_BASE}/branding/email.png"`);
+    },
+  );
+
   it.each(templates)("%s is written in French", async (_name, component) => {
     const html = await renderEmail(component, PUBLIC_PNG_LOGO, "fr");
     expect(html).toContain("Bonjour");

package/frontend-vue/tests/chart-live-pause.test.ts

@@ -4,7 +4,8 @@
  * refresh, and reads once when the page resumes.
  */
 import { createApp, defineComponent, h, ref } from "vue";
-import { afterEach, expect, it, vi } from "vitest";
+import { beforeEach, afterEach, expect, it, vi } from "vitest";
+import { useRealDataEngine } from "./fixtures/dataEngine";
 import {
   refreshLivePageBlocks,
   refreshPageBlocks,
@@ -39,6 +40,8 @@ afterEach(() => {
   window.localStorage.clear();
 });
 
+beforeEach(() => useRealDataEngine());
+
 it("requests nothing while paused and reads once on resume", async () => {
   const live = createPageLiveController("api.overview", {});
   setCurrentPageLive(live);

package/frontend-vue/tests/chart-value-propagation.test.ts

@@ -1,6 +1,7 @@
 import { createSSRApp, defineComponent, h, ref, type PropType } from "vue";
 import { renderToString } from "vue/server-renderer";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { beforeEach, afterEach, describe, expect, it, vi } from "vitest";
+import { useRealDataEngine } from "./fixtures/dataEngine";
 import ChartCard from "../layers/dms-ui/app/components/chart/ChartCard.vue";
 import Chart from "../layers/dms-ui/app/components/chart/Chart.vue";
 import KpiCard from "../layers/dms-ui/app/components/kpi/KpiCard.vue";
@@ -119,6 +120,8 @@ async function renderCards(
 
 afterEach(() => vi.unstubAllGlobals());
 
+beforeEach(() => useRealDataEngine());
+
 describe("card → nested chart → Apex format propagation", () => {
   it.each(["EUR", "JPY", "KWD"])(
     "propagates native %s formatting to headline, comparison, axis, tooltip and list",

package/frontend-vue/tests/composed-text-blocks.test.ts

@@ -13,6 +13,7 @@ import {
   type Component,
 } from "vue";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useRealDataEngine } from "./fixtures/dataEngine";
 import { createI18n } from "vue-i18n";
 import { setRegionalPreferencesSource } from "../layers/dms-core/app/utils/regional";
 
@@ -118,6 +119,8 @@ const seats = (value: number) => ({
   params: { count: { type: "count", value } },
 });
 
+beforeEach(() => useRealDataEngine());
+
 beforeEach(() => {
   i18n.global.locale.value = "en";
   fetchedItems = [];

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);
+  },
+);