@truedat/qx 8.12.2 → 8.12.4

package/src/components/functions/__tests__/__snapshots__/FunctionEditor.spec.js.snap

@@ -363,41 +363,45 @@ exports[`<FunctionEditor /> matches snapshot without onDelete 1`] = `
                       style="pointer-events: all;"
                     >
                       <div
-                        class="ui header"
+                        class="text"
                       >
                         <div
-                          class="flex-center"
+                          class="ui header"
                         >
-                          <div>
-                            eq
-                          </div>
                           <div
-                            class="function-params-label"
+                            class="flex-center"
                           >
-                            <div
-                              class="ui grey label"
-                            >
-                              <i
-                                aria-hidden="true"
-                                class="question circle outline icon"
-                              />
-                              arg1
+                            <div>
+                              eq
                             </div>
                             <div
-                              class="ui grey label"
+                              class="function-params-label"
                             >
-                              <i
-                                aria-hidden="true"
-                                class="question circle outline icon"
-                              />
-                              arg2
+                              <div
+                                class="ui grey label"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="question circle outline icon"
+                                />
+                                arg1
+                              </div>
+                              <div
+                                class="ui grey label"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="question circle outline icon"
+                                />
+                                arg2
+                              </div>
                             </div>
                           </div>
                         </div>
+                        <div
+                          class="sub header"
+                        />
                       </div>
-                      <div
-                        class="sub header"
-                      />
                     </div>
                   </div>
                 </div>
@@ -798,41 +802,45 @@ exports[`<FunctionEditor /> matches the latest snapshot 1`] = `
                       style="pointer-events: all;"
                     >
                       <div
-                        class="ui header"
+                        class="text"
                       >
                         <div
-                          class="flex-center"
+                          class="ui header"
                         >
-                          <div>
-                            eq
-                          </div>
                           <div
-                            class="function-params-label"
+                            class="flex-center"
                           >
-                            <div
-                              class="ui grey label"
-                            >
-                              <i
-                                aria-hidden="true"
-                                class="question circle outline icon"
-                              />
-                              arg1
+                            <div>
+                              eq
                             </div>
                             <div
-                              class="ui grey label"
+                              class="function-params-label"
                             >
-                              <i
-                                aria-hidden="true"
-                                class="question circle outline icon"
-                              />
-                              arg2
+                              <div
+                                class="ui grey label"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="question circle outline icon"
+                                />
+                                arg1
+                              </div>
+                              <div
+                                class="ui grey label"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="question circle outline icon"
+                                />
+                                arg2
+                              </div>
                             </div>
                           </div>
                         </div>
+                        <div
+                          class="sub header"
+                        />
                       </div>
-                      <div
-                        class="sub header"
-                      />
                     </div>
                   </div>
                 </div>
@@ -1627,41 +1635,45 @@ exports[`<FunctionEditor /> test delete button 1`] = `
                       style="pointer-events: all;"
                     >
                       <div
-                        class="ui header"
+                        class="text"
                       >
                         <div
-                          class="flex-center"
+                          class="ui header"
                         >
-                          <div>
-                            eq
-                          </div>
                           <div
-                            class="function-params-label"
+                            class="flex-center"
                           >
-                            <div
-                              class="ui grey label"
-                            >
-                              <i
-                                aria-hidden="true"
-                                class="question circle outline icon"
-                              />
-                              arg1
+                            <div>
+                              eq
                             </div>
                             <div
-                              class="ui grey label"
+                              class="function-params-label"
                             >
-                              <i
-                                aria-hidden="true"
-                                class="question circle outline icon"
-                              />
-                              arg2
+                              <div
+                                class="ui grey label"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="question circle outline icon"
+                                />
+                                arg1
+                              </div>
+                              <div
+                                class="ui grey label"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="question circle outline icon"
+                                />
+                                arg2
+                              </div>
                             </div>
                           </div>
                         </div>
+                        <div
+                          class="sub header"
+                        />
                       </div>
-                      <div
-                        class="sub header"
-                      />
                     </div>
                   </div>
                 </div>

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

@@ -6,6 +6,10 @@ import { DOMAINS_QUERY } from "@truedat/core/api/queries";
 import { 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";
+// Load the editor's lazy modules before Jest starts timing the first test.
+import "@truedat/df/components/SelectableDynamicForm";
+import "@truedat/df/components/DynamicFormViewer";
+import "@truedat/cx/sources/components/SourceSelector";
 import {
   useQualityControlUpdateDraft,
   useQualityControl,
@@ -17,6 +21,8 @@ import {
   qualityControlData,
 } from "./__fixtures__/qualityControlHelper";
 
+beforeEach(() => jest.useRealTimers());
+
 const mockNavigate = jest.fn();
 
 jest.mock("react-router", () => ({
@@ -122,7 +128,7 @@ const renderOpts = {
 describe("<EditQualityControl />", () => {
   it("matches the latest snapshot", async () => {
     const rendered = render(<EditQualityControl />, renderOpts);
-    await waitForLoad(rendered);
+    await waitForLoad(rendered, /loading/i, { timeout: 5000 });
     // Wait for async state updates from GraphQL queries to complete
     await waitFor(() => {
       expect(rendered.getByPlaceholderText(/name/i)).toBeInTheDocument();

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

@@ -1,11 +1,15 @@
 import userEvent from "@testing-library/user-event";
-import { act, waitFor } from "@testing-library/react";
+import { 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";
+// Load the editor's lazy modules before Jest starts timing the first test.
+import "@truedat/df/components/SelectableDynamicForm";
+import "@truedat/df/components/DynamicFormViewer";
+import "@truedat/cx/sources/components/SourceSelector";
 import { useQualityControlCreate } from "@truedat/qx/hooks/useQualityControls";
 import NewQualityControl from "../NewQualityControl";
 import { sources, domains } from "./__fixtures__/qualityControlHelper";
@@ -107,13 +111,19 @@ const renderOpts = {
 };
 
 describe("<NewQualityControl />", () => {
+  beforeEach(() => jest.useRealTimers());
+
   it("matches the latest snapshot", async () => {
     const rendered = render(<NewQualityControl />, renderOpts);
-    await waitForLoad(rendered);
+    await waitForLoad(rendered, /loading/i, { timeout: 5000 });
     // Wait for async state updates from GraphQL queries to complete
     await waitFor(() => {
       expect(rendered.getByPlaceholderText(/name/i)).toBeInTheDocument();
     });
+    await rendered.findByPlaceholderText("field1", undefined, {
+      timeout: 5000,
+    });
+    await waitForLoad(rendered, /loading/i, { timeout: 5000 });
     expect(rendered.container).toMatchSnapshot();
   });
 
@@ -206,14 +216,10 @@ describe("<NewQualityControl />", () => {
     await user.click(rendered.getByText(/reference_dataset/i));
     await user.click(rendered.getByRole("option", { name: /dataset1/i }));
 
-    await act(async () => {
-      await user.click(rendered.getAllByRole("option", { name: /campo1/ })[0]);
-      await user.click(
-        rendered.getByText("expression.condition.selectFunction"),
-      );
-      await user.click(rendered.getByRole("option", { name: "eq" }));
-      await user.click(rendered.getAllByRole("option", { name: /campo2/ })[1]);
-    });
+    await user.click(rendered.getAllByRole("option", { name: /campo1/ })[0]);
+    await user.click(rendered.getByText("expression.condition.selectFunction"));
+    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 }));
@@ -415,11 +421,9 @@ describe("<NewQualityControl />", () => {
         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]);
-    });
+    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 }));

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

@@ -4,6 +4,8 @@ import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import userEvent from "@testing-library/user-event";
 import { templateByNameMock } from "@truedat/test/mocks";
 import { DOMAINS_QUERY } from "@truedat/core/api/queries";
+// Load the summary's lazy module before Jest starts timing the first test.
+import "@truedat/df/components/DynamicFormViewer";
 import QualityControl from "../QualityControl";
 import { qualityControlData } from "./__fixtures__/qualityControlHelper";
 
@@ -42,6 +44,8 @@ const renderOpts = {
 };
 
 describe("<QualityControl />", () => {
+  beforeEach(() => jest.useRealTimers());
+
   it("matches the latest snapshot", async () => {
     const context = {
       qualityControl: qualityControlData(),
@@ -53,7 +57,7 @@ describe("<QualityControl />", () => {
       </TestFormWrapper>,
       renderOpts,
     );
-    await waitForLoad(rendered);
+    await waitForLoad(rendered, /loading/i, { timeout: 5000 });
     expect(rendered.container).toMatchSnapshot();
   });
 
@@ -72,6 +76,7 @@ describe("<QualityControl />", () => {
   });
 
   it("render popup when edit domain", async () => {
+    const user = userEvent.setup({ delay: null });
     const context = {
       qualityControl: qualityControlData(),
       actions: ["update_main", "update_domain"],
@@ -87,12 +92,12 @@ describe("<QualityControl />", () => {
     const pencilButton = rendered.container.querySelector(
       ".pencil.alternate.icon",
     );
-    userEvent.click(pencilButton);
+    await user.click(pencilButton);
 
     await waitFor(() => {
       expect(rendered.queryByText(/foodomain/i)).toBeInTheDocument();
     });
-    userEvent.click(pencilButton);
+    await user.click(pencilButton);
     await waitFor(() => {
       expect(rendered.queryByText(/foodomain/i)).not.toBeInTheDocument();
     });

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

@@ -79,6 +79,8 @@ const renderOpts = {
 };
 
 describe("<QualityControlActions />", () => {
+  beforeEach(() => jest.useRealTimers());
+
   it("matches the latest snapshot with actions for published status", async () => {
     const rendered = render(
       <TestFormWrapper context={{ ...context }}>

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

@@ -1,4 +1,4 @@
-import { act, waitFor, fireEvent } from "@testing-library/react";
+import { waitFor, fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { render, waitForLoad } from "@truedat/test/render";
 import { DOMAINS_QUERY } from "@truedat/core/api/queries";
@@ -6,6 +6,11 @@ import { singleTemplateMock, templateByNameMock } from "@truedat/test/mocks";
 import { REFERENCE_DATASETS_HEADERS_QUERY } from "@truedat/dd/api/queries";
 import { SOURCE_OPTIONS_QUERY } from "@truedat/cx/sources/api/queries";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+// Evaluate the editor's lazy modules before the first test starts. Jest's
+// coverage transform can otherwise consume the waitForLoad timeout in CI.
+import "@truedat/df/components/SelectableDynamicForm";
+import "@truedat/df/components/DynamicFormViewer";
+import "@truedat/cx/sources/components/SourceSelector";
 import { defaultQualityControl } from "../NewQualityControl";
 import QualityControlEditor from "../QualityControlEditor";
 import {
@@ -109,9 +114,11 @@ const props = {
 };
 
 describe("<QualityControlEditor />", () => {
+  beforeEach(() => jest.useRealTimers());
+
   it("matches the latest snapshot for edition", async () => {
     const rendered = render(<QualityControlEditor {...props} />, renderOpts);
-    await waitForLoad(rendered);
+    await waitForLoad(rendered, /loading/i, { timeout: 5000 });
     // Wait for async state updates from GraphQL queries to complete
     await waitFor(() => {
       expect(rendered.getByPlaceholderText(/name/i)).toBeInTheDocument();
@@ -373,17 +380,13 @@ describe("<QualityControlEditor />", () => {
       ).toBeGreaterThan(0),
     );
 
-    await act(async () => {
-      await user.click(rendered.getAllByRole("option", { name: /campo1/ })[0]);
-    });
+    await user.click(rendered.getAllByRole("option", { name: /campo1/ })[0]);
     await waitFor(() =>
       expect(rendered.getByText(/select function/i)).toBeInTheDocument(),
     );
-    await act(async () => {
-      await user.click(rendered.getByText(/select function/i));
-      await user.click(rendered.getByText(/eq/i));
-      await user.click(rendered.getAllByRole("option", { name: /campo2/ })[1]);
-    });
+    await user.click(rendered.getByText(/select function/i));
+    await user.click(rendered.getByText(/eq/i));
+    await user.click(rendered.getAllByRole("option", { name: /campo2/ })[1]);
 
     await waitFor(() =>
       expect(rendered.getByRole("button", { name: /forward/i })).toBeEnabled(),

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

@@ -2,6 +2,7 @@ import React from "react";
 import { render } from "@truedat/test/render";
 import { messages as baseMessages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import { useEvents } from "@truedat/audit/hooks/useEvents";
+import { TEMPLATE_QUERY } from "@truedat/core/api/queries";
 import QxContext from "../../QxContext";
 import QualityControlEvents from "../QualityControlEvents";
 
@@ -28,7 +29,20 @@ const messages = {
   },
 };
 
-const renderOpts = { messages };
+const renderOpts = {
+  messages,
+  mocks: [
+    {
+      request: {
+        query: TEMPLATE_QUERY,
+        variables: { name: "template1", domainIds: [2] },
+      },
+      result: { data: { template: null } },
+    },
+  ],
+};
+
+const qualityControl = { id: "qc-1", df_type: "template1", domain_ids: [2] };
 
 afterEach(() => {
   jest.clearAllMocks();
@@ -52,7 +66,7 @@ describe("<QualityControlEvents />", () => {
     });
 
     const contextValue = {
-      qualityControl: { id: "qc-1" },
+      qualityControl,
       loading: false,
     };
 
@@ -80,7 +94,7 @@ describe("<QualityControlEvents />", () => {
     });
 
     const contextValue = {
-      qualityControl: { id: "qc-1" },
+      qualityControl,
       loading: false,
     };
 
@@ -102,7 +116,7 @@ describe("<QualityControlEvents />", () => {
     });
 
     const contextValue = {
-      qualityControl: { id: "qc-1" },
+      qualityControl,
       loading: true,
     };
 

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

@@ -1,7 +1,6 @@
 import userEvent from "@testing-library/user-event";
 import { within } from "@testing-library/dom";
 import { render, waitForLoad } from "@truedat/test/render";
-import { act } from "@testing-library/react";
 import { singleTemplateMock } from "@truedat/test/mocks";
 import SearchContext from "@truedat/core/search/SearchContext";
 import { useScoreGroupCreate } from "@truedat/qx/hooks/useScoreGroups";
@@ -39,6 +38,8 @@ const searchProps = {
 };
 
 describe("<QualityControls />", () => {
+  beforeEach(() => jest.useRealTimers());
+
   it("matches the latest snapshot", async () => {
     const rendered = render(
       <SearchContext value={searchProps}>
@@ -133,11 +134,9 @@ describe("<QualityControls />", () => {
       rendered.getByRole("button", { name: /actions.do_execution/i }),
     ).toBeEnabled();
 
-    await act(async () => {
-      await user.click(
-        rendered.getByRole("button", { name: /actions.do_execution/i }),
-      );
-    });
+    await user.click(
+      rendered.getByRole("button", { name: /actions.do_execution/i }),
+    );
 
     await waitForLoad(rendered);
 
@@ -188,11 +187,9 @@ describe("<QualityControls />", () => {
       rendered.container.querySelector("#row-checkbox-1").parentElement,
     ).toHaveClass("checked");
 
-    await act(async () => {
-      await user.click(
-        rendered.getByRole("button", { name: /actions.do_execution/i }),
-      );
-    });
+    await user.click(
+      rendered.getByRole("button", { name: /actions.do_execution/i }),
+    );
 
     await waitForLoad(rendered);
 

package/src/components/scores/__tests__/ScoreGroupPopup.spec.js

@@ -11,6 +11,8 @@ const renderOpts = {
 };
 
 describe("<ScoreGroupPopup />", () => {
+  beforeEach(() => jest.useRealTimers());
+
   const onSubmit = jest.fn();
   const props = { count: 1, onSubmit, loading: false };
 
@@ -41,16 +43,17 @@ describe("<ScoreGroupPopup />", () => {
   });
 
   it("should display execution form on button click", async () => {
+    const user = userEvent.setup();
     const onSubmit = jest.fn();
     const props = { count: 1, onSubmit, loading: false };
     const { getByRole } = render(<ScoreGroupPopup {...props} />, renderOpts);
-    userEvent.click(getByRole("button"));
+    await user.click(getByRole("button"));
 
     await waitFor(() => {
       expect(getByRole("button", { name: /Create/i })).toBeEnabled();
     });
 
-    userEvent.click(getByRole("button", { name: /Create/i }));
+    await user.click(getByRole("button", { name: /Create/i }));
 
     await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
   });

package/src/components/selectors/__tests__/getQualityControlScoresColumns.spec.js

@@ -1,6 +1,8 @@
 import _ from "lodash/fp";
+import { isValidElement } from "react";
 import { render } from "@truedat/test/render";
 import { scoreData } from "@truedat/qx/components/scores/__tests__/__fixtures__/scoreHelper";
+import QualityBadge from "@truedat/qx/components/qualityControls/QualityBadge";
 import { defaultQualityControlScoresColumns } from "../getQualityControlScoresColumns";
 import { getQualityControlScoresColumns } from "../getQualityControlScoresColumns";
 
@@ -40,4 +42,17 @@ describe("selectors: getQualityControlScoresColumns", () => {
 
     expect(rendered.container).toHaveTextContent("score.status.PENDING");
   });
+
+  it("renders the quality badge as a component", () => {
+    const score = scoreData();
+    const qualityColumn = defaultQualityControlScoresColumns.find(
+      ({ name }) => name === "quality",
+    );
+
+    const badge = qualityColumn.fieldDecorator({ score });
+
+    expect(isValidElement(badge)).toBe(true);
+    expect(badge.type).toBe(QualityBadge);
+    expect(badge.props.score).toBe(score);
+  });
 });

package/src/components/selectors/getQualityControlScoresColumns.js

@@ -40,7 +40,7 @@ export const defaultQualityControlScoresColumns = [
   {
     name: "quality",
     fieldSelector: (score) => ({ score }),
-    fieldDecorator: QualityBadge,
+    fieldDecorator: ({ score }) => <QualityBadge score={score} />,
   },
   {
     name: "control_mode",