@antelopejs/dms 0.9.2 → 0.9.4

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

@@ -1,324 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import {
-  computed,
-  createApp,
-  defineComponent,
-  h,
-  nextTick,
-  ref,
-  type App,
-} from "vue";
-import ConfirmModal from "../layers/dms-ui/app/components/confirm/ConfirmModal.vue";
-import {
-  ACTION_ERROR_FORBIDDEN_KEY,
-  ACTION_ERROR_GENERIC_KEY,
-  ACTION_ERROR_NETWORK_KEY,
-  resolveActionError,
-} from "../layers/dms-ui/app/build/composables/confirm/actionError";
-import { ConfirmActionError } from "../layers/dms-ui/app/composables/confirm/types";
-
-// The modal's title and description need a reka DialogRoot: plain text here.
-vi.mock("reka-ui", async () => {
-  const { defineComponent: define, h: render } = await import("vue");
-  const Text = define({
-    setup:
-      (_, { slots }) =>
-      () =>
-        render("div", slots.default?.()),
-  });
-  return { DialogTitle: Text, DialogDescription: Text };
-});
-
-/** An ofetch `FetchError` as a refused (or unreachable) request throws it. */
-function fetchError(status: number | undefined, data?: unknown) {
-  return Object.assign(
-    new Error(`[DELETE] "/api/task/delete": ${status ?? "<no response>"}`),
-    { name: "FetchError", statusCode: status, data },
-  );
-}
-
-const TRANSLATIONS: Record<string, string> = {
-  "error.not_found": "Not found",
-  "page.settings.invites.error.expired": "This invitation has expired",
-};
-// vue-i18n echoes the key back when it has no translation.
-const translate = (key: string) => TRANSLATIONS[key] ?? key;
-
-describe("resolveActionError", () => {
-  it("translates the server's i18n key, bare or `$`-marked", () => {
-    expect(
-      resolveActionError(fetchError(404, "error.not_found"), translate),
-    ).toBe("Not found");
-    expect(
-      resolveActionError(
-        fetchError(410, { message: "$page.settings.invites.error.expired" }),
-        translate,
-      ),
-    ).toBe("This invitation has expired");
-  });
-
-  it("shows the plain text of a 4xx as it came", () => {
-    expect(
-      resolveActionError(
-        fetchError(400, "Missing mandatory fields: due_date"),
-        translate,
-      ),
-    ).toBe("Missing mandatory fields: due_date");
-  });
-
-  it("words a refused permission for users, not the server's developer text", () => {
-    expect(
-      resolveActionError(
-        fetchError(403, "Forbidden: missing permission settings.members.edit"),
-        translate,
-      ),
-    ).toBe(ACTION_ERROR_FORBIDDEN_KEY);
-    expect(resolveActionError(fetchError(401), translate)).toBe(
-      ACTION_ERROR_FORBIDDEN_KEY,
-    );
-  });
-
-  it("falls back on a generic message for a crash, JSON, a stack or an untranslated key", () => {
-    for (const error of [
-      fetchError(500, "Archive field not configured."),
-      fetchError(422, '{"issues":[{"path":["name"]}]}'),
-      fetchError(400, "TypeError: x is undefined\n    at run (a.js:1:2)"),
-      fetchError(404, "error.no_such_key"),
-      fetchError(400, { detail: "no message field" }),
-      { unexpected: true },
-    ]) {
-      expect(resolveActionError(error, translate)).toBe(
-        ACTION_ERROR_GENERIC_KEY,
-      );
-    }
-  });
-
-  it("tells a request that never reached the server apart", () => {
-    expect(resolveActionError(fetchError(undefined), translate)).toBe(
-      ACTION_ERROR_NETWORK_KEY,
-    );
-    expect(
-      resolveActionError(new TypeError("Failed to fetch"), translate),
-    ).toBe(ACTION_ERROR_NETWORK_KEY);
-  });
-
-  it("keeps a message a caller already worded for users", () => {
-    expect(
-      resolveActionError(new Error("Pick another role first."), translate),
-    ).toBe("Pick another role first.");
-  });
-});
-
-describe("ConfirmModal failures", () => {
-  let app: App | undefined;
-  let host: HTMLDivElement;
-  const closed = vi.fn();
-
-  const Slots = defineComponent({
-    setup:
-      (_, { slots }) =>
-      () =>
-        h("div", [slots.header?.(), slots.body?.(), slots.footer?.()]),
-  });
-
-  const Button = defineComponent({
-    props: { label: String, disabled: Boolean, loading: Boolean },
-    emits: ["click"],
-    setup:
-      (props, { emit }) =>
-      () =>
-        h(
-          "button",
-          {
-            disabled: props.disabled,
-            "data-loading": props.loading || undefined,
-            onClick: () => emit("click"),
-          },
-          props.label,
-        ),
-  });
-
-  const Alert = defineComponent({
-    props: { title: String, description: String, color: String },
-    setup: (props) => () =>
-      h("div", { "data-alert": props.color }, [
-        h("strong", props.title),
-        props.description ? h("p", props.description) : null,
-      ]),
-  });
-
-  const Empty = defineComponent({ setup: () => () => null });
-
-  async function flush(): Promise<void> {
-    for (let tick = 0; tick < 6; tick++) await nextTick();
-  }
-
-  function mount(props: Record<string, unknown>): void {
-    app = createApp(ConfirmModal, { onClose: closed, ...props });
-    app.config.globalProperties.$t = (key: string) => key;
-    app.component("UModal", Slots);
-    app.component("UButton", Button);
-    app.component("UAlert", Alert);
-    for (const name of ["UIcon", "UKbd", "UFormField", "UInput", "I18nT"]) {
-      app.component(name, Empty);
-    }
-    app.component("DmsIconWell", Empty);
-    app.mount(host);
-  }
-
-  const button = (label: string) =>
-    [...host.querySelectorAll("button")].find(
-      (candidate) => candidate.textContent === label,
-    );
-  const alert = () => host.querySelector<HTMLElement>("[data-alert]");
-
-  beforeEach(() => {
-    vi.stubGlobal("ref", ref);
-    vi.stubGlobal("computed", computed);
-    vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
-    vi.stubGlobal("useTranslation", () => ({
-      processApiMessage: (message: string) => message,
-    }));
-    vi.stubGlobal("resolveDmsComponent", () => undefined);
-    host = document.createElement("div");
-    document.body.append(host);
-    closed.mockReset();
-  });
-
-  afterEach(() => {
-    app?.unmount();
-    app = undefined;
-    host.remove();
-    vi.unstubAllGlobals();
-  });
-
-  it("stays open on a refusal, shows why, and lets the user retry", async () => {
-    const onConfirm = vi
-      .fn()
-      .mockRejectedValueOnce(
-        fetchError(403, "Forbidden: missing permission tasks.delete"),
-      )
-      .mockResolvedValueOnce(undefined);
-    mount({
-      title: "Delete?",
-      description: "Gone",
-      confirmLabel: "Delete",
-      onConfirm,
-    });
-    await flush();
-
-    button("Delete")!.click();
-    await flush();
-    expect(closed).not.toHaveBeenCalled();
-    expect(alert()?.dataset.alert).toBe("error");
-    expect(alert()?.textContent).toBe(ACTION_ERROR_FORBIDDEN_KEY);
-    // Never the raw ofetch line.
-    expect(host.textContent).not.toContain("[DELETE]");
-    // The confirm button is ready again: retry, or cancel.
-    expect(button("Delete")!.dataset.loading).toBeUndefined();
-    expect(button("Delete")!.disabled).toBe(false);
-    expect(button("dms.confirm.cancel")!.disabled).toBe(false);
-
-    button("Delete")!.click();
-    await flush();
-    expect(onConfirm).toHaveBeenCalledTimes(2);
-    expect(closed).toHaveBeenCalledWith(true);
-  });
-
-  it("clears the error when the user retries", async () => {
-    let settle: (value?: unknown) => void = () => undefined;
-    const onConfirm = vi
-      .fn()
-      .mockRejectedValueOnce(fetchError(undefined))
-      .mockImplementationOnce(
-        () => new Promise((resolve) => (settle = resolve)),
-      );
-    mount({
-      title: "Archive?",
-      description: "",
-      confirmLabel: "Archive",
-      onConfirm,
-    });
-    await flush();
-
-    button("Archive")!.click();
-    await flush();
-    expect(alert()?.textContent).toBe(ACTION_ERROR_NETWORK_KEY);
-
-    button("Archive")!.click();
-    await flush();
-    expect(alert()).toBeNull();
-    expect(button("Archive")!.dataset.loading).toBe("true");
-    settle();
-    await flush();
-    expect(closed).toHaveBeenCalledWith(true);
-  });
-
-  it("cancelling after a failure resolves false", async () => {
-    const onConfirm = vi.fn().mockRejectedValue(fetchError(500));
-    mount({
-      title: "Delete?",
-      description: "",
-      confirmLabel: "Delete",
-      onConfirm,
-    });
-    await flush();
-    button("Delete")!.click();
-    await flush();
-    button("dms.confirm.cancel")!.click();
-    expect(closed).toHaveBeenCalledWith(false);
-  });
-
-  it("shows a message already worded by the action, with its reason", async () => {
-    const onConfirm = vi.fn().mockRejectedValue(
-      new ConfirmActionError({
-        title: "These 2 items couldn’t be deleted.",
-        description: "Their rules don’t allow this action.",
-      }),
-    );
-    mount({
-      title: "Delete?",
-      description: "",
-      confirmLabel: "Delete",
-      onConfirm,
-    });
-    await flush();
-    button("Delete")!.click();
-    await flush();
-    expect(alert()?.querySelector("strong")?.textContent).toBe(
-      "These 2 items couldn’t be deleted.",
-    );
-    expect(alert()?.querySelector("p")?.textContent).toBe(
-      "Their rules don’t allow this action.",
-    );
-  });
-
-  it("sums up a partial outcome, then only acknowledges it", async () => {
-    const onConfirm = vi.fn().mockResolvedValue({
-      partial: {
-        title: "2 of 5 items couldn’t be archived.",
-        description: "Their rules don’t allow this action.",
-      },
-    });
-    mount({
-      title: "Archive?",
-      description: "",
-      confirmLabel: "Archive",
-      onConfirm,
-    });
-    await flush();
-    button("Archive")!.click();
-    await flush();
-
-    expect(closed).not.toHaveBeenCalled();
-    expect(alert()?.dataset.alert).toBe("warning");
-    expect(alert()?.querySelector("strong")?.textContent).toBe(
-      "2 of 5 items couldn’t be archived.",
-    );
-    // What went through is done: nothing left to confirm.
-    expect(button("Archive")).toBeUndefined();
-    button("dms.confirm.close")!.click();
-    expect(closed).toHaveBeenCalledWith(true);
-  });
-});

package/frontend-vue/tests/confirm-dialog-fields.test.ts

@@ -1,283 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import {
-  type App,
-  computed,
-  createApp,
-  defineComponent,
-  h,
-  nextTick,
-  ref,
-} from "vue";
-import { createI18n } from "vue-i18n";
-import ConfirmModal from "../layers/dms-ui/app/components/confirm/ConfirmModal.vue";
-import {
-  resolveConfirmDialog,
-  resolveConfirmText,
-} from "../layers/dms-ui/app/build/composables/confirm/confirmDialogTexts";
-import type { ConfirmDialogField } from "../layers/dms-core/app/types/confirm-dialog";
-
-vi.mock("reka-ui", async () => {
-  const { defineComponent: define, h: render } = await import("vue");
-  const Text = define({
-    setup:
-      (_, { slots }) =>
-      () =>
-        render("div", slots.default?.()),
-  });
-  return { DialogTitle: Text, DialogDescription: Text };
-});
-
-const i18n = createI18n({
-  legacy: false,
-  locale: "en",
-  messages: {
-    en: {
-      roles: {
-        delete_title: "Delete {name}?",
-        in_use: "{count} member holds it | {count} members hold it",
-        move_to: "Move them to",
-      },
-    },
-  },
-});
-const t = i18n.global.t as (
-  key: string,
-  params: Record<string, unknown>,
-  plural?: number,
-) => string;
-
-describe("confirmation dialog texts", () => {
-  it("translates keys with the dialog's params, pluralized on its count", () => {
-    expect(resolveConfirmText("$roles.in_use", { count: 1 }, t)).toBe(
-      "1 member holds it",
-    );
-    expect(resolveConfirmText("$roles.in_use", { count: 3 }, t)).toBe(
-      "3 members hold it",
-    );
-    expect(resolveConfirmText("Remove it?", { count: 3 }, t)).toBe(
-      "Remove it?",
-    );
-  });
-
-  it("interpolates with the row's fields and the dialog's params, fields labels included", () => {
-    const options = resolveConfirmDialog(
-      {
-        title: "$roles.delete_title",
-        description: "$roles.in_use",
-        params: { count: 2 },
-        fields: [
-          {
-            id: "reassignTo",
-            label: "$roles.move_to",
-            type: "select",
-            component: {
-              componentName: "dms-select",
-              options: {
-                placeholder: "$roles.move_to",
-                items: [{ value: "r2", label: "Readers" }],
-              },
-            },
-          },
-        ],
-      },
-      { name: "Editors" },
-      t,
-    );
-    expect(options.title).toBe("Delete Editors?");
-    expect(options.description).toBe("2 members hold it");
-    expect(options.fields?.[0]?.label).toBe("Move them to");
-    // The input's placeholder and item labels read as in a form.
-    expect(options.fields?.[0]?.component.options).toMatchObject({
-      placeholder: "Move them to",
-      items: [{ value: "r2", label: "Readers" }],
-    });
-  });
-
-  it("fills a literal text's placeholders like a key's, leaving unknown ones as written", () => {
-    const options = resolveConfirmDialog(
-      {
-        title: "Remove {name}?",
-        description: "{count} rows go with it, {missing} stays.",
-        params: { count: 2 },
-        confirmLabel: "Remove {name}",
-      },
-      { name: "Editors", nested: { name: "x" } },
-      t,
-    );
-    expect(options.title).toBe("Remove Editors?");
-    expect(options.description).toBe("2 rows go with it, {missing} stays.");
-    expect(options.confirmLabel).toBe("Remove Editors");
-    expect(
-      resolveConfirmText("{nested} {constructor}", { nested: {} }, t),
-    ).toBe("{nested} {constructor}");
-  });
-});
-
-describe("ConfirmModal fields", () => {
-  let app: App | undefined;
-  let host: HTMLDivElement;
-  const closed = vi.fn();
-
-  const Slots = defineComponent({
-    setup:
-      (_, { slots }) =>
-      () =>
-        h("div", [slots.header?.(), slots.body?.(), slots.footer?.()]),
-  });
-  const Button = defineComponent({
-    props: { label: String },
-    emits: ["click"],
-    setup:
-      (props, { emit }) =>
-      () =>
-        h("button", { onClick: () => emit("click") }, props.label),
-  });
-  // A form field: its label, its input, its error under it.
-  const FormField = defineComponent({
-    props: { label: String, error: String },
-    setup:
-      (props, { slots }) =>
-      () =>
-        h("label", [
-          h("span", props.label),
-          slots.default?.(),
-          props.error ? h("em", props.error) : null,
-        ]),
-  });
-  const Input = defineComponent({
-    props: { modelValue: String },
-    emits: ["update:modelValue"],
-    setup:
-      (props, { emit }) =>
-      () =>
-        h("input", {
-          value: props.modelValue ?? "",
-          onInput: (event: Event) =>
-            emit("update:modelValue", (event.target as HTMLInputElement).value),
-        }),
-  });
-  const Empty = defineComponent({ setup: () => () => null });
-
-  const reassign: ConfirmDialogField = {
-    id: "reassignTo",
-    label: "Move them to",
-    type: "select",
-    required: true,
-    component: { componentName: "dms-select" },
-  };
-
-  async function flush(): Promise<void> {
-    for (let tick = 0; tick < 6; tick++) await nextTick();
-  }
-
-  function mount(props: Record<string, unknown>): void {
-    app = createApp(ConfirmModal, { onClose: closed, ...props });
-    app.config.globalProperties.$t = (key: string) => key;
-    app.component("UModal", Slots);
-    app.component("UButton", Button);
-    app.component("UFormField", FormField);
-    for (const name of ["UIcon", "UKbd", "UInput", "I18nT", "UAlert"]) {
-      app.component(name, Empty);
-    }
-    app.component("DmsIconWell", Empty);
-    app.mount(host);
-  }
-
-  const confirmButton = () =>
-    [...host.querySelectorAll("button")].find(
-      (button) => button.textContent === "dms.confirm.confirm",
-    )!;
-  const typeIn = async (value: string) => {
-    const input = host.querySelector("input")!;
-    input.value = value;
-    input.dispatchEvent(new Event("input"));
-    await flush();
-  };
-
-  beforeEach(() => {
-    vi.stubGlobal("ref", ref);
-    vi.stubGlobal("computed", computed);
-    vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
-    vi.stubGlobal("useTranslation", () => ({
-      processApiMessage: (message: string) => `t(${message})`,
-    }));
-    vi.stubGlobal("resolveDmsComponent", (name: string) =>
-      name === "dms-select" ? Input : undefined,
-    );
-    host = document.createElement("div");
-    document.body.append(host);
-    closed.mockReset();
-  });
-
-  afterEach(() => {
-    app?.unmount();
-    app = undefined;
-    host.remove();
-    vi.unstubAllGlobals();
-  });
-
-  it("draws the fields and confirms with their values", async () => {
-    const onConfirm = vi.fn().mockResolvedValue(undefined);
-    mount({ title: "Delete?", fields: [reassign], onConfirm });
-    await flush();
-    expect(host.textContent).toContain("Move them to");
-
-    await typeIn("role-2");
-    confirmButton().click();
-    await flush();
-
-    expect(onConfirm).toHaveBeenCalledWith({ reassignTo: "role-2" });
-    expect(closed).toHaveBeenCalledWith(true);
-  });
-
-  it("says what the required mark means under the fields", async () => {
-    mount({ title: "Delete?", fields: [reassign] });
-    await flush();
-    expect(host.textContent).toContain("dms.form.required_legend");
-  });
-
-  it("draws no legend when no field is required", async () => {
-    mount({ title: "Delete?", fields: [{ ...reassign, required: false }] });
-    await flush();
-    expect(host.textContent).not.toContain("dms.form.required_legend");
-  });
-
-  it("flags a required field left empty instead of confirming", async () => {
-    const onConfirm = vi.fn();
-    mount({ title: "Delete?", fields: [reassign], onConfirm });
-    await flush();
-
-    confirmButton().click();
-    await flush();
-
-    expect(onConfirm).not.toHaveBeenCalled();
-    expect(host.querySelector("em")?.textContent).toBe(
-      "dms.field_errors.required",
-    );
-  });
-
-  it("shows the server's field error under its field, the dialog open", async () => {
-    const onConfirm = vi.fn().mockRejectedValue(
-      Object.assign(new Error("[POST] 409"), {
-        name: "FetchError",
-        statusCode: 409,
-        data: {
-          field: "reassignTo",
-          message: "$page.settings.roles.error.invalid_reassign",
-        },
-      }),
-    );
-    mount({ title: "Delete?", fields: [reassign], onConfirm });
-    await flush();
-
-    await typeIn("role-1");
-    confirmButton().click();
-    await flush();
-
-    expect(host.querySelector("em")?.textContent).toBe(
-      "t($page.settings.roles.error.invalid_reassign)",
-    );
-    expect(closed).not.toHaveBeenCalled();
-  });
-});

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

@@ -1,101 +0,0 @@
-// @vitest-environment jsdom
-/**
- * `useConfirmFrom().confirmFrom(url)` opens the dialog a route words, as a
- * declarative action's `confirm: { from }` does, for code of a module's own
- * (a custom page, a block's button).
- */
-import { createApp, defineComponent, h, type App } from "vue";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { interpolateUrl } from "../layers/dms-core/app/utils/url-interpolation";
-import { useConfirmFrom } from "../layers/dms-ui/app/composables/confirm/useConfirmFrom";
-import { isConfirmTextMatch } from "../layers/dms-ui/app/build/composables/confirm/confirmTextMatch";
-
-const authFetch = vi.fn();
-const confirm = vi.fn(async () => true);
-const addToast = vi.fn();
-let app: App | undefined;
-
-function mountConfirmFrom() {
-  let api: ReturnType<typeof useConfirmFrom> | undefined;
-  app = createApp(
-    defineComponent({
-      setup() {
-        api = useConfirmFrom();
-        return () => h("div");
-      },
-    }),
-  );
-  app.mount(document.createElement("div"));
-  return api!;
-}
-
-beforeEach(() => {
-  authFetch.mockReset();
-  confirm.mockClear();
-  addToast.mockClear();
-  const fetch = Object.assign(authFetch, { raw: vi.fn() });
-  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: fetch }));
-  vi.stubGlobal("useConfirm", () => ({ confirm }));
-  vi.stubGlobal("useToast", () => ({ add: addToast }));
-  vi.stubGlobal("useI18n", () => ({
-    t: (key: string, params?: Record<string, unknown>) =>
-      params?.name ? `${key}(${String(params.name)})` : key,
-  }));
-  vi.stubGlobal("interpolateUrl", interpolateUrl);
-  vi.stubGlobal("Color", { error: "error" });
-});
-
-afterEach(() => {
-  app?.unmount();
-  app = undefined;
-  vi.unstubAllGlobals();
-});
-
-describe("confirmFrom", () => {
-  it("reads the dialog from the URL filled with the params and shows it", async () => {
-    authFetch.mockResolvedValue({
-      title: "$campaigns.delete_title",
-      color: "error",
-    });
-    const onConfirm = vi.fn(async () => undefined);
-    const confirmed = await mountConfirmFrom().confirmFrom(
-      "/api/campaigns/{{row.id}}/delete-confirm",
-      {
-        params: { id: "c1", name: "Spring" },
-        fallback: { icon: "i-ph-trash" },
-        onConfirm,
-      },
-    );
-    expect(confirmed).toBe(true);
-    expect(authFetch).toHaveBeenCalledWith("/api/campaigns/c1/delete-confirm");
-    expect(confirm).toHaveBeenCalledWith(
-      expect.objectContaining({
-        title: "campaigns.delete_title(Spring)",
-        color: "error",
-        icon: "i-ph-trash",
-        onConfirm,
-      }),
-    );
-  });
-
-  it("never resolves true for a blocked dialog", async () => {
-    authFetch.mockResolvedValue({ title: "Cannot delete", blocked: true });
-    expect(await mountConfirmFrom().confirmFrom("/api/x")).toBe(false);
-  });
-
-  it("toasts a failed read and resolves false", async () => {
-    authFetch.mockRejectedValue(new Error("down"));
-    expect(await mountConfirmFrom().confirmFrom("/api/x")).toBe(false);
-    expect(confirm).not.toHaveBeenCalled();
-    expect(addToast).toHaveBeenCalledOnce();
-  });
-});
-
-describe("isConfirmTextMatch", () => {
-  it("compares the trimmed text, ignoring case only when asked", () => {
-    expect(isConfirmTextMatch(" ACME ", "ACME")).toBe(true);
-    expect(isConfirmTextMatch("acme", "ACME")).toBe(false);
-    expect(isConfirmTextMatch("acme", "ACME", true)).toBe(true);
-    expect(isConfirmTextMatch("acmé", "ACME", true)).toBe(false);
-  });
-});