@truedat/qx 7.5.7 → 7.5.10

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

@@ -1,9 +1,9 @@
-import React from "react";
-import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
 import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import { REFERENCE_DATASETS_HEADERS_QUERY } from "@truedat/dd/api/queries";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
-import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import ControlProperties, { defaultForMode } from "../ControlProperties";
 
 const dataSet = {
@@ -11,6 +11,7 @@ const dataSet = {
   name: "dataset1",
   headers: ["campo1", "campo2"],
 };
+
 const referenceDatasetsMock = {
   request: { query: REFERENCE_DATASETS_HEADERS_QUERY },
   result: { data: { referenceDatasets: [dataSet], loading: false } },
@@ -19,7 +20,6 @@ const referenceDatasetsMock = {
 const renderOpts = {
   mocks: [referenceDatasetsMock],
   messages,
-  fallback: "lazy",
 };
 
 const defaultValues = {
@@ -35,40 +35,35 @@ const defaultValues = {
 
 describe("<ControlProperties />", () => {
   it("matches the latest snapshot with ratio", async () => {
-    const { container } = render(
+    const rendered = render(
       <TestFormWrapper defaultValues={defaultValues}>
         <ControlProperties />
       </TestFormWrapper>,
       renderOpts
     );
-
-    await waitFor(() =>
-      expect(container.querySelector(".loader")).not.toBeInTheDocument()
-    );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot with error count", async () => {
-    const errorCountDefaultValues = {
+  it("matches the latest snapshot with count", async () => {
+    const countDefaultValues = {
       ...defaultValues,
-      control_mode: "error_count",
+      control_mode: "count",
     };
-    const { container } = render(
-      <TestFormWrapper defaultValues={errorCountDefaultValues}>
+    const rendered = render(
+      <TestFormWrapper defaultValues={countDefaultValues}>
         <ControlProperties />
       </TestFormWrapper>,
       renderOpts
     );
-    await waitFor(() =>
-      expect(container.querySelector(".loader")).not.toBeInTheDocument()
-    );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });
 
 describe("defaultForMode", () => {
-  it("returns correct default for 'error_count' control mode", () => {
-    const result = defaultForMode("error_count");
+  it("returns correct default for 'count' control mode", () => {
+    const result = defaultForMode("count");
     expect(result).toEqual({ errors_resource: null });
   });
 

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
@@ -20,10 +19,10 @@ describe("<ControlPropertiesView />", () => {
     expect(container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot for error count", async () => {
-    const errorCountQualityControl = {
+  it("matches the latest snapshot for count", async () => {
+    const countQualityControl = {
       ...qualityControl,
-      control_mode: "error_count",
+      control_mode: "count",
       control_properties: {
         errors_resource: {
           id: 11859650,
@@ -33,7 +32,7 @@ describe("<ControlPropertiesView />", () => {
     };
     const { container } = render(
       <TestFormWrapper>
-        <ControlPropertiesView qualityControl={errorCountQualityControl} />
+        <ControlPropertiesView qualityControl={countQualityControl} />
       </TestFormWrapper>,
       renderOpts
     );
@@ -58,7 +57,7 @@ describe("<ControlPropertiesView />", () => {
         <ControlPropertiesView
           qualityControl={{
             ...qualityControl,
-            control_mode: "error_count",
+            control_mode: "count",
             control_properties: { errors_resource: null },
           }}
         />

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

@@ -1,16 +1,14 @@
-import React from "react";
-import { render } from "@truedat/test/render";
-import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
+import { singleTemplateMock } from "@truedat/test/mocks";
+import { DOMAINS_QUERY } from "@truedat/core/api/queries";
 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";
-import { singleTemplateMock } from "@truedat/test/mocks";
 import {
   useQualityControlUpdateDraft,
   useQualityControl,
 } from "@truedat/qx/hooks/useQualityControls";
-import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import EditQualityControl from "../EditQualityControl";
 import {
   sources,
@@ -18,12 +16,12 @@ import {
   qualityControlData,
 } from "./__fixtures__/qualityControlHelper";
 
-const mockHistory = { push: jest.fn() };
+const mockNavigate = jest.fn();
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useParams: () => ({ id: "8", version: "1" }),
-  useHistory: () => mockHistory,
+  useNavigate: () => mockNavigate,
 }));
 
 jest.mock("@truedat/qx/hooks/useQualityControls", () => {
@@ -49,17 +47,7 @@ jest.mock("@truedat/qx/hooks/useQualityControls", () => {
   };
 });
 
-jest.mock("@truedat/core/hooks/useUserFilters", () => {
-  const originalModule = jest.requireActual(
-    "@truedat/core/hooks/useUserFilters"
-  );
-
-  return {
-    __esModule: true,
-    ...originalModule,
-    useUserFilters: jest.fn(() => ({})),
-  };
-});
+jest.mock("@truedat/core/hooks/useUserFilters");
 jest.mock("@truedat/qx/hooks/useFunctions", () => {
   const originalModule = jest.requireActual("@truedat/qx/hooks/useFunctions");
 
@@ -124,23 +112,13 @@ const renderOpts = {
     publishDomainsMock,
     createDomainsMock,
   ],
-  messages,
-  fallback: "loading",
 };
 
 describe("<EditQualityControl />", () => {
   it("matches the latest snapshot", async () => {
-    const { container, queryByText } = render(
-      <EditQualityControl />,
-      renderOpts
-    );
-    await waitFor(() =>
-      expect(queryByText(/loading/i)).not.toBeInTheDocument()
-    );
-    await waitFor(() =>
-      expect(container.querySelector(".loader")).not.toBeInTheDocument()
-    );
-    expect(container).toMatchSnapshot();
+    const rendered = render(<EditQualityControl />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot with empty qualityControl", async () => {
@@ -149,34 +127,18 @@ describe("<EditQualityControl />", () => {
       loading: false,
     }));
 
-    const { container, queryByText } = render(
-      <EditQualityControl />,
-      renderOpts
-    );
-    await waitFor(() =>
-      expect(queryByText(/loading/i)).not.toBeInTheDocument()
-    );
-    await waitFor(() =>
-      expect(container.querySelector(".loader")).not.toBeInTheDocument()
-    );
-    expect(container).toMatchSnapshot();
+    const rendered = render(<EditQualityControl />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("navigates to qulity controls when cancel button is cliked", async () => {
-    const { container, getByText, queryByText } = render(
-      <EditQualityControl />,
-      renderOpts
-    );
-    await waitFor(() =>
-      expect(queryByText(/loading/i)).not.toBeInTheDocument()
-    );
-    await waitFor(() =>
-      expect(container.querySelector(".loader")).not.toBeInTheDocument()
-    );
-    userEvent.click(getByText(/Cancel/));
+  it("navigates to quality controls when cancel button is cliked", async () => {
+    const rendered = render(<EditQualityControl />, renderOpts);
+    await waitForLoad(rendered);
+    const user = userEvent.setup({ delay: null });
+    await user.click(rendered.getByText(/cancel/i));
 
-    expect(mockHistory.push.mock.calls.length).toBe(1);
-    expect(mockHistory.push.mock.calls[0][0]).toBe("/qualityControls");
+    expect(mockNavigate).toHaveBeenCalledWith("/qualityControls");
   });
 
   it("test save submit ", async () => {
@@ -188,24 +150,20 @@ describe("<EditQualityControl />", () => {
       trigger,
     }));
 
-    const { getByText, getByPlaceholderText, queryByText, getByRole } = render(
-      <EditQualityControl />,
-      renderOpts
-    );
+    const rendered = render(<EditQualityControl />, renderOpts);
+    await waitForLoad(rendered);
 
     await waitFor(() =>
-      expect(queryByText(/loading/i)).not.toBeInTheDocument()
-    );
-    await waitFor(() =>
-      expect(getByRole("button", { name: /Save/ })).toBeDisabled()
+      expect(rendered.getByRole("button", { name: /save/i })).toBeDisabled()
     );
 
-    userEvent.type(getByPlaceholderText("Name"), "_modified");
+    const user = userEvent.setup({ delay: null });
+    await user.type(rendered.getByPlaceholderText(/name/i), "_modified");
 
     await waitFor(() =>
-      expect(getByRole("button", { name: /Save/ })).toBeEnabled()
+      expect(rendered.getByRole("button", { name: /save/i })).toBeEnabled()
     );
-    userEvent.click(getByText(/Save/));
+    await user.click(rendered.getByText(/save/i));
 
     const qualityControl = qualityControlData({
       versions: [],

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

@@ -1,6 +1,5 @@
-import React from "react";
-import { render } from "@truedat/test/render";
 import { fireEvent } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import IconPopup from "../IconPopup";
 
@@ -15,19 +14,19 @@ const props = {
 };
 
 describe("<IconPopup />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(<IconPopup {...props} />, renderOpts);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<IconPopup {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("show popup information with mouse over", async () => {
-    const { container, findByText } = render(
-      <IconPopup {...props} />,
-      renderOpts
-    );
-    const icon = container.querySelector(".red.circle.icon");
+    const rendered = render(<IconPopup {...props} />, renderOpts);
+    await waitForLoad(rendered);
+
+    const icon = rendered.container.querySelector(".red.circle.icon");
     fireEvent.mouseOver(icon);
 
-    expect(await findByText("Result criteria")).toBeInTheDocument();
+    expect(await rendered.findByText(/result criteria/i)).toBeInTheDocument();
   });
 });

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

@@ -1,13 +1,11 @@
-import React from "react";
-import { render } from "@truedat/test/render";
-import { waitFor } from "@testing-library/react";
 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 { 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";
 import { singleTemplateMock } from "@truedat/test/mocks";
-import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import {
   useQualityControlCreateDraft,
   useQualityControl,
@@ -19,25 +17,15 @@ import {
   qualityControlData,
 } from "./__fixtures__/qualityControlHelper";
 
-const mockHistory = { push: jest.fn() };
+const mockNavigate = jest.fn();
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useParams: () => ({ id: "8", version: "1" }),
-  useHistory: () => mockHistory,
+  useNavigate: () => mockNavigate,
 }));
 
-jest.mock("@truedat/core/hooks/useUserFilters", () => {
-  const originalModule = jest.requireActual(
-    "@truedat/core/hooks/useUserFilters"
-  );
-
-  return {
-    __esModule: true,
-    ...originalModule,
-    useUserFilters: jest.fn(() => ({})),
-  };
-});
+jest.mock("@truedat/core/hooks/useUserFilters");
 jest.mock("@truedat/qx/hooks/useFunctions", () => {
   const originalModule = jest.requireActual("@truedat/qx/hooks/useFunctions");
 
@@ -125,42 +113,26 @@ const renderOpts = {
     publishDomainsMock,
     createDomainsMock,
   ],
-  messages,
-  fallback: "loading",
 };
 
 describe("<NewDraftQualityControl />", () => {
   it("matches the latest snapshot", async () => {
-    const { container, queryByText } = render(
-      <NewDraftQualityControl />,
-      renderOpts
-    );
-
-    await waitFor(() =>
-      expect(queryByText(/loading/i)).not.toBeInTheDocument()
-    );
-    await waitFor(() =>
-      expect(container.querySelector(".loader")).not.toBeInTheDocument()
-    );
-    expect(container).toMatchSnapshot();
+    const rendered = render(<NewDraftQualityControl />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("navigates to quality controls when cancel button is cliked", async () => {
-    const { getByText, queryByText } = render(
-      <NewDraftQualityControl />,
-      renderOpts
-    );
-    await waitFor(() =>
-      expect(queryByText(/loading/i)).not.toBeInTheDocument()
-    );
+    const rendered = render(<NewDraftQualityControl />, renderOpts);
+    await waitForLoad(rendered);
 
-    const cancelButton = getByText(/Cancel/i);
+    const cancelButton = rendered.getByText(/cancel/i);
     expect(cancelButton).toBeInTheDocument();
 
-    userEvent.click(cancelButton);
+    const user = userEvent.setup({ delay: null });
+    await user.click(cancelButton);
 
-    expect(mockHistory.push.mock.calls.length).toBe(1);
-    expect(mockHistory.push.mock.calls[0][0]).toBe(QUALITY_CONTROLS);
+    expect(mockNavigate).toHaveBeenCalledWith(QUALITY_CONTROLS);
   });
 
   it("test save submit ", async () => {
@@ -172,24 +144,20 @@ describe("<NewDraftQualityControl />", () => {
       trigger,
     }));
 
-    const { getByText, getByPlaceholderText, queryByText, getByRole } = render(
-      <NewDraftQualityControl />,
-      renderOpts
-    );
+    const rendered = render(<NewDraftQualityControl />, renderOpts);
+    await waitForLoad(rendered);
 
     await waitFor(() =>
-      expect(queryByText(/loading/i)).not.toBeInTheDocument()
-    );
-    await waitFor(() =>
-      expect(getByRole("button", { name: /Save/ })).toBeDisabled()
+      expect(rendered.getByRole("button", { name: /save/ })).toBeDisabled()
     );
 
-    userEvent.type(getByPlaceholderText("Name"), "_modified");
+    const user = userEvent.setup({ delay: null });
+    await user.type(rendered.getByPlaceholderText(/name/i), "_modified");
 
     await waitFor(() =>
-      expect(getByRole("button", { name: /Save/ })).toBeEnabled()
+      expect(rendered.getByRole("button", { name: /save/ })).toBeEnabled()
     );
-    userEvent.click(getByText(/Save/));
+    await user.click(rendered.getByText(/save/i));
 
     const qualityControl = qualityControlData({
       versions: [],
@@ -210,24 +178,20 @@ describe("<NewDraftQualityControl />", () => {
       trigger,
     }));
 
-    const { getByText, getByPlaceholderText, queryByText, getByRole } = render(
-      <NewDraftQualityControl />,
-      renderOpts
-    );
+    const rendered = render(<NewDraftQualityControl />, renderOpts);
+    await waitForLoad(rendered);
 
     await waitFor(() =>
-      expect(queryByText(/loading/i)).not.toBeInTheDocument()
-    );
-    await waitFor(() =>
-      expect(getByRole("button", { name: /Publish/ })).toBeDisabled()
+      expect(rendered.getByRole("button", { name: /publish/ })).toBeDisabled()
     );
 
-    userEvent.type(getByPlaceholderText("Name"), "_modified");
+    const user = userEvent.setup({ delay: null });
+    await user.type(rendered.getByPlaceholderText(/name/i), "_modified");
 
     await waitFor(() =>
-      expect(getByRole("button", { name: /Publish/ })).toBeEnabled()
+      expect(rendered.getByRole("button", { name: /publish/ })).toBeEnabled()
     );
-    userEvent.click(getByText(/Publish/));
+    await user.click(rendered.getByText(/publish/i));
 
     const qualityControl = qualityControlData({
       versions: [],
@@ -242,12 +206,11 @@ describe("<NewDraftQualityControl />", () => {
   it("when no quality control is fetched, do not render editor", async () => {
     useQualityControl.mockImplementation(() => ({ data: undefined }));
 
-    const { queryByText } = render(<NewDraftQualityControl />, renderOpts);
+    const rendered = render(<NewDraftQualityControl />, renderOpts);
+    await waitForLoad(rendered);
 
     await waitFor(() =>
-      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+      expect(rendered.queryByText(/save/i)).not.toBeInTheDocument()
     );
-
-    await waitFor(() => expect(queryByText(/Save/i)).not.toBeInTheDocument());
   });
 });