@antelopejs/dms 0.6.2 → 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/fixtures/dashboard-search-stub.ts

@@ -0,0 +1,91 @@
+import type { CommandPaletteGroup, CommandPaletteItem } from "@nuxt/ui";
+import { defineComponent, h, type PropType } from "vue";
+
+interface PaletteInputProps {
+  onKeydown?: (event: KeyboardEvent) => void;
+}
+
+function matchingItems(
+  group: CommandPaletteGroup,
+  term: string,
+): CommandPaletteItem[] {
+  const items = group.items ?? [];
+  if (group.ignoreFilter || !term) return items;
+  return items.filter((item) =>
+    String(item.label).toLowerCase().includes(term.toLowerCase()),
+  );
+}
+
+function filterGroups(
+  groups: CommandPaletteGroup[],
+  term: string,
+): CommandPaletteGroup[] {
+  return groups
+    .map((group) => ({ ...group, items: matchingItems(group, term) }))
+    .filter((group) => group.items.length);
+}
+
+function selectEvent(): Event {
+  return new Event("select", { cancelable: true });
+}
+
+function renderItem(group: CommandPaletteGroup, item: CommandPaletteItem) {
+  return h(
+    "button",
+    {
+      "data-group": group.id,
+      onClick: () => item.onSelect?.(selectEvent()),
+    },
+    String(item.label),
+  );
+}
+
+/** Renders the props and slots `DashboardSearch` hands `UDashboardSearch`. */
+export const PaletteStub = defineComponent({
+  props: {
+    open: Boolean,
+    colorMode: { type: Boolean, default: true },
+    searchTerm: { type: String, default: "" },
+    groups: {
+      type: Array as PropType<CommandPaletteGroup[]>,
+      default: () => [],
+    },
+    input: { type: Object as PropType<PaletteInputProps>, default: () => ({}) },
+    icon: { type: String, default: undefined },
+    placeholder: { type: String, default: undefined },
+  },
+  emits: ["update:open", "update:searchTerm"],
+  setup(props, { slots, emit }) {
+    return () => {
+      const groups = filterGroups(props.groups, props.searchTerm);
+      return h(
+        "div",
+        {
+          role: "dialog",
+          "data-open": String(props.open),
+          "data-color-mode": String(props.colorMode),
+          "data-empty-slot": String(!!slots.empty),
+        },
+        [
+          h("input", {
+            value: props.searchTerm,
+            placeholder: props.placeholder,
+            "data-icon": props.icon,
+            onKeydown: props.input.onKeydown,
+            onInput: (event: Event) =>
+              emit(
+                "update:searchTerm",
+                (event.target as HTMLInputElement).value,
+              ),
+          }),
+          groups.length
+            ? groups.flatMap((group) =>
+                group.items!.map((item) => renderItem(group, item)),
+              )
+            : slots.empty?.(),
+          slots.footer?.(),
+        ],
+      );
+    };
+  },
+});

package/frontend-vue/tests/forgot-validation-resend.test.ts

@@ -0,0 +1,234 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+  type App,
+} from "vue";
+
+// The password-reset code page: a new code starts clean, without the refusal
+// of the previous one.
+
+vi.mock("#dms-ui/app/build/components/form/OtpInput.vue", async () => {
+  const { defineComponent: define, h: render } = await import("vue");
+  return {
+    default: define({
+      props: { modelValue: Array, error: String },
+      emits: ["update:modelValue"],
+      setup: (props, { emit, expose }) => {
+        expose({ focus: () => undefined });
+        return () =>
+          render("div", [
+            render("input", {
+              "data-testid": "code",
+              onInput: (event: Event) =>
+                emit(
+                  "update:modelValue",
+                  (event.target as HTMLInputElement).value.split(""),
+                ),
+            }),
+            render("p", { "data-testid": "code-error" }, props.error ?? ""),
+          ]);
+      },
+    }),
+  };
+});
+vi.mock(
+  "../layers/dms-layout/app/build/components/layout/StageCard.vue",
+  async () => {
+    const { defineComponent: define, h: render } = await import("vue");
+    return {
+      default: define({
+        setup:
+          (_, { slots }) =>
+          () =>
+            render("section", slots.default?.()),
+      }),
+    };
+  },
+);
+vi.mock(
+  "../layers/dms-auth/app/build/components/AuthBackLink.vue",
+  async () => {
+    const { defineComponent: define, h: render } = await import("vue");
+    return { default: define({ setup: () => () => render("span") }) };
+  },
+);
+
+const { default: ForgotValidationPage } = await import(
+  "../layers/dms-auth/app/custom-pages/auth/forgot-validation.vue"
+);
+
+const WRONG_CODE = "ABC123";
+const CODE_REFUSAL = {
+  statusCode: 400,
+  data: "error.invalid_or_expired_token",
+};
+const RATE_LIMITED = { statusCode: 429, data: "error.rate_limited" };
+
+let app: App;
+let host: HTMLDivElement;
+const authFetch = vi.fn();
+const toastAdd = vi.fn();
+
+const Form = defineComponent({
+  props: { state: { type: Object, required: true } },
+  emits: ["submit"],
+  setup: (props, { emit, expose, slots }) => {
+    const submit = () => emit("submit", { data: props.state });
+    expose({ submit });
+    return () =>
+      h(
+        "form",
+        {
+          onSubmit: (event: Event) => {
+            event.preventDefault();
+            submit();
+          },
+        },
+        slots.default?.(),
+      );
+  },
+});
+
+const Alert = defineComponent({
+  props: { title: String, description: String },
+  setup: (props) => () =>
+    h("div", { "data-testid": "form-error" }, props.title),
+});
+
+const Passthrough = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("span", slots.default?.()),
+});
+
+function installRuntime() {
+  Object.entries({ computed, ref, reactive, watch, onMounted }).forEach(
+    ([key, value]) => vi.stubGlobal(key, value),
+  );
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal("useTranslation", () => ({
+    processApiMessage: (message: string) => message,
+  }));
+  vi.stubGlobal("useToast", () => ({ add: toastAdd }));
+  vi.stubGlobal("useDmsApp", () => ({
+    runWithContext: (fn: () => unknown) => fn(),
+  }));
+  vi.stubGlobal("useDmsRoute", () => ({
+    query: { email: "member@local.test" },
+  }));
+  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: authFetch }));
+  vi.stubGlobal("navigateDms", vi.fn());
+  // The resend link shows at once: the wait is not under test.
+  vi.stubGlobal("useCooldown", () => ({
+    cooldown: ref(0),
+    startCooldown: vi.fn(),
+  }));
+}
+
+function mountPage() {
+  app = createApp(ForgotValidationPage);
+  app.config.globalProperties.$t = (key: string) => key;
+  app.component("UForm", Form);
+  app.component("UAlert", Alert);
+  app.component("UButton", Passthrough);
+  app.component("i18n-t", Passthrough);
+  app.mount(host);
+}
+
+async function settle() {
+  for (let tick = 0; tick < 5; tick++) {
+    await Promise.resolve();
+    await nextTick();
+  }
+}
+
+const codeError = () =>
+  host.querySelector('[data-testid="code-error"]')?.textContent ?? "";
+const formError = () => host.querySelector('[data-testid="form-error"]');
+
+function resendButton(): HTMLButtonElement {
+  const button = [...host.querySelectorAll("button")].find(
+    (entry) => entry.textContent?.trim() === "page.auth.code.resend",
+  );
+  if (!button) throw new Error("No resend link");
+  return button;
+}
+
+async function typeCode(code: string) {
+  const input = host.querySelector<HTMLInputElement>('[data-testid="code"]')!;
+  input.value = code;
+  input.dispatchEvent(new Event("input"));
+  await settle();
+}
+
+async function resend() {
+  resendButton().click();
+  await settle();
+}
+
+beforeEach(() => {
+  authFetch.mockReset();
+  toastAdd.mockReset();
+  installRuntime();
+  host = document.createElement("div");
+  document.body.append(host);
+});
+afterEach(() => {
+  app?.unmount();
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+it("drops the refusal of the previous code once a new one is sent", async () => {
+  authFetch.mockRejectedValueOnce(CODE_REFUSAL);
+  mountPage();
+  await typeCode(WRONG_CODE);
+  expect(codeError()).not.toBe("");
+
+  authFetch.mockResolvedValueOnce(undefined);
+  await resend();
+
+  expect(authFetch).toHaveBeenLastCalledWith("/api/auth/forgot-password", {
+    method: "POST",
+    body: { email: "member@local.test" },
+  });
+  expect(toastAdd).toHaveBeenCalledWith(
+    expect.objectContaining({ color: "success" }),
+  );
+  expect(codeError()).toBe("");
+});
+
+it("drops a refused resend's alert once a new code is sent", async () => {
+  mountPage();
+  authFetch.mockRejectedValueOnce(RATE_LIMITED);
+  await resend();
+  expect(formError()).not.toBe(null);
+
+  authFetch.mockResolvedValueOnce(undefined);
+  await resend();
+
+  expect(formError()).toBe(null);
+});
+
+it("keeps the refusal of the code when the new one could not be sent", async () => {
+  authFetch.mockRejectedValueOnce(CODE_REFUSAL);
+  mountPage();
+  await typeCode(WRONG_CODE);
+  const refusal = codeError();
+
+  authFetch.mockRejectedValueOnce(RATE_LIMITED);
+  await resend();
+
+  expect(codeError()).toBe(refusal);
+  expect(formError()).not.toBe(null);
+});