@truedat/qx 8.12.2 → 8.12.5

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();
@@ -280,133 +287,25 @@ describe("<QualityControlEditor />", () => {
     );
   });
 
-  it("test fill form for creation", async () => {
+  it("allows toggling active when creating a quality control", async () => {
     const user = userEvent.setup({ delay: null });
-    const newProps = {
-      ...props,
-      value: undefined,
-    };
     const rendered = render(
       <QualityControlEditor
-        {...newProps}
+        {...props}
         value={defaultQualityControl}
         isModification={false}
       />,
       renderOpts,
     );
     await waitForLoad(rendered);
-    // Wait for async state updates from GraphQL queries to complete
-    await waitFor(() => {
-      expect(rendered.getByPlaceholderText(/name/i)).toBeInTheDocument();
-    });
 
-    // Save/Publish buttons only appear on step 2
-    await waitFor(() => {
-      expect(
-        rendered.queryByRole("button", { name: /publish/i }),
-      ).not.toBeInTheDocument();
-      expect(
-        rendered.queryByRole("button", { name: /save/i }),
-      ).not.toBeInTheDocument();
-    });
-
-    // Fill step 0 (Information)
-    await user.click(rendered.getByText(/enable/i));
-    await user.type(rendered.getByPlaceholderText(/name/i), "test_modified");
-
-    await user.type(
-      rendered.getByPlaceholderText(/field1/i),
-      "field_template_modified",
-    );
-    // Wait for SelectableDynamicForm to finish updating state (prevents act() warning)
-    await waitFor(
-      () => {
-        const input = rendered.getByPlaceholderText(/field1/i);
-        expect(input).toHaveValue("field_template_modified");
-      },
-      { timeout: 2000 },
-    );
-
-    await user.click(rendered.getByText(/select domains/i));
-    await user.click(rendered.getByText(/bardomain/i));
-
-    await user.click(
-      rendered.getByRole("option", {
-        name: /quality_control.control_mode.error_count/i,
-      }),
+    const activeInput = rendered.container.querySelector(
+      'input[name="active"]',
     );
+    expect(activeInput).toBeChecked();
 
-    await user.type(
-      rendered.getByPlaceholderText(
-        /quality_control.score_criteria.error_count.goal/i,
-      ),
-      "25",
-    );
-    await user.type(
-      rendered.getByPlaceholderText(
-        /quality_control.score_criteria.error_count.maximum/i,
-      ),
-      "50",
-    );
-
-    // 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(),
-    );
-
-    // Fill step 1 - Source selector is now in step 1
-    await user.click(rendered.getByText(/select source/i));
-    await user.click(
-      rendered.getByRole("option", { name: /external_source_id/i }),
-    );
-
-    await user.click(rendered.getByText(/resource type/i));
-    await user.click(rendered.getByText(/reference datasets/i));
-    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 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 waitFor(() =>
-      expect(rendered.getByRole("button", { name: /forward/i })).toBeEnabled(),
-    );
-
-    // Navigate to step 2 (Segmentation)
-    await user.click(rendered.getByRole("button", { name: /forward/i }));
-
-    await waitFor(() =>
-      expect(
-        rendered.queryByRole("button", { name: /forward/i }),
-      ).not.toBeInTheDocument(),
-    );
-
-    await waitFor(() =>
-      expect(
-        rendered.getByRole("button", { name: /publish/i }),
-      ).toBeInTheDocument(),
-    );
-
-    await waitFor(() =>
-      expect(rendered.getByRole("button", { name: /publish/i })).toBeEnabled(),
-    );
+    await user.click(rendered.getByText(/enable/i));
+    expect(activeInput).not.toBeChecked();
   });
 
   it("test fill form for edition", async () => {

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));
   });