@antelopejs/dms 0.7.13 → 0.7.15

package/frontend-vue/tests/context-links.test.ts

@@ -0,0 +1,220 @@
+// @vitest-environment jsdom
+/**
+ * A link followed from a page keeps its context: a TopList row's `to` and a
+ * link row action fill the page URL's `{{params.X}}` / `{{query.X}}` tokens,
+ * a dotted period key included, and `withPeriodQuery` carries a selector's
+ * period onto a link a module builds itself.
+ */
+import {
+  createApp,
+  createSSRApp,
+  defineComponent,
+  h,
+  ref,
+  type App,
+} from "vue";
+import { renderToString } from "vue/server-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import TopListCard from "../layers/dms-ui/app/components/top-list/TopListCard.vue";
+import { useActionTargets } from "../layers/dms-ui/app/build/composables/actions/useActionTargets";
+import { interpolateUrl } from "../layers/dms-core/app/utils/url-interpolation";
+import { resolveLinkVariables } from "../layers/dms-ui/app/build/utils/urlVariables";
+import {
+  periodQueryKeys,
+  withPeriodQuery,
+} from "../layers/dms-core/app/composables/period/periodLink";
+
+vi.mock("../layers/dms-ui/app/composables/chart/useChartFetch", () => ({
+  useChartFetch: () => ({
+    data: ref({
+      items: [
+        {
+          id: "pricing",
+          title: "/pricing",
+          value: 12,
+          to: "/modules/marketing/pages?path=%2Fpricing&website={{query.website}}&mk.period={{query.mk.period}}&mk.from={{query.mk.from}}",
+        },
+        { id: "plain", title: "/", value: 3, to: "/modules/marketing/pages" },
+      ],
+    }),
+    isLoading: ref(false),
+  }),
+}));
+
+const PAGE_QUERY = {
+  website: "site-1",
+  "mk.period": "last-7-days",
+  "mk.compare": "previous-period",
+};
+
+const navigateDms = vi.fn();
+let app: App | undefined;
+
+beforeEach(() => {
+  navigateDms.mockClear();
+  vi.stubGlobal("useDmsRoute", () => ({
+    path: "/modules/marketing/overview",
+    query: PAGE_QUERY,
+  }));
+  vi.stubGlobal("useSiteLayout", () => ({
+    findMatchingRoute: () => ({ params: { id: "o1" } }),
+  }));
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  vi.unstubAllGlobals();
+});
+
+describe("resolveLinkVariables", () => {
+  it("leaves out a pair whose dotted query key the page does not hold", () => {
+    expect(
+      resolveLinkVariables(
+        "/p?mk.period={{query.mk.period}}&mk.from={{query.mk.from}}",
+        { routeQuery: PAGE_QUERY },
+      ),
+    ).toBe("/p?mk.period=last-7-days");
+  });
+});
+
+describe("withPeriodQuery", () => {
+  it("names the keys of a selector in the page URL", () => {
+    expect(periodQueryKeys("mk").compareFrom).toBe("mk.compareFrom");
+  });
+
+  it("carries the selector's period, the link's own keys winning", () => {
+    expect(
+      withPeriodQuery(
+        "/modules/marketing/funnel?id=f1&mk.compare=none#steps",
+        PAGE_QUERY,
+        "mk",
+      ),
+    ).toBe(
+      "/modules/marketing/funnel?id=f1&mk.compare=none&mk.period=last-7-days#steps",
+    );
+  });
+
+  it("leaves a link bare when the page carries no period", () => {
+    expect(withPeriodQuery("/modules/marketing/funnels", {}, "mk")).toBe(
+      "/modules/marketing/funnels",
+    );
+  });
+
+  it("ignores another selector's keys", () => {
+    expect(withPeriodQuery("/p", { "sales.period": "ytd" }, "mk")).toBe("/p");
+  });
+});
+
+const Link = defineComponent({
+  props: { to: { type: String, required: true } },
+  setup: (props) => () => h("a", { "data-row": "", href: props.to }),
+});
+
+const Slot = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("div", slots.default?.()),
+});
+
+async function renderTopList(): Promise<string> {
+  const ssrApp = createSSRApp({
+    render: () =>
+      h(TopListCard, {
+        title: "Top pages",
+        componentId: "pages",
+        pageId: "overview",
+      }),
+  });
+  for (const name of ["DmsCard", "UBadge", "UIcon", "USkeleton", "UButton"]) {
+    ssrApp.component(name, Slot);
+  }
+  ssrApp.component("DmsLink", Link);
+  return renderToString(ssrApp);
+}
+
+describe("a TopList row link", () => {
+  beforeEach(() => {
+    vi.stubGlobal("useI18n", () => ({ locale: ref("en-US"), t: String }));
+    vi.stubGlobal("useTranslation", () => ({
+      processI18n: (text: string) => text,
+    }));
+    vi.stubGlobal("useComponentEvent", () => ({}));
+    vi.stubGlobal("useWatch", () => ({ state: ref({}) }));
+  });
+
+  it("fills the page's tokens and drops a pair the page has no value for", async () => {
+    const html = await renderTopList();
+    const hrefs = [...html.matchAll(/href="([^"]*)"/g)].map((match) =>
+      match[1]!.replaceAll("&amp;", "&"),
+    );
+    expect(hrefs).toEqual([
+      "/modules/marketing/pages?path=%2Fpricing&website=site-1&mk.period=last-7-days",
+      "/modules/marketing/pages",
+    ]);
+  });
+});
+
+function mountTargets() {
+  let targets: ReturnType<typeof useActionTargets> | undefined;
+  app = createApp(
+    defineComponent({
+      setup() {
+        targets = useActionTargets({
+          api: vi.fn() as never,
+          pageId: "orders-page",
+          componentId: "orders",
+          handleApiError: vi.fn(),
+        });
+        return () => h("div");
+      },
+    }),
+  );
+  app.mount(document.createElement("div"));
+  return targets!;
+}
+
+describe("a link row action", () => {
+  beforeEach(() => {
+    vi.stubGlobal("useToast", () => ({ add: vi.fn() }));
+    vi.stubGlobal("useTranslation", () => ({
+      processI18n: (text: string) => text,
+      processApiMessage: (text: string) => text,
+    }));
+    vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+    vi.stubGlobal("useModal", () => ({ open: vi.fn() }));
+    vi.stubGlobal("useDrawer", () => ({ open: vi.fn() }));
+    vi.stubGlobal("useExportJob", () => ({ runJob: vi.fn() }));
+    vi.stubGlobal("useConfirm", () => ({ confirm: vi.fn(async () => true) }));
+    vi.stubGlobal("useAuthFetch", () => ({ $authFetch: vi.fn() }));
+    vi.stubGlobal("interpolateUrl", interpolateUrl);
+    vi.stubGlobal("navigateDms", navigateDms);
+  });
+
+  it("fills the page's tokens, then the row's fields", async () => {
+    mountTargets().handleCustomRowAction(
+      {
+        label: "Report",
+        target: {
+          type: "page",
+          url: "/modules/marketing/funnel?id={_id}&website={{query.website}}&mk.period={{query.mk.period}}&mk.to={{query.mk.to}}&order={{params.id}}",
+        },
+      },
+      { _id: "f 1" },
+    );
+    await vi.waitFor(() => expect(navigateDms).toHaveBeenCalledTimes(1));
+    expect(navigateDms).toHaveBeenCalledWith(
+      "/modules/marketing/funnel?id=f%201&website=site-1&mk.period=last-7-days&order=o1",
+    );
+  });
+
+  it("leaves a URL without page tokens as before", async () => {
+    mountTargets().handleCustomRowAction(
+      { label: "Open", target: { type: "page", url: "/orders/{_id}" } },
+      { _id: "o2" },
+    );
+    await vi.waitFor(() => expect(navigateDms).toHaveBeenCalledTimes(1));
+    expect(navigateDms).toHaveBeenCalledWith("/orders/o2");
+  });
+});

package/frontend-vue/tests/control-error-path.test.ts

@@ -0,0 +1,11 @@
+import { describe, expect, it } from "vitest";
+import * as legacy from "../layers/dms-ui/app/build/composables/form/useControlError";
+import { useControlError } from "../layers/dms-ui/app/composables/form/useControlError";
+import { FORM_CONTROL_ERRORS_KEY } from "../layers/dms-ui/app/build/composables/form/formControlErrors";
+
+describe("useControlError location", () => {
+  it("stays importable from its former build/ path", () => {
+    expect(legacy.useControlError).toBe(useControlError);
+    expect(legacy.FORM_CONTROL_ERRORS_KEY).toBe(FORM_CONTROL_ERRORS_KEY);
+  });
+});

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

@@ -0,0 +1,124 @@
+import { describe, expect, it, vi } from "vitest";
+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";
+
+const PUBLIC_BASE = "https://admin.example.com";
+const ELEMENTS: Record<string, string> = {
+  EHtml: "html",
+  EHead: "head",
+  EBody: "body",
+  EContainer: "div",
+  ESection: "section",
+  EHeading: "h1",
+  EImg: "img",
+  EHr: "hr",
+  EPreview: "span",
+};
+
+function element(tag: string) {
+  return defineComponent({
+    inheritAttrs: false,
+    setup:
+      (_, { attrs, slots }) =>
+      () =>
+        h(tag, { src: attrs.src, alt: attrs.alt }, slots.default?.()),
+  });
+}
+
+async function renderLayout(
+  props: Record<string, unknown>,
+  logo = "/images/logo.png",
+  clientBaseUrl = PUBLIC_BASE,
+): Promise<string> {
+  vi.stubGlobal("useDmsAppConfig", () => ({
+    branding: { logo: { default: { light: logo } } },
+  }));
+  vi.stubGlobal("useDmsRuntimeConfig", () => ({
+    public: { dms: { clientBaseUrl } },
+  }));
+  const app = createSSRApp({
+    render: () =>
+      h(EmailLayout, props, {
+        default: () => h("p", "Body"),
+        footer: () => h("small", "Footer"),
+      }),
+  });
+  Object.entries(ELEMENTS).forEach(([name, tag]) =>
+    app.component(name, element(tag)),
+  );
+  const html = await renderToString(app);
+  vi.unstubAllGlobals();
+  return html;
+}
+
+describe("EmailLayout", () => {
+  it("keeps the heading, the separator and the logo by default", async () => {
+    const html = await renderLayout({ title: "Welcome" });
+    expect(html).toContain("<h1>Welcome</h1>");
+    expect(html).toContain("<hr>");
+    expect(html).toContain(
+      `<img src="${PUBLIC_BASE}/images/logo.png" alt="Logo">`,
+    );
+  });
+
+  it("drops the heading without a title and the separator on request", async () => {
+    const html = await renderLayout({ divider: false, preheader: "Preview" });
+    expect(html).not.toContain("<h1>");
+    expect(html).not.toContain("<hr>");
+    expect(html).toContain("<span>Preview</span>");
+    expect(html).toContain("<p>Body</p>");
+    expect(html).toContain("<small>Footer</small>");
+  });
+
+  it("keeps any logo by default", async () => {
+    expect(
+      await renderLayout({ title: "Hi" }, "/images/logo.svg", ""),
+    ).toContain('<img src="/images/logo.svg" alt="Logo">');
+  });
+
+  it("leaves out a logo a mail client cannot load with publicLogoOnly", async () => {
+    const guarded = { title: "Hi", publicLogoOnly: true };
+    expect(await renderLayout(guarded, "/images/logo.svg")).not.toContain(
+      "<img",
+    );
+    expect(
+      await renderLayout(guarded, "/logo.png", "http://localhost:3001"),
+    ).not.toContain("<img");
+    expect(await renderLayout(guarded)).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(
+      `${PUBLIC_BASE}/logo.png`,
+    );
+    expect(emailLogoUrl("https://cdn.example.com/logo.png", "")).toBe(
+      "https://cdn.example.com/logo.png",
+    );
+  });
+
+  it.each([
+    [undefined, PUBLIC_BASE],
+    ["/logo.svg", PUBLIC_BASE],
+    ["https://cdn.example.com/logo.SVG?v=2", ""],
+    ["data:image/png;base64,AAAA", ""],
+    ["/logo.png", ""],
+    ["/logo.png", "http://localhost:3001"],
+    ["/logo.png", "http://dms.localhost"],
+    ["/logo.png", "http://127.0.0.1:3001"],
+    ["/logo.png", "http://10.0.0.5"],
+    ["/logo.png", "http://172.20.1.1"],
+    ["/logo.png", "http://192.168.1.10"],
+    ["/logo.png", "http://169.254.169.254"],
+    ["/logo.png", "http://[::1]:3001"],
+    ["/logo.png", "http://[fd00::1]"],
+    ["/logo.png", "http://intranet.internal"],
+  ])("leaves out %s on %s", (logo, base) => {
+    expect(emailLogoUrl(logo, base)).toBe("");
+  });
+});

package/frontend-vue/tests/field-errors.test.ts

@@ -4,6 +4,7 @@ import {
   describeApiError,
   resolveFieldErrors,
 } from "../layers/dms-core/app/composables/useFieldErrors";
+import { resolveApiMessage } from "../layers/dms-core/app/composables/translation/useTranslation";
 
 const FIELDS = ["name", "email", "password"] as const;
 
@@ -132,6 +133,25 @@ describe("resolveFieldErrors", () => {
     ]);
   });
 
+  it("reads the params of a { field, message, params } body", () => {
+    const error = {
+      statusCode: 400,
+      data: {
+        message: "$page.campaigns.error.budget_max",
+        field: "budget",
+        params: { max: 5000, currency: "EUR", nested: { no: 1 } },
+      },
+    };
+    expect(resolveFieldErrors(error, { fields: ["budget"] }).fields).toEqual([
+      {
+        field: "budget",
+        message: "$page.campaigns.error.budget_max",
+        values: undefined,
+        params: { max: 5000, currency: "EUR" },
+      },
+    ]);
+  });
+
   it("reads the data API's missing and invalid field lists", () => {
     expect(
       resolveFieldErrors(
@@ -210,3 +230,18 @@ describe("describeApiError", () => {
     expect(apiErrorText(new Error("down"))).toBeUndefined();
   });
 });
+
+describe("resolveApiMessage", () => {
+  const translate = (key: string, params: Record<string, unknown>) =>
+    key === "page.error.budget_max" ? `At most ${String(params.max)}` : key;
+
+  it("fills the translation's placeholders with the params", () => {
+    expect(
+      resolveApiMessage(translate, "$page.error.budget_max", { max: 5000 }),
+    ).toBe("At most 5000");
+  });
+
+  it("keeps an untranslated message as it came", () => {
+    expect(resolveApiMessage(translate, "Too big", { max: 1 })).toBe("Too big");
+  });
+});

package/frontend-vue/tests/form-required-legend.test.ts

@@ -0,0 +1,34 @@
+// @vitest-environment jsdom
+/**
+ * The required-fields legend is a public component, auto-registered as
+ * `DmsFormRequiredLegend`: a module's own form prints it like a stock one.
+ */
+import { existsSync } from "node:fs";
+import { resolve } from "node:path";
+import { createApp, h } from "vue";
+import { expect, it } from "vitest";
+import FormRequiredLegend from "../layers/dms-ui/app/components/form/FormRequiredLegend.vue";
+
+it("lives with the public components, not the layer's internals", () => {
+  const layer = resolve(__dirname, "../layers/dms-ui/app");
+  expect(existsSync(`${layer}/components/form/FormRequiredLegend.vue`)).toBe(
+    true,
+  );
+  expect(
+    existsSync(`${layer}/build/components/form/FormRequiredLegend.vue`),
+  ).toBe(false);
+});
+
+it("prints the asterisk and the translated legend, with the caller's class", () => {
+  const host = document.createElement("div");
+  const app = createApp({
+    render: () => h(FormRequiredLegend, { class: "mt-4" }),
+  });
+  app.config.globalProperties.$t = (key: string) => `t(${key})`;
+  app.mount(host);
+  const legend = host.querySelector("p")!;
+  expect(legend.classList.contains("mt-4")).toBe(true);
+  expect(legend.textContent).toContain("*");
+  expect(legend.textContent).toContain("t(dms.form.required_legend)");
+  app.unmount();
+});

package/frontend-vue/tests/form-server-field-errors.test.ts

@@ -65,7 +65,8 @@ beforeEach(() => {
   vi.stubGlobal("useDataTypes", () => ({ getDataType: () => undefined }));
   vi.stubGlobal("useTranslation", () => ({
     processI18n: (key: string) => key,
-    processApiMessage: (message: string) => `t(${message})`,
+    processApiMessage: (message: string, params?: Record<string, unknown>) =>
+      params ? `t(${message}, ${JSON.stringify(params)})` : `t(${message})`,
   }));
   vi.stubGlobal("useI18n", () => ({
     t: (key: string, named?: Record<string, unknown>) =>
@@ -137,6 +138,22 @@ describe("DMS form server errors", () => {
     expect(addToast).not.toHaveBeenCalled();
   });
 
+  it("fills the message's placeholders from the error's params", async () => {
+    authFetch.mockRejectedValue({
+      statusCode: 400,
+      data: {
+        message: "$budget_max",
+        field: "name",
+        params: { max: 5000 },
+      },
+    });
+    await submit(setupForm());
+
+    expect(showFieldErrors).toHaveBeenCalledExactlyOnceWith([
+      { name: "name", message: 't($budget_max, {"max":5000})' },
+    ]);
+  });
+
   it("keeps a failure tied to no field as a toast", async () => {
     authFetch.mockRejectedValue({ statusCode: 500, data: "error.unexpected" });
     await submit(setupForm());

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

@@ -0,0 +1,135 @@
+// @vitest-environment jsdom
+/**
+ * A number field clamps a value typed outside `min` / `max` into range on
+ * blur, as the input does by default. With `clamp: false` it keeps the value
+ * as typed and reports it as the field's error, which blocks the submit; its
+ * steppers stop at the bounds.
+ */
+import { formFieldInjectionKey } from "@nuxt/ui/composables/useFormField";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  type App,
+  type Component,
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  ref,
+} from "vue";
+import { FORM_CONTROL_ERRORS_KEY } from "../layers/dms-ui/app/build/composables/form/formControlErrors";
+import {
+  ABOVE_MAX_MESSAGE,
+  BELOW_MIN_MESSAGE,
+  numberRangeError,
+  numberStepperState,
+} from "../layers/dms-ui/app/build/composables/form/numberRange";
+
+let app: App | undefined;
+let host: HTMLDivElement;
+let inputAttrs: Record<string, unknown> = {};
+const reported = new Map<string, string | undefined>();
+
+const InputNumberStub = defineComponent({
+  inheritAttrs: false,
+  setup:
+    (_, { attrs }) =>
+    () => {
+      inputAttrs = { ...attrs };
+      return h("input");
+    },
+});
+
+async function mount(props: Record<string, unknown>) {
+  const InputNumber = (
+    await import(
+      "../layers/dms-ui/app/components/form/components/InputNumber.vue"
+    )
+  ).default as Component;
+  const value = ref(props.modelValue);
+  app = createApp({
+    render: () => h(InputNumber, { ...props, modelValue: value.value }),
+  });
+  app.component("UInputNumber", InputNumberStub);
+  app.provide(
+    formFieldInjectionKey,
+    computed(() => ({ name: "budget" })) as never,
+  );
+  app.provide(FORM_CONTROL_ERRORS_KEY, {
+    report: (fieldId: string, message: string | undefined) =>
+      reported.set(fieldId, message),
+  });
+  app.mount(host);
+  await nextTick();
+  return value;
+}
+
+beforeEach(() => {
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (text: string) => text,
+  }));
+  vi.stubGlobal("useI18n", () => ({ locale: ref("en") }));
+  host = document.createElement("div");
+  document.body.append(host);
+  reported.clear();
+  inputAttrs = {};
+});
+
+afterEach(() => {
+  app?.unmount();
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+describe("numberRangeError", () => {
+  it("names the bound a value crosses", () => {
+    const bounds = { min: 1, max: 10 };
+    expect(numberRangeError(0, bounds)).toBe(BELOW_MIN_MESSAGE);
+    expect(numberRangeError(11, bounds)).toBe(ABOVE_MAX_MESSAGE);
+    expect(numberRangeError(5, bounds)).toBeUndefined();
+    expect(numberRangeError(undefined, bounds)).toBeUndefined();
+    expect(numberRangeError(Number.NaN, bounds)).toBeUndefined();
+  });
+});
+
+describe("numberStepperState", () => {
+  it("stops the steppers at the bounds", () => {
+    expect(numberStepperState(10, { min: 1, max: 10 })).toEqual({
+      incrementDisabled: true,
+      decrementDisabled: false,
+    });
+    expect(numberStepperState(0, { min: 1 })).toEqual({
+      incrementDisabled: false,
+      decrementDisabled: true,
+    });
+    expect(numberStepperState(undefined, { min: 1, max: 10 })).toEqual({
+      incrementDisabled: false,
+      decrementDisabled: false,
+    });
+  });
+});
+
+describe("a number field", () => {
+  it("hands its bounds to the input by default, which clamps", async () => {
+    await mount({ modelValue: 50, min: 1, max: 10 });
+    expect(inputAttrs.min).toBe(1);
+    expect(inputAttrs.max).toBe(10);
+    expect(reported.get("budget")).toBeUndefined();
+  });
+
+  it("keeps an out-of-range value and reports it with clamp: false", async () => {
+    await mount({ modelValue: 50, min: 1, max: 10, clamp: false });
+    expect(inputAttrs.min).toBeUndefined();
+    expect(inputAttrs.max).toBeUndefined();
+    expect(inputAttrs.incrementDisabled).toBe(true);
+    expect(reported.get("budget")).toBe(ABOVE_MAX_MESSAGE);
+  });
+
+  it("clears the error once the value is back in range", async () => {
+    const value = await mount({ modelValue: 0, min: 1, clamp: false });
+    expect(reported.get("budget")).toBe(BELOW_MIN_MESSAGE);
+    value.value = 3;
+    await nextTick();
+    expect(reported.get("budget")).toBeUndefined();
+  });
+});

package/frontend-vue/tests/input-tags.test.ts

@@ -16,7 +16,7 @@ import {
   formErrorsInjectionKey,
   formFieldInjectionKey,
 } from "@nuxt/ui/composables/useFormField";
-import { FORM_CONTROL_ERRORS_KEY } from "../layers/dms-ui/app/build/composables/form/useControlError";
+import { FORM_CONTROL_ERRORS_KEY } from "../layers/dms-ui/app/build/composables/form/formControlErrors";
 
 const formErrors = ref<Array<Record<string, unknown>>>([]);
 const model = ref<string[]>([]);