@antelopejs/dms 0.6.1 → 0.7.0

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/fixtures/dashboard-search-stub.ts

@@ -0,0 +1,91 @@
+import type { CommandPaletteGroup, CommandPaletteItem } from "@nuxt/ui";
+import { defineComponent, h, type PropType } from "vue";
+
+interface PaletteInputProps {
+  onKeydown?: (event: KeyboardEvent) => void;
+}
+
+function matchingItems(
+  group: CommandPaletteGroup,
+  term: string,
+): CommandPaletteItem[] {
+  const items = group.items ?? [];
+  if (group.ignoreFilter || !term) return items;
+  return items.filter((item) =>
+    String(item.label).toLowerCase().includes(term.toLowerCase()),
+  );
+}
+
+function filterGroups(
+  groups: CommandPaletteGroup[],
+  term: string,
+): CommandPaletteGroup[] {
+  return groups
+    .map((group) => ({ ...group, items: matchingItems(group, term) }))
+    .filter((group) => group.items.length);
+}
+
+function selectEvent(): Event {
+  return new Event("select", { cancelable: true });
+}
+
+function renderItem(group: CommandPaletteGroup, item: CommandPaletteItem) {
+  return h(
+    "button",
+    {
+      "data-group": group.id,
+      onClick: () => item.onSelect?.(selectEvent()),
+    },
+    String(item.label),
+  );
+}
+
+/** Renders the props and slots `DashboardSearch` hands `UDashboardSearch`. */
+export const PaletteStub = defineComponent({
+  props: {
+    open: Boolean,
+    colorMode: { type: Boolean, default: true },
+    searchTerm: { type: String, default: "" },
+    groups: {
+      type: Array as PropType<CommandPaletteGroup[]>,
+      default: () => [],
+    },
+    input: { type: Object as PropType<PaletteInputProps>, default: () => ({}) },
+    icon: { type: String, default: undefined },
+    placeholder: { type: String, default: undefined },
+  },
+  emits: ["update:open", "update:searchTerm"],
+  setup(props, { slots, emit }) {
+    return () => {
+      const groups = filterGroups(props.groups, props.searchTerm);
+      return h(
+        "div",
+        {
+          role: "dialog",
+          "data-open": String(props.open),
+          "data-color-mode": String(props.colorMode),
+          "data-empty-slot": String(!!slots.empty),
+        },
+        [
+          h("input", {
+            value: props.searchTerm,
+            placeholder: props.placeholder,
+            "data-icon": props.icon,
+            onKeydown: props.input.onKeydown,
+            onInput: (event: Event) =>
+              emit(
+                "update:searchTerm",
+                (event.target as HTMLInputElement).value,
+              ),
+          }),
+          groups.length
+            ? groups.flatMap((group) =>
+                group.items!.map((item) => renderItem(group, item)),
+              )
+            : slots.empty?.(),
+          slots.footer?.(),
+        ],
+      );
+    };
+  },
+});

package/frontend-vue/tests/forgot-validation-resend.test.ts

@@ -0,0 +1,234 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+  type App,
+} from "vue";
+
+// The password-reset code page: a new code starts clean, without the refusal
+// of the previous one.
+
+vi.mock("#dms-ui/app/build/components/form/OtpInput.vue", async () => {
+  const { defineComponent: define, h: render } = await import("vue");
+  return {
+    default: define({
+      props: { modelValue: Array, error: String },
+      emits: ["update:modelValue"],
+      setup: (props, { emit, expose }) => {
+        expose({ focus: () => undefined });
+        return () =>
+          render("div", [
+            render("input", {
+              "data-testid": "code",
+              onInput: (event: Event) =>
+                emit(
+                  "update:modelValue",
+                  (event.target as HTMLInputElement).value.split(""),
+                ),
+            }),
+            render("p", { "data-testid": "code-error" }, props.error ?? ""),
+          ]);
+      },
+    }),
+  };
+});
+vi.mock(
+  "../layers/dms-layout/app/build/components/layout/StageCard.vue",
+  async () => {
+    const { defineComponent: define, h: render } = await import("vue");
+    return {
+      default: define({
+        setup:
+          (_, { slots }) =>
+          () =>
+            render("section", slots.default?.()),
+      }),
+    };
+  },
+);
+vi.mock(
+  "../layers/dms-auth/app/build/components/AuthBackLink.vue",
+  async () => {
+    const { defineComponent: define, h: render } = await import("vue");
+    return { default: define({ setup: () => () => render("span") }) };
+  },
+);
+
+const { default: ForgotValidationPage } = await import(
+  "../layers/dms-auth/app/custom-pages/auth/forgot-validation.vue"
+);
+
+const WRONG_CODE = "ABC123";
+const CODE_REFUSAL = {
+  statusCode: 400,
+  data: "error.invalid_or_expired_token",
+};
+const RATE_LIMITED = { statusCode: 429, data: "error.rate_limited" };
+
+let app: App;
+let host: HTMLDivElement;
+const authFetch = vi.fn();
+const toastAdd = vi.fn();
+
+const Form = defineComponent({
+  props: { state: { type: Object, required: true } },
+  emits: ["submit"],
+  setup: (props, { emit, expose, slots }) => {
+    const submit = () => emit("submit", { data: props.state });
+    expose({ submit });
+    return () =>
+      h(
+        "form",
+        {
+          onSubmit: (event: Event) => {
+            event.preventDefault();
+            submit();
+          },
+        },
+        slots.default?.(),
+      );
+  },
+});
+
+const Alert = defineComponent({
+  props: { title: String, description: String },
+  setup: (props) => () =>
+    h("div", { "data-testid": "form-error" }, props.title),
+});
+
+const Passthrough = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("span", slots.default?.()),
+});
+
+function installRuntime() {
+  Object.entries({ computed, ref, reactive, watch, onMounted }).forEach(
+    ([key, value]) => vi.stubGlobal(key, value),
+  );
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal("useTranslation", () => ({
+    processApiMessage: (message: string) => message,
+  }));
+  vi.stubGlobal("useToast", () => ({ add: toastAdd }));
+  vi.stubGlobal("useDmsApp", () => ({
+    runWithContext: (fn: () => unknown) => fn(),
+  }));
+  vi.stubGlobal("useDmsRoute", () => ({
+    query: { email: "member@local.test" },
+  }));
+  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: authFetch }));
+  vi.stubGlobal("navigateDms", vi.fn());
+  // The resend link shows at once: the wait is not under test.
+  vi.stubGlobal("useCooldown", () => ({
+    cooldown: ref(0),
+    startCooldown: vi.fn(),
+  }));
+}
+
+function mountPage() {
+  app = createApp(ForgotValidationPage);
+  app.config.globalProperties.$t = (key: string) => key;
+  app.component("UForm", Form);
+  app.component("UAlert", Alert);
+  app.component("UButton", Passthrough);
+  app.component("i18n-t", Passthrough);
+  app.mount(host);
+}
+
+async function settle() {
+  for (let tick = 0; tick < 5; tick++) {
+    await Promise.resolve();
+    await nextTick();
+  }
+}
+
+const codeError = () =>
+  host.querySelector('[data-testid="code-error"]')?.textContent ?? "";
+const formError = () => host.querySelector('[data-testid="form-error"]');
+
+function resendButton(): HTMLButtonElement {
+  const button = [...host.querySelectorAll("button")].find(
+    (entry) => entry.textContent?.trim() === "page.auth.code.resend",
+  );
+  if (!button) throw new Error("No resend link");
+  return button;
+}
+
+async function typeCode(code: string) {
+  const input = host.querySelector<HTMLInputElement>('[data-testid="code"]')!;
+  input.value = code;
+  input.dispatchEvent(new Event("input"));
+  await settle();
+}
+
+async function resend() {
+  resendButton().click();
+  await settle();
+}
+
+beforeEach(() => {
+  authFetch.mockReset();
+  toastAdd.mockReset();
+  installRuntime();
+  host = document.createElement("div");
+  document.body.append(host);
+});
+afterEach(() => {
+  app?.unmount();
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+it("drops the refusal of the previous code once a new one is sent", async () => {
+  authFetch.mockRejectedValueOnce(CODE_REFUSAL);
+  mountPage();
+  await typeCode(WRONG_CODE);
+  expect(codeError()).not.toBe("");
+
+  authFetch.mockResolvedValueOnce(undefined);
+  await resend();
+
+  expect(authFetch).toHaveBeenLastCalledWith("/api/auth/forgot-password", {
+    method: "POST",
+    body: { email: "member@local.test" },
+  });
+  expect(toastAdd).toHaveBeenCalledWith(
+    expect.objectContaining({ color: "success" }),
+  );
+  expect(codeError()).toBe("");
+});
+
+it("drops a refused resend's alert once a new code is sent", async () => {
+  mountPage();
+  authFetch.mockRejectedValueOnce(RATE_LIMITED);
+  await resend();
+  expect(formError()).not.toBe(null);
+
+  authFetch.mockResolvedValueOnce(undefined);
+  await resend();
+
+  expect(formError()).toBe(null);
+});
+
+it("keeps the refusal of the code when the new one could not be sent", async () => {
+  authFetch.mockRejectedValueOnce(CODE_REFUSAL);
+  mountPage();
+  await typeCode(WRONG_CODE);
+  const refusal = codeError();
+
+  authFetch.mockRejectedValueOnce(RATE_LIMITED);
+  await resend();
+
+  expect(codeError()).toBe(refusal);
+  expect(formError()).not.toBe(null);
+});

package/frontend-vue/tests/form-display-options.test.ts

@@ -0,0 +1,64 @@
+// @vitest-environment jsdom
+import { computed, createApp, h, useAttrs } from "vue";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import Display from "../layers/dms-ui/app/components/form/components/Display.vue";
+
+interface StatusOptions {
+  onlineLabel?: string;
+  offlineLabel?: string;
+}
+
+// A status type worded from its options, as the registered one is: the
+// fallback labels show when the options do not reach the formatter.
+const statusType = {
+  id: "status",
+  formatter: {
+    default: (value: unknown, _locale: string, options?: unknown) => {
+      const opts = options as StatusOptions | undefined;
+      return value
+        ? (opts?.onlineLabel ?? "Online")
+        : (opts?.offlineLabel ?? "Offline");
+    },
+  },
+};
+
+/** A read-only field as a form renders it: its options spread on it. */
+function mountDisplay(modelValue: unknown, options: Record<string, unknown>) {
+  const app = createApp({
+    render: () => h(Display, { modelValue, type: "status", ...options }),
+  });
+  const container = document.createElement("div");
+  app.mount(container);
+  return { app, container };
+}
+
+beforeEach(() => {
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("useAttrs", useAttrs);
+  vi.stubGlobal("useI18n", () => ({
+    locale: { value: "en" },
+    t: (key: string) => key,
+  }));
+  vi.stubGlobal("useDataTypes", () => ({ getDataType: () => statusType }));
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+it("words a read-only status with the labels its column sets", () => {
+  const options = {
+    onlineLabel: "Pending",
+    offlineLabel: "Expired",
+    onlineColor: "warning",
+    offlineColor: "neutral",
+  };
+
+  const pending = mountDisplay(true, options);
+  const expired = mountDisplay(false, options);
+
+  expect(pending.container.textContent).toBe("Pending");
+  expect(expired.container.textContent).toBe("Expired");
+  pending.app.unmount();
+  expired.app.unmount();
+});