@truedat/df 8.7.0 → 8.7.2

package/src/templates/components/templateForm/__tests__/TableValuesForm.spec.js

@@ -7,209 +7,227 @@ import TableValuesForm from "../TableValuesForm";
 const mockFormatMessage = jest.fn(({ id }) => id);
 
 jest.mock("react-intl", () => ({
-    ...jest.requireActual("react-intl"),
-    useIntl: () => ({
-        formatMessage: mockFormatMessage,
-    }),
+  ...jest.requireActual("react-intl"),
+  useIntl: () => ({
+    formatMessage: mockFormatMessage,
+  }),
 }));
 
 // --- Stub child components to isolate TableValuesForm behavior ---
-jest.mock("../FieldDefinition", () => () => <div data-testid="FieldDefinition" />);
+jest.mock("../FieldDefinition", () => () => (
+  <div data-testid="FieldDefinition" />
+));
 jest.mock("../ValuesField", () => () => <div data-testid="ValuesField" />);
-jest.mock("../ValuesConfiguration", () => () => <div data-testid="ValuesConfiguration" />);
+jest.mock("../ValuesConfiguration", () => () => (
+  <div data-testid="ValuesConfiguration" />
+));
 
 const user = userEvent.setup({ delay: null });
 
 const values = [
-    { name: "colA", widget: "string", type: "string", errors: {} },
-    { name: "colB", widget: "string", type: "string", errors: { nameDuplicated: true, hasErrors: true } },
+  { name: "colA", widget: "string", type: "string", errors: {} },
+  {
+    name: "colB",
+    widget: "string",
+    type: "string",
+    errors: { nameDuplicated: true, hasErrors: true },
+  },
 ];
 
 const baseProps = {
-    name: "myField",
-    type: "table_columns",        // used as the key in the onChange payload
-    values,
-    onChange: jest.fn(),
-    scope: "scope-x",
-    field: { values: { table_columns: values } },
-    fieldNamePrefix: "myPrefix",
+  name: "myField",
+  type: "table_columns", // used as the key in the onChange payload
+  values,
+  onChange: jest.fn(),
+  scope: "scope-x",
+  field: { values: { table_columns: values } },
+  fieldNamePrefix: "myPrefix",
 };
 
-
 describe("TableValuesForm", () => {
-    test("renders an Accordion with a panel per value, showing name and duplicated label", () => {
-        const rendered = render(<TableValuesForm {...baseProps} />);
-        waitForLoad(rendered);
-
-        // Two labels for two columns
-        expect(rendered.getByText("colA")).toBeInTheDocument();
-        expect(rendered.getByText("colB")).toBeInTheDocument();
-
-        // Duplicated name label for the second column only
-        // The label text comes from formatMessage
-        expect(rendered.getByText("template.form.validation.name_duplicated")).toBeInTheDocument();
-    });
-
-    test("clicking a panel title toggles it active and reveals its content", async () => {
-        const rendered = render(<TableValuesForm {...baseProps} />);
-        waitForLoad(rendered);
-
-        // Click on "colA" title to expand
-        await user.click(rendered.getByText("colA"));
-
-        // Content should render the stubs under the active panel
-        // (we don't assert which panel holds it; just that they are present)
-        expect(rendered.getAllByTestId("FieldDefinition").length).toBeGreaterThan(0);
-        expect(rendered.getAllByTestId("ValuesField").length).toBeGreaterThan(0);
-    });
-
-    test("move down moves the selected column forward and calls onChange with swapped array", async () => {
-        const rendered = render(<TableValuesForm {...baseProps} />);
-        waitForLoad(rendered);
-
-        // Expand panel 0 (colA)
-        await user.click(rendered.getByText("colA"));
-
-        // In the panel content, there is a Button.Group with three buttons (up, down, delete)
-        // We'll grab them by role=button within the expanded panel area.
-        // Since Semantic UI doesn't attach specific names by default to icon-only buttons,
-        // we'll pick by order: [up, down, delete].
-        const activePanel = rendered.getByText("colA").closest(".title")?.nextElementSibling;
-        expect(activePanel).toBeTruthy();
-
-        const buttons = within(activePanel).getAllByRole("button");
-        // up is disabled for index 0; down should move colA to index 1
-        const [, downButton] = buttons;
-        await user.click(downButton);
-
-        // Expect onChange called with swapped values for key "table_columns"
-        expect(baseProps.onChange).toHaveBeenCalledWith(
-            null,
-            expect.objectContaining({
-                name: "myField",
-                value: {
-                    table_columns: [
-                        expect.objectContaining({ name: "colB" }),
-                        expect.objectContaining({ name: "colA" }),
-                    ],
-                },
-            })
-        );
-    });
-
-    test("move up moves the selected column backward and calls onChange with swapped array", async () => {
-        const rendered = render(<TableValuesForm {...baseProps} />);
-        waitForLoad(rendered);
-
-        // Expand panel 1 (colB)
-        await user.click(rendered.getByText("colB"));
-
-        // Get the three buttons from this panel (up, down, delete)
-        const activePanel = rendered.getByText("colB").closest(".title")?.nextElementSibling;
-        expect(activePanel).toBeTruthy();
-
-        const buttons = within(activePanel).getAllByRole("button");
-        const [upButton] = buttons; // first button = up
-        await user.click(upButton);
-
-        // Expect swap: colB moves to index 0
-        expect(baseProps.onChange).toHaveBeenCalledWith(
-            null,
-            expect.objectContaining({
-                name: "myField",
-                value: {
-                    table_columns: [
-                        expect.objectContaining({ name: "colB" }),
-                        expect.objectContaining({ name: "colA" }),
-                    ],
-                },
-            })
-        );
-    });
-
-    test("delete removes the selected column and calls onChange with shortened array", async () => {
-        const rendered = render(<TableValuesForm {...baseProps} />);
-        waitForLoad(rendered);
-
-        // Expand panel 0 (colA)
-        await user.click(rendered.getByText("colA"));
-
-        const activePanel = rendered.getByText("colA").closest(".title")?.nextElementSibling;
-        const buttons = within(activePanel).getAllByRole("button");
-        const deleteButton = buttons[buttons.length - 1];
-
-        await user.click(deleteButton);
-
-        expect(baseProps.onChange).toHaveBeenLastCalledWith(
-            null,
-            expect.objectContaining({
-                name: "myField",
-                value: {
-                    table_columns: [
-                        expect.objectContaining({ name: "colB" }), // only colB remains
-                    ],
-                },
-            })
-        );
-    });
-
-    test("add column via Enter in input appends a default field with given name", async () => {
-        const rendered = render(<TableValuesForm {...baseProps} />);
-        waitForLoad(rendered);
-
-        // Input is at the bottom with an icon. We'll type and press Enter.
-        const input = rendered.getByRole("textbox");
-        await user.type(input, "newCol{enter}");
-
-        // The payload includes the new element at the end.
-        // It uses defaultFieldDefinition + overrides: name, label set to 'myField', ai_suggestion=false
-        expect(baseProps.onChange).toHaveBeenCalledWith(
-            null,
+  test("renders an Accordion with a panel per value, showing name and duplicated label", () => {
+    const rendered = render(<TableValuesForm {...baseProps} />);
+    waitForLoad(rendered);
+
+    // Two labels for two columns
+    expect(rendered.getByText("colA")).toBeInTheDocument();
+    expect(rendered.getByText("colB")).toBeInTheDocument();
+
+    // Duplicated name label for the second column only
+    // The label text comes from formatMessage
+    expect(
+      rendered.getByText("template.form.validation.name_duplicated"),
+    ).toBeInTheDocument();
+  });
+
+  test("clicking a panel title toggles it active and reveals its content", async () => {
+    const rendered = render(<TableValuesForm {...baseProps} />);
+    waitForLoad(rendered);
+
+    // Click on "colA" title to expand
+    await user.click(rendered.getByText("colA"));
+
+    // Content should render the stubs under the active panel
+    // (we don't assert which panel holds it; just that they are present)
+    expect(rendered.getAllByTestId("FieldDefinition").length).toBeGreaterThan(
+      0,
+    );
+    expect(rendered.getAllByTestId("ValuesField").length).toBeGreaterThan(0);
+  });
+
+  test("move down moves the selected column forward and calls onChange with swapped array", async () => {
+    const rendered = render(<TableValuesForm {...baseProps} />);
+    waitForLoad(rendered);
+
+    // Expand panel 0 (colA)
+    await user.click(rendered.getByText("colA"));
+
+    // In the panel content, there is a Button.Group with three buttons (up, down, delete)
+    // We'll grab them by role=button within the expanded panel area.
+    // Since Semantic UI doesn't attach specific names by default to icon-only buttons,
+    // we'll pick by order: [up, down, delete].
+    const activePanel = rendered
+      .getByText("colA")
+      .closest(".title")?.nextElementSibling;
+    expect(activePanel).toBeTruthy();
+
+    const buttons = within(activePanel).getAllByRole("button");
+    // up is disabled for index 0; down should move colA to index 1
+    const [, downButton] = buttons;
+    await user.click(downButton);
+
+    // Expect onChange called with swapped values for key "table_columns"
+    expect(baseProps.onChange).toHaveBeenCalledWith(
+      null,
+      expect.objectContaining({
+        name: "myField",
+        value: {
+          table_columns: [
+            expect.objectContaining({ name: "colB" }),
+            expect.objectContaining({ name: "colA" }),
+          ],
+        },
+      }),
+    );
+  });
+
+  test("move up moves the selected column backward and calls onChange with swapped array", async () => {
+    const rendered = render(<TableValuesForm {...baseProps} />);
+    waitForLoad(rendered);
+
+    // Expand panel 1 (colB)
+    await user.click(rendered.getByText("colB"));
+
+    // Get the three buttons from this panel (up, down, delete)
+    const activePanel = rendered
+      .getByText("colB")
+      .closest(".title")?.nextElementSibling;
+    expect(activePanel).toBeTruthy();
+
+    const buttons = within(activePanel).getAllByRole("button");
+    const [upButton] = buttons; // first button = up
+    await user.click(upButton);
+
+    // Expect swap: colB moves to index 0
+    expect(baseProps.onChange).toHaveBeenCalledWith(
+      null,
+      expect.objectContaining({
+        name: "myField",
+        value: {
+          table_columns: [
+            expect.objectContaining({ name: "colB" }),
+            expect.objectContaining({ name: "colA" }),
+          ],
+        },
+      }),
+    );
+  });
+
+  test("delete removes the selected column and calls onChange with shortened array", async () => {
+    const rendered = render(<TableValuesForm {...baseProps} />);
+    waitForLoad(rendered);
+
+    // Expand panel 0 (colA)
+    await user.click(rendered.getByText("colA"));
+
+    const activePanel = rendered
+      .getByText("colA")
+      .closest(".title")?.nextElementSibling;
+    const buttons = within(activePanel).getAllByRole("button");
+    const deleteButton = buttons[buttons.length - 1];
+
+    await user.click(deleteButton);
+
+    expect(baseProps.onChange).toHaveBeenLastCalledWith(
+      null,
+      expect.objectContaining({
+        name: "myField",
+        value: {
+          table_columns: [
+            expect.objectContaining({ name: "colB" }), // only colB remains
+          ],
+        },
+      }),
+    );
+  });
+
+  test("add column via Enter in input appends a default field with given name", async () => {
+    const rendered = render(<TableValuesForm {...baseProps} />);
+    waitForLoad(rendered);
+
+    // Input is at the bottom with an icon. We'll type and press Enter.
+    const input = rendered.getByRole("textbox");
+    await user.type(input, "newCol{enter}");
+
+    // The payload includes the new element at the end.
+    // It uses defaultFieldDefinition + overrides: name, label set to 'myField', ai_suggestion=false
+    expect(baseProps.onChange).toHaveBeenCalledWith(
+      null,
+      expect.objectContaining({
+        name: "myField",
+        value: {
+          table_columns: expect.arrayContaining([
             expect.objectContaining({
-                name: "myField",
-                value: {
-                    table_columns: expect.arrayContaining([
-                        expect.objectContaining({
-                            name: "newCol",
-                            ai_suggestion: false,
-                            label: "newCol",
-                        }),
-                    ]),
-                },
-            })
-        );
-    });
-
-    test("add column via clicking the add icon triggers same append behavior", async () => {
-        const rendered = render(<TableValuesForm {...baseProps} />);
-        waitForLoad(rendered);
-
-        // Type value first so state.fieldValue has content
-        const input = rendered.getByRole("textbox");
-        await user.type(input, "anotherCol");
-
-        // Click the icon (it's rendered inside the input as a clickable Icon)
-        // Find by role button might not exist; the icon has role="img" with class "add circle".
-        // We'll click it via its container: the input's parent .input has an i.icon inside.
-        const inputWrapper = input.closest(".input");
-        const addIcon = inputWrapper?.querySelector(".icon");
-        expect(addIcon).toBeTruthy();
-        await user.click(addIcon);
-
-        expect(baseProps.onChange).toHaveBeenCalledWith(
-            null,
+              name: "newCol",
+              ai_suggestion: false,
+              label: "newCol",
+            }),
+          ]),
+        },
+      }),
+    );
+  });
+
+  test("add column via clicking the add icon triggers same append behavior", async () => {
+    const rendered = render(<TableValuesForm {...baseProps} />);
+    waitForLoad(rendered);
+
+    // Type value first so state.fieldValue has content
+    const input = rendered.getByRole("textbox");
+    await user.type(input, "anotherCol");
+
+    // Click the icon (it's rendered inside the input as a clickable Icon)
+    // Find by role button might not exist; the icon has role="img" with class "add circle".
+    // We'll click it via its container: the input's parent .input has an i.icon inside.
+    const inputWrapper = input.closest(".input");
+    const addIcon = inputWrapper?.querySelector(".icon");
+    expect(addIcon).toBeTruthy();
+    await user.click(addIcon);
+
+    expect(baseProps.onChange).toHaveBeenCalledWith(
+      null,
+      expect.objectContaining({
+        name: "myField",
+        value: {
+          table_columns: expect.arrayContaining([
             expect.objectContaining({
-                name: "myField",
-                value: {
-                    table_columns: expect.arrayContaining([
-                        expect.objectContaining({
-                            name: "anotherCol",
-                            ai_suggestion: false,
-                            label: "anotherCol",
-                        }),
-                    ]),
-                },
-            })
-        );
-    });
+              name: "anotherCol",
+              ai_suggestion: false,
+              label: "anotherCol",
+            }),
+          ]),
+        },
+      }),
+    );
+  });
 });

package/src/templates/components/templateForm/__tests__/TemplateForm.spec.js

@@ -30,7 +30,12 @@ const validTemplate = {
   name: "Test Template",
   label: "Test Label",
   scope: "gr",
-  content: [{ name: "Group1", fields: [{ name: "field1", label: "Field 1", type: "string" }] }],
+  content: [
+    {
+      name: "Group1",
+      fields: [{ name: "field1", label: "Field 1", type: "string" }],
+    },
+  ],
 };
 
 describe("<TemplateForm />", () => {
@@ -47,8 +52,12 @@ describe("<TemplateForm />", () => {
       },
     };
     const rendered = render(
-      <TemplateForm template={validTemplate} onSubmit={jest.fn()} loading={false} />,
-      renderOpts
+      <TemplateForm
+        template={validTemplate}
+        onSubmit={jest.fn()}
+        loading={false}
+      />,
+      renderOpts,
     );
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
@@ -65,8 +74,12 @@ describe("<TemplateForm />", () => {
       },
     };
     const rendered = render(
-      <TemplateForm template={templateOtherScope} onSubmit={jest.fn()} loading={false} />,
-      renderOpts
+      <TemplateForm
+        template={templateOtherScope}
+        onSubmit={jest.fn()}
+        loading={false}
+      />,
+      renderOpts,
     );
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
@@ -81,13 +94,19 @@ describe("<TemplateForm />", () => {
       },
     };
     const rendered = render(
-      <TemplateForm template={validTemplate} onSubmit={onSubmit} loading={false} />,
-      renderOpts
+      <TemplateForm
+        template={validTemplate}
+        onSubmit={onSubmit}
+        loading={false}
+      />,
+      renderOpts,
     );
     await waitForLoad(rendered);
 
     await waitFor(() => {
-      expect(rendered.getByTestId("template-relations-form")).toBeInTheDocument();
+      expect(
+        rendered.getByTestId("template-relations-form"),
+      ).toBeInTheDocument();
     });
 
     const user = userEvent.setup({ delay: null });
@@ -120,8 +139,12 @@ describe("<TemplateForm />", () => {
       },
     };
     const rendered = render(
-      <TemplateForm template={templateWithRelations} onSubmit={onSubmit} loading={false} />,
-      renderOpts
+      <TemplateForm
+        template={templateWithRelations}
+        onSubmit={onSubmit}
+        loading={false}
+      />,
+      renderOpts,
     );
     await waitForLoad(rendered);
 
@@ -150,12 +173,18 @@ describe("<TemplateForm />", () => {
       },
     };
     const rendered = render(
-      <TemplateForm template={templateOtherScope} onSubmit={onSubmit} loading={false} />,
-      renderOpts
+      <TemplateForm
+        template={templateOtherScope}
+        onSubmit={onSubmit}
+        loading={false}
+      />,
+      renderOpts,
     );
     await waitForLoad(rendered);
 
-    expect(rendered.queryByTestId("template-relations-form")).not.toBeInTheDocument();
+    expect(
+      rendered.queryByTestId("template-relations-form"),
+    ).not.toBeInTheDocument();
 
     const user = userEvent.setup({ delay: null });
     await user.click(rendered.getByRole("button", { name: /save/i }));

package/src/templates/components/templateForm/__tests__/TemplateFormActions.spec.js

@@ -33,7 +33,7 @@ describe("<TemplateFormActions />", () => {
 
   it("matches the latest snapshot (deleting)", async () => {
     const rendered = render(
-      <TemplateFormActions {...props} templateDeleting />
+      <TemplateFormActions {...props} templateDeleting />,
     );
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();

package/src/templates/components/templateForm/__tests__/TemplateRelationsForm.spec.js

@@ -127,7 +127,9 @@ describe("<TemplateRelationsForm />", () => {
     await waitForLoad(rendered);
 
     // Just verify toggle is rendered and can be clicked without waiting for state
-    const toggle = rendered.getByLabelText(/template\.relations\.group_by_domain/i);
+    const toggle = rendered.getByLabelText(
+      /template\.relations\.group_by_domain/i,
+    );
     expect(toggle).toBeInTheDocument();
   });
 

package/src/templates/components/templateForm/__tests__/ValuesField.spec.js

@@ -43,7 +43,7 @@ describe("<ValuesField /> noPrefix", () => {
     await user.click(
       await rendered.findByRole("option", {
         name: "template.field.values.switch",
-      })
+      }),
     );
 
     expect(onChange).toHaveBeenCalledWith(
@@ -51,7 +51,7 @@ describe("<ValuesField /> noPrefix", () => {
       expect.objectContaining({
         name: subscribableField,
         value: false,
-      })
+      }),
     );
 
     expect(onChange).toHaveBeenCalledWith(
@@ -59,7 +59,7 @@ describe("<ValuesField /> noPrefix", () => {
       expect.objectContaining({
         name,
         value: { switch: null },
-      })
+      }),
     );
   });
 });
@@ -128,7 +128,7 @@ describe("<ValuesField /> fixed", () => {
 
     const user = userEvent.setup({ delay: null });
     const checkbox = rendered.container.querySelector(
-      `[name="${subscribableField}"]`
+      `[name="${subscribableField}"]`,
     );
     expect(checkbox).toBeInTheDocument();
     await user.click(checkbox);
@@ -141,12 +141,12 @@ describe("<ValuesField /> fixed", () => {
     // Test with fixed_tuple keyType
     const renderedWithFixedTuple = render({
       ...props,
-      values: { fixed_tuple: [{ value: "Foo", text: "Bar" }] }
+      values: { fixed_tuple: [{ value: "Foo", text: "Bar" }] },
     });
     await waitForLoad(renderedWithFixedTuple);
 
     const checkboxFixedTuple = renderedWithFixedTuple.getByText(
-      "template.field.subscribable"
+      "template.field.subscribable",
     );
     expect(checkboxFixedTuple).toBeInTheDocument();
     await user.click(checkboxFixedTuple);

package/src/templates/components/templateForm/__tests__/ValuesListForm.spec.js

@@ -29,13 +29,13 @@ describe("<ValuesListForm /> fixed", () => {
     expect(onChange).toHaveBeenCalledWith(["Bar", "Foo"]);
 
     const downButton = rendered.container.querySelectorAll(
-      ".chevron.circle.down"
+      ".chevron.circle.down",
     )[0];
     await user.click(downButton);
     expect(onChange).toHaveBeenCalledWith(["Foo", "Bar"]);
 
     const removeButton = rendered.container.querySelectorAll(
-      ".remove.circle.icon"
+      ".remove.circle.icon",
     )[0];
     await user.click(removeButton);
     expect(onChange).toHaveBeenCalledWith(["Bar"]);
@@ -91,10 +91,10 @@ describe("<ValuesListForm /> fixed_tuple", () => {
     const user = userEvent.setup({ delay: null });
     // Write "Test" to inputs
     const valueInput = rendered.container.querySelector(
-      "input[name='tuple_value']"
+      "input[name='tuple_value']",
     );
     const textInput = rendered.container.querySelector(
-      "input[name='tuple_text']"
+      "input[name='tuple_text']",
     );
 
     await user.type(valueInput, "test");

package/src/templates/components/templateForm/__tests__/ValuesSelector.spec.js

@@ -28,7 +28,7 @@ describe("<ValuesSelector />", () => {
 
   it("renders SwitchListForm when type is switch", async () => {
     const rendered = render(
-      <ValuesSelector {...props} values={{}} defaultValue={{}} type="switch" />
+      <ValuesSelector {...props} values={{}} defaultValue={{}} type="switch" />,
     );
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
@@ -43,7 +43,7 @@ describe("<ValuesSelector />", () => {
   it("changes value on onChange with role_users", async () => {
     const user = userEvent.setup({ delay: null });
     const rendered = render(
-      <ValuesSelector {...props} values="role" type="role_users" />
+      <ValuesSelector {...props} values="role" type="role_users" />,
     );
     await waitForLoad(rendered);
     await user.type(rendered.getByRole("textbox"), "1");
@@ -56,7 +56,7 @@ describe("<ValuesSelector />", () => {
   it("changes value on onChange with role_groups", async () => {
     const user = userEvent.setup({ delay: null });
     const rendered = render(
-      <ValuesSelector {...props} values="role" type="role_groups" />
+      <ValuesSelector {...props} values="role" type="role_groups" />,
     );
     await waitForLoad(rendered);
     await user.type(rendered.getByRole("textbox"), "1");