@truedat/qx 8.4.9 → 8.5.2

package/src/components/qualityControls/__tests__/InformationForm.spec.js

@@ -0,0 +1,342 @@
+import { render, waitForLoad } from "@truedat/test/render";
+
+const mockUseFormContext = jest.fn();
+const mockController = jest.fn();
+const mockUseIntl = jest.fn();
+const mockDefaultScoreCriteriaForMode = jest.fn();
+const mockDefaultControlPropertiesForMode = jest.fn();
+const mockSelectableDynamicForm = jest.fn();
+
+jest.mock("react-intl", () => ({
+  ...jest.requireActual("react-intl"),
+  useIntl: () => mockUseIntl(),
+}));
+
+jest.mock("react-hook-form", () => ({
+  useFormContext: () => mockUseFormContext(),
+  Controller: (props) => mockController(props),
+}));
+
+jest.mock("@truedat/core/components", () => ({
+  DomainSelector: ({ value, onChange }) => (
+    <div>
+      {`domain-selector-${value?.length || 0}`}
+      <button type="button" onClick={() => onChange?.(null, { value: [1, 2] })}>change-domain</button>
+    </div>
+  ),
+  FieldLabel: ({ children, label }) => (
+    <div>
+      <span>{label}</span>
+      {children}
+    </div>
+  ),
+}));
+
+jest.mock("semantic-ui-react", () => ({
+  Divider: () => <div>divider</div>,
+  Segment: ({ children }) => <div>{children}</div>,
+  Form: {
+    Radio: ({ label, disabled, checked, onChange }) => (
+      <div>
+        {`radio-${label}-${disabled}-${checked}`}
+        <button type="button" onClick={() => onChange?.(null, { checked: !checked })}>toggle-radio</button>
+      </div>
+    ),
+    Input: ({ value, onChange }) => (
+      <div>
+        {`input-${value}`}
+        <button type="button" onClick={() => onChange?.(null, { value: "new-value" })}>change-input</button>
+      </div>
+    ),
+    Field: ({ children }) => <div>{children}</div>,
+    Dropdown: ({ onChange, value }) => (
+      <button
+        type="button"
+        onClick={() => onChange(null, { value: "error_count" })}
+      >{`dropdown-${value}`}</button>
+    ),
+  },
+}));
+
+jest.mock("../ScoreCriteria", () => ({
+  __esModule: true,
+  default: () => <div>score-criteria</div>,
+  defaultForMode: (...args) => mockDefaultScoreCriteriaForMode(...args),
+}));
+
+jest.mock("../ControlProperties", () => ({
+  __esModule: true,
+  defaultForMode: (...args) => mockDefaultControlPropertiesForMode(...args),
+}));
+
+jest.mock("@truedat/df/components/SelectableDynamicForm", () => ({
+  __esModule: true,
+  default: (props) => mockSelectableDynamicForm(props),
+}));
+
+describe("<InformationForm />", () => {
+  const fieldNames = [
+    "active",
+    "domain_ids",
+    "name",
+    "df_type",
+    "control_mode",
+    "score_criteria",
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockUseIntl.mockReturnValue({
+      formatMessage: ({ id }) => id,
+    });
+
+    mockDefaultControlPropertiesForMode.mockReturnValue({
+      from: "control-properties",
+    });
+    mockDefaultScoreCriteriaForMode.mockReturnValue({
+      from: "score-criteria",
+    });
+  });
+
+  const setupControllers = ({
+    values = {},
+    errors = {},
+    handlers = {},
+  } = {}) => {
+    mockController.mockImplementation(({ name, render }) =>
+      render({
+        field: {
+          onBlur: jest.fn(),
+          onChange: handlers[name] || jest.fn(),
+          value: values[name],
+        },
+        fieldState: {
+          error: errors[name],
+        },
+      })
+    );
+  };
+
+  const renderComponent = (props = {}) => {
+    const InformationForm = require("../InformationForm").default;
+    const setValue = jest.fn();
+    const setStepInformation = jest.fn();
+    const setValidDfContent = jest.fn();
+    const stepInformation = props.stepInformation || {};
+
+    mockUseFormContext.mockReturnValue({
+      control: {},
+      watch: () => ({
+        dynamic_content: { previous: true },
+        domain_ids: [2],
+      }),
+      setValue,
+    });
+
+    mockSelectableDynamicForm.mockImplementation(({ onChange, name }) => (
+      <button
+        type="button"
+        onClick={() =>
+          onChange({
+            content: { new: "content" },
+            valid: [],
+          })
+        }
+      >{`selectable-df-${name}`}</button>
+    ));
+
+    const rendered = render(
+      <InformationForm
+        isModification={false}
+        setStepInformation={setStepInformation}
+        stepInformation={stepInformation}
+        setValidDfContent={setValidDfContent}
+        {...props}
+      />
+    );
+
+    return {
+      rendered,
+      setValue,
+      setStepInformation,
+      setValidDfContent,
+    };
+  };
+
+  it("renders the main fields and score criteria", async () => {
+    setupControllers({
+      values: {
+        active: true,
+        domain_ids: [2],
+        name: "quality name",
+        df_type: "template_1",
+        control_mode: "percentage",
+      },
+    });
+
+    const { rendered } = renderComponent();
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText(/radio-quality_control.form.active-false-true/i)).toBeInTheDocument();
+    expect(rendered.getByText(/domain-selector-1/i)).toBeInTheDocument();
+    expect(rendered.getByText(/input-quality name/i)).toBeInTheDocument();
+    expect(rendered.getByText(/selectable-df-template_1/i)).toBeInTheDocument();
+    expect(rendered.getByText(/score-criteria/i)).toBeInTheDocument();
+  });
+
+  it("updates step information when field names differ", () => {
+    setupControllers({
+      values: {
+        active: true,
+        domain_ids: [],
+        name: "",
+        df_type: "template_1",
+        control_mode: "percentage",
+      },
+    });
+
+    const stepInformation = { fieldNames: ["active"] };
+    const { setStepInformation } = renderComponent({ stepInformation });
+
+    expect(setStepInformation).toHaveBeenCalledWith(0, {
+      ...stepInformation,
+      fieldNames,
+    });
+  });
+
+  it("does not update step information when field names are equal", () => {
+    setupControllers({
+      values: {
+        active: true,
+        domain_ids: [],
+        name: "",
+        df_type: "template_1",
+        control_mode: "percentage",
+      },
+    });
+
+    const { setStepInformation } = renderComponent({
+      stepInformation: { fieldNames },
+    });
+
+    expect(setStepInformation).not.toHaveBeenCalled();
+  });
+
+  it("sets dynamic content and valid df flag when selectable form changes", async () => {
+    setupControllers({
+      values: {
+        active: false,
+        domain_ids: [],
+        name: "a",
+        df_type: "template_2",
+        control_mode: "deviation",
+      },
+    });
+
+    const { rendered, setValue, setValidDfContent } = renderComponent();
+
+    rendered.getByRole("button", { name: /selectable-df-template_2/i }).click();
+
+    expect(setValue).toHaveBeenCalledWith("dynamic_content", { new: "content" }, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+    expect(setValidDfContent).toHaveBeenCalledWith(true);
+  });
+
+  it("updates dependent fields when control mode changes", () => {
+    const controlModeOnChange = jest.fn();
+    setupControllers({
+      values: {
+        active: false,
+        domain_ids: [],
+        name: "a",
+        df_type: "template_3",
+        control_mode: "percentage",
+      },
+      handlers: {
+        control_mode: controlModeOnChange,
+      },
+    });
+
+    const { rendered, setValue } = renderComponent();
+
+    rendered.getByRole("button", { name: /dropdown-percentage/i }).click();
+
+    expect(controlModeOnChange).toHaveBeenCalledWith("error_count");
+    expect(mockDefaultControlPropertiesForMode).toHaveBeenCalledWith(
+      "error_count"
+    );
+    expect(mockDefaultScoreCriteriaForMode).toHaveBeenCalledWith("error_count");
+    expect(setValue).toHaveBeenCalledWith("control_properties", {
+      from: "control-properties",
+    });
+    expect(setValue).toHaveBeenCalledWith("score_criteria", {
+      from: "score-criteria",
+    });
+  });
+
+  it("active radio onChange passes checked value to field onChange", async () => {
+    const activeOnChange = jest.fn();
+    setupControllers({
+      values: {
+        active: true,
+        domain_ids: [],
+        name: "",
+        df_type: "t",
+        control_mode: "percentage",
+      },
+      handlers: { active: activeOnChange },
+    });
+
+    const { rendered } = renderComponent();
+    await waitForLoad(rendered);
+
+    rendered.getByRole("button", { name: /toggle-radio/i }).click();
+
+    expect(activeOnChange).toHaveBeenCalledWith(false);
+  });
+
+  it("domain_ids onChange passes selected value to field onChange", async () => {
+    const domainOnChange = jest.fn();
+    setupControllers({
+      values: {
+        active: false,
+        domain_ids: [1],
+        name: "",
+        df_type: "t",
+        control_mode: "percentage",
+      },
+      handlers: { domain_ids: domainOnChange },
+    });
+
+    const { rendered } = renderComponent();
+    await waitForLoad(rendered);
+
+    rendered.getByRole("button", { name: /change-domain/i }).click();
+
+    expect(domainOnChange).toHaveBeenCalledWith([1, 2]);
+  });
+
+  it("name input onChange passes value to field onChange", async () => {
+    const nameOnChange = jest.fn();
+    setupControllers({
+      values: {
+        active: false,
+        domain_ids: [],
+        name: "old",
+        df_type: "t",
+        control_mode: "percentage",
+      },
+      handlers: { name: nameOnChange },
+    });
+
+    const { rendered } = renderComponent();
+    await waitForLoad(rendered);
+
+    rendered.getByRole("button", { name: /change-input/i }).click();
+
+    expect(nameOnChange).toHaveBeenCalledWith("new-value");
+  });
+});

package/src/components/qualityControls/__tests__/NewDraftQualityControl.spec.js

@@ -1,7 +1,7 @@
 import userEvent from "@testing-library/user-event";
 import { waitFor } from "@testing-library/react";
 import { render, waitForLoad } from "@truedat/test/render";
-import { QUALITY_CONTROLS } from "@truedat/core/routes";
+import { QUALITY_CONTROLS, linkTo } from "@truedat/core/routes";
 import { SOURCE_OPTIONS_QUERY } from "@truedat/cx/sources/api/queries";
 import { REFERENCE_DATASETS_HEADERS_QUERY } from "@truedat/dd/api/queries";
 import { DOMAINS_QUERY } from "@truedat/core/api/queries";
@@ -164,7 +164,9 @@ describe("<NewDraftQualityControl />", () => {
     });
 
     // Save button only appears on step 2 (last step)
-    expect(rendered.queryByRole("button", { name: /save/ })).not.toBeInTheDocument();
+    expect(
+      rendered.queryByRole("button", { name: /save/ })
+    ).not.toBeInTheDocument();
 
     const user = userEvent.setup({ delay: null });
     // Fill step 0 (Information) - make a change to enable save later
@@ -173,7 +175,9 @@ describe("<NewDraftQualityControl />", () => {
     // Navigate to step 1
     await user.click(rendered.getByRole("button", { name: /forward/i }));
     await waitFor(() =>
-      expect(rendered.getByRole("button", { name: /back/i })).toBeInTheDocument()
+      expect(
+        rendered.getByRole("button", { name: /back/i })
+      ).toBeInTheDocument()
     );
 
     // Navigate to step 2
@@ -195,6 +199,11 @@ describe("<NewDraftQualityControl />", () => {
     await waitFor(() =>
       expect(trigger).toHaveBeenCalledWith({ quality_control: qualityControl })
     );
+    await waitFor(() =>
+      expect(mockNavigate).toHaveBeenCalledWith(
+        linkTo.QUALITY_CONTROL({ id: "9", version: "1" })
+      )
+    );
   });
 
   it("test publish submit ", async () => {
@@ -214,7 +223,9 @@ describe("<NewDraftQualityControl />", () => {
     });
 
     // Publish button only appears on step 2 (last step)
-    expect(rendered.queryByRole("button", { name: /publish/ })).not.toBeInTheDocument();
+    expect(
+      rendered.queryByRole("button", { name: /publish/ })
+    ).not.toBeInTheDocument();
 
     const user = userEvent.setup({ delay: null });
     // Fill step 0 (Information) - make a change to enable publish later
@@ -223,13 +234,17 @@ describe("<NewDraftQualityControl />", () => {
     // Navigate to step 1
     await user.click(rendered.getByRole("button", { name: /forward/i }));
     await waitFor(() =>
-      expect(rendered.getByRole("button", { name: /back/i })).toBeInTheDocument()
+      expect(
+        rendered.getByRole("button", { name: /back/i })
+      ).toBeInTheDocument()
     );
 
     // Navigate to step 2
     await user.click(rendered.getByRole("button", { name: /forward/i }));
     await waitFor(() =>
-      expect(rendered.getByRole("button", { name: /publish/ })).toBeInTheDocument()
+      expect(
+        rendered.getByRole("button", { name: /publish/ })
+      ).toBeInTheDocument()
     );
 
     await waitFor(() =>
@@ -245,6 +260,11 @@ describe("<NewDraftQualityControl />", () => {
     await waitFor(() =>
       expect(trigger).toHaveBeenCalledWith({ quality_control: qualityControl })
     );
+    await waitFor(() =>
+      expect(mockNavigate).toHaveBeenCalledWith(
+        linkTo.QUALITY_CONTROL({ id: "9", version: "1" })
+      )
+    );
   });
 
   it("when no quality control is fetched, do not render editor", async () => {

package/src/components/qualityControls/__tests__/NewQualityControl.spec.js

@@ -3,6 +3,7 @@ import { act, waitFor } from "@testing-library/react";
 import { render, waitForLoad } from "@truedat/test/render";
 import { singleTemplateMock, templateByNameMock } from "@truedat/test/mocks";
 import { DOMAINS_QUERY } from "@truedat/core/api/queries";
+import { QUALITY_CONTROLS, linkTo } from "@truedat/core/routes";
 import { SOURCE_OPTIONS_QUERY } from "@truedat/cx/sources/api/queries";
 import { REFERENCE_DATASETS_HEADERS_QUERY } from "@truedat/dd/api/queries";
 import { useQualityControlCreate } from "@truedat/qx/hooks/useQualityControls";
@@ -18,7 +19,7 @@ jest.mock("react-router", () => ({
 
 jest.mock("@truedat/qx/hooks/useQualityControls", () => ({
   useQualityControlCreate: jest.fn(() => ({
-    trigger: jest.fn(() => new Promise(() => { })),
+    trigger: jest.fn(() => new Promise(() => {})),
     isMutating: false,
   })),
 }));
@@ -128,7 +129,7 @@ describe("<NewQualityControl />", () => {
     await user.click(rendered.getByText(/confirmation.yes/i));
 
     await waitFor(() => expect(mockNavigate.mock.calls.length).toBe(1));
-    expect(mockNavigate.mock.calls[0][0]).toBe("/qualityControls");
+    expect(mockNavigate.mock.calls[0][0]).toBe(QUALITY_CONTROLS);
   });
 
   it("test save submit ", async () => {
@@ -149,7 +150,9 @@ describe("<NewQualityControl />", () => {
     });
 
     // Save button only appears on step 2 (last step)
-    expect(rendered.queryByRole("button", { name: /save/i })).not.toBeInTheDocument();
+    expect(
+      rendered.queryByRole("button", { name: /save/i })
+    ).not.toBeInTheDocument();
 
     // Fill step 0 (Information)
     // Select a domain
@@ -186,7 +189,9 @@ describe("<NewQualityControl />", () => {
     // Navigate to step 1 (Control Properties)
     await user.click(rendered.getByRole("button", { name: /forward/i }));
     await waitFor(() =>
-      expect(rendered.getByRole("button", { name: /back/i })).toBeInTheDocument()
+      expect(
+        rendered.getByRole("button", { name: /back/i })
+      ).toBeInTheDocument()
     );
 
     // Fill step 1 - Source selector is now in step 1
@@ -209,7 +214,9 @@ describe("<NewQualityControl />", () => {
     // Navigate to step 2 (Segmentation)
     await user.click(rendered.getByRole("button", { name: /forward/i }));
     await waitFor(() =>
-      expect(rendered.getByRole("button", { name: /save/i })).toBeInTheDocument()
+      expect(
+        rendered.getByRole("button", { name: /save/i })
+      ).toBeInTheDocument()
     );
 
     await waitFor(() =>
@@ -297,6 +304,11 @@ describe("<NewQualityControl />", () => {
         },
       })
     );
+    await waitFor(() =>
+      expect(mockNavigate).toHaveBeenCalledWith(
+        linkTo.QUALITY_CONTROL({ id: "9", version: "1" })
+      )
+    );
   });
 
   it("test publish submit ", async () => {
@@ -317,19 +329,34 @@ describe("<NewQualityControl />", () => {
     });
 
     // Publish button only appears on step 2 (last step)
-    expect(rendered.queryByRole("button", { name: /publish/i })).not.toBeInTheDocument();
+    expect(
+      rendered.queryByRole("button", { name: /publish/i })
+    ).not.toBeInTheDocument();
 
     // Fill step 0 (Information)
     // Fill in the 'Name' field
     await user.type(rendered.getByPlaceholderText(/name/i), "test_modified");
 
-    // Select a domain
+    // Select a domain (template loads and auto-selects when single; dynamic form appears)
     await user.click(rendered.getByText(/domain.multiple.placeholder/i));
     await user.click(rendered.getByText(/bardomain/i));
 
+    // Interact with dynamic form so setDfContent runs and validDfContent becomes true (required for Publish)
+    await waitFor(() =>
+      expect(rendered.getByPlaceholderText(/field1/i)).toBeInTheDocument()
+    );
+    await user.type(
+      rendered.getByPlaceholderText(/field1/i),
+      "field_template_modified"
+    );
+    await waitFor(() => {
+      const input = rendered.getByPlaceholderText(/field1/i);
+      expect(input).toHaveValue("field_template_modified");
+    });
+
     await user.click(
       rendered.getByRole("option", {
-        name: /quality_control.control_mode.count/i,
+        name: /quality_control.control_mode.error_count/i,
       })
     );
 
@@ -337,7 +364,7 @@ describe("<NewQualityControl />", () => {
     await waitFor(() => {
       expect(
         rendered.getByPlaceholderText(
-          /quality_control.score_criteria.count.goal/i
+          /quality_control.score_criteria.error_count.goal/i
         )
       ).toBeInTheDocument();
     });
@@ -345,14 +372,14 @@ describe("<NewQualityControl />", () => {
     // Fill in the 'Goal' field
     await user.type(
       rendered.getByPlaceholderText(
-        /quality_control.score_criteria.count.goal/i
+        /quality_control.score_criteria.error_count.goal/i
       ),
       "25"
     );
     // Fill in the 'Threshold' field
     await user.type(
       rendered.getByPlaceholderText(
-        /quality_control.score_criteria.count.maximum/i
+        /quality_control.score_criteria.error_count.maximum/i
       ),
       "50"
     );
@@ -360,7 +387,9 @@ describe("<NewQualityControl />", () => {
     // Navigate to step 1 (Control Properties)
     await user.click(rendered.getByRole("button", { name: /forward/i }));
     await waitFor(() =>
-      expect(rendered.getByRole("button", { name: /back/i })).toBeInTheDocument()
+      expect(
+        rendered.getByRole("button", { name: /back/i })
+      ).toBeInTheDocument()
     );
 
     // Fill step 1 - Source selector is now in step 1
@@ -377,28 +406,40 @@ describe("<NewQualityControl />", () => {
     );
     await user.click(rendered.getByRole("option", { name: /dataset1/i }));
 
+    await waitFor(() =>
+      expect(
+        rendered.getAllByRole("option", { name: /campo1/ }).length
+      ).toBeGreaterThan(0)
+    );
+    await act(async () => {
+      await user.click(rendered.getAllByRole("option", { name: /campo1/ })[0]);
+      await user.click(rendered.getByRole("option", { name: "eq" }));
+      await user.click(rendered.getAllByRole("option", { name: /campo2/ })[1]);
+    });
+
     // Navigate to step 2 (Segmentation)
     await user.click(rendered.getByRole("button", { name: /forward/i }));
     await waitFor(() =>
-      expect(rendered.getByRole("button", { name: /publish/i })).toBeInTheDocument()
+      expect(
+        rendered.getByRole("button", { name: /publish/i })
+      ).toBeInTheDocument()
     );
 
     await waitFor(() =>
       expect(rendered.getByRole("button", { name: /publish/i })).toBeEnabled()
     );
-    await user.click(rendered.getByText(/publish/i));
+    await user.click(rendered.getByRole("button", { name: /publish/i }));
 
     await waitFor(() =>
       expect(trigger).toHaveBeenCalledWith({
-        quality_control: {
+        quality_control: expect.objectContaining({
           name: "test_modified",
           active: true,
           domain_ids: ["2"],
           df_type: "template1",
           source_id: 181,
-          control_mode: "count",
-          dynamic_content: {},
-          control_properties: {
+          control_mode: "error_count",
+          control_properties: expect.objectContaining({
             errors_resource: {
               type: "reference_dataset",
               id: 7,
@@ -422,11 +463,16 @@ describe("<NewQualityControl />", () => {
                 ],
               },
             },
-          },
+          }),
           score_criteria: { goal: "25", maximum: "50" },
           status: "published",
-        },
+        }),
       })
     );
+    await waitFor(() =>
+      expect(mockNavigate).toHaveBeenCalledWith(
+        linkTo.QUALITY_CONTROL({ id: "9", version: "1" })
+      )
+    );
   });
 });

package/src/components/qualityControls/__tests__/QualityBadge.spec.js

@@ -109,12 +109,12 @@ describe("<QualityBadgeForSearch />", () => {
       result: 200,
       result_message: "under_threshold",
       status: "succeeded",
-      type: "count",
+      type: "error_count",
     };
 
     const rendered = render(
       <QualityBadgeForSearch
-        controlMode={"count"}
+        controlMode={"error_count"}
         criteria={scoreCriteria}
         latestScore={latestScore}
       />
@@ -154,7 +154,7 @@ describe("<QualityBadgeForSearch />", () => {
     };
     const rendered = render(
       <QualityBadgeForSearch
-        controlMode={"count"}
+        controlMode={"error_count"}
         criteria={scoreCriteria}
         latestScore={latestScore}
       />
@@ -190,4 +190,31 @@ describe("<QualityBadgeForSearch />", () => {
 
     expect(rendered.queryByText(/score.no_results/i)).toBeInTheDocument();
   });
+
+  it("matches the latest snapshot for default count mode", async () => {
+    const scoreCriteria = {
+      goal: 30,
+      maximum: 40,
+    };
+    const latestScore = {
+      executed_at: "2025-03-25T05:34:21.438113Z",
+      count_content: {
+        count: 20,
+      },
+      result: 20,
+      result_message: "under_goal",
+      status: "succeeded",
+      type: "count",
+    };
+
+    const rendered = render(
+      <QualityBadgeForSearch
+        controlMode={"count"}
+        criteria={scoreCriteria}
+        latestScore={latestScore}
+      />
+    );
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
 });