@multiplatform.one/backoffice 7.34.3 → 7.35.0

package/src/formBuilder/model.spec.ts

@@ -0,0 +1,401 @@
+import { describe, expect, it } from "vitest";
+import { keyboardLift, keyboardMove, resolveDrop } from "@multiplatform.one/components";
+import pokemon from "../../../../apps/frappe/apps/core/core/app/doctype/pokemon/pokemon.json";
+import {
+  addColumn,
+  addSection,
+  addTab,
+  canDeleteField,
+  fieldLocation,
+  fieldsFromLayout,
+  findField,
+  insertField,
+  layoutFromFields,
+  moveField,
+  moveFieldBy,
+  moveFieldToSection,
+  newFieldFromType,
+  removeColumn,
+  removeField,
+  removeSection,
+  removeTab,
+  scrub,
+  tabBoard,
+  updateBreak,
+  updateField,
+  validateLayout,
+} from "./model";
+import { fieldtypeCatalog, holdsValue, isBreakType, needsOptions, optionsHint } from "./fieldtypes";
+
+const seed = () => layoutFromFields(pokemon.fields);
+const names = (layout: ReturnType<typeof seed>) =>
+  fieldsFromLayout(layout).map((df) => df.fieldname);
+const keyOf = (layout: ReturnType<typeof seed>, name: string) =>
+  layout.tabs
+    .flatMap((t) => t.sections.flatMap((s) => s.columns.flatMap((c) => c.fields)))
+    .find((f) => f.df.fieldname === name)!.key;
+
+function freeze<T>(value: T): T {
+  if (value && typeof value === "object") {
+    Object.freeze(value);
+    for (const child of Object.values(value)) freeze(child);
+  }
+  return value;
+}
+
+describe("DocType layout", () => {
+  it.each(["Tab Break", "Section Break", "Column Break"])(
+    "converts a field to %s without losing its following fields",
+    (fieldtype) => {
+      const layout = seed();
+      const key = keyOf(layout, "height");
+      const result = updateField(freeze(layout), key, { fieldtype, label: "Measurements" });
+      expect(findField(result, key)).toBeUndefined();
+      expect(names(result)).toEqual(pokemon.field_order);
+      expect(fieldsFromLayout(result).find((df) => df.fieldname === "height")).toMatchObject({
+        fieldtype,
+        label: "Measurements",
+        idx: 4,
+      });
+      const nodes = result.tabs.flatMap((tab) => [
+        tab,
+        ...tab.sections.flatMap((section) => [section, ...section.columns]),
+      ]);
+      expect(nodes.find((node) => node.key === key)?.df?.fieldtype).toBe(fieldtype);
+      expect(fieldsFromLayout(layoutFromFields(fieldsFromLayout(result)))).toEqual(
+        fieldsFromLayout(result),
+      );
+    },
+  );
+
+  it("lays Pokemon out in an implicit Details tab and round trips every property", () => {
+    const layout = seed();
+    expect(layout.tabs).toHaveLength(1);
+    expect(layout.tabs[0].df).toBeUndefined();
+    const [main, stats] = layout.tabs[0].sections;
+    expect(main.df).toBeUndefined();
+    expect(main.columns.map((c) => c.fields.map((f) => f.df.fieldname))).toEqual([
+      pokemon.field_order.slice(0, 6),
+      ["sprite_front", "sprite_back"],
+    ]);
+    expect(stats.df?.label).toBe("Stats");
+    expect(stats.columns[0].fields[0].df.fieldname).toBe("stats");
+    expect(fieldsFromLayout(layout)).toEqual(
+      pokemon.fields.map((df, i) => ({ ...df, idx: i + 1 })),
+    );
+    expect(fieldsFromLayout(layoutFromFields([...fieldsFromLayout(layout)].reverse()))).toEqual(
+      fieldsFromLayout(layout),
+    );
+  });
+
+  it("moves sprite_back into the first column without mutating the input", () => {
+    const layout = freeze(seed());
+    const result = moveField(layout, keyOf(layout, "sprite_back"), {
+      columnId: layout.tabs[0].sections[0].columns[0].key,
+      index: 1,
+    });
+    const order = [
+      "pokemon_name",
+      "sprite_back",
+      "poke_id",
+      "species",
+      "height",
+      "weight",
+      "base_experience",
+      "column_break_1",
+      "sprite_front",
+      "section_break_stats",
+      "stats",
+    ];
+    expect(fieldsFromLayout(result)).toEqual(
+      order.map((name, i) => ({ ...pokemon.fields.find((f) => f.fieldname === name), idx: i + 1 })),
+    );
+  });
+
+  it("accepts without-dragged coordinates for a reorder in the same column", () => {
+    const layout = seed();
+    const col = layout.tabs[0].sections[0].columns[0];
+    const result = moveField(layout, col.fields[0].key, { columnId: col.key, index: 2 });
+    expect(names(result).slice(0, 3)).toEqual(["poke_id", "species", "pokemon_name"]);
+    expect(moveField(layout, col.fields[0].key, { columnId: "missing", index: 0 })).toBe(layout);
+  });
+
+  it("moves across sections and through the shared keyboard machine", () => {
+    const layout = seed();
+    const key = keyOf(layout, "sprite_back");
+    const board = tabBoard(layout, layout.tabs[0].key, (_column, index) => `Column ${index + 1}`);
+    expect(board.map((c) => [c.title, c.count])).toEqual([
+      ["Column 1", 6],
+      ["Column 2", 2],
+      ["Column 3", 1],
+    ]);
+    const drag = keyboardLift(board, board[1].id, 1)!;
+    const drop = resolveDrop(keyboardMove(drag, board, "right"));
+    expect(drop.commit).toBe(true);
+    const result = moveField(layout, key, drop.to);
+    expect(names(result).slice(-3)).toEqual(["section_break_stats", "stats", "sprite_back"]);
+    expect(moveFieldToSection(layout, key, layout.tabs[0].sections[1].key)).toEqual(result);
+    expect(fieldLocation(result, key)).toEqual({
+      tabKey: layout.tabs[0].key,
+      sectionKey: layout.tabs[0].sections[1].key,
+      columnKey: board[2].id,
+      index: 1,
+    });
+  });
+
+  it("derives a unique fieldname until a user edits it by hand", () => {
+    const layout = freeze(seed());
+    const { layout: inserted, key } = insertField(layout, newFieldFromType(layout, "Data"), {
+      columnId: layout.tabs[0].sections[0].columns[0].key,
+      index: 1,
+    });
+    const edited = updateField(inserted, key, { label: "Nickname", reqd: 1 });
+    expect(findField(edited, key)).toMatchObject({
+      key,
+      isNew: true,
+      df: { fieldname: "nickname", reqd: 1 },
+    });
+    expect(fieldsFromLayout(edited)[1]).toEqual({
+      fieldname: "nickname",
+      fieldtype: "Data",
+      label: "Nickname",
+      reqd: 1,
+      idx: 2,
+    });
+    expect(findField(updateField(edited, key, { label: "Species" }), key)?.df.fieldname).toBe(
+      "species_1",
+    );
+    const manual = updateField(edited, key, { fieldname: "alias" });
+    expect(findField(updateField(manual, key, { label: "Changed" }), key)?.df.fieldname).toBe(
+      "alias",
+    );
+    expect(names(removeField(edited, key))).toEqual(pokemon.field_order);
+    expect(
+      findField(
+        updateField(layout, keyOf(layout, "species"), { label: "Changed" }),
+        keyOf(layout, "species"),
+      )?.df.fieldname,
+    ).toBe("species");
+  });
+
+  it("synthesizes noncolliding breaks and drops empty sections and later tabs", () => {
+    const layout = seed();
+    const added = addColumn(layout, layout.tabs[0].sections[0].key);
+    expect(names(added)).toContain("column_break_2");
+    const section = addSection(added, added.tabs[0].key);
+    expect(fieldsFromLayout(section)).toEqual(fieldsFromLayout(added));
+    expect(fieldsFromLayout(addTab(section))).toEqual(fieldsFromLayout(added));
+    const materialized = updateBreak(added, added.tabs[0].sections[0].columns[2].key, {
+      label: "More",
+    });
+    expect(
+      fieldsFromLayout(materialized).find((df) => df.fieldname === "column_break_2")?.label,
+    ).toBe("More");
+  });
+
+  it.each(["Tab Break", "Section Break", "Column Break"])(
+    "inserts palette %s as structure",
+    (fieldtype) => {
+      const layout = seed();
+      const result = insertField(layout, newFieldFromType(layout, fieldtype), {
+        columnId: layout.tabs[0].sections[0].columns[0].key,
+        index: 0,
+      });
+      expect(findField(result.layout, result.key)).toBeUndefined();
+      const nodes = result.layout.tabs.flatMap((t) => [
+        t,
+        ...t.sections.flatMap((s) => [s, ...s.columns]),
+      ]);
+      expect(nodes.find((n) => n.key === result.key)?.df?.fieldtype).toBe(fieldtype);
+    },
+  );
+
+  it("keeps an empty first column as Frappe's builder does", () => {
+    const base = layoutFromFields([{ fieldname: "a", fieldtype: "Data" }]);
+    const layout = addColumn(base, base.tabs[0].sections[0].key);
+    const [first, second] = layout.tabs[0].sections[0].columns;
+    const moved = moveField(layout, first.fields[0].key, { columnId: second.key, index: 0 });
+    expect(fieldsFromLayout(moved).map((df) => [df.fieldtype, df.idx])).toEqual([
+      ["Column Break", 1],
+      ["Column Break", 2],
+      ["Data", 3],
+    ]);
+    const reloaded = layoutFromFields(fieldsFromLayout(moved));
+    expect(reloaded.tabs[0].sections[0].columns.map((column) => column.fields.length)).toEqual([
+      0, 1,
+    ]);
+  });
+
+  it("relocates fields when removing a column or a section", () => {
+    const layout = freeze(seed());
+    const [main, stats] = layout.tabs[0].sections;
+    expect(names(removeColumn(layout, main.columns[1].key))).toEqual(
+      pokemon.field_order.filter((n) => n !== "column_break_1"),
+    );
+    const firstRemoved = removeColumn(layout, main.columns[0].key);
+    expect(firstRemoved.tabs[0].sections[0].columns[0].fields.map((f) => f.df.fieldname)).toEqual([
+      ...pokemon.field_order.slice(0, 6),
+      "sprite_front",
+      "sprite_back",
+    ]);
+    expect(names(removeSection(layout, stats.key))).toEqual(
+      pokemon.field_order.filter((n) => n !== "section_break_stats"),
+    );
+    expect(
+      removeSection(layout, main.key).tabs[0].sections[0].columns[0].fields.map(
+        (f) => f.df.fieldname,
+      ),
+    ).toEqual([
+      ...pokemon.field_order.filter((n) => !n.includes("break") && n !== "stats"),
+      "stats",
+    ]);
+    expect(removeColumn(layout, stats.columns[0].key)).toBe(layout);
+    const only = layoutFromFields([{ fieldname: "a", fieldtype: "Data" }]);
+    expect(removeSection(only, only.tabs[0].sections[0].key)).toBe(only);
+    expect(removeTab(only, only.tabs[0].key)).toBe(only);
+  });
+
+  it("merges removed tabs into their neighbour and removes a sole section across tabs", () => {
+    const layout = addTab(seed());
+    const moved = moveFieldToSection(
+      layout,
+      keyOf(layout, "stats"),
+      layout.tabs[1].sections[0].key,
+    );
+    const back = removeTab(freeze(moved), moved.tabs[1].key);
+    expect(back.tabs).toHaveLength(1);
+    expect(back.tabs[0].sections).toHaveLength(3);
+    expect(names(back).at(-1)).toBe("stats");
+    const forward = removeTab(moved, moved.tabs[0].key);
+    expect(forward.tabs[0].sections[0].columns[0].fields[0].df.fieldname).toBe("pokemon_name");
+    expect(names(removeSection(moved, moved.tabs[1].sections[0].key))).toEqual(pokemon.field_order);
+  });
+
+  it("steps across column edges but never across tabs", () => {
+    const layout = seed();
+    const key = keyOf(layout, "base_experience");
+    const result = moveFieldBy(layout, key, 1);
+    expect(result.tabs[0].sections[0].columns[1].fields[0].key).toBe(key);
+    expect(moveFieldBy(result, key, -1)).toEqual(layout);
+    expect(moveFieldBy(layout, keyOf(layout, "pokemon_name"), -1)).toBe(layout);
+    expect(moveFieldBy(addTab(layout), keyOf(layout, "stats"), 1).tabs[0]).toEqual(layout.tabs[0]);
+  });
+
+  it("recognizes a leading Tab Break after sorting by idx", () => {
+    const layout = layoutFromFields([
+      { fieldname: "a", fieldtype: "Data", idx: 2 },
+      { fieldname: "tab", fieldtype: "Tab Break", idx: 1 },
+    ]);
+    expect(layout.tabs).toHaveLength(1);
+    expect(layout.tabs[0].df?.fieldname).toBe("tab");
+  });
+
+  it("keeps fields before an explicit tab when input rows arrive out of order", () => {
+    const layout = layoutFromFields([
+      { fieldname: "tab", fieldtype: "Tab Break", idx: 2 },
+      { fieldname: "a", fieldtype: "Data", idx: 1 },
+      { fieldname: "b", fieldtype: "Data", idx: 3 },
+    ]);
+    expect(layout.tabs).toHaveLength(2);
+    expect(names(layout)).toEqual(["a", "tab", "b"]);
+  });
+
+  it("does not treat a transient Customize Form standard row as a custom field", () => {
+    const layout = layoutFromFields([{ fieldname: "standard", fieldtype: "Data", __islocal: 1 }]);
+    expect(canDeleteField(layout.tabs[0].sections[0].columns[0].fields[0], "customize")).toBe(
+      false,
+    );
+  });
+
+  it("preserves leading explicit breaks", () => {
+    const fields = [
+      { fieldname: "intro", fieldtype: "Tab Break", label: "Intro" },
+      { fieldname: "section", fieldtype: "Section Break" },
+      { fieldname: "column", fieldtype: "Column Break" },
+      { fieldname: "a", fieldtype: "Data" },
+    ];
+    const layout = layoutFromFields(fields);
+    expect(layout.tabs).toHaveLength(1);
+    expect(layout.tabs[0].df).toEqual(fields[0]);
+    expect(fieldsFromLayout(layout)).toEqual(fields.map((df, i) => ({ ...df, idx: i + 1 })));
+    expect(fieldsFromLayout(layoutFromFields([]))).toEqual([]);
+  });
+
+  it("validates duplicate names, fieldname syntax, labels and required options", () => {
+    const layout = layoutFromFields([
+      { fieldname: "same", fieldtype: "Data" },
+      { fieldname: "same", fieldtype: "Data" },
+      { fieldname: "1Bad", fieldtype: "Data" },
+      { fieldname: "", fieldtype: "Data" },
+      { fieldname: "choice", fieldtype: "Select", options: " \n " },
+      { fieldname: "link", fieldtype: "Link" },
+      { fieldname: "ok", fieldtype: "Select", options: "\nYes\nNo" },
+    ]);
+    const errors = validateLayout(layout);
+    expect(Object.keys(errors)).toHaveLength(6);
+    expect(
+      Object.values(errors)
+        .flat()
+        .map((e) => e.key),
+    ).toEqual(
+      expect.arrayContaining([
+        "formBuilder.validation.duplicateFieldname",
+        "formBuilder.validation.invalidFieldname",
+        "formBuilder.validation.fieldnameRequired",
+        "formBuilder.validation.optionsRequired",
+        "formBuilder.validation.labelRequired",
+      ]),
+    );
+    expect(
+      Object.values(errors)
+        .flat()
+        .every((e) => e.default.length > 0),
+    ).toBe(true);
+    expect(validateLayout(seed())).toEqual({});
+  });
+
+  it("only permits custom or new field deletion in Customize Form", () => {
+    const layout = seed();
+    const field = findField(layout, keyOf(layout, "species"))!;
+    expect(canDeleteField(field, "customize")).toBe(false);
+    expect(canDeleteField(field, "doctype")).toBe(true);
+    expect(canDeleteField({ ...field, df: { ...field.df, is_custom_field: 1 } }, "customize")).toBe(
+      true,
+    );
+    expect(canDeleteField(newFieldFromType(layout, "Data"), "customize")).toBe(true);
+    expect(scrub("My-Field Name! É")).toBe("my_field_name_");
+  });
+});
+
+describe("fieldtype palette", () => {
+  it("covers the v15 DocField types with stable translation defaults", () => {
+    const expected =
+      "Autocomplete,Attach,Attach Image,Attachment Gallery,Barcode,Button,Check,Code,Color,Column Break,Currency,Data,Date,Datetime,Duration,Dynamic Link,Float,Fold,Geolocation,Heading,HTML,HTML Editor,Icon,Image,Int,JSON,Link,Long Text,Markdown Editor,Password,Percent,Phone,Read Only,Rating,Section Break,Select,Signature,Small Text,Tab Break,Table,Table MultiSelect,Text,Text Editor,Time".split(
+        ",",
+      );
+    expect(fieldtypeCatalog.map((entry) => entry.fieldtype).sort()).toEqual(expected.sort());
+    expect(new Set(fieldtypeCatalog.map((e) => e.labelKey)).size).toBe(expected.length);
+    expect(fieldtypeCatalog.every((e) => e.label && e.description && e.descriptionKey)).toBe(true);
+    expect(needsOptions("Dynamic Link")).toBe(true);
+    expect(needsOptions("Table MultiSelect")).toBe(true);
+    expect(optionsHint("Select")?.default).toContain("line");
+    expect(optionsHint("Data")?.default).toContain("Optional");
+    for (const type of ["Data", "Code", "HTML", "Image", "Currency", "Read Only", "Autocomplete"]) {
+      expect(optionsHint(type)).toBeDefined();
+      expect(needsOptions(type)).toBe(false);
+    }
+    for (const type of [
+      "Tab Break",
+      "Section Break",
+      "Column Break",
+      "HTML",
+      "Heading",
+      "Button",
+      "Image",
+      "Fold",
+    ])
+      expect(holdsValue(type)).toBe(false);
+    expect(holdsValue("Data")).toBe(true);
+    expect(isBreakType("Tab Break")).toBe(true);
+  });
+});