@antelopejs/dms 0.7.12 → 0.7.14

package/frontend-vue/tests/confirm-typed-text.test.ts

@@ -171,6 +171,41 @@ it("flags an empty or different typed text instead of disabling confirm", async
   expect(closed).toHaveBeenCalledWith(true);
 });
 
+it("matches the typed text ignoring case when asked", async () => {
+  const onConfirm = vi.fn(async () => undefined);
+  mount({
+    title: "Delete?",
+    confirmLabel: "Delete",
+    confirmText: "Acme Corp",
+    confirmTextCaseInsensitive: true,
+    onConfirm,
+  });
+  await flush();
+
+  await type("acme corp");
+  confirmButton().click();
+  await flush();
+  expect(typedError()).toBeUndefined();
+  expect(onConfirm).toHaveBeenCalledOnce();
+});
+
+it("keeps the case-sensitive match by default", async () => {
+  const onConfirm = vi.fn(async () => undefined);
+  mount({
+    title: "Delete?",
+    confirmLabel: "Delete",
+    confirmText: "Acme Corp",
+    onConfirm,
+  });
+  await flush();
+
+  await type("acme corp");
+  confirmButton().click();
+  await flush();
+  expect(typedError()).toBe('dms.confirm.type_mismatch {"text":"Acme Corp"}');
+  expect(onConfirm).not.toHaveBeenCalled();
+});
+
 it("runs the body check with the typed one and stays open when it fails", async () => {
   const validate = vi.fn(() => false);
   const onConfirm = vi.fn(async () => undefined);

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/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/useControlError";
+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/module-routing.test.ts

@@ -4,7 +4,9 @@
  * when the caller may open it, else its first page — keeping the query and
  * the hash it was entered with. The middleware answers the landing page
  * rather than navigating to it, so the module's address never renders and,
- * in a server render, becomes the response's redirect.
+ * in a server render, becomes the response's redirect. A page the browser
+ * already draws at the module's address (a link that skipped the guard) loads
+ * the landing page instead of navigating from its own setup.
  */
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { ref } from "vue";
@@ -20,7 +22,12 @@ interface TreeNode {
   childrenOrders: string[];
 }
 
-type Middleware = (to: { path: string; fullPath: string }) => Promise<unknown>;
+interface GuardedRoute {
+  path: string;
+  fullPath: string;
+}
+
+type Middleware = (to: GuardedRoute, from?: GuardedRoute) => Promise<unknown>;
 
 const navigateDms = vi.fn();
 
@@ -72,12 +79,16 @@ function stubSiteLayout(moduleRoot: TreeNode, landingPage?: string) {
   }));
 }
 
-async function enter(fullPath: string): Promise<unknown> {
+async function enter(
+  fullPath: string,
+  drawnThere = false,
+): Promise<unknown> {
   const middleware = (
     await import("../layers/dms-layout/app/middleware/module-routing.global")
   ).default as unknown as Middleware;
   const path = fullPath.replace(/[?#].*$/, "");
-  return middleware({ path, fullPath });
+  const to = { path, fullPath };
+  return middleware(to, drawnThere ? to : { path: "/home", fullPath: "/home" });
 }
 
 beforeEach(() => {
@@ -131,6 +142,14 @@ describe("entering a module", () => {
     expect(navigateDms).toHaveBeenCalledWith("/dashboard", { replace: true });
   });
 
+  it("loads the landing page when the browser already draws the module's address", async () => {
+    stubSiteLayout(apiModule(), "overview");
+    const replace = vi.fn();
+    vi.stubGlobal("window", { location: { replace } });
+    expect(await enter("/modules/api?live=0", true)).toBe(false);
+    expect(replace).toHaveBeenCalledWith("/modules/api/overview?live=0");
+  });
+
   it("leaves a module page alone", async () => {
     stubSiteLayout(apiModule(), "overview");
     expect(await enter("/modules/api/routes?tab=tester")).toBeUndefined();