@antelopejs/dms 0.6.0 → 0.6.2

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

@@ -0,0 +1,205 @@
+// @vitest-environment jsdom
+/**
+ * StatGroup, KeyValueList and Banner draw a composed text wherever they draw
+ * a text — from their options or from the JSON their route answers — in the
+ * reader's language, and keep drawing plain strings as before.
+ */
+import {
+  createApp,
+  defineComponent,
+  h,
+  reactive,
+  ref,
+  type Component,
+} from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createI18n } from "vue-i18n";
+import { setRegionalPreferencesSource } from "../layers/dms-core/app/utils/regional";
+
+const i18n = createI18n({
+  legacy: false,
+  locale: "en",
+  fallbackLocale: "en",
+  missingWarn: false,
+  fallbackWarn: false,
+  messages: {
+    en: {
+      saas: {
+        stats: { mrr: "MRR", mrr_value: "{amount}", workspaces: "Workspaces" },
+        seats: "no seat | {count} seat | {count} seats",
+        retry: "Payment failed, retry {date}",
+        failed: "Payment failed",
+      },
+    },
+    fr: {
+      saas: {
+        stats: { mrr: "MRR", mrr_value: "{amount}", workspaces: "Espaces" },
+        seats: "aucun siège | {count} siège | {count} sièges",
+        retry: "Paiement refusé, nouvel essai {date}",
+        failed: "Paiement refusé",
+      },
+    },
+  },
+});
+
+let fetchedItems: unknown[] = [];
+
+vi.stubGlobal("useAuthFetch", () => ({
+  $authFetch: async () => ({ items: fetchedItems }),
+}));
+vi.stubGlobal("useDmsRoute", () => reactive({ query: {} }));
+
+vi.mock("../layers/dms-core/app/composables/watch/useWatch", () => ({
+  useWatch: () => ({ state: ref({}) }),
+}));
+vi.mock(
+  "../layers/dms-core/app/composables/components/useComponentEvent",
+  () => ({ useComponentEvent: () => ({}) }),
+);
+
+// The generic components only lay out what the block resolved: their props
+// are what is checked here.
+const propsProbe = (name: string, keys: string[]) => ({
+  default: defineComponent({
+    props: keys,
+    setup: (props) => () =>
+      h("pre", { "data-probe": name }, JSON.stringify(props)),
+  }),
+});
+vi.mock("../layers/dms-ui/app/components/stat-group/StatGroup.vue", () =>
+  propsProbe("stat-group", ["items"]),
+);
+vi.mock("../layers/dms-ui/app/components/key-value-list/KeyValueList.vue", () =>
+  propsProbe("key-value-list", ["items"]),
+);
+vi.mock("../layers/dms-ui/app/components/banner/Banner.vue", () =>
+  propsProbe("banner", ["title", "description"]),
+);
+
+const StatGroupBlock = (
+  await import("../layers/dms-ui/app/components/blocks/StatGroupBlock.vue")
+).default;
+const KeyValueListBlock = (
+  await import("../layers/dms-ui/app/components/blocks/KeyValueListBlock.vue")
+).default;
+const BannerBlock = (
+  await import("../layers/dms-ui/app/components/blocks/BannerBlock.vue")
+).default;
+
+const SETTLE_MS = 50;
+const settle = () => new Promise((resolve) => setTimeout(resolve, SETTLE_MS));
+const mounted: Array<{ unmount: () => void }> = [];
+
+function render(component: Component, props: Record<string, unknown>) {
+  const root = document.createElement("div");
+  const app = createApp(component, props);
+  app.mount(root);
+  mounted.push(app);
+  return () =>
+    JSON.parse(
+      (root.querySelector("[data-probe]")?.textContent ?? "{}").replace(
+        /[\u00a0\u202f]/g,
+        " ",
+      ),
+    );
+}
+
+const mrr = {
+  key: "$saas.stats.mrr_value",
+  params: { amount: { type: "money", value: 92200, currency: "EUR" } },
+};
+const seats = (value: number) => ({
+  key: "saas.seats",
+  params: { count: { type: "count", value } },
+});
+
+beforeEach(() => {
+  i18n.global.locale.value = "en";
+  fetchedItems = [];
+  setRegionalPreferencesSource(() => ({ timeZone: "UTC" }));
+  vi.stubGlobal("useI18n", () => ({
+    t: i18n.global.t,
+    locale: i18n.global.locale,
+  }));
+  vi.stubGlobal("useDmsCookie", () => ref<string[]>([]));
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+  setRegionalPreferencesSource(() => ({}));
+});
+
+describe("StatGroupBlock", () => {
+  it("composes the label, the value and the detail of a cell", () => {
+    const read = render(StatGroupBlock, {
+      items: [
+        { eyebrow: "$saas.stats.mrr", value: mrr, detail: seats(3) },
+        { eyebrow: "Plain", value: 1284, detail: "As written" },
+      ],
+    });
+
+    expect(read().items).toEqual([
+      { eyebrow: "MRR", value: "€922.00", detail: "3 seats" },
+      { eyebrow: "Plain", value: "1,284", detail: "As written" },
+    ]);
+  });
+
+  it("composes the cells its route answers, in the reader's language", async () => {
+    i18n.global.locale.value = "fr";
+    fetchedItems = [
+      {
+        eyebrow: { key: "saas.stats.workspaces" },
+        value: mrr,
+        detail: seats(1),
+      },
+    ];
+    const read = render(StatGroupBlock, { fetchUrl: "/api/billing-stats" });
+    await settle();
+
+    expect(read().items).toEqual([
+      { eyebrow: "Espaces", value: "922,00 €", detail: "1 siège" },
+    ]);
+  });
+});
+
+describe("KeyValueListBlock", () => {
+  it("composes labels, details and values, whatever the row's type", () => {
+    const read = render(KeyValueListBlock, {
+      card: false,
+      items: [
+        { label: { key: "saas.stats.mrr" }, value: mrr, type: "money" },
+        { label: "Seats", value: seats(0), detail: { key: "saas.failed" } },
+        { label: "Next invoice", value: 588, type: "money" },
+        { label: "Plan", value: "$saas.stats.workspaces" },
+      ],
+    });
+
+    expect(read().items).toEqual([
+      { label: "MRR", value: "€922.00", type: "money" },
+      { label: "Seats", value: "no seat", detail: "Payment failed" },
+      { label: "Next invoice", value: 588, type: "money" },
+      { label: "Plan", value: "Workspaces" },
+    ]);
+  });
+});
+
+describe("BannerBlock", () => {
+  it("composes its title and description", () => {
+    const read = render(BannerBlock, {
+      title: { key: "saas.failed" },
+      description: {
+        key: "saas.retry",
+        params: { date: { type: "date", value: "2026-10-10", format: "day" } },
+      },
+    });
+
+    expect(read()).toEqual({
+      title: "Payment failed",
+      description: "Payment failed, retry Oct 10",
+    });
+  });
+
+  it("keeps a plain title as written", () => {
+    expect(render(BannerBlock, { title: "Beta" })().title).toBe("Beta");
+  });
+});

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

@@ -0,0 +1,265 @@
+/**
+ * A composed text is written in the reader's language from the raw values the
+ * server sends: amounts in minor units, dates, counts that pick the plural
+ * form. The same JSON reads in English or in French, and follows a switch.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createI18n } from "vue-i18n";
+import { useComposedText } from "../layers/dms-core/app/composables/translation/useComposedText";
+import type { ComposedText } from "../layers/dms-core/app/types/composed-text";
+import {
+  isComposedText,
+  resolveComposedText,
+} from "../layers/dms-core/app/utils/composedText";
+import { setRegionalPreferencesSource } from "../layers/dms-core/app/utils/regional";
+
+const NOW = Date.UTC(2026, 9, 8, 12);
+
+const MESSAGES = {
+  en: {
+    saas: {
+      stats: { mrr: "{amount} MRR" },
+      banner: { retry: "Payment failed, retry {date}" },
+      seats: "no seat | {count} seat | {count} seats",
+      plan_seats: "{plan} · {seats}",
+      plans: { business: "Business" },
+      only_english: "Renews {date}",
+    },
+  },
+  fr: {
+    saas: {
+      stats: { mrr: "MRR de {amount}" },
+      banner: { retry: "Paiement refusé, nouvel essai {date}" },
+      seats: "aucun siège | {count} siège | {count} sièges",
+      plan_seats: "{plan} · {seats}",
+      plans: { business: "Business" },
+    },
+  },
+};
+
+function makeI18n(locale: "en" | "fr" = "en") {
+  return createI18n({
+    legacy: false,
+    locale,
+    fallbackLocale: "en",
+    missingWarn: false,
+    fallbackWarn: false,
+    messages: MESSAGES,
+  });
+}
+
+// Intl separates a French amount from its symbol with a no-break space.
+const plainSpaces = (text: string) => text.replace(/[\u00a0\u202f]/g, " ");
+
+function write(
+  text: Parameters<typeof resolveComposedText>[0],
+  locale: "en" | "fr" = "en",
+): string {
+  const { global } = makeI18n(locale);
+  const translate = (
+    key: string,
+    named: Record<string, unknown>,
+    plural?: number,
+  ) =>
+    plural === undefined ? global.t(key, named) : global.t(key, named, plural);
+  return plainSpaces(
+    resolveComposedText(text, { translate, locale, now: NOW }),
+  );
+}
+
+const mrr = (value: number, currency = "EUR"): ComposedText => ({
+  key: "saas.stats.mrr",
+  params: { amount: { type: "money", value, currency } },
+});
+
+beforeEach(() => {
+  setRegionalPreferencesSource(() => ({ timeZone: "UTC" }));
+});
+
+afterEach(() => {
+  setRegionalPreferencesSource(() => ({}));
+  vi.unstubAllGlobals();
+});
+
+describe("resolveComposedText — parameters", () => {
+  it("writes an amount from its minor units, in the reader's locale", () => {
+    expect(write(mrr(92200))).toBe("€922.00 MRR");
+    expect(write(mrr(92200), "fr")).toBe("MRR de 922,00 €");
+  });
+
+  it("reads the minor unit of the currency", () => {
+    expect(write(mrr(4500, "JPY"))).toBe("¥4,500 MRR");
+  });
+
+  it("still shows an amount whose currency code is malformed", () => {
+    expect(write(mrr(92200, "euro"))).toBe("922 MRR");
+  });
+
+  it("writes a date in the format asked, medium by default", () => {
+    const retry = (format?: "day" | "long"): ComposedText => ({
+      key: "$saas.banner.retry",
+      params: { date: { type: "date", value: "2026-10-10T12:00:00Z", format } },
+    });
+    expect(write(retry("day"))).toBe("Payment failed, retry Oct 10");
+    expect(write(retry())).toBe("Payment failed, retry Oct 10, 2026");
+    expect(write(retry("long"), "fr")).toBe(
+      "Paiement refusé, nouvel essai 10 octobre 2026",
+    );
+  });
+
+  it("writes a date and its time", () => {
+    expect(
+      write({
+        key: "saas.banner.retry",
+        params: {
+          date: { type: "datetime", value: Date.UTC(2026, 9, 10, 14, 5) },
+        },
+      }),
+    ).toBe("Payment failed, retry Oct 10, 2026, 2:05 PM");
+  });
+
+  it("writes a relative date from now, past or future", () => {
+    const retry = (value: string): ComposedText => ({
+      key: "saas.banner.retry",
+      params: { date: { type: "relative", value } },
+    });
+    expect(write(retry("2026-10-10T12:00:00Z"))).toBe(
+      "Payment failed, retry in 2 days",
+    );
+    expect(write(retry("2026-10-09T12:00:00Z"), "fr")).toBe(
+      "Paiement refusé, nouvel essai demain",
+    );
+  });
+
+  it("writes numbers for the locale, as a percentage or compact on request", () => {
+    const value = (amount: ComposedText["params"]): ComposedText => ({
+      key: "saas.stats.mrr",
+      params: amount,
+    });
+    expect(write(value({ amount: 1284.5 }), "fr")).toBe("MRR de 1 284,5");
+    expect(
+      write(
+        value({ amount: { type: "number", value: 0.25, format: "percent" } }),
+      ),
+    ).toBe("25% MRR");
+    expect(
+      write(
+        value({ amount: { type: "number", value: 1300, format: "compact" } }),
+      ),
+    ).toBe("1.3K MRR");
+  });
+
+  it("inserts a string parameter as written, never as a key", () => {
+    expect(
+      write({ key: "saas.stats.mrr", params: { amount: "$not.a.key" } }),
+    ).toBe("$not.a.key MRR");
+  });
+
+  it("composes a nested text first", () => {
+    expect(
+      write({
+        key: "saas.plan_seats",
+        params: {
+          plan: { key: "$saas.plans.business" },
+          seats: {
+            key: "saas.seats",
+            params: { count: { type: "count", value: 3 } },
+          },
+        },
+      }),
+    ).toBe("Business · 3 seats");
+  });
+});
+
+describe("resolveComposedText — plurals", () => {
+  const seats = (value: number): ComposedText => ({
+    key: "saas.seats",
+    params: { count: { type: "count", value } },
+  });
+
+  it("picks the form from the count parameter", () => {
+    expect([0, 1, 1200].map((value) => write(seats(value)))).toEqual([
+      "no seat",
+      "1 seat",
+      "1,200 seats",
+    ]);
+    expect(write(seats(2), "fr")).toBe("2 sièges");
+  });
+
+  it("picks the form from the parameter `plural` names", () => {
+    expect(
+      write({ key: "saas.seats", params: { count: 1 }, plural: "count" }),
+    ).toBe("1 seat");
+  });
+});
+
+describe("resolveComposedText — fallbacks", () => {
+  it("falls back to the fallback language, parameters included", () => {
+    expect(
+      write(
+        {
+          key: "saas.only_english",
+          params: {
+            date: { type: "date", value: "2026-10-10", format: "day" },
+          },
+        },
+        "fr",
+      ),
+    ).toBe("Renews 10 oct.");
+  });
+
+  it("shows the bare key when no language has the message", () => {
+    expect(write({ key: "$saas.missing", params: { amount: 1 } })).toBe(
+      "saas.missing",
+    );
+  });
+
+  it("shows the raw value of a date that is not one", () => {
+    const retry = (type: "date" | "relative"): ComposedText => ({
+      key: "saas.banner.retry",
+      params: { date: { type, value: "soon" } },
+    });
+    expect(write(retry("date"))).toBe("Payment failed, retry soon");
+    expect(write(retry("relative"))).toBe("Payment failed, retry soon");
+  });
+
+  it("keeps a type from a newer backend readable", () => {
+    expect(
+      write({
+        key: "saas.stats.mrr",
+        params: { amount: { type: "duration", value: 90 } as never },
+      }),
+    ).toBe("90 MRR");
+  });
+
+  it("passes plain strings through, translates `$` keys, writes numbers", () => {
+    expect(write("Plain text")).toBe("Plain text");
+    expect(write("$saas.plans.business")).toBe("Business");
+    expect(write(1284, "fr")).toBe("1 284");
+    expect(write(undefined)).toBe("");
+    expect(write(null)).toBe("");
+  });
+
+  it("tells a composed text from other values", () => {
+    expect(isComposedText(mrr(1))).toBe(true);
+    expect(isComposedText("saas.stats.mrr")).toBe(false);
+    expect(isComposedText({ type: "money", value: 1 })).toBe(false);
+    expect(isComposedText(null)).toBe(false);
+  });
+});
+
+describe("useComposedText", () => {
+  it("follows a language switch", () => {
+    const i18n = makeI18n("en");
+    vi.stubGlobal("useI18n", () => ({
+      t: i18n.global.t,
+      locale: i18n.global.locale,
+    }));
+    const { processText } = useComposedText();
+    const text = mrr(92200);
+
+    expect(plainSpaces(processText(text))).toBe("€922.00 MRR");
+    i18n.global.locale.value = "fr";
+    expect(plainSpaces(processText(text))).toBe("MRR de 922,00 €");
+  });
+});

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

@@ -56,12 +56,22 @@ const AlertStub = defineComponent({
     () =>
       h("div", { "data-color": props.color, "data-icon": props.icon }, [
         slots.description?.(),
+        slots.actions?.(),
         props.close
           ? h("button", { onClick: () => emit("update:open", false) }, "close")
           : null,
       ]),
 });
 
+interface ButtonStubProps {
+  label?: string;
+  to?: string;
+  color?: string;
+}
+
+const ButtonStub = (props: ButtonStubProps) =>
+  h("a", { href: props.to, "data-action-color": props.color }, props.label);
+
 const BannerContent = defineComponent({
   props: { days: { type: Number, required: true } },
   setup: (props) => () => h("strong", `${props.days} days left`),
@@ -69,6 +79,7 @@ const BannerContent = defineComponent({
 
 function mountable(root: App): App {
   root.component("UAlert", AlertStub);
+  root.component("UButton", ButtonStub);
   root.component("BannerContent", BannerContent);
   return root;
 }
@@ -86,6 +97,13 @@ beforeEach(() => {
   vi.stubGlobal("useTranslation", () => ({
     processI18n: (key: string) => key.replace(/^\$/, "t:"),
   }));
+  vi.stubGlobal("useI18n", () => ({
+    t: (key: string, named?: Record<string, unknown>) =>
+      named && Object.keys(named).length
+        ? `t:${key}:${JSON.stringify(named)}`
+        : `t:${key}`,
+    locale: ref("en"),
+  }));
   vi.stubGlobal("useLayoutBanners", useLayoutBanners);
   vi.stubGlobal(
     "resolveLayoutBannerPresentation",
@@ -187,6 +205,44 @@ describe("DashboardBanners", () => {
     ]);
   });
 
+  it("composes a text from its parameters and draws the banner's buttons", async () => {
+    serveBanners([
+      banner({
+        key: "past-due",
+        variant: "error",
+        text: {
+          key: "saas.banner.past_due",
+          params: {
+            invoice: "INV-42",
+            amount: { type: "money", value: 2900, currency: "EUR" },
+          },
+        },
+        actions: [
+          { label: "Invoices", to: "/billing/invoices" },
+          { label: "$saas.banner.pay", to: "/billing?pay=1" },
+        ],
+      }),
+    ]);
+
+    const html = await renderToString(
+      mountable(createSSRApp(DashboardBanners)),
+    );
+    const document = new DOMParser().parseFromString(html, "text/html");
+    const links = [...document.querySelectorAll("a")].map((node) => ({
+      label: node.textContent,
+      href: node.getAttribute("href"),
+      color: node.getAttribute("data-action-color"),
+    }));
+
+    expect(document.body.textContent).toContain(
+      't:saas.banner.past_due:{"invoice":"INV-42","amount":"€29.00"}',
+    );
+    expect(links).toEqual([
+      { label: "Invoices", href: "/billing/invoices", color: "neutral" },
+      { label: "t:saas.banner.pay", href: "/billing?pay=1", color: "error" },
+    ]);
+  });
+
   // The server reads the same cookie, so a dismissed banner never reaches the
   // page only to be removed on hydration.
   it("leaves a dismissed banner out of the server-rendered page", async () => {