@truedat/qx 7.5.9 → 7.5.11

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

@@ -1,49 +1,46 @@
-import _ from "lodash/fp";
-import React from "react";
-import { render } from "@truedat/test/render";
-import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import { render, waitForLoad } from "@truedat/test/render";
 import { scoreData } from "@truedat/qx/components/scores/__tests__/__fixtures__/scoreHelper";
 import QualityBadge, { QualityBadgeForSearch } from "../QualityBadge";
 
-const renderOpts = { messages };
-
 describe("<QualityBadge />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const score = scoreData();
-    const { container } = render(<QualityBadge score={score} />, renderOpts);
-
-    expect(container).toMatchSnapshot();
+    const rendered = render(<QualityBadge score={score} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("show status failed", () => {
+  it("show status failed", async () => {
     const score = scoreData({ status: "FAILED" });
-    const { queryByText } = render(<QualityBadge score={score} />, renderOpts);
-
-    expect(queryByText(/Failed/i)).toBeInTheDocument();
+    const rendered = render(<QualityBadge score={score} />);
+    await waitForLoad(rendered);
+    expect(rendered.queryByText(/failed/i)).toBeInTheDocument();
   });
 
-  it("show no executed", () => {
+  it("show no executed", async () => {
     const score = scoreData({ score_content: undefined });
-    const { queryByText } = render(<QualityBadge score={score} />, renderOpts);
-
-    expect(queryByText(/Not executed/i)).toBeInTheDocument();
+    const rendered = render(<QualityBadge score={score} />);
+    await waitForLoad(rendered);
+    rendered.debug();
+    expect(rendered.queryByText(/score.not_executed/i)).toBeInTheDocument();
   });
 
-  it("show no results", () => {
+  it("show no results", async () => {
     const score_content = {
       total_count: 0,
       validation_count: 50,
     };
 
     const score = scoreData({ score_content });
-    const { queryByText } = render(<QualityBadge score={score} />, renderOpts);
-
-    expect(queryByText(/No results/i)).toBeInTheDocument();
+    const rendered = render(<QualityBadge score={score} />);
+    await waitForLoad(rendered);
+    rendered.debug();
+    expect(rendered.queryByText(/score.no_results/i)).toBeInTheDocument();
   });
 });
 
 describe("<QualityBadgeForSearch />", () => {
-  it("matches the latest snapshot for percentage", () => {
+  it("matches the latest snapshot for percentage", async () => {
     const scoreCriteria = {
       goal: 60,
       maximum: 75,
@@ -60,19 +57,18 @@ describe("<QualityBadgeForSearch />", () => {
       type: "ratio",
     };
 
-    const { container } = render(
+    const rendered = render(
       <QualityBadgeForSearch
         controlMode={"percentage"}
         criteria={scoreCriteria}
         latestScore={latestScore}
-      />,
-      renderOpts
+      />
     );
-
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot for deviation", () => {
+  it("matches the latest snapshot for deviation", async () => {
     const scoreCriteria = {
       goal: 78,
       maximum: 90,
@@ -89,19 +85,18 @@ describe("<QualityBadgeForSearch />", () => {
       type: "ratio",
     };
 
-    const { container } = render(
+    const rendered = render(
       <QualityBadgeForSearch
         controlMode={"deviation"}
         criteria={scoreCriteria}
         latestScore={latestScore}
-      />,
-      renderOpts
+      />
     );
-
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot for count", () => {
+  it("matches the latest snapshot for count", async () => {
     const scoreCriteria = {
       goal: 78,
       maximum: 90,
@@ -117,19 +112,18 @@ describe("<QualityBadgeForSearch />", () => {
       type: "count",
     };
 
-    const { container } = render(
+    const rendered = render(
       <QualityBadgeForSearch
         controlMode={"count"}
         criteria={scoreCriteria}
         latestScore={latestScore}
-      />,
-      renderOpts
+      />
     );
-
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("show status failed", () => {
+  it("show status failed", async () => {
     const latestScore = {
       result_message: null,
       status: "failed",
@@ -139,19 +133,18 @@ describe("<QualityBadgeForSearch />", () => {
       minimum: 10,
     };
 
-    const { queryByText } = render(
+    const rendered = render(
       <QualityBadgeForSearch
         controlMode={"percentage"}
         criteria={scoreCriteria}
         latestScore={latestScore}
-      />,
-      renderOpts
+      />
     );
-
-    expect(queryByText(/Failed/i)).toBeInTheDocument();
+    await waitForLoad(rendered);
+    expect(rendered.queryByText(/failed/i)).toBeInTheDocument();
   });
 
-  it("show no executed", () => {
+  it("show no executed", async () => {
     const scoreCriteria = {
       goal: 78,
       maximum: 90,
@@ -159,19 +152,18 @@ describe("<QualityBadgeForSearch />", () => {
     const latestScore = {
       result_message: null,
     };
-    const { container } = render(
+    const rendered = render(
       <QualityBadgeForSearch
         controlMode={"count"}
         criteria={scoreCriteria}
         latestScore={latestScore}
-      />,
-      renderOpts
+      />
     );
-
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("show no results", () => {
+  it("show no results", async () => {
     const scoreCriteria = {
       goal: 60,
       maximum: 75,
@@ -187,15 +179,15 @@ describe("<QualityBadgeForSearch />", () => {
       status: "succeeded",
       type: "ratio",
     };
-    const { queryByText } = render(
+    const rendered = render(
       <QualityBadgeForSearch
         controlMode={"percentage"}
         criteria={scoreCriteria}
         latestScore={latestScore}
-      />,
-      renderOpts
+      />
     );
-
-    expect(queryByText(/No results/i)).toBeInTheDocument();
+    await waitForLoad(rendered);
+    rendered.debug();
+    expect(rendered.queryByText(/score.no_results/i)).toBeInTheDocument();
   });
 });

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

@@ -1,10 +1,8 @@
-import React from "react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import { waitFor } from "@testing-library/react";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import userEvent from "@testing-library/user-event";
 import { templateByNameMock } from "@truedat/test/mocks";
-import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import { DOMAINS_QUERY } from "@truedat/core/api/queries";
 import QualityControl from "../QualityControl";
 import { qualityControlData } from "./__fixtures__/qualityControlHelper";
@@ -41,8 +39,6 @@ const renderOpts = {
     createDomainsMock,
     templateByNameMock({ name: "template1", domainIds: [2] }),
   ],
-  messages,
-  fallback: "loading",
 };
 
 describe("<QualityControl />", () => {
@@ -51,35 +47,28 @@ describe("<QualityControl />", () => {
       qualityControl: qualityControlData(),
       actions: ["update_main"],
     };
-    const { container, queryByText } = render(
+    const rendered = render(
       <TestFormWrapper context={context}>
         <QualityControl />
       </TestFormWrapper>,
       renderOpts
     );
-
-    await waitFor(() => {
-      expect(queryByText(/loading/i)).not.toBeInTheDocument();
-      expect(container.querySelector(".loader")).not.toBeInTheDocument();
-    });
-
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("do not show edit domain if the user does not have permissions", async () => {
     const context = { qualityControl: qualityControlData() };
-    const { container, queryByText } = render(
+    const rendered = render(
       <TestFormWrapper context={context}>
         <QualityControl />
       </TestFormWrapper>,
       renderOpts
     );
-    await waitFor(() => {
-      expect(queryByText(/loading/i)).not.toBeInTheDocument();
-      expect(
-        container.querySelector(".pencil alternate icon")
-      ).not.toBeInTheDocument();
-    });
+    await waitForLoad(rendered);
+    expect(
+      rendered.container.querySelector(".pencil.alternate.icon")
+    ).not.toBeInTheDocument();
   });
 
   it("render popup when edit domain", async () => {
@@ -87,27 +76,25 @@ describe("<QualityControl />", () => {
       qualityControl: qualityControlData(),
       actions: ["update_main"],
     };
-    const { container, queryByText } = render(
+    const rendered = render(
       <TestFormWrapper context={context}>
         <QualityControl />
       </TestFormWrapper>,
       renderOpts
     );
+    await waitForLoad(rendered);
 
-    await waitFor(() => {
-      expect(queryByText(/loading/i)).not.toBeInTheDocument();
-      expect(container.querySelector(".loader")).not.toBeInTheDocument();
-    });
-
-    const pencilButton = container.querySelector(".pencil.alternate.icon");
+    const pencilButton = rendered.container.querySelector(
+      ".pencil.alternate.icon"
+    );
     userEvent.click(pencilButton);
 
     await waitFor(() => {
-      expect(queryByText(/fooDomain/i)).toBeInTheDocument();
+      expect(rendered.queryByText(/foodomain/i)).toBeInTheDocument();
     });
     userEvent.click(pencilButton);
     await waitFor(() => {
-      expect(queryByText(/fooDomain/i)).not.toBeInTheDocument();
+      expect(rendered.queryByText(/foodomain/i)).not.toBeInTheDocument();
     });
   });
 
@@ -115,14 +102,15 @@ describe("<QualityControl />", () => {
     const context = {
       qualityControl: qualityControlData({ df_type: undefined }),
     };
-    const { queryByText } = render(
+    const rendered = render(
       <TestFormWrapper context={context}>
         <QualityControl />
       </TestFormWrapper>,
       renderOpts
     );
+    await waitForLoad(rendered);
     await waitFor(() =>
-      expect(queryByText(/Information/i)).not.toBeInTheDocument()
+      expect(rendered.queryByText(/information/i)).not.toBeInTheDocument()
     );
   });
 });

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

@@ -1,18 +1,16 @@
-import React from "react";
-import userEvent from "@testing-library/user-event";
 import { waitFor } from "@testing-library/react";
-import { render } from "@truedat/test/render";
-import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import { singleTemplateMock } from "@truedat/test/mocks";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import QualityControlActions from "../QualityControlActions";
 import { qualityControlData } from "./__fixtures__/qualityControlHelper";
 
-const mockHistory = { push: jest.fn() };
+const mockNavigate = jest.fn();
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useHistory: () => mockHistory,
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useNavigate: () => mockNavigate,
 }));
 
 jest.mock("@truedat/core/hooks", () => ({
@@ -78,54 +76,50 @@ const context = {
 const variables = { scope: "qxe" };
 const renderOpts = {
   mocks: [singleTemplateMock(variables)],
-  messages,
-  fallback: "loading",
 };
 
 describe("<QualityControlActions />", () => {
   it("matches the latest snapshot with actions for published status", async () => {
-    const { container, queryByText } = render(
+    const rendered = render(
       <TestFormWrapper context={{ ...context }}>
         <QualityControlActions />
       </TestFormWrapper>,
       renderOpts
     );
-    await waitFor(() =>
-      expect(queryByText(/loading/i)).not.toBeInTheDocument()
-    );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("render actions for dratf status", () => {
+  it("render actions for dratf status", async () => {
     const newContext = {
       ...context,
       actions: ["send_to_approval", "publish", "edit", "toggle_active"],
     };
-    const { queryByText } = render(
+    const rendered = render(
       <TestFormWrapper context={{ ...newContext }}>
         <QualityControlActions />
       </TestFormWrapper>,
       renderOpts
     );
-
-    expect(queryByText(/Edit/i)).toBeInTheDocument();
+    await waitForLoad(rendered);
+    expect(rendered.getByText(/edit/i)).toBeInTheDocument();
   });
 
   it("renders the correct actions", async () => {
-    const { getByText, queryByText } = render(
+    const rendered = render(
       <TestFormWrapper context={{ ...context }}>
         <QualityControlActions />
       </TestFormWrapper>,
       renderOpts
     );
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
-    expect(getByText(/Create Draft/i)).toBeInTheDocument();
-    expect(getByText(/Disable/i)).toBeInTheDocument();
+    await waitForLoad(rendered);
+    expect(rendered.getByText(/actions.create_draft/i)).toBeInTheDocument();
+    expect(rendered.getByText(/disable/i)).toBeInTheDocument();
   });
 
   it("render the correct actions when is disabled", async () => {
     const disableQualityControl = qualityControlData({ active: false });
-    const { getByText, queryByText } = render(
+    const rendered = render(
       <TestFormWrapper
         context={{ ...context, qualityControl: disableQualityControl }}
       >
@@ -133,73 +127,82 @@ describe("<QualityControlActions />", () => {
       </TestFormWrapper>,
       renderOpts
     );
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
-    expect(getByText(/Enable/i)).toBeInTheDocument();
+    await waitForLoad(rendered);
+    expect(rendered.getByText(/enable/i)).toBeInTheDocument();
   });
 
   it("render onConfirm when toggle_active button is clicked", async () => {
-    const { getByText, queryByText } = render(
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(
       <TestFormWrapper context={{ ...context }}>
         <QualityControlActions />
       </TestFormWrapper>,
       renderOpts
     );
+    await waitForLoad(rendered);
 
-    userEvent.click(getByText(/Enable|Disable/i));
+    await user.click(rendered.getByText(/enable|disable/i));
     await waitFor(() =>
-      expect(queryByText(/confirm_yes/i)).toBeInTheDocument()
+      expect(rendered.getByText(/confirmation.yes/i)).toBeInTheDocument()
     );
-    userEvent.click(getByText(/confirm_yes/i));
+    await user.click(rendered.getByText(/confirmation.yes/i));
     await waitFor(() => expect(mutate).toHaveBeenCalledTimes(1));
   });
 
-  it("renders correct Link components for create_draft and edit actions", () => {
+  it("renders correct Link components for create_draft and edit actions", async () => {
     const actions = ["create_draft", "edit"];
-    const { getByText } = render(
+    const rendered = render(
       <TestFormWrapper context={{ ...context, actions }}>
         <QualityControlActions />
       </TestFormWrapper>,
       renderOpts
     );
+    await waitForLoad(rendered);
 
-    expect(getByText(/Create Draft/i).closest("a")).toHaveAttribute(
+    expect(
+      rendered.getByText(/actions.create_draft/i).closest("a")
+    ).toHaveAttribute(
       "href",
       `/qualityControls/${qualityControl.id}/version/${qualityControl.version}/new_draft`
     );
-    expect(getByText(/Edit/i).closest("a")).toHaveAttribute(
+    expect(rendered.getByText(/edit/i).closest("a")).toHaveAttribute(
       "href",
       `/qualityControls/${qualityControl.id}/version/${qualityControl.version}/edit`
     );
   });
 
   it("calls updateStatus when default action button is clicked", async () => {
-    const { getByText, queryByText } = render(
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(
       <TestFormWrapper context={{ ...context, actions: ["publish"] }}>
         <QualityControlActions />
       </TestFormWrapper>,
       renderOpts
     );
-    userEvent.click(getByText(/Publish/i));
-    await waitFor(() => expect(queryByText(/Publish/i)).toBeInTheDocument());
+    await waitForLoad(rendered);
+    await user.click(rendered.getByText(/publish/i));
+    await waitFor(() =>
+      expect(rendered.getByText(/publish/i)).toBeInTheDocument()
+    );
   });
 
   it("calls onCreateScoreGroup when ScoreGroupPopup is submitted", async () => {
-    const { getByText, queryByText } = render(
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(
       <TestFormWrapper context={{ ...context }}>
         <QualityControlActions />
       </TestFormWrapper>,
       renderOpts
     );
+    await waitForLoad(rendered);
+
+    await user.click(rendered.getByText(/actions.do_execution/i));
 
     await waitFor(() =>
-      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+      expect(rendered.queryByText("actions.create")).toBeEnabled()
     );
-
-    userEvent.click(getByText(/Execute quality control/i));
-
-    await waitFor(() => expect(queryByText("Create")).toBeInTheDocument());
-    userEvent.click(getByText("Create"));
-    await waitFor(() => expect(mockHistory.push.mock.calls.length).toBe(1));
-    expect(mockHistory.push.mock.calls[0][0]).toBe("/scoreGroups/36");
+    await user.click(rendered.getByText("actions.create"));
+    await waitFor(() => expect(mockNavigate.mock.calls.length).toBe(1));
+    expect(mockNavigate.mock.calls[0][0]).toBe("/scoreGroups/36");
   });
 });

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import QualityControlCrumbs from "../QualityControlCrumbs";