@antelopejs/dms 0.9.1 → 0.9.3

package/frontend-vue/tests/form-reset.test.ts

@@ -1,66 +0,0 @@
-import { describe, expect, it } from "vitest";
-import {
-  computeResetState,
-  snapshotFormState,
-} from "../layers/dms-ui/app/composables/form/useForm";
-
-describe("computeResetState", () => {
-  it("restores every field to its initial value", () => {
-    const state = { title: "edited", count: 5 };
-    const initialValues = { title: "original", count: 1 };
-
-    expect(computeResetState(state, initialValues)).toEqual({
-      title: "original",
-      count: 1,
-    });
-  });
-
-  it("skips internal watch state keys instead of throwing", () => {
-    const state = {
-      disabledFields: new Set<string>(),
-      hiddenFields: new Set<string>(),
-      title: "edited",
-    };
-    const initialValues = { title: "original" };
-
-    expect(computeResetState(state, initialValues)).toEqual({
-      title: "original",
-    });
-  });
-
-  it("clears fields that have no initial value", () => {
-    const state = { title: "typed into a blank form" };
-
-    expect(computeResetState(state, {})).toEqual({ title: undefined });
-  });
-
-  it("returns deep clones detached from the initial values", () => {
-    const initialValues = { tags: ["a", "b"] };
-    const result = computeResetState({ tags: ["c"] }, initialValues);
-
-    expect(result.tags).toEqual(["a", "b"]);
-    expect(result.tags).not.toBe(initialValues.tags);
-  });
-});
-
-describe("snapshotFormState", () => {
-  it("captures current values without the internal watch keys", () => {
-    const state = {
-      disabledFields: new Set<string>(["a"]),
-      hiddenFields: new Set<string>(),
-      title: "saved",
-    };
-
-    expect(snapshotFormState(state)).toEqual({ title: "saved" });
-  });
-
-  it("detaches the snapshot from mutable state values", () => {
-    const localized = { fr: "Bonjour", en: "Hello" };
-    const snapshot = snapshotFormState({ title: localized });
-
-    localized.fr = "Salut";
-
-    expect(snapshot.title).toEqual({ fr: "Bonjour", en: "Hello" });
-    expect(snapshot.title).not.toBe(localized);
-  });
-});

package/frontend-vue/tests/form-saved-before-success.test.ts

@@ -1,110 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { computed, effectScope, ref, watch, type EffectScope } from "vue";
-import { HttpMethod } from "../layers/dms-core/app/types/http";
-import { useForm } from "../layers/dms-ui/app/composables/form/useForm";
-import { useEventedAction } from "../layers/dms-core/app/composables/useEventedAction";
-import { FormEvents } from "../layers/dms-ui/app/composables/form/types/events";
-
-const authFetch = vi.fn();
-const sendComponentEvent = vi.fn();
-let scope: EffectScope;
-
-const FIELDS = [
-  { id: "roles", label: "Roles", component: { componentName: "DmsInputText" } },
-];
-
-function setupForm(onSaved: () => void) {
-  return scope.run(() =>
-    useForm(
-      {
-        componentId: "form-1",
-        pageId: "page-1",
-        fields: FIELDS,
-        fetchUrl: "/api/invites/get?id=invite-1",
-        submitUrl: "/api/invites/edit?id=invite-1",
-      } as never,
-      { onSaved },
-    ),
-  )!;
-}
-
-beforeEach(() => {
-  scope = effectScope();
-  authFetch.mockResolvedValue({ success: true });
-  vi.stubGlobal("computed", computed);
-  vi.stubGlobal("ref", ref);
-  vi.stubGlobal("watch", watch);
-  vi.stubGlobal("HttpMethod", HttpMethod);
-  vi.stubGlobal("isString", (value: unknown) => typeof value === "string");
-  vi.stubGlobal("Color", { error: "error", success: "success", info: "info" });
-  vi.stubGlobal("CONTENT_LANGUAGE_HEADER", "Content-Language");
-  vi.stubGlobal("useToast", () => ({ add: vi.fn() }));
-  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: authFetch }));
-  vi.stubGlobal("useDataTypes", () => ({ getDataType: () => undefined }));
-  vi.stubGlobal("useTranslation", () => ({
-    processI18n: (key: string) => key,
-    processApiMessage: (message: string) => message,
-  }));
-  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
-  vi.stubGlobal("useDmsRoute", () => ({ query: {} }));
-  vi.stubGlobal("useComponentEvent", () => ({ sendComponentEvent }));
-  // The real one: it sends the submit events the watch rules react to.
-  vi.stubGlobal("useEventedAction", useEventedAction);
-  vi.stubGlobal(
-    "useWatch",
-    (_actions: unknown, _id: unknown, initial: Record<string, unknown>) => ({
-      isLoading: ref(false),
-      state: ref({ ...initial }),
-    }),
-  );
-  vi.stubGlobal("navigateDms", vi.fn());
-});
-
-afterEach(() => {
-  scope.stop();
-  vi.unstubAllGlobals();
-  vi.resetAllMocks();
-});
-
-describe("DMS form announcing a successful submit", () => {
-  // A form page goes back to its list on the success event: announced while
-  // the form still held its changes, the leave guard asked to discard them
-  // although they were saved, and the page stayed open behind its dialog.
-  it("holds nothing unsaved once the success event goes out", async () => {
-    const steps: string[] = [];
-    const form = setupForm(() => steps.push("saved"));
-    let savedValues: unknown;
-    sendComponentEvent.mockImplementation((event: string) => {
-      if (event !== FormEvents.SUBMIT_SUCCESS) return;
-      steps.push("success");
-      savedValues = { ...form.initialValues.value };
-    });
-    form.initialValues.value = { roles: ["auditor"] };
-    const edited = { roles: ["auditor", "finance"] };
-    Object.assign(form.state.value, edited);
-
-    await form.onSubmit({ data: edited } as never);
-
-    expect(steps).toEqual(["saved", "success"]);
-    expect(savedValues).toEqual(edited);
-    expect(form.submitSucceeded.value).toBe(true);
-  });
-
-  it("announces no success, and saves nothing, when the submit is refused", async () => {
-    authFetch.mockRejectedValue({ statusCode: 400, data: "refused" });
-    const onSaved = vi.fn();
-    const form = setupForm(onSaved);
-    form.initialValues.value = { roles: ["auditor"] };
-    Object.assign(form.state.value, { roles: [] });
-
-    await form.onSubmit({ data: { roles: [] } } as never);
-
-    expect(onSaved).not.toHaveBeenCalled();
-    expect(sendComponentEvent).not.toHaveBeenCalledWith(
-      FormEvents.SUBMIT_SUCCESS,
-      expect.anything(),
-      expect.anything(),
-    );
-    expect(form.initialValues.value).toEqual({ roles: ["auditor"] });
-  });
-});

package/frontend-vue/tests/form-section-nav-groups.test.ts

@@ -1,177 +0,0 @@
-// @vitest-environment jsdom
-/**
- * A long sectioned form groups its navigation under headings: the sections
- * naming the same `navGroup` one after the other share one, in the side list
- * and in the row of chips alike. Without a group, the chips stay one row.
- */
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { type App, createApp, defineComponent, h, nextTick } from "vue";
-import {
-  groupSectionsForNav,
-  layoutSections,
-} from "../layers/dms-ui/app/build/composables/form/formSections";
-import FormSectionNav from "../layers/dms-ui/app/build/components/form/FormSectionNav.vue";
-
-const field = (id: string) => ({
-  id,
-  component: { componentName: "dms-input-text" },
-});
-
-const SECTIONS = [
-  { id: "plan", label: "Plan", fieldIds: ["plan"] },
-  {
-    id: "dunning",
-    label: "Dunning",
-    navGroup: "$billing",
-    fieldIds: ["dunning"],
-  },
-  { id: "tax", label: "Tax", navGroup: "$billing", fieldIds: ["tax"] },
-  { id: "terms", label: "Terms", navGroup: "Legal", fieldIds: ["terms"] },
-];
-
-const layout = layoutSections(
-  ["plan", "dunning", "tax", "terms"].map(field),
-  SECTIONS,
-);
-
-let app: App | undefined;
-let host: HTMLDivElement;
-
-const plainLayout = layoutSections(
-  [field("a"), field("b")],
-  [
-    { id: "a", label: "A", fieldIds: ["a"] },
-    { id: "b", label: "B", fieldIds: ["b"] },
-  ],
-);
-
-type NavProps = Record<string, unknown>;
-
-async function mount(variant: "list" | "chips", props: NavProps = {}) {
-  app = createApp({
-    render: () =>
-      h(FormSectionNav, {
-        variant,
-        sections: layout.sections,
-        states: {},
-        anchorId: (id: string) => `form-${id}`,
-        ...props,
-      }),
-  });
-  app.component("UIcon", defineComponent({ render: () => h("i") }));
-  app.mount(host);
-  await nextTick();
-}
-
-beforeEach(() => {
-  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
-  vi.stubGlobal("useTranslation", () => ({
-    processI18n: (text: string) => (text.startsWith("$") ? `t(${text})` : text),
-  }));
-  host = document.createElement("div");
-  document.body.append(host);
-});
-
-afterEach(() => {
-  app?.unmount();
-  host.remove();
-  vi.unstubAllGlobals();
-});
-
-describe("groupSectionsForNav", () => {
-  it("cuts the sections wherever their heading changes", () => {
-    expect(
-      groupSectionsForNav(layout.sections).map((group) => [
-        group.label,
-        group.sections.map((section) => section.id),
-      ]),
-    ).toEqual([
-      [undefined, ["plan"]],
-      ["$billing", ["dunning", "tax"]],
-      ["Legal", ["terms"]],
-    ]);
-  });
-
-  it("keeps a form without groups in one run", () => {
-    expect(groupSectionsForNav(plainLayout.sections)).toHaveLength(1);
-  });
-});
-
-describe("the side navigation", () => {
-  it("titles each run, and names its list by it", async () => {
-    await mount("list");
-    const lists = [...host.querySelectorAll("ul")];
-    expect(lists).toHaveLength(3);
-    expect(lists[0]!.hasAttribute("aria-labelledby")).toBe(false);
-    const headings = lists.slice(1).map((list) => {
-      const id = list.getAttribute("aria-labelledby")!;
-      return document.getElementById(id)?.textContent?.trim();
-    });
-    expect(headings).toEqual(["t($billing)", "Legal"]);
-    expect(lists[1]!.querySelectorAll("li")).toHaveLength(2);
-  });
-});
-
-function labelledRuns(): [string | undefined, string[]][] {
-  return [...host.querySelectorAll("ul")].map((list) => {
-    const id = list.getAttribute("aria-labelledby");
-    const label = id
-      ? document.getElementById(id)?.textContent?.trim()
-      : undefined;
-    const chips = [...list.querySelectorAll("a")].map(
-      (chip) => chip.textContent?.trim() ?? "",
-    );
-    return [label, chips];
-  });
-}
-
-describe("the row of chips", () => {
-  it("leads each run of chips with its group's label", async () => {
-    await mount("chips");
-    expect(labelledRuns()).toEqual([
-      [undefined, ["Plan"]],
-      ["t($billing)", ["Dunning", "Tax"]],
-      ["Legal", ["Terms"]],
-    ]);
-  });
-
-  it("wraps the runs instead of scrolling one line", async () => {
-    await mount("chips");
-    const nav = host.querySelector("nav")!;
-    expect(nav.classList.contains("flex-wrap")).toBe(true);
-    for (const list of host.querySelectorAll("ul")) {
-      expect(list.classList.contains("overflow-x-auto")).toBe(false);
-    }
-  });
-
-  it("keeps a form without groups in one scrolling row", async () => {
-    await mount("chips", { sections: plainLayout.sections });
-    expect(host.querySelectorAll("ul")).toHaveLength(1);
-    expect(host.querySelectorAll("li")).toHaveLength(2);
-    expect(host.querySelector("[aria-labelledby]")).toBeNull();
-    expect(host.querySelector("p")).toBeNull();
-    expect(host.querySelector("ul")!.className).toBe(
-      "flex gap-1.5 overflow-x-auto pb-1",
-    );
-  });
-
-  it("links each chip to its section and reports the one chosen", async () => {
-    const selected: string[] = [];
-    await mount("chips", {
-      activeId: "tax",
-      onSelect: (id: string) => selected.push(id),
-    });
-    const chips = [...host.querySelectorAll("a")];
-    expect(chips.map((chip) => chip.getAttribute("href"))).toEqual([
-      "#form-plan",
-      "#form-dunning",
-      "#form-tax",
-      "#form-terms",
-    ]);
-    expect(
-      host.querySelector("[aria-current='location']")?.textContent?.trim(),
-    ).toBe("Tax");
-    chips[3]!.click();
-    expect(selected).toEqual(["terms"]);
-  });
-});

package/frontend-vue/tests/form-sections.test.ts

@@ -1,94 +0,0 @@
-import { describe, expect, it } from "vitest";
-import {
-  errorFieldId,
-  invalidFieldIds,
-  layoutSections,
-  resolveSectionNav,
-  sectionState,
-} from "../layers/dms-ui/app/build/composables/form/formSections";
-import type { FormFieldOrGroup } from "../layers/dms-ui/app/composables/form/types/field";
-
-const field = (id: string, label?: string) => ({
-  id,
-  label,
-  component: { componentName: "dms-input-text" },
-});
-
-const ENTRIES: FormFieldOrGroup[] = [
-  field("intro"),
-  field("name", "Name"),
-  { id: "contact", label: "Contact", fields: [field("email"), field("phone")] },
-  field("notes", "Notes"),
-];
-
-const SECTIONS = [
-  { id: "general", label: "General", fieldIds: ["name", "contact"] },
-  { id: "advanced", label: "Advanced", fieldIds: ["notes"] },
-];
-
-describe("form sections", () => {
-  it("lists the sections beside them from three sections, none below", () => {
-    expect(resolveSectionNav(undefined, 2)).toBe("none");
-    expect(resolveSectionNav(undefined, 3)).toBe("side");
-    expect(resolveSectionNav("jump", 5)).toBe("jump");
-    expect(resolveSectionNav("side", 1)).toBe("side");
-  });
-
-  it("puts each entry in its section, the others first", () => {
-    const layout = layoutSections(ENTRIES, SECTIONS);
-    expect(layout.lead.map((entry) => entry.id)).toEqual(["intro"]);
-    expect(
-      layout.sections.map((section) => [
-        section.id,
-        section.entries.map((entry) => entry.id),
-        section.fieldIds,
-      ]),
-    ).toEqual([
-      ["general", ["name", "contact"], ["name", "email", "phone"]],
-      ["advanced", ["notes"], ["notes"]],
-    ]);
-  });
-
-  it("skips a section entry the form does not hold", () => {
-    const layout = layoutSections(ENTRIES, [
-      { id: "s", label: "S", fieldIds: ["gone", "notes"] },
-    ]);
-    expect(layout.sections[0]?.entries.map((entry) => entry.id)).toEqual([
-      "notes",
-    ]);
-  });
-
-  it("gives an error to the field it names, or whose part it names", () => {
-    const ids = ["address", "title", "title2"];
-    expect(errorFieldId("address", ids)).toBe("address");
-    expect(errorFieldId("address.streetName", ids)).toBe("address");
-    expect(errorFieldId("title2.en", ids)).toBe("title2");
-    expect(errorFieldId("other", ids)).toBeUndefined();
-    expect(errorFieldId(undefined, ids)).toBeUndefined();
-  });
-
-  it("lists the invalid fields once each, in the form's order", () => {
-    const errors = [
-      { name: "notes" },
-      { name: "email.domain" },
-      { name: "notes" },
-      { name: "unknown" },
-      { name: "email" },
-    ];
-    expect(invalidFieldIds(errors, ["name", "email", "notes"])).toEqual([
-      "email",
-      "notes",
-    ]);
-  });
-
-  it("marks a section changed or invalid from its fields", () => {
-    const [general] = layoutSections(ENTRIES, SECTIONS).sections;
-    expect(sectionState(general!, new Set(["phone"]), new Set())).toEqual({
-      dirty: true,
-      invalidCount: 0,
-    });
-    expect(
-      sectionState(general!, new Set(), new Set(["name", "email", "notes"])),
-    ).toEqual({ dirty: false, invalidCount: 2 });
-  });
-});

package/frontend-vue/tests/form-server-field-errors.test.ts

@@ -1,204 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { computed, effectScope, ref, watch, type EffectScope } from "vue";
-import {
-  type FormServerFieldError,
-  resolveFormFieldErrors,
-  useForm,
-} from "../layers/dms-ui/app/composables/form/useForm";
-
-const authFetch = vi.fn();
-const addToast = vi.fn();
-const showFieldErrors = vi.fn<(errors: FormServerFieldError[]) => boolean>();
-const hiddenFields = new Set<string>();
-let scope: EffectScope;
-
-const FIELDS = [
-  { id: "name", label: "Name", component: { componentName: "DmsInputText" } },
-  { id: "email", label: "Email", component: { componentName: "DmsInputText" } },
-  {
-    id: "code",
-    label: "Code",
-    disabled: true,
-    component: { componentName: "DmsInputText" },
-  },
-];
-
-/** What `assertValidation` answers: the ZodError's issues, as plain text. */
-const zodRefusal = (issues: unknown[]) => ({
-  statusCode: 400,
-  data: JSON.stringify(issues, null, 2),
-});
-
-function setupForm() {
-  return scope.run(() =>
-    useForm(
-      {
-        componentId: "form-1",
-        pageId: "page-1",
-        fields: FIELDS,
-        submitUrl: "/api/things/new",
-      } as never,
-      { showFieldErrors },
-    ),
-  )!;
-}
-
-const submit = (form: ReturnType<typeof setupForm>) =>
-  form.onSubmit({ data: { name: "", email: "taken@test.local" } } as never);
-
-beforeEach(() => {
-  scope = effectScope();
-  hiddenFields.clear();
-  showFieldErrors.mockReturnValue(true);
-  vi.stubGlobal("computed", computed);
-  vi.stubGlobal("ref", ref);
-  vi.stubGlobal("watch", watch);
-  vi.stubGlobal("isString", (value: unknown) => typeof value === "string");
-  vi.stubGlobal("Color", {
-    error: "error",
-    success: "success",
-    info: "info",
-  });
-  vi.stubGlobal("CONTENT_LANGUAGE_HEADER", "Content-Language");
-  vi.stubGlobal("useToast", () => ({ add: addToast }));
-  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: authFetch }));
-  vi.stubGlobal("useDataTypes", () => ({ getDataType: () => undefined }));
-  vi.stubGlobal("useTranslation", () => ({
-    processI18n: (key: string) => key,
-    processApiMessage: (message: string, params?: Record<string, unknown>) =>
-      params ? `t(${message}, ${JSON.stringify(params)})` : `t(${message})`,
-  }));
-  vi.stubGlobal("useI18n", () => ({
-    t: (key: string, named?: Record<string, unknown>) =>
-      named ? `${key} ${JSON.stringify(named)}` : key,
-  }));
-  vi.stubGlobal("useDmsRoute", () => ({ query: {} }));
-  vi.stubGlobal("useComponentEvent", () => ({ sendComponentEvent: vi.fn() }));
-  vi.stubGlobal("useEventedAction", () => ({
-    execute: (action: () => Promise<unknown>) => action(),
-  }));
-  vi.stubGlobal(
-    "useWatch",
-    (_actions: unknown, _id: unknown, initial: Record<string, unknown>) => ({
-      isLoading: ref(false),
-      state: ref({ ...initial, hiddenFields }),
-    }),
-  );
-  vi.stubGlobal("navigateDms", vi.fn());
-});
-
-afterEach(() => {
-  scope.stop();
-  vi.unstubAllGlobals();
-  vi.resetAllMocks();
-});
-
-describe("DMS form server errors", () => {
-  it("puts a refused value under its field, without a toast", async () => {
-    authFetch.mockRejectedValue(
-      zodRefusal([
-        {
-          code: "too_small",
-          minimum: 1,
-          type: "string",
-          message: "String must contain at least 1 character(s)",
-          path: ["name"],
-        },
-      ]),
-    );
-    await submit(setupForm());
-
-    expect(showFieldErrors).toHaveBeenCalledExactlyOnceWith([
-      { name: "name", message: "t($dms.field_errors.required)" },
-    ]);
-    expect(addToast).not.toHaveBeenCalled();
-  });
-
-  it("names the values a refusal lists under the field", async () => {
-    authFetch.mockRejectedValue({
-      statusCode: 409,
-      data: {
-        message: "$taken",
-        field: "email",
-        values: ["taken@test.local"],
-      },
-    });
-    await submit(setupForm());
-
-    expect(showFieldErrors).toHaveBeenCalledExactlyOnceWith([
-      {
-        name: "email",
-        message: `dms.field_errors.with_values ${JSON.stringify({
-          message: "t($taken)",
-          values: "taken@test.local",
-        })}`,
-        values: ["taken@test.local"],
-      },
-    ]);
-    expect(addToast).not.toHaveBeenCalled();
-  });
-
-  it("fills the message's placeholders from the error's params", async () => {
-    authFetch.mockRejectedValue({
-      statusCode: 400,
-      data: {
-        message: "$budget_max",
-        field: "name",
-        params: { max: 5000 },
-      },
-    });
-    await submit(setupForm());
-
-    expect(showFieldErrors).toHaveBeenCalledExactlyOnceWith([
-      { name: "name", message: 't($budget_max, {"max":5000})' },
-    ]);
-  });
-
-  it("keeps a failure tied to no field as a toast", async () => {
-    authFetch.mockRejectedValue({ statusCode: 500, data: "error.unexpected" });
-    await submit(setupForm());
-
-    expect(showFieldErrors).not.toHaveBeenCalled();
-    expect(addToast).toHaveBeenCalledExactlyOnceWith({
-      title: "$dms.form.error_title",
-      description: "t(error.unexpected)",
-      color: "error",
-    });
-  });
-
-  it("toasts a field error no rendered field could show", async () => {
-    showFieldErrors.mockReturnValue(false);
-    authFetch.mockRejectedValue({
-      statusCode: 400,
-      data: "Missing mandatory fields: name",
-    });
-    await submit(setupForm());
-
-    expect(showFieldErrors).toHaveBeenCalledOnce();
-    expect(addToast).toHaveBeenCalledOnce();
-  });
-
-  it("toasts an error on a hidden or disabled field", async () => {
-    hiddenFields.add("name");
-    authFetch.mockRejectedValue({
-      statusCode: 400,
-      data: "Missing mandatory fields: name, code",
-    });
-    await submit(setupForm());
-
-    expect(showFieldErrors).not.toHaveBeenCalled();
-    expect(addToast).toHaveBeenCalledOnce();
-  });
-});
-
-describe("resolveFormFieldErrors", () => {
-  it("only resolves to the fields the form shows", () => {
-    const error = {
-      statusCode: 400,
-      data: "Missing mandatory fields: name, email, code",
-    };
-    expect(
-      resolveFormFieldErrors(error, FIELDS, { hidden: new Set(["email"]) }),
-    ).toEqual([{ field: "name", message: "$dms.field_errors.required" }]);
-  });
-});