@antelopejs/dms 0.7.21 → 0.8.0

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

@@ -0,0 +1,141 @@
+import { describe, expect, it, vi } from "vitest";
+import { type Component, createSSRApp, defineComponent, h } from "vue";
+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";
+
+interface EmailModule {
+  default: Component;
+}
+
+const emailModules = import.meta.glob<EmailModule>(
+  "../layers/dms-layout/app/emails/*.vue",
+  { eager: true },
+);
+
+const PUBLIC_BASE = "https://admin.example.com";
+const PUBLIC_PNG_LOGO = "/images/logo.png";
+const SVG_LOGO = "/images/logo.svg";
+const ELEMENTS: Record<string, string> = {
+  EHtml: "html",
+  EHead: "head",
+  EBody: "body",
+  EContainer: "div",
+  ESection: "section",
+  EHeading: "h1",
+  EText: "p",
+  EButton: "a",
+  EImg: "img",
+  EHr: "hr",
+  EPreview: "span",
+};
+
+function element(tag: string) {
+  return defineComponent({
+    inheritAttrs: false,
+    setup:
+      (_, { attrs, slots }) =>
+      () =>
+        h(tag, { src: attrs.src }, slots.default?.()),
+  });
+}
+
+function templateName(path: string): string {
+  return path.split("/").pop()?.replace(".vue", "") ?? path;
+}
+
+const EMAIL_PROPS = {
+  userName: "Ada",
+  newEmail: "ada@new.test",
+  expiresIn: "24 hours",
+  expiresInHours: 24,
+  partial: true,
+  failedSources: ["media"],
+};
+
+async function renderEmail(
+  component: Component,
+  logo: string,
+  locale = "en",
+): Promise<string> {
+  vi.stubGlobal("useDmsAppConfig", () => ({
+    branding: { logo: { default: { light: logo } } },
+  }));
+  vi.stubGlobal("useDmsRuntimeConfig", () => ({
+    public: { dms: { clientBaseUrl: PUBLIC_BASE } },
+  }));
+  const app = createSSRApp(component, EMAIL_PROPS);
+  app.use(
+    createI18n({
+      legacy: false,
+      locale,
+      fallbackLocale: "en",
+      messages: { en, fr },
+    }),
+  );
+  Object.entries(ELEMENTS).forEach(([name, tag]) =>
+    app.component(name, element(tag)),
+  );
+  const html = await renderToString(app);
+  vi.unstubAllGlobals();
+  return html;
+}
+
+const templates = Object.entries(emailModules).map(
+  ([path, module]) => [templateName(path), module.default] as const,
+);
+
+describe("built-in emails", () => {
+  it.each(templates)(
+    "%s leaves out a logo mail clients cannot load",
+    async (_name, component) => {
+      const html = await renderEmail(component, SVG_LOGO);
+      expect(html).not.toContain("<img");
+    },
+  );
+
+  it.each(templates)("%s draws a public PNG logo", async (_name, component) => {
+    const html = await renderEmail(component, PUBLIC_PNG_LOGO);
+    expect(html).toContain(`<img src="${PUBLIC_BASE}${PUBLIC_PNG_LOGO}"`);
+  });
+
+  it.each(templates)("%s is written in French", async (_name, component) => {
+    const html = await renderEmail(component, PUBLIC_PNG_LOGO, "fr");
+    expect(html).toContain("Bonjour");
+    expect(html).not.toMatch(/Hello|If you/);
+  });
+
+  it("words the code lifetime in the recipient's language", async () => {
+    const [, component] = templates.find(
+      ([name]) => name === "EmailResetPassword",
+    )!;
+    expect(await renderEmail(component, PUBLIC_PNG_LOGO)).toContain(
+      "This code expires in 24 hours.",
+    );
+    expect(await renderEmail(component, PUBLIC_PNG_LOGO, "fr")).toContain(
+      "Ce code expire dans 24 heures.",
+    );
+  });
+
+  it("marks a partial export in French", async () => {
+    const [, component] = templates.find(
+      ([name]) => name === "EmailExportReady",
+    )!;
+    const html = await renderEmail(component, PUBLIC_PNG_LOGO, "fr");
+    expect(html).toContain("<strong>incomplet</strong>");
+    expect(html.replace(/<!--[^>]*-->/g, "")).toContain("— media.");
+  });
+
+  it("puts the two-factor disclaimer under the separator", async () => {
+    const [, component] = templates.find(
+      ([name]) => name === "EmailTwoFactor",
+    )!;
+    const html = await renderEmail(component, PUBLIC_PNG_LOGO);
+    const separator = html.indexOf("<hr>");
+    expect(separator).toBeGreaterThan(-1);
+    expect(html.indexOf("If you did not attempt to sign in")).toBeGreaterThan(
+      separator,
+    );
+  });
+});

package/frontend-vue/tests/cascader.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
 import {
   buildCascaderPathLabels,
   buildCascaderTree,
+  cascaderValuePath,
   findCascaderNode,
   flattenCascaderTree,
   formatCascaderPath,
@@ -177,6 +178,32 @@ describe("buildCascaderPathLabels", () => {
   });
 });
 
+describe("cascaderValuePath", () => {
+  it("resolves a picked id, or a picked row, to its path", () => {
+    expect(cascaderValuePath("speakers", keyMapping, categories)).toEqual([
+      "Electronics",
+      "Audio",
+      "Speakers",
+    ]);
+    expect(
+      cascaderValuePath({ _id: "tv", name: "TV" }, keyMapping, categories),
+    ).toEqual(["Electronics", "Video", "TV"]);
+  });
+
+  it("shows a picked row's own label, or its id, until the rows are there", () => {
+    expect(cascaderValuePath({ _id: "tv", name: "TV" }, keyMapping)).toEqual([
+      "TV",
+    ]);
+    expect(cascaderValuePath("tv", keyMapping)).toEqual(["tv"]);
+    expect(cascaderValuePath("nope", keyMapping, categories)).toEqual(["nope"]);
+  });
+
+  it("has no path for nothing picked", () => {
+    expect(cascaderValuePath(null, keyMapping, categories)).toEqual([]);
+    expect(cascaderValuePath({ name: "Loose" }, keyMapping)).toEqual(["Loose"]);
+  });
+});
+
 describe("resolveCascaderKeyMapping", () => {
   it("falls back to default keys", () => {
     expect(resolveCascaderKeyMapping()).toEqual({

package/frontend-vue/tests/chart-auto-y-range.test.ts

@@ -34,20 +34,20 @@ describe("annotation-aware auto Y range", () => {
 
   it("expands both ends for annotations above and below native data bounds", () => {
     const bounds = boundsFor({ annotations: [{ y: 200 }, { y: -50 }] });
-    expect(bounds.min(10)).toBe(-54);
-    expect(bounds.max(30)).toBe(216);
+    expect(bounds.min(10)).toBe(-100);
+    expect(bounds.max(30)).toBe(250);
   });
 
   it("includes both ends of a reversed band and all native series extrema", () => {
     const bounds = boundsFor({ annotations: [{ y: 200, y2: -50 }] });
-    expect(bounds.min(-100)).toBe(-108);
-    expect(bounds.max(300)).toBe(324);
+    expect(bounds.min(-100)).toBe(-150);
+    expect(bounds.max(300)).toBe(350);
   });
 
   it("pads negative bounds outwards rather than clipping negative data", () => {
     const bounds = boundsFor();
-    expect(bounds.min(-100)).toBe(-108);
-    expect(bounds.max(-10)).toBe(-9.2);
+    expect(bounds.min(-100)).toBe(-120);
+    expect(bounds.max(-10)).toBe(-9);
   });
 
   it("gives zero-only data a nonzero range without changing the series", () => {
@@ -75,15 +75,15 @@ describe("annotation-aware auto Y range", () => {
   });
 
   it.each([-1, NaN, Infinity])("defaults invalid padding %s", (padding) => {
-    expect(boundsFor({ autoYRange: { padding } }).max(100)).toBe(108);
+    expect(boundsFor({ autoYRange: { padding } }).max(100)).toBe(120);
   });
 
   it("ignores nonfinite annotation coordinates when determining bounds", () => {
     const bounds = boundsFor({
       annotations: [{ y: NaN }, { y: Infinity }, { y: 20 }],
     });
-    expect(bounds.min(10)).toBe(9.2);
-    expect(bounds.max(10)).toBe(21.6);
+    expect(bounds.min(10)).toBe(9);
+    expect(bounds.max(10)).toBe(22);
   });
 
   it("recomputes when annotations or padding change", () => {
@@ -109,6 +109,22 @@ describe("annotation-aware auto Y range", () => {
     ).toEqual({ min: 0, max: 5 });
   });
 
+  it("rounds the padded bounds to a step the axis can tick evenly", () => {
+    const series = [{ name: "value", data: [104.4, 420, 770] }];
+    const bounds = boundsFor({ series, annotations: [{ y: 300, y2: 500 }] });
+    expect(bounds.min(104.4)).toBe(0);
+    expect(bounds.max(770)).toBe(900);
+  });
+
+  it("writes unformatted axis labels without float noise", () => {
+    const labels = chartFor().options.value.yaxis as {
+      labels: { formatter: (value: number) => string };
+    };
+    expect(labels.labels.formatter(160.00000000000003)).toBe("160");
+    expect(labels.labels.formatter(0.1 + 0.2)).toBe("0.3");
+    expect(labels.labels.formatter(603.6)).toBe("603.6");
+  });
+
   it("does not scale circular charts", () => {
     expect(boundsFor({ type: "donut" })).not.toHaveProperty("min");
   });

package/frontend-vue/tests/chart-colors.test.ts

@@ -71,6 +71,14 @@ describe("chart color tokens", () => {
     expect(resolveChartColor(color)).toBe(color);
   });
 
+  it.each([
+    ["rgb(14 165 233)", "rgb(14, 165, 233)"],
+    ["rgb(14 165 233 / 0.5)", "rgba(14, 165, 233, 0.5)"],
+    ["rgba(14 165 233 / 40%)", "rgba(14, 165, 233, 0.4)"],
+  ])("rewrites space-separated %s in the comma form Apex reads", (color, expected) => {
+    expect(resolveChartColor(color)).toBe(expected);
+  });
+
   it.each(["", "transparent", "rgba(0, 0, 0, 0)"])(
     "falls back for unusable computed color %s",
     (color) => {

package/frontend-vue/tests/chart-resize-after-animation.test.ts

@@ -0,0 +1,100 @@
+// @vitest-environment jsdom
+/**
+ * Apex drops its container's resizes while an animation runs: a sidebar
+ * toggled during the intro animation left the chart at its old width, past
+ * its card, until the next window resize. The host redraws such a chart once
+ * the animation ends.
+ */
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import ApexChartHost from "../layers/dms-ui/app/components/chart/ApexChartHost.vue";
+
+const HOST_WIDTH = 1047;
+const STALE_WIDTH = 1227;
+
+const windowResizeHandler = vi.fn();
+const drawnWidth = ref(HOST_WIDTH);
+let endAnimation: () => void = () => {};
+
+vi.mock("apexcharts", () => ({ default: {} }));
+vi.mock("../layers/dms-ui/app/composables/chart/apexLocales", () => ({
+  ensureApexLocale: async () => undefined,
+}));
+vi.mock("vue3-apexcharts", () => ({
+  default: defineComponent({
+    emits: ["animationEnd"],
+    setup(_, { emit, expose }) {
+      expose({
+        chart: { windowResizeHandler },
+        updateOptions: async () => undefined,
+      });
+      endAnimation = () => emit("animationEnd");
+      return () =>
+        h("div", [
+          h("svg", {
+            class: "apexcharts-svg",
+            "data-width": drawnWidth.value,
+          }),
+        ]);
+    },
+  }),
+}));
+
+function widthOf(element: Element): number {
+  if (element.classList.contains("dms-apex")) return HOST_WIDTH;
+  return Number(element.getAttribute("data-width") ?? 0);
+}
+
+let app: ReturnType<typeof createApp> | undefined;
+
+async function mountHost(): Promise<HTMLElement> {
+  const root = document.createElement("div");
+  app = createApp(() =>
+    h(ApexChartHost, {
+      apexType: "line",
+      height: 300,
+      options: {},
+      series: [],
+    }),
+  );
+  app.mount(root);
+  await vi.waitFor(() => {
+    expect(root.querySelector("svg.apexcharts-svg")).not.toBeNull();
+  });
+  return root;
+}
+
+beforeEach(() => {
+  vi.stubGlobal("useI18n", () => ({ locale: ref("en") }));
+  vi.spyOn(Element.prototype, "getBoundingClientRect").mockImplementation(
+    function (this: Element) {
+      return { width: widthOf(this) } as DOMRect;
+    },
+  );
+});
+
+afterEach(() => {
+  app?.unmount();
+  windowResizeHandler.mockClear();
+  drawnWidth.value = HOST_WIDTH;
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+it("redraws a chart left at a stale width when its animation ends", async () => {
+  await mountHost();
+  drawnWidth.value = STALE_WIDTH;
+  await nextTick();
+
+  endAnimation();
+
+  expect(windowResizeHandler).toHaveBeenCalledOnce();
+});
+
+it("leaves a chart drawn at its host's width alone", async () => {
+  await mountHost();
+
+  endAnimation();
+
+  expect(windowResizeHandler).not.toHaveBeenCalled();
+});

package/frontend-vue/tests/chart-type-defaults.test.ts

@@ -0,0 +1,128 @@
+import { describe, expect, it } from "vitest";
+import { useApexChart } from "../layers/dms-ui/app/composables/chart/useApexChart";
+import type { UseApexChartInput } from "../layers/dms-ui/app/composables/chart/useApexChart.types";
+import type { ChartSeries } from "../layers/dms-ui/app/composables/chart/types";
+
+const DEALS: ChartSeries[] = [
+  {
+    name: "Deals",
+    data: [
+      { x: 3, y: 120, label: "Acme" },
+      { x: 8, y: 340 },
+    ],
+  },
+];
+
+type Section = Record<string, unknown>;
+type LabelFormatter = (value: unknown, context: unknown) => unknown;
+
+function optionsFor(input: Partial<UseApexChartInput>): Section {
+  return useApexChart(() => ({ type: "line", series: [], ...input })).options
+    .value;
+}
+
+function sectionOf(options: Section, key: string): Section {
+  return options[key] as Section;
+}
+
+function labelContext(dataPointIndex: number) {
+  return { seriesIndex: 0, dataPointIndex, w: { config: { series: DEALS } } };
+}
+
+describe("radar grid", () => {
+  it("leaves the grid to the radar's own polygons", () => {
+    expect(sectionOf(optionsFor({ type: "radar" }), "grid").show).toBe(false);
+  });
+
+  it("keeps the cartesian grid on axis charts", () => {
+    expect(sectionOf(optionsFor({ type: "line" }), "grid").show).toBe(true);
+  });
+});
+
+describe("donut slice labels", () => {
+  it("hides them on the default thin ring they overflow", () => {
+    const labels = sectionOf(optionsFor({ type: "donut" }), "dataLabels");
+    expect(labels.enabled).toBe(false);
+  });
+
+  it("shows them on a ring wide enough to hold them", () => {
+    const labels = sectionOf(
+      optionsFor({ type: "donut", arcWidth: 45 }),
+      "dataLabels",
+    );
+    expect(labels.enabled).toBe(true);
+  });
+
+  it("keeps them on a pie, and Apex's own percent formatter", () => {
+    const labels = sectionOf(optionsFor({ type: "pie" }), "dataLabels");
+    expect(labels.enabled).toBe(true);
+    expect(labels.formatter).toBeUndefined();
+  });
+});
+
+describe("scatter points", () => {
+  it("draws its points without a pointSize", () => {
+    const markers = sectionOf(optionsFor({ type: "scatter" }), "markers");
+    expect(markers.size).toBeGreaterThan(0);
+  });
+
+  it("honours an explicit pointSize", () => {
+    const markers = sectionOf(
+      optionsFor({ type: "scatter", pointSize: 9 }),
+      "markers",
+    );
+    expect(markers.size).toBe(9);
+  });
+
+  it("keeps line markers hidden", () => {
+    expect(sectionOf(optionsFor({ type: "line" }), "markers").size).toBe(0);
+  });
+
+  it("labels a point with its own label, else its value", () => {
+    const labels = sectionOf(
+      optionsFor({ type: "scatter", series: DEALS, showLabels: true }),
+      "dataLabels",
+    );
+    const format = labels.formatter as LabelFormatter;
+    expect(format(120, labelContext(0))).toBe("Acme");
+    expect(format(340, labelContext(1))).toBe(340);
+  });
+
+  it("lifts a point's label off the point it names", () => {
+    const labels = sectionOf(
+      optionsFor({ type: "scatter", showLabels: true }),
+      "dataLabels",
+    );
+    expect(labels.offsetY).toBeLessThan(0);
+    const line = sectionOf(optionsFor({ type: "line" }), "dataLabels");
+    expect(line.offsetY).toBe(0);
+  });
+});
+
+describe("rawOptions paths", () => {
+  it("sets a dotted key inside its section", () => {
+    const markers = sectionOf(
+      optionsFor({
+        type: "scatter",
+        rawOptions: [{ key: "markers.size", value: "5" }],
+      }),
+      "markers",
+    );
+    expect(markers.size).toBe(5);
+    expect(markers.strokeWidth).toBe(0);
+  });
+
+  it("creates the sections a dotted key names", () => {
+    const options = optionsFor({
+      rawOptions: [{ key: "states.hover.filter", value: '{"type":"none"}' }],
+    });
+    expect(options.states).toEqual({ hover: { filter: { type: "none" } } });
+  });
+
+  it("still replaces a whole section from a plain key", () => {
+    const options = optionsFor({
+      rawOptions: [{ key: "markers", value: '{"size":5}' }],
+    });
+    expect(options.markers).toEqual({ size: 5 });
+  });
+});

package/frontend-vue/tests/check-list-marker.test.ts

@@ -0,0 +1,58 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick, type App } from "vue";
+import CheckList, {
+  type CheckListItem,
+  type CheckListMarker,
+} from "../layers/dms-ui/app/components/check-list/CheckList.vue";
+
+const IconStub = defineComponent({
+  props: { name: String },
+  setup: (props) => () => h("i", { "data-icon": props.name }),
+});
+
+const ITEMS: CheckListItem[] = [
+  { label: "Ok", state: "ok" },
+  { label: "Failed", state: "error" },
+  { label: "Waiting", state: "pending" },
+];
+
+let app: App | undefined;
+let host: HTMLDivElement;
+
+async function mount(marker: CheckListMarker) {
+  app = createApp({ render: () => h(CheckList, { items: ITEMS, marker }) });
+  app.component("UIcon", IconStub);
+  app.config.globalProperties.$t = (key: string) => key;
+  app.mount(host);
+  await nextTick();
+}
+
+const iconOf = (label: string) =>
+  [...host.querySelectorAll("li")]
+    .find((item) => item.textContent?.includes(label))
+    ?.querySelector("i")?.dataset.icon;
+
+beforeEach(() => {
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+describe("DmsCheckList markers", () => {
+  it.each<CheckListMarker>(["icon", "plain"])(
+    "never draws a pending line with the error icon (%s)",
+    async (marker) => {
+      await mount(marker);
+      expect(iconOf("Waiting")).toBeTruthy();
+      expect(iconOf("Waiting")).not.toBe(iconOf("Failed"));
+    },
+  );
+});

package/frontend-vue/tests/confirm-from.test.ts

@@ -59,7 +59,7 @@ describe("confirmFrom", () => {
     });
     const onConfirm = vi.fn(async () => undefined);
     const confirmed = await mountConfirmFrom().confirmFrom(
-      "/api/campaigns/{id}/delete-confirm",
+      "/api/campaigns/{{row.id}}/delete-confirm",
       {
         params: { id: "c1", name: "Spring" },
         fallback: { icon: "i-ph-trash" },

package/frontend-vue/tests/confirm-secondary-action.test.ts

@@ -49,8 +49,8 @@ describe("a confirmation's secondary action, resolved", () => {
           icon: "i-ph-download-simple",
           target: {
             type: "download",
-            url: "/legacy/lang/{workspace}/{code}.json",
-            filename: "{workspace}-{file}",
+            url: "/legacy/lang/{{row.workspace}}/{{row.code}}.json",
+            filename: "{{row.workspace}}-{{row.file}}",
           },
         },
       },

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

@@ -198,7 +198,7 @@ describe("a link row action", () => {
         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}}",
+          url: "/modules/marketing/funnel?id={{row._id}}&website={{query.website}}&mk.period={{query.mk.period}}&mk.to={{query.mk.to}}&order={{params.id}}",
         },
       },
       { _id: "f 1" },
@@ -211,7 +211,7 @@ describe("a link row action", () => {
 
   it("leaves a URL without page tokens as before", async () => {
     mountTargets().handleCustomRowAction(
-      { label: "Open", target: { type: "page", url: "/orders/{_id}" } },
+      { label: "Open", target: { type: "page", url: "/orders/{{row._id}}" } },
       { _id: "o2" },
     );
     await vi.waitFor(() => expect(navigateDms).toHaveBeenCalledTimes(1));

package/frontend-vue/tests/custom-action-confirm-from.test.ts

@@ -32,7 +32,7 @@ function mountTargets(rowIdKey?: string) {
 const REFUND: CustomRowAction = {
   label: "Refund",
   target: { type: "page", url: "/orders" },
-  confirm: { from: "/api/orders/{id}/refund-confirm?customer={customer}" },
+  confirm: { from: "/api/orders/{{row.id}}/refund-confirm?customer={{row.customer}}" },
 };
 
 beforeEach(() => {
@@ -60,7 +60,7 @@ afterEach(() => {
 });
 
 describe("a custom row action's confirmation worded by the server", () => {
-  it("fills {id} with the row's id, like a built-in action, besides its fields", async () => {
+  it("fills {{row.id}} with the row's id, like a built-in action, besides its fields", async () => {
     mountTargets().handleCustomRowAction(REFUND, {
       _id: "o1",
       customer: "Ada",

package/frontend-vue/tests/download-action-target.test.ts

@@ -146,8 +146,8 @@ describe("a download action target", () => {
       label: "Download",
       target: {
         type: "download",
-        url: "/api/files/{_id}?workspace={{query.workspace}}",
-        filename: "{name}",
+        url: "/api/files/{{row._id}}?workspace={{query.workspace}}",
+        filename: "{{row.name}}",
       },
     };
     mountTargets().handleCustomRowAction(action, {