@antelopejs/dms 0.5.5 → 0.6.0

package/frontend-vue/tests/form-footer-kind.test.ts

@@ -0,0 +1,96 @@
+import { describe, expect, it } from "vitest";
+import {
+  formSaveMode,
+  type SaveBarContext,
+  saveBarState,
+} from "../layers/dms-ui/app/build/composables/form/formFooter";
+
+describe("formSaveMode", () => {
+  it("saves with the bar by default", () => {
+    expect(formSaveMode(undefined)).toBe("bar");
+  });
+
+  it("saves as it goes when instant, unless it is an action form", () => {
+    expect(formSaveMode("instant")).toBe("instant");
+    expect(formSaveMode("instant", "record")).toBe("instant");
+    expect(formSaveMode("instant", "action")).toBe("bar");
+  });
+
+  it("keeps the footer and no buttons as asked", () => {
+    expect(formSaveMode("footer")).toBe("footer");
+    expect(formSaveMode("none")).toBe("none");
+  });
+});
+
+const context = (overrides: Partial<SaveBarContext>): SaveBarContext => ({
+  kind: "record",
+  dirty: false,
+  cancellable: false,
+  resettable: true,
+  ...overrides,
+});
+
+describe("saveBarState of a record form", () => {
+  it("says what is unsaved, with Discard and Save, once a value changed", () => {
+    expect(saveBarState(context({ dirty: true }))).toEqual({
+      showsStatus: true,
+      secondary: "discard",
+      showsSubmit: true,
+      isSubmitHeld: false,
+      isHidden: false,
+    });
+  });
+
+  it("offers Cancel alone while clean, when it has somewhere to go back to", () => {
+    expect(saveBarState(context({ cancellable: true }))).toMatchObject({
+      showsStatus: false,
+      secondary: "cancel",
+      showsSubmit: false,
+      isHidden: false,
+    });
+  });
+
+  it("hides, keeping its place, with nothing to offer", () => {
+    expect(saveBarState(context({})).isHidden).toBe(true);
+  });
+});
+
+describe("saveBarState of an action form", () => {
+  const action = (overrides: Partial<SaveBarContext>) =>
+    saveBarState(context({ kind: "action", ...overrides }));
+
+  it("shows Reset and its submit once a value changed, never a status", () => {
+    expect(action({ dirty: true })).toEqual({
+      showsStatus: false,
+      secondary: "discard",
+      showsSubmit: true,
+      isSubmitHeld: false,
+      isHidden: false,
+    });
+  });
+
+  it("shows nothing on a page while untouched", () => {
+    expect(action({}).isHidden).toBe(true);
+  });
+
+  it("offers Cancel beside its held submit in a drawer or a modal", () => {
+    // The invite modal: empty, it still shows the way out and its "Invite".
+    expect(action({ cancellable: true })).toEqual({
+      showsStatus: false,
+      secondary: "cancel",
+      showsSubmit: true,
+      isSubmitHeld: true,
+      isHidden: false,
+    });
+  });
+
+  it("shows its submit alone, ready, when nothing in it can be changed", () => {
+    const bar = action({ resettable: false });
+    expect(bar.secondary).toBeUndefined();
+    expect(bar).toMatchObject({
+      showsSubmit: true,
+      isSubmitHeld: false,
+      isHidden: false,
+    });
+  });
+});

package/frontend-vue/tests/form-reload-on-reopen.test.ts

@@ -0,0 +1,20 @@
+import { readFileSync } from "node:fs";
+import { expect, it } from "vitest";
+
+const formSource = readFileSync(
+  new URL("../layers/dms-ui/app/components/form/Form.vue", import.meta.url),
+  "utf8",
+);
+
+// The load of a form is cached under its component and page ids, which a
+// drawer or modal reopened on the same row shares: the second opening showed
+// the first one's values, stale if the row changed in between, and a save
+// then wrote them back.
+it("fetches its record again every time a form is mounted", () => {
+  const loadBlock = formSource.slice(
+    formSource.indexOf("if (props.fetchUrl) {"),
+  );
+  expect(loadBlock).toMatch(
+    /const formLoad = await useDmsAsyncData\([\s\S]*?onMounted\(\(\) => \{\s*formLoad\.status\.value = "idle";\s*\}\);/,
+  );
+});

package/frontend-vue/tests/form-required-fields.test.ts

@@ -117,6 +117,22 @@ describe("isFieldMarkedRequired", () => {
     ).to.equal(false);
   });
 
+  it("marks a required box to tick, which only ticking fills", () => {
+    expect(
+      isFieldMarkedRequired(
+        {
+          id: "terms",
+          required: true,
+          type: "boolean",
+          component: { componentName: "dms-checkbox" },
+        },
+        none,
+        none,
+        none,
+      ),
+    ).to.equal(true);
+  });
+
   it("does not mark a disabled or hidden field, which is not validated", () => {
     const field = { id: "name", required: true };
     expect(

package/frontend-vue/tests/form-required-validation.test.ts

@@ -0,0 +1,407 @@
+import { describe, expect, it } from "vitest";
+import { z } from "zod";
+import { zodToJsonSchema } from "zod-to-json-schema";
+import { jsonSchemaToZod, type JsonSchema } from "json-schema-to-zod";
+import {
+  formIssueMessage,
+  isBlankValue,
+  REQUIRED_MESSAGE,
+} from "../layers/dms-core/app/composables/useFormValidation";
+import {
+  type FormValidationField,
+  type FormValidationIssue,
+  unwrapUnionIssue,
+  validateFormState,
+} from "../layers/dms-ui/app/build/composables/form/formValidation";
+
+// The client rebuilds the schema the backend serializes (see useForm's
+// createBaseValidationSchema): the same round trip here, so each case reads
+// what the form really validates with.
+function roundTrip(
+  shape: Record<string, z.ZodTypeAny>,
+): z.ZodObject<Record<string, z.ZodTypeAny>> {
+  const json = zodToJsonSchema(z.object(shape)) as unknown as JsonSchema;
+  const code = jsonSchemaToZod(json, { module: "none" }).replace(
+    /\.strict\(\)$/,
+    ".passthrough()",
+  );
+  return new Function("z", `"use strict"; return (${code})`)(z);
+}
+
+// The backend's adaptFieldValidationSchema: optional is nullable+optional,
+// required makes a text or a list non-empty.
+function optional(schema: z.ZodTypeAny): z.ZodTypeAny {
+  return schema.nullable().optional();
+}
+
+// DefaultDataTypes.DateType: an ISO date string or a Date.
+function date(): z.ZodTypeAny {
+  return z
+    .union([
+      z.string().regex(/^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}:\d{2}(\.\d{3})?Z?)?$/),
+      z.date(),
+    ])
+    .transform((value) =>
+      typeof value === "string" ? new Date(value) : value,
+    );
+}
+
+function dateRange(): z.ZodTypeAny {
+  return z.union([z.array(date()), z.object({ start: date(), end: date() })]);
+}
+
+// DefaultDataTypes.AddressType.
+function address(): z.ZodTypeAny {
+  return z.object({
+    streetName: z.string().min(1),
+    houseNumber: z.string().optional(),
+    postalCode: z.string().min(1),
+    city: z.string().min(1),
+    countryCode: z.string().length(2),
+  });
+}
+
+const REQUIRED = "This field is required.";
+// What the form's error map does with a blank part: the required wording.
+const errorMap: z.ZodErrorMap = (issue, context) => ({
+  message:
+    formIssueMessage(issue, context.data) === REQUIRED_MESSAGE
+      ? REQUIRED
+      : (issue.message ?? context.defaultError),
+});
+
+async function issuesOf(
+  shape: Record<string, z.ZodTypeAny>,
+  fields: FormValidationField[],
+  state: Record<string, unknown>,
+): Promise<FormValidationIssue[]> {
+  const result = await validateFormState(roundTrip(shape), state, {
+    fields,
+    requiredMessage: REQUIRED,
+    locale: "en",
+    parseParams: { errorMap },
+  });
+  return "issues" in result ? result.issues : [];
+}
+
+async function valueOf(
+  shape: Record<string, z.ZodTypeAny>,
+  fields: FormValidationField[],
+  state: Record<string, unknown>,
+): Promise<Record<string, unknown> | undefined> {
+  const result = await validateFormState(roundTrip(shape), state, {
+    fields,
+    requiredMessage: REQUIRED,
+    locale: "en",
+    parseParams: { errorMap },
+  });
+  return "value" in result ? result.value : undefined;
+}
+
+const required = (id: string, type?: string): FormValidationField => ({
+  id,
+  type,
+  required: true,
+});
+
+describe("isBlankValue: what counts as empty, per type", () => {
+  it.each([
+    ["nothing", undefined, undefined],
+    ["null", null, undefined],
+    ["a blank text", "  ", undefined],
+    ["no item", [], undefined],
+    ["a cleared number", Number.NaN, undefined],
+    ["an unpicked range", { start: undefined, end: undefined }, "date"],
+    ["a range list of nothing", [undefined, undefined], "date"],
+    ["an empty rich-text document", "<p></p>", "rich_text"],
+    [
+      "a rich-text document of spaces",
+      "<p>&nbsp; </p><p><br></p>",
+      "rich_text",
+    ],
+    [
+      "an address of empty parts",
+      { streetName: "", postalCode: "", city: "", countryCode: "" },
+      "address",
+    ],
+    [
+      "an image without a file",
+      { key: "", alt: "", principal: false },
+      "image",
+    ],
+    ["translations all blank", { en: "", fr: " " }, "string"],
+  ])("%s is empty", (_label, value, type) => {
+    expect(isBlankValue(value, type)).toBe(true);
+  });
+
+  it.each([
+    ["zero", 0, "number"],
+    ["false", false, "boolean"],
+    ["a rich-text document with text", "<p>Hi</p>", "rich_text"],
+    [
+      "a rich-text document with only an image",
+      '<p><img src="a"></p>',
+      "rich_text",
+    ],
+    ["an address with a street", { streetName: "Rue", city: "" }, "address"],
+    ["a picked date", "2026-10-02", "date"],
+  ])("%s is a value", (_label, value, type) => {
+    expect(isBlankValue(value, type)).toBe(false);
+  });
+});
+
+describe("validateFormState: a required field left empty", () => {
+  it("flags an unpicked date as required, not as an invalid value", async () => {
+    const issues = await issuesOf(
+      { due: date() },
+      [required("due", "date")],
+      {},
+    );
+    expect(issues).toEqual([{ message: REQUIRED, path: ["due"] }]);
+  });
+
+  it.each([
+    ["a date", "date", date(), null],
+    ["a date range", "date", dateRange(), { start: undefined, end: undefined }],
+    ["a list of dates", "date", z.array(date()).min(1), []],
+    ["a rich text", "rich_text", z.string().min(1), "<p></p>"],
+    ["a number cleared to text", "number", z.number(), ""],
+    ["a number cleared", "number", z.number(), Number.NaN],
+    ["a select", "select", z.enum(["a", "b"]), undefined],
+    ["a file", "file", z.string().min(1), ""],
+    ["a gallery", "image", z.array(z.object({ key: z.string() })).min(1), []],
+    ["a time", "string_time", z.number(), null],
+  ])("flags %s as required", async (_label, type, schema, value) => {
+    const issues = await issuesOf(
+      { field: schema },
+      [required("field", type)],
+      { field: value },
+    );
+    expect(issues).toEqual([{ message: REQUIRED, path: ["field"] }]);
+  });
+
+  it("gives an empty address one required issue, not one per part", async () => {
+    const issues = await issuesOf(
+      { address: address() },
+      [required("address", "address")],
+      {
+        address: { streetName: "", postalCode: "", city: "", countryCode: "" },
+      },
+    );
+    expect(issues).toEqual([{ message: REQUIRED, path: ["address"] }]);
+  });
+
+  it("puts the error of a localized field on the language it shows", async () => {
+    const issues = await issuesOf(
+      { title: z.record(z.string(), z.string()) },
+      [{ id: "title", type: "string", localized: true, required: true }],
+      { title: { en: "", fr: "" } },
+    );
+    expect(issues).toEqual([{ message: REQUIRED, path: ["title", "en"] }]);
+  });
+
+  it("takes 0 as a value", async () => {
+    const value = await valueOf(
+      { count: z.number() },
+      [required("count", "number")],
+      { count: 0 },
+    );
+    expect(value).toEqual({ count: 0 });
+  });
+
+  it("lists the issues in the order of the fields", async () => {
+    const issues = await issuesOf(
+      { email: z.string().email(), due: date(), name: z.string().min(1) },
+      [required("name"), required("email", "email"), required("due", "date")],
+      { email: "nope" },
+    );
+    expect(issues.map((issue) => issue.path[0])).toEqual([
+      "name",
+      "email",
+      "due",
+    ]);
+  });
+});
+
+describe("validateFormState: other errors", () => {
+  it("names the missing part of a partly filled address", async () => {
+    const issues = await issuesOf(
+      { address: address() },
+      [required("address", "address")],
+      {
+        address: {
+          streetName: "Rue Neuve",
+          postalCode: "",
+          city: "Brussels",
+          countryCode: "",
+        },
+      },
+    );
+    expect(issues).toEqual([
+      { message: REQUIRED, path: ["address", "postalCode"] },
+      { message: REQUIRED, path: ["address", "countryCode"] },
+    ]);
+  });
+
+  it("names the missing end of a half-picked range", async () => {
+    const issues = await issuesOf(
+      { vacation: dateRange() },
+      [required("vacation", "date")],
+      { vacation: { start: "2026-10-01" } },
+    );
+    expect(issues).toEqual([{ message: REQUIRED, path: ["vacation", "end"] }]);
+  });
+
+  it("accepts a range as { start, end } or as a list", async () => {
+    const fields = [required("vacation", "date")];
+    for (const vacation of [
+      { start: "2026-10-01", end: "2026-10-05" },
+      ["2026-10-01", "2026-10-05"],
+    ]) {
+      expect(
+        await issuesOf({ vacation: dateRange() }, fields, { vacation }),
+      ).toEqual([]);
+    }
+  });
+
+  it("keeps a type error once the field holds something", async () => {
+    const issues = await issuesOf(
+      { email: z.string().email() },
+      [required("email", "email")],
+      { email: "nope" },
+    );
+    expect(issues).toHaveLength(1);
+    expect(issues[0]!.path).toEqual(["email"]);
+    expect(issues[0]!.message).not.toBe(REQUIRED);
+  });
+});
+
+describe("validateFormState: an optional field left empty", () => {
+  const optionalField = (id: string, type?: string): FormValidationField => ({
+    id,
+    type,
+    required: false,
+  });
+
+  it("submits a cleared optional email as null instead of refusing it", async () => {
+    const value = await valueOf(
+      { email: optional(z.string().email()) },
+      [optionalField("email", "email")],
+      { email: "" },
+    );
+    expect(value).toEqual({ email: null });
+  });
+
+  it("submits an optional address of empty parts as null", async () => {
+    const value = await valueOf(
+      { address: optional(address()) },
+      [optionalField("address", "address")],
+      {
+        address: { streetName: "", postalCode: "", city: "", countryCode: "" },
+      },
+    );
+    expect(value).toEqual({ address: null });
+  });
+
+  it("keeps a blank optional text as it is when its type takes it", async () => {
+    const value = await valueOf(
+      { notes: optional(z.string()) },
+      [optionalField("notes", "string")],
+      { notes: "" },
+    );
+    expect(value).toEqual({ notes: "" });
+  });
+
+  it("reads a switch never touched as off", async () => {
+    const value = await valueOf(
+      { done: z.boolean() },
+      [optionalField("done", "boolean")],
+      {},
+    );
+    expect(value).toEqual({ done: false });
+  });
+
+  it("names the missing part of a partly filled optional address", async () => {
+    const issues = await issuesOf(
+      { address: optional(address()) },
+      [optionalField("address", "address")],
+      {
+        address: {
+          streetName: "Rue Neuve",
+          postalCode: "1000",
+          city: "",
+          countryCode: "BE",
+        },
+      },
+    );
+    expect(issues).toEqual([{ message: REQUIRED, path: ["address", "city"] }]);
+  });
+});
+
+describe("unwrapUnionIssue", () => {
+  it("keeps a union issue when several branches are of the value's type", () => {
+    const schema = z.union([z.string().email(), z.string().url()]);
+    const result = schema.safeParse("nope");
+    expect(result.success).toBe(false);
+    const [issue] = result.error!.issues;
+    expect(unwrapUnionIssue(issue!)).toEqual([issue]);
+  });
+
+  it("takes the issues of the one branch of the value's type", () => {
+    const schema = z.union([z.object({ a: z.string() }), z.null()]);
+    const result = schema.safeParse({});
+    const issues = result.error!.issues.flatMap(unwrapUnionIssue);
+    expect(issues.map((issue) => issue.path)).toEqual([["a"]]);
+  });
+});
+
+describe("validateFormState: errors a control reports", () => {
+  const DURATION = "Enter a duration such as 1h30m or 01:30.";
+
+  it("refuses the field with the control's message, before required", async () => {
+    const result = await validateFormState(
+      roundTrip({ duration: z.number(), name: optional(z.string()) }),
+      { duration: null },
+      {
+        fields: [
+          required("duration", "string_time"),
+          { id: "name", required: false },
+        ],
+        requiredMessage: REQUIRED,
+        controlErrors: new Map([["duration", DURATION]]),
+      },
+    );
+    expect("issues" in result && result.issues).toEqual([
+      { message: DURATION, path: ["duration"] },
+    ]);
+  });
+
+  it("leaves a field without one to the schema", async () => {
+    const result = await validateFormState(
+      roundTrip({ duration: optional(z.number()) }),
+      { duration: 5 },
+      {
+        fields: [{ id: "duration", required: false }],
+        requiredMessage: REQUIRED,
+        controlErrors: new Map(),
+      },
+    );
+    expect(result).toEqual({ value: { duration: 5 } });
+  });
+});
+
+describe("validateFormState: a box to tick", () => {
+  it("is missing until ticked when required", async () => {
+    const shape = { terms: z.literal(true) };
+    const field = { ...required("terms", "boolean"), acceptance: true };
+    expect(await issuesOf(shape, [field], { terms: false })).toEqual([
+      { message: REQUIRED, path: ["terms"] },
+    ]);
+    expect(await issuesOf(shape, [field], {})).toEqual([
+      { message: REQUIRED, path: ["terms"] },
+    ]);
+    expect(await valueOf(shape, [field], { terms: true })).toEqual({
+      terms: true,
+    });
+  });
+});

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

@@ -0,0 +1,94 @@
+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 });
+  });
+});