@antelopejs/dms 0.6.1 → 0.7.0

package/frontend-vue/tests/command-palette-assistant.test.ts

@@ -0,0 +1,344 @@
+// @vitest-environment jsdom
+import type { CommandPaletteGroup } from "@nuxt/ui";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  ref,
+  watch,
+  type App,
+  type FunctionalComponent,
+  type PropType,
+  type Ref,
+} from "vue";
+import DashboardSearch from "../layers/dms-layout/app/components/layout/DashboardSearch.vue";
+import { PaletteStub } from "./fixtures/dashboard-search-stub";
+import {
+  registerCommandPaletteAssistant,
+  unregisterCommandPaletteAssistant,
+  useCommandPaletteAssistant,
+  type CommandPaletteAssistant,
+} from "../layers/dms-layout/app/composables/useCommandPaletteAssistant";
+
+const SOURCE_GROUPS: CommandPaletteGroup[] = [
+  {
+    id: "navigation",
+    label: "Navigation",
+    items: [{ label: "Orders" }, { label: "Order statuses" }],
+  },
+];
+
+const ANSWER_COMPONENT = "EchoAnswer";
+const ASSISTANT: CommandPaletteAssistant = {
+  id: "demo:assistant",
+  label: "$demo.assistant",
+  icon: "i-sparkle",
+  placeholder: "Ask the demo",
+  suggestions: () => [
+    { label: "Which customers churned?" },
+    { label: "Late orders", prompt: "Which orders are late?" },
+  ],
+  answerComponent: ANSWER_COMPONENT,
+};
+
+let state: Map<string, Ref<unknown>>;
+let app: App | undefined;
+let host: HTMLDivElement;
+let releaseAnswer: () => void;
+let answerOutcome: Promise<void>;
+
+/** Stands in for an answer component with an async setup. */
+const EchoAnswer = defineComponent({
+  props: {
+    prompt: { type: String, required: true },
+    close: { type: Function as PropType<() => void>, required: true },
+  },
+  async setup(props) {
+    await answerOutcome;
+    return () =>
+      h("p", { "data-testid": "answer", onClick: props.close }, props.prompt);
+  },
+});
+
+function deferAnswer(): void {
+  answerOutcome = new Promise((resolve) => {
+    releaseAnswer = resolve;
+  });
+}
+
+function translate(key: string, params?: Record<string, unknown>): string {
+  return params ? `${key}:${Object.values(params).join(",")}` : key;
+}
+
+function installRuntime(): void {
+  state = new Map();
+  Object.entries({ computed, ref, watch }).forEach(([key, value]) =>
+    vi.stubGlobal(key, value),
+  );
+  vi.stubGlobal("useDmsState", (key: string, initial: () => unknown) => {
+    if (!state.has(key)) state.set(key, ref(initial()));
+    return state.get(key);
+  });
+  vi.stubGlobal("useI18n", () => ({ t: translate }));
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (value: string) =>
+      value.startsWith("$") ? `t(${value.slice(1)})` : value,
+  }));
+  vi.stubGlobal("useDmsAppConfig", () => ({
+    ui: { icons: { close: "i-close", search: "i-search" } },
+  }));
+  vi.stubGlobal("useCommandPaletteGroups", () => ({
+    groups: ref(SOURCE_GROUPS),
+  }));
+  vi.stubGlobal("COMMAND_PALETTE_FUSE_OPTIONS", {});
+  vi.stubGlobal("useCommandPaletteAssistant", useCommandPaletteAssistant);
+  vi.stubGlobal("resolveDmsComponent", (name: string) =>
+    name === ANSWER_COMPONENT ? EchoAnswer : undefined,
+  );
+}
+
+interface KbdStubProps {
+  value: string;
+}
+
+const ButtonStub: FunctionalComponent = (_, { slots }) =>
+  h("button", { "data-stub": "button" }, slots.default?.());
+const KbdStub: FunctionalComponent<KbdStubProps> = (props) =>
+  h("kbd", props.value);
+const IconStub: FunctionalComponent = () => h("i");
+const SkeletonStub: FunctionalComponent = () =>
+  h("div", { "data-skeleton": "" });
+
+function mountPalette(): void {
+  app = createApp(DashboardSearch);
+  app.component("UDashboardSearch", PaletteStub);
+  app.component("UButton", ButtonStub);
+  app.component("UKbd", KbdStub);
+  app.component("UIcon", IconStub);
+  app.component("USkeleton", SkeletonStub);
+  app.mount(host);
+}
+
+async function settle(): Promise<void> {
+  await new Promise((resolve) => setTimeout(resolve));
+  await nextTick();
+}
+
+function dialog(): HTMLElement {
+  return host.querySelector<HTMLElement>('[role="dialog"]')!;
+}
+
+function input(): HTMLInputElement {
+  return host.querySelector("input")!;
+}
+
+async function type(value: string): Promise<void> {
+  input().value = value;
+  input().dispatchEvent(new Event("input"));
+  await nextTick();
+}
+
+function pressTab(shiftKey = false): KeyboardEvent {
+  const event = new KeyboardEvent("keydown", {
+    key: "Tab",
+    shiftKey,
+    cancelable: true,
+    bubbles: true,
+  });
+  input().dispatchEvent(event);
+  return event;
+}
+
+function items(groupId: string): string[] {
+  return [...host.querySelectorAll(`[data-group="${groupId}"]`)].map(
+    (item) => item.textContent ?? "",
+  );
+}
+
+function clickItem(groupId: string, index = 0): void {
+  const matches = host.querySelectorAll<HTMLElement>(
+    `[data-group="${groupId}"]`,
+  );
+  matches.item(index).click();
+}
+
+beforeEach(() => {
+  host = document.createElement("div");
+  document.body.append(host);
+  installRuntime();
+  deferAnswer();
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  host.remove();
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+describe("command palette assistant registry", () => {
+  it("offers no assistant until one is registered", () => {
+    expect(useCommandPaletteAssistant().assistant.value).toBeUndefined();
+  });
+
+  it("replaces an entry registered under the same id", () => {
+    registerCommandPaletteAssistant(ASSISTANT);
+    registerCommandPaletteAssistant({ ...ASSISTANT, label: "Updated" });
+    expect(useCommandPaletteAssistant().assistant.value?.label).toBe("Updated");
+  });
+
+  it("uses the assistant registered last, and falls back when it leaves", () => {
+    const { assistant } = useCommandPaletteAssistant();
+    registerCommandPaletteAssistant(ASSISTANT);
+    registerCommandPaletteAssistant({ ...ASSISTANT, id: "other" });
+    expect(assistant.value?.id).toBe("other");
+    unregisterCommandPaletteAssistant("other");
+    expect(assistant.value?.id).toBe(ASSISTANT.id);
+  });
+
+  it("ignores an entry whose suggestions were stripped by the SSR payload", () => {
+    registerCommandPaletteAssistant({
+      ...ASSISTANT,
+      suggestions:
+        undefined as unknown as CommandPaletteAssistant["suggestions"],
+    });
+    expect(useCommandPaletteAssistant().assistant.value).toBeUndefined();
+  });
+});
+
+describe("command palette without an assistant", () => {
+  it("leaves the palette and the Tab key alone", async () => {
+    mountPalette();
+    await type("ord");
+    const event = pressTab();
+    expect(event.defaultPrevented).toBe(false);
+    expect(items("dms-assistant-ask")).toEqual([]);
+    expect(host.querySelector('[data-slot="assistantToggle"]')).toBeNull();
+  });
+});
+
+describe("command palette assistant mode", () => {
+  beforeEach(() => {
+    registerCommandPaletteAssistant(ASSISTANT);
+    mountPalette();
+  });
+
+  it("toggles between search and assistant mode with Tab", async () => {
+    const event = pressTab();
+    await nextTick();
+    expect(event.defaultPrevented).toBe(true);
+    expect(input().placeholder).toBe("Ask the demo");
+    expect(input().dataset.icon).toBe("i-sparkle");
+    expect(dialog().dataset.colorMode).toBe("false");
+    expect(items("dms-assistant-suggestions")).toEqual([
+      "Which customers churned?",
+      "Late orders",
+    ]);
+    expect(host.textContent).toContain(
+      "commandPalette.assistant.modeAssistant",
+    );
+
+    pressTab();
+    await nextTick();
+    expect(input().placeholder).toBe("");
+    expect(items("navigation")).toEqual(["Orders", "Order statuses"]);
+  });
+
+  it("lets Shift+Tab move focus as usual", () => {
+    expect(pressTab(true).defaultPrevented).toBe(false);
+  });
+
+  it("ends a non-empty search with an Ask the assistant item", async () => {
+    await type("ord");
+    expect(items("navigation")).toEqual(["Orders", "Order statuses"]);
+    expect(items("dms-assistant-ask")).toEqual([
+      "commandPalette.assistant.ask:ord",
+    ]);
+  });
+
+  it("adds no Ask item while the search is empty", async () => {
+    await type("  ");
+    expect(items("dms-assistant-ask")).toEqual([]);
+  });
+
+  it("leaves the Ask item alone when nothing matches", async () => {
+    await type("invoicez");
+    expect(items("navigation")).toEqual([]);
+    expect(items("dms-assistant-ask")).toEqual([
+      "commandPalette.assistant.ask:invoicez",
+    ]);
+  });
+
+  it("keeps Nuxt UI's empty state in search mode", async () => {
+    expect(dialog().dataset.emptySlot).toBe("false");
+    pressTab();
+    await nextTick();
+    expect(dialog().dataset.emptySlot).toBe("true");
+  });
+
+  it("answers the asked query through the module's component", async () => {
+    await type("ord");
+    clickItem("dms-assistant-ask");
+    await nextTick();
+    expect(input().value).toBe("ord");
+    expect(host.querySelector('[role="status"]')).not.toBeNull();
+    expect(host.querySelector('[data-testid="answer"]')).toBeNull();
+
+    releaseAnswer();
+    await settle();
+    expect(host.querySelector('[role="status"]')).toBeNull();
+    expect(host.querySelector('[data-testid="answer"]')?.textContent).toBe(
+      "ord",
+    );
+  });
+
+  it("submits a suggestion's prompt and lets the answer close the palette", async () => {
+    pressTab();
+    await nextTick();
+    clickItem("dms-assistant-suggestions", 1);
+    releaseAnswer();
+    await settle();
+    const answer = host.querySelector<HTMLElement>('[data-testid="answer"]');
+    expect(answer?.textContent).toBe("Which orders are late?");
+
+    answer!.click();
+    await nextTick();
+    expect(dialog().dataset.open).toBe("false");
+  });
+
+  it("sends a typed prompt from the first item and keeps the suggestions", async () => {
+    pressTab();
+    await type("Why is order 10482 pending?");
+    expect(items("dms-assistant-prompt")).toEqual([
+      "commandPalette.assistant.send:Why is order 10482 pending?",
+    ]);
+    expect(items("dms-assistant-suggestions")).toHaveLength(2);
+  });
+
+  it("drops the answer once the prompt is edited", async () => {
+    await type("ord");
+    clickItem("dms-assistant-ask");
+    releaseAnswer();
+    await settle();
+    await type("orders");
+    expect(host.querySelector('[data-testid="answer"]')).toBeNull();
+    expect(items("dms-assistant-prompt")).toEqual([
+      "commandPalette.assistant.send:orders",
+    ]);
+  });
+
+  it("states the failure when the answer cannot be computed", async () => {
+    vi.spyOn(console, "error").mockImplementation(() => undefined);
+    answerOutcome = Promise.reject(new Error("offline"));
+    await type("ord");
+    clickItem("dms-assistant-ask");
+    await settle();
+    expect(host.querySelector('[role="alert"]')?.textContent).toContain(
+      "commandPalette.assistant.failed",
+    );
+  });
+});

package/frontend-vue/tests/composed-text-blocks.test.ts

@@ -0,0 +1,205 @@
+// @vitest-environment jsdom
+/**
+ * StatGroup, KeyValueList and Banner draw a composed text wherever they draw
+ * a text — from their options or from the JSON their route answers — in the
+ * reader's language, and keep drawing plain strings as before.
+ */
+import {
+  createApp,
+  defineComponent,
+  h,
+  reactive,
+  ref,
+  type Component,
+} from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createI18n } from "vue-i18n";
+import { setRegionalPreferencesSource } from "../layers/dms-core/app/utils/regional";
+
+const i18n = createI18n({
+  legacy: false,
+  locale: "en",
+  fallbackLocale: "en",
+  missingWarn: false,
+  fallbackWarn: false,
+  messages: {
+    en: {
+      saas: {
+        stats: { mrr: "MRR", mrr_value: "{amount}", workspaces: "Workspaces" },
+        seats: "no seat | {count} seat | {count} seats",
+        retry: "Payment failed, retry {date}",
+        failed: "Payment failed",
+      },
+    },
+    fr: {
+      saas: {
+        stats: { mrr: "MRR", mrr_value: "{amount}", workspaces: "Espaces" },
+        seats: "aucun siège | {count} siège | {count} sièges",
+        retry: "Paiement refusé, nouvel essai {date}",
+        failed: "Paiement refusé",
+      },
+    },
+  },
+});
+
+let fetchedItems: unknown[] = [];
+
+vi.stubGlobal("useAuthFetch", () => ({
+  $authFetch: async () => ({ items: fetchedItems }),
+}));
+vi.stubGlobal("useDmsRoute", () => reactive({ query: {} }));
+
+vi.mock("../layers/dms-core/app/composables/watch/useWatch", () => ({
+  useWatch: () => ({ state: ref({}) }),
+}));
+vi.mock(
+  "../layers/dms-core/app/composables/components/useComponentEvent",
+  () => ({ useComponentEvent: () => ({}) }),
+);
+
+// The generic components only lay out what the block resolved: their props
+// are what is checked here.
+const propsProbe = (name: string, keys: string[]) => ({
+  default: defineComponent({
+    props: keys,
+    setup: (props) => () =>
+      h("pre", { "data-probe": name }, JSON.stringify(props)),
+  }),
+});
+vi.mock("../layers/dms-ui/app/components/stat-group/StatGroup.vue", () =>
+  propsProbe("stat-group", ["items"]),
+);
+vi.mock("../layers/dms-ui/app/components/key-value-list/KeyValueList.vue", () =>
+  propsProbe("key-value-list", ["items"]),
+);
+vi.mock("../layers/dms-ui/app/components/banner/Banner.vue", () =>
+  propsProbe("banner", ["title", "description"]),
+);
+
+const StatGroupBlock = (
+  await import("../layers/dms-ui/app/components/blocks/StatGroupBlock.vue")
+).default;
+const KeyValueListBlock = (
+  await import("../layers/dms-ui/app/components/blocks/KeyValueListBlock.vue")
+).default;
+const BannerBlock = (
+  await import("../layers/dms-ui/app/components/blocks/BannerBlock.vue")
+).default;
+
+const SETTLE_MS = 50;
+const settle = () => new Promise((resolve) => setTimeout(resolve, SETTLE_MS));
+const mounted: Array<{ unmount: () => void }> = [];
+
+function render(component: Component, props: Record<string, unknown>) {
+  const root = document.createElement("div");
+  const app = createApp(component, props);
+  app.mount(root);
+  mounted.push(app);
+  return () =>
+    JSON.parse(
+      (root.querySelector("[data-probe]")?.textContent ?? "{}").replace(
+        /[\u00a0\u202f]/g,
+        " ",
+      ),
+    );
+}
+
+const mrr = {
+  key: "$saas.stats.mrr_value",
+  params: { amount: { type: "money", value: 92200, currency: "EUR" } },
+};
+const seats = (value: number) => ({
+  key: "saas.seats",
+  params: { count: { type: "count", value } },
+});
+
+beforeEach(() => {
+  i18n.global.locale.value = "en";
+  fetchedItems = [];
+  setRegionalPreferencesSource(() => ({ timeZone: "UTC" }));
+  vi.stubGlobal("useI18n", () => ({
+    t: i18n.global.t,
+    locale: i18n.global.locale,
+  }));
+  vi.stubGlobal("useDmsCookie", () => ref<string[]>([]));
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+  setRegionalPreferencesSource(() => ({}));
+});
+
+describe("StatGroupBlock", () => {
+  it("composes the label, the value and the detail of a cell", () => {
+    const read = render(StatGroupBlock, {
+      items: [
+        { eyebrow: "$saas.stats.mrr", value: mrr, detail: seats(3) },
+        { eyebrow: "Plain", value: 1284, detail: "As written" },
+      ],
+    });
+
+    expect(read().items).toEqual([
+      { eyebrow: "MRR", value: "€922.00", detail: "3 seats" },
+      { eyebrow: "Plain", value: "1,284", detail: "As written" },
+    ]);
+  });
+
+  it("composes the cells its route answers, in the reader's language", async () => {
+    i18n.global.locale.value = "fr";
+    fetchedItems = [
+      {
+        eyebrow: { key: "saas.stats.workspaces" },
+        value: mrr,
+        detail: seats(1),
+      },
+    ];
+    const read = render(StatGroupBlock, { fetchUrl: "/api/billing-stats" });
+    await settle();
+
+    expect(read().items).toEqual([
+      { eyebrow: "Espaces", value: "922,00 €", detail: "1 siège" },
+    ]);
+  });
+});
+
+describe("KeyValueListBlock", () => {
+  it("composes labels, details and values, whatever the row's type", () => {
+    const read = render(KeyValueListBlock, {
+      card: false,
+      items: [
+        { label: { key: "saas.stats.mrr" }, value: mrr, type: "money" },
+        { label: "Seats", value: seats(0), detail: { key: "saas.failed" } },
+        { label: "Next invoice", value: 588, type: "money" },
+        { label: "Plan", value: "$saas.stats.workspaces" },
+      ],
+    });
+
+    expect(read().items).toEqual([
+      { label: "MRR", value: "€922.00", type: "money" },
+      { label: "Seats", value: "no seat", detail: "Payment failed" },
+      { label: "Next invoice", value: 588, type: "money" },
+      { label: "Plan", value: "Workspaces" },
+    ]);
+  });
+});
+
+describe("BannerBlock", () => {
+  it("composes its title and description", () => {
+    const read = render(BannerBlock, {
+      title: { key: "saas.failed" },
+      description: {
+        key: "saas.retry",
+        params: { date: { type: "date", value: "2026-10-10", format: "day" } },
+      },
+    });
+
+    expect(read()).toEqual({
+      title: "Payment failed",
+      description: "Payment failed, retry Oct 10",
+    });
+  });
+
+  it("keeps a plain title as written", () => {
+    expect(render(BannerBlock, { title: "Beta" })().title).toBe("Beta");
+  });
+});