@antelopejs/dms 0.4.5 → 0.4.7

package/frontend-vue/tests/admin-invite-email.test.ts

@@ -0,0 +1,86 @@
+import { describe, expect, it, vi } from "vitest";
+import { createSSRApp, defineComponent, h } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { createI18n } from "vue-i18n";
+import AdminInvite from "../layers/dms-layout/app/emails/EmailAdminInvite.vue";
+import en from "../layers/dms-layout/i18n/locales/layout-en-GB.json";
+import fr from "../layers/dms-layout/i18n/locales/layout-fr-FR.json";
+
+const EMAIL_ELEMENTS = ["EHtml", "EHead", "EBody", "EContainer", "ESection"];
+const LEAF_ELEMENTS = ["EText", "EHeading", "EButton"];
+
+function passthrough(tag: string) {
+  return defineComponent({
+    setup:
+      (_, { slots }) =>
+      () =>
+        h(tag, slots.default?.()),
+  });
+}
+
+async function renderInvite(
+  props: Record<string, unknown>,
+  locale = "en",
+): Promise<string> {
+  vi.stubGlobal("useDmsAppConfig", () => ({}));
+  vi.stubGlobal("useDmsRuntimeConfig", () => ({ public: {} }));
+  const app = createSSRApp(AdminInvite, {
+    email: "invitee@local.test",
+    signupLink: "https://app.local/auth/signup?token=t",
+    expiresInDays: 7,
+    ...props,
+  });
+  app.use(
+    createI18n({
+      legacy: false,
+      locale,
+      fallbackLocale: "en",
+      messages: { en, fr },
+    }),
+  );
+  EMAIL_ELEMENTS.forEach((name) => app.component(name, passthrough("div")));
+  LEAF_ELEMENTS.forEach((name) => app.component(name, passthrough("p")));
+  app.component("EImg", passthrough("img"));
+  app.component("EHr", passthrough("hr"));
+  const html = await renderToString(app);
+  vi.unstubAllGlobals();
+  return html.replace(/<!--[^>]*-->/g, "").replace(/&#39;/g, "'");
+}
+
+describe("EmailAdminInvite", () => {
+  it("keeps today's generic wording without any name", async () => {
+    const html = await renderInvite({});
+    expect(html).toContain("You're Invited!");
+    expect(html).toContain(
+      "You've been invited to join our platform. Click the button below to create your account:",
+    );
+    expect(html).toContain("This invitation expires in 7 days.");
+  });
+
+  it("names the workspace, the platform and the inviter", async () => {
+    const html = await renderInvite({
+      workspaceName: "Storefront",
+      platformName: "Acme",
+      inviterName: "Ada",
+    });
+    expect(html).toContain("You're invited to Storefront");
+    expect(html).toContain("Ada invited you to join Storefront on Acme.");
+  });
+
+  it("names the platform when the workspace is unknown", async () => {
+    const html = await renderInvite({ platformName: "Acme" });
+    expect(html).toContain("You've been invited to join Acme.");
+  });
+
+  it("writes the email in French", async () => {
+    const html = await renderInvite(
+      { workspaceName: "Storefront", platformName: "Acme" },
+      "fr",
+    );
+    expect(html).toContain("Vous êtes invité à rejoindre Storefront");
+    expect(html).toContain(
+      "Vous avez été invité à rejoindre Storefront sur Acme.",
+    );
+    expect(html).toContain("Cette invitation expire dans 7 jours.");
+  });
+});

package/frontend-vue/tests/breadcrumb-target.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { buildBreadcrumbTarget } from "../layers/dms-layout/app/utils/breadcrumb";
+
+const PAGE = { layoutUrl: "/projects/project/pagelayout" };
+const PROJECT_PAGE = {
+  ...PAGE,
+  validation: { requiredQueryParams: ["project"] },
+};
+
+describe("buildBreadcrumbTarget", () => {
+  it("links a page without query requirements to its bare path", () => {
+    expect(
+      buildBreadcrumbTarget("/projects", PAGE, { project: "p1" }),
+    ).to.equal("/projects");
+  });
+
+  it("gives a category without a page no link", () => {
+    expect(buildBreadcrumbTarget("/projects", {}, {})).to.equal(undefined);
+  });
+
+  it("carries only the query values an ancestor page requires", () => {
+    expect(
+      buildBreadcrumbTarget("/projects/project", PROJECT_PAGE, {
+        project: "p 1&x",
+        service: "s1",
+      }),
+    ).to.equal("/projects/project?project=p+1%26x");
+  });
+
+  it("gives no link when a required query value is missing", () => {
+    expect(
+      buildBreadcrumbTarget("/projects/project", PROJECT_PAGE, {
+        service: "s1",
+      }),
+    ).to.equal(undefined);
+  });
+
+  it("gives no link when a required query value is empty or repeated", () => {
+    expect(
+      buildBreadcrumbTarget("/projects/project", PROJECT_PAGE, {
+        project: "",
+      }),
+    ).to.equal(undefined);
+    expect(
+      buildBreadcrumbTarget("/projects/project", PROJECT_PAGE, {
+        project: ["a", "b"],
+      }),
+    ).to.equal(undefined);
+  });
+});

package/frontend-vue/tests/chart-nested-donut.test.ts

@@ -0,0 +1,97 @@
+import { createSSRApp, defineComponent, h, ref, type PropType } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import ChartCard from "../layers/dms-ui/app/components/chart/ChartCard.vue";
+import Chart from "../layers/dms-ui/app/components/chart/Chart.vue";
+import type { ChartType } from "../layers/dms-ui/app/composables/chart/types";
+
+const CARD_SERIES = [
+  {
+    name: "Plans",
+    data: [
+      { x: "Starter", y: 3 },
+      { x: "Pro", y: 5, label: "Pro plan" },
+    ],
+  },
+];
+
+vi.mock("../layers/dms-ui/app/composables/chart/useChartFetch", () => ({
+  useChartFetch: (options: { fetchUrl?: string }) => ({
+    data: ref(options.fetchUrl ? { value: 8, series: CARD_SERIES } : null),
+    isLoading: ref(false),
+  }),
+}));
+
+interface CircularOptions {
+  labels?: string[];
+}
+
+const PlotProbe = defineComponent({
+  props: {
+    options: { type: Object as PropType<CircularOptions>, required: true },
+    series: { type: Array as PropType<unknown[]>, required: true },
+  },
+  setup: (props) => () =>
+    h("output", [
+      h("span", { class: "labels" }, JSON.stringify(props.options.labels)),
+      h("span", { class: "series" }, JSON.stringify(props.series)),
+    ]),
+});
+const Slot = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("div", slots.default?.()),
+});
+
+const SLOT_COMPONENTS = [
+  "DmsCard",
+  "DmsClientOnly",
+  "UIcon",
+  "USkeleton",
+  "DmsTrendBadge",
+  "DmsSparkline",
+  "UBadge",
+];
+
+async function renderNested(type: ChartType) {
+  const app = createSSRApp({
+    render: () =>
+      h(
+        ChartCard,
+        {
+          title: "Plans",
+          componentId: "card",
+          pageId: "donut",
+          fetchUrl: "/plans",
+        },
+        () => h(Chart, { type, componentId: "plot", pageId: "donut" }),
+      ),
+  });
+  for (const name of SLOT_COMPONENTS) app.component(name, Slot);
+  app.component("DmsApexChartHost", PlotProbe);
+  return renderToString(app);
+}
+
+beforeEach(() => {
+  vi.stubGlobal("useI18n", () => ({ locale: ref("en-US"), t: String }));
+  vi.stubGlobal("useTranslation", () => ({ processI18n: String }));
+  vi.stubGlobal("useComponentEvent", () => ({}));
+  vi.stubGlobal("useWatch", () => ({ state: ref({}) }));
+});
+
+afterEach(() => vi.unstubAllGlobals());
+
+describe("circular chart nested in a ChartCard", () => {
+  it.each<ChartType>(["donut", "pie"])(
+    "draws the card's first series as %s slices",
+    async (type) => {
+      const html = await renderNested(type);
+      expect(html).not.toContain("dms.chart.no_data");
+      expect(html).toContain(
+        'class="labels">[&quot;Starter&quot;,&quot;Pro plan&quot;]',
+      );
+      expect(html).toContain(`class="series">[3,5]`);
+    },
+  );
+});

package/frontend-vue/tests/error-page-message.test.ts

@@ -0,0 +1,83 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  onMounted,
+  ref,
+  type App,
+} from "vue";
+import ErrorPage from "../layers/dms-layout/app/error.vue";
+import {
+  HTTP_FORBIDDEN,
+  HTTP_NOT_FOUND,
+  HTTP_UNAUTHORIZED,
+} from "../layers/dms-core/app/utils/http-status";
+
+const TECHNICAL_MESSAGE = "DMS backend request failed";
+
+let app: App;
+let host: HTMLDivElement;
+
+const Passthrough = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("div", slots.default?.()),
+});
+
+function installRuntime() {
+  Object.entries({
+    computed,
+    ref,
+    onMounted,
+    HTTP_FORBIDDEN,
+    HTTP_NOT_FOUND,
+    HTTP_UNAUTHORIZED,
+  }).forEach(([key, value]) => vi.stubGlobal(key, value));
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal("useDmsRouter", () => ({ back: vi.fn() }));
+  vi.stubGlobal("useHomepage", () => "/");
+  vi.stubGlobal("useSessionRecovery", () => ({
+    loggedIn: ref(true),
+    reconcileSession: vi.fn(),
+    redirectToAuth: vi.fn(),
+  }));
+}
+
+function mountError(statusCode: number) {
+  app = createApp(ErrorPage, {
+    error: { statusCode, message: TECHNICAL_MESSAGE },
+  });
+  app.config.globalProperties.$t = (key: string) => key;
+  app.component("DmsAppLogo", Passthrough);
+  app.component("DmsCard", Passthrough);
+  app.component("Icon", Passthrough);
+  app.component("UButton", Passthrough);
+  app.mount(host);
+  return host.textContent ?? "";
+}
+
+beforeEach(() => {
+  installRuntime();
+  host = document.createElement("div");
+});
+afterEach(() => {
+  app?.unmount();
+  vi.unstubAllGlobals();
+});
+
+it.each([HTTP_NOT_FOUND, HTTP_FORBIDDEN])(
+  "keeps the technical cause off the %i card",
+  (statusCode) => {
+    const text = mountError(statusCode);
+    expect(text).toContain(`error.${statusCode}.description`);
+    expect(text).not.toContain(TECHNICAL_MESSAGE);
+  },
+);
+
+it("still shows the message of an unexpected error", () => {
+  expect(mountError(500)).toContain(TECHNICAL_MESSAGE);
+});

package/frontend-vue/tests/favorite-page.test.ts

@@ -0,0 +1,104 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildFavoritePage,
+  isFavoritePathValid,
+} from "../layers/dms-layout/app/utils/favorites";
+
+const translate = (text: string) =>
+  text.startsWith("$") ? `t(${text.slice(1)})` : text;
+
+const SETTINGS_PAGE = {
+  id: "settings",
+  displayName: "$page.settings.title",
+  icon: "i-ph-gear",
+};
+const PROJECT_PAGE = {
+  id: "project",
+  displayName: "$cloud.project.title",
+  icon: "i-ph-cube",
+  validation: { requiredQueryParams: ["project"] },
+};
+
+const ROUTES: Record<string, typeof SETTINGS_PAGE | typeof PROJECT_PAGE> = {
+  "/settings": SETTINGS_PAGE,
+  "/projects/project": PROJECT_PAGE,
+};
+const resolveRoute = (path: string) =>
+  ROUTES[path] ? { metadata: ROUTES[path] } : null;
+
+describe("buildFavoritePage", () => {
+  it("keeps a plain page on its path and its translatable display name", () => {
+    expect(
+      buildFavoritePage({
+        path: "/settings",
+        metadata: SETTINGS_PAGE,
+        query: { tab: "general" },
+        translate,
+      }),
+    ).toEqual({
+      id: "settings",
+      path: "/settings",
+      title: "$page.settings.title",
+      icon: "i-ph-gear",
+    });
+  });
+
+  it("keeps the query a page requires and names it after the page and its values", () => {
+    expect(
+      buildFavoritePage({
+        path: "/projects/project",
+        metadata: PROJECT_PAGE,
+        query: { project: "p 1", service: "s1" },
+        translate,
+      }),
+    ).toEqual({
+      id: "/projects/project?project=p+1",
+      path: "/projects/project?project=p+1",
+      title: "t(cloud.project.title) · p 1",
+      icon: "i-ph-cube",
+    });
+  });
+
+  it("joins every required query value in the title", () => {
+    expect(
+      buildFavoritePage({
+        path: "/projects/project/service",
+        metadata: {
+          ...PROJECT_PAGE,
+          validation: { requiredQueryParams: ["project", "service"] },
+        },
+        query: { project: "p1", service: "s1" },
+        translate,
+      })?.title,
+    ).toBe("t(cloud.project.title) · p1 · s1");
+  });
+
+  it("gives no favorite when a required query value is missing", () => {
+    expect(
+      buildFavoritePage({
+        path: "/projects/project",
+        metadata: PROJECT_PAGE,
+        query: {},
+        translate,
+      }),
+    ).toBe(null);
+  });
+});
+
+describe("isFavoritePathValid", () => {
+  it("accepts favorites of plain pages, with or without a query", () => {
+    expect(isFavoritePathValid("/settings", resolveRoute)).toBe(true);
+    expect(isFavoritePathValid("/settings?tab=x", resolveRoute)).toBe(true);
+  });
+
+  it("accepts a favorite carrying the query its page requires", () => {
+    expect(
+      isFavoritePathValid("/projects/project?project=p+1", resolveRoute),
+    ).toBe(true);
+  });
+
+  it("drops favorites that match no page or lack a required query value", () => {
+    expect(isFavoritePathValid("/unknown", resolveRoute)).toBe(false);
+    expect(isFavoritePathValid("/projects/project", resolveRoute)).toBe(false);
+  });
+});

package/frontend-vue/tests/icon-aria-hidden.test.ts

@@ -0,0 +1,29 @@
+import { readFileSync, readdirSync, statSync } from "node:fs";
+import { join, relative } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const ICON_TAG = /<(?:UIcon|Icon)\b[^>]*?>/gs;
+const STATIC_ARIA_HIDDEN = /(?<![:\w-])aria-hidden=/;
+
+function walk(directory: string): string[] {
+  return readdirSync(directory).flatMap((name) => {
+    const path = join(directory, name);
+    return statSync(path).isDirectory() ? walk(path) : [path];
+  });
+}
+
+describe("icon aria-hidden bindings", () => {
+  // The icon hands its attributes to Iconify's component, whose `ariaHidden`
+  // prop is a Boolean: a static attribute reaches it as the string "true".
+  it("binds aria-hidden on icons as a boolean", () => {
+    const offenders = walk(join(process.cwd(), "layers"))
+      .filter((path) => path.endsWith(".vue"))
+      .flatMap((path) =>
+        [...readFileSync(path, "utf8").matchAll(ICON_TAG)]
+          .filter(([tag]) => STATIC_ARIA_HIDDEN.test(tag))
+          .map(() => relative(process.cwd(), path)),
+      );
+
+    expect(offenders).toEqual([]);
+  });
+});

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

@@ -0,0 +1,224 @@
+// @vitest-environment jsdom
+import {
+  computed,
+  createApp,
+  createSSRApp,
+  defineComponent,
+  h,
+  nextTick,
+  ref,
+  type App,
+  type Ref,
+} from "vue";
+import { renderToString } from "vue/server-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import DashboardBanners from "../layers/dms-layout/app/build/components/layout/DashboardBanners.vue";
+import {
+  resolveLayoutBannerPresentation,
+  useLayoutBanners,
+} from "../layers/dms-layout/app/composables/layout/useLayoutBanners";
+import type {
+  LayoutBanner,
+  LayoutBannerVariant,
+  SiteLayout,
+} from "../layers/dms-layout/app/types/page";
+
+const DISMISSED_BANNERS_COOKIE = "dms-dismissed-banners";
+
+const siteLayout = ref<SiteLayout | undefined>();
+let dismissedCookie: Ref<string[]>;
+const cookieNames: string[] = [];
+
+const banner = (extra: Partial<LayoutBanner> = {}): LayoutBanner => ({
+  key: "banner",
+  variant: "info",
+  order: 0,
+  dismissible: false,
+  text: "Heads up",
+  ...extra,
+});
+
+function serveBanners(banners: LayoutBanner[] | undefined): void {
+  siteLayout.value = { pages: {}, categories: {}, banners };
+}
+
+// Renders what the real alert exposes to the banner: its description slot and
+// a close button that reports the alert closed.
+const AlertStub = defineComponent({
+  props: {
+    color: { type: String, default: undefined },
+    icon: { type: String, default: undefined },
+    close: { type: Boolean, default: false },
+  },
+  emits: ["update:open"],
+  setup:
+    (props, { slots, emit }) =>
+    () =>
+      h("div", { "data-color": props.color, "data-icon": props.icon }, [
+        slots.description?.(),
+        props.close
+          ? h("button", { onClick: () => emit("update:open", false) }, "close")
+          : null,
+      ]),
+});
+
+const BannerContent = defineComponent({
+  props: { days: { type: Number, required: true } },
+  setup: (props) => () => h("strong", `${props.days} days left`),
+});
+
+function mountable(root: App): App {
+  root.component("UAlert", AlertStub);
+  root.component("BannerContent", BannerContent);
+  return root;
+}
+
+beforeEach(() => {
+  siteLayout.value = undefined;
+  cookieNames.length = 0;
+  dismissedCookie = ref<string[]>([]);
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("useSiteLayout", () => ({ siteLayout }));
+  vi.stubGlobal("useDmsCookie", (name: string) => {
+    cookieNames.push(name);
+    return dismissedCookie;
+  });
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (key: string) => key.replace(/^\$/, "t:"),
+  }));
+  vi.stubGlobal("useLayoutBanners", useLayoutBanners);
+  vi.stubGlobal(
+    "resolveLayoutBannerPresentation",
+    resolveLayoutBannerPresentation,
+  );
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe("resolveLayoutBannerPresentation", () => {
+  it.each([
+    ["info", "status"],
+    ["warning", "status"],
+    ["error", "alert"],
+  ] as const)("announces a %s banner as %s", (variant, role) => {
+    const presentation = resolveLayoutBannerPresentation(banner({ variant }));
+    expect(presentation.role).toBe(role);
+    expect(presentation.color).toBe(variant);
+  });
+
+  it("renders an unknown variant as info rather than unstyled", () => {
+    const presentation = resolveLayoutBannerPresentation(
+      banner({ variant: "success" as LayoutBannerVariant }),
+    );
+    expect(presentation).toEqual(
+      resolveLayoutBannerPresentation(banner({ variant: "info" })),
+    );
+  });
+
+  it("keeps the banner's own icon over the variant's", () => {
+    expect(
+      resolveLayoutBannerPresentation(banner({ icon: "i-ph-clock" })).icon,
+    ).toBe("i-ph-clock");
+  });
+});
+
+describe("useLayoutBanners", () => {
+  it("serves nothing for a backend that predates banners", () => {
+    serveBanners(undefined);
+    expect(useLayoutBanners().banners.value).toEqual([]);
+  });
+
+  it("drops a dismissed banner, and remembers the dismissal in the cookie", () => {
+    serveBanners([
+      banner({ key: "a", dismissible: true }),
+      banner({ key: "b", dismissible: true }),
+    ]);
+    const { banners, dismiss } = useLayoutBanners();
+
+    dismiss("a");
+    dismiss("a");
+
+    expect(cookieNames).toEqual([DISMISSED_BANNERS_COOKIE]);
+    expect(dismissedCookie.value).toEqual(["a"]);
+    expect(banners.value.map((entry) => entry.key)).toEqual(["b"]);
+  });
+
+  // A banner that turned non-dismissible (an overdue invoice) must show again
+  // even to a user who closed its dismissible predecessor under the same key.
+  it("ignores a dismissal for a banner that is not dismissible", () => {
+    dismissedCookie.value = ["a"];
+    serveBanners([banner({ key: "a", dismissible: false })]);
+    expect(useLayoutBanners().banners.value).toHaveLength(1);
+  });
+});
+
+describe("DashboardBanners", () => {
+  it("server-renders the banners in order, each with its variant's role", async () => {
+    serveBanners([
+      banner({ key: "billing", variant: "error", text: "$billing.overdue" }),
+      banner({
+        key: "trial",
+        variant: "warning",
+        component: "BannerContent",
+        props: { days: 3 },
+        text: undefined,
+      }),
+      banner({ key: "news", variant: "info", text: "New release" }),
+    ]);
+
+    const html = await renderToString(
+      mountable(createSSRApp(DashboardBanners)),
+    );
+    const document = new DOMParser().parseFromString(html, "text/html");
+    const rendered = [
+      ...document.querySelectorAll("[data-dms-layout-banner]"),
+    ].map((node) => ({
+      key: node.getAttribute("data-dms-layout-banner"),
+      role: node.getAttribute("role"),
+      text: node.textContent,
+    }));
+
+    expect(rendered).toEqual([
+      { key: "billing", role: "alert", text: "t:billing.overdue" },
+      { key: "trial", role: "status", text: "3 days left" },
+      { key: "news", role: "status", text: "New release" },
+    ]);
+  });
+
+  // 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 () => {
+    dismissedCookie.value = ["news"];
+    serveBanners([banner({ key: "news", dismissible: true })]);
+
+    const html = await renderToString(
+      mountable(createSSRApp(DashboardBanners)),
+    );
+    expect(html).not.toContain("data-dms-layout-banners");
+  });
+
+  it("offers a close button only on a dismissible banner, and closes it", async () => {
+    serveBanners([
+      banner({ key: "sticky" }),
+      banner({ key: "closable", dismissible: true }),
+    ]);
+    const host = document.createElement("div");
+    const app = mountable(createApp(DashboardBanners));
+    app.mount(host);
+
+    const buttons = host.querySelectorAll("button");
+    expect(buttons).toHaveLength(1);
+    buttons[0]!.click();
+    await nextTick();
+
+    expect(dismissedCookie.value).toEqual(["closable"]);
+    expect(
+      [...host.querySelectorAll("[data-dms-layout-banner]")].map((node) =>
+        node.getAttribute("data-dms-layout-banner"),
+      ),
+    ).toEqual(["sticky"]);
+    app.unmount();
+  });
+});