@truedat/dq 7.5.9 → 7.5.11

package/src/components/__tests__/RuleResultDetails.spec.js

@@ -1,24 +1,12 @@
 import _ from "lodash/fp";
-import React, { Suspense } from "react";
-import { render } from "@truedat/test/render";
-import messages from "@truedat/dq/messages";
+import { render, waitForLoad } from "@truedat/test/render";
 import { RuleResultDetails } from "../RuleResultDetails";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useParams: () => ({ rule_result_id: 100 }),
 }));
 
-const renderOpts = {
-  messages: {
-    en: {
-      ...messages.en,
-      "ruleResult.details.props.test": "TestMessage",
-      "actions.create": "create",
-    },
-  },
-};
-
 const commonProps = {
   ruleImplementation: {
     id: 1,
@@ -41,37 +29,28 @@ const commonProps = {
 };
 
 describe("<RuleResultDetails>", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const props = _.update("ruleResult.details", () => ({ Query: "ImZvbyI=" }))(
       commonProps
     );
 
-    const { container } = render(
-      <Suspense fallback={null}>
-        <RuleResultDetails {...props} />
-      </Suspense>,
-      renderOpts
-    );
-    expect(container).toMatchSnapshot();
+    const rendered = render(<RuleResultDetails {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("decodes details with base64 prefix", () => {
+  it("decodes details with base64 prefix", async () => {
     const props = _.update("ruleResult.details", () => ({
       value: "valor",
       base64_test: "QmFzZTY0X3ZhbHVl", //base64 for Base64_value
     }))(commonProps);
 
-    const { getByText } = render(
-      <Suspense fallback={null}>
-        <RuleResultDetails {...props} />
-      </Suspense>,
-      renderOpts
-    );
-    expect(getByText("TestMessage")).toBeInTheDocument();
-    expect(getByText("Base64_value")).toBeInTheDocument();
+    const rendered = render(<RuleResultDetails {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.getByText(/base64_value/i)).toBeInTheDocument();
   });
 
-  it("with empty datset", () => {
+  it("with empty datset", async () => {
     const props = _.update("ruleResult", () => ({
       result: "0",
       records: 0,
@@ -80,17 +59,13 @@ describe("<RuleResultDetails>", () => {
       hasSegments: false,
     }))(commonProps);
 
-    const { container } = render(
-      <Suspense fallback={null}>
-        <RuleResultDetails {...props} />
-      </Suspense>,
-      renderOpts
-    );
-    expect(container).toMatchSnapshot();
-    expect(container).toHaveTextContent("Empty dataset");
+    const rendered = render(<RuleResultDetails {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+    expect(rendered.container).toHaveTextContent(/empty_dataset/i);
   });
 
-  it("with empty ruleResult", () => {
+  it("with empty ruleResult", async () => {
     const props = {
       ruleImplementation: {
         id: 1,
@@ -102,22 +77,14 @@ describe("<RuleResultDetails>", () => {
       ruleResult: {},
     };
 
-    const { container } = render(
-      <Suspense fallback={null}>
-        <RuleResultDetails {...props} />
-      </Suspense>,
-      renderOpts
-    );
-    expect(container).toMatchSnapshot();
+    const rendered = render(<RuleResultDetails {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("without details", () => {
-    const { container } = render(
-      <Suspense fallback={null}>
-        <RuleResultDetails {...commonProps} />
-      </Suspense>,
-      renderOpts
-    );
-    expect(container).toMatchSnapshot();
+  it("without details", async () => {
+    const rendered = render(<RuleResultDetails {...commonProps} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/__tests__/RuleResultRemediationLoader.spec.js

@@ -1,33 +1,34 @@
-import React from "react";
-import { mount } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { RuleResultRemediationLoader } from "../RuleResultRemediationLoader";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useParams: () => ({ propRuleResultId: 123 }),
 }));
 
 describe("<RuleResultRemediationLoader />", () => {
-  it("calls fetchRemediation when component mounts but not when it unmounts", () => {
+  it("calls fetchRemediation when component mounts but not when it unmounts", async () => {
     const props = {
       clearRemediation: jest.fn(),
       fetchRemediation: jest.fn(),
       propRuleResultId: 123,
     };
-    const wrapper = mount(<RuleResultRemediationLoader {...props} />);
-    expect(props.fetchRemediation.mock.calls.length).toBe(1);
-    wrapper.unmount();
-    expect(props.fetchRemediation.mock.calls.length).toBe(1);
+    const rendered = render(<RuleResultRemediationLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(props.fetchRemediation).toHaveBeenCalledTimes(1);
+    rendered.unmount();
+    expect(props.fetchRemediation).toHaveBeenCalledTimes(1);
   });
 
-  it("calls clearRemediation when component unmounts but not when it mounts", () => {
+  it("calls clearRemediation when component unmounts but not when it mounts", async () => {
     const props = {
       clearRemediation: jest.fn(),
       fetchRemediation: jest.fn(),
     };
-    const wrapper = mount(<RuleResultRemediationLoader {...props} />);
-    expect(props.clearRemediation.mock.calls.length).toBe(0);
-    wrapper.unmount();
-    expect(props.clearRemediation.mock.calls.length).toBe(1);
+    const rendered = render(<RuleResultRemediationLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(props.clearRemediation).toHaveBeenCalledTimes(0);
+    rendered.unmount();
+    expect(props.clearRemediation).toHaveBeenCalledTimes(1);
   });
 });

package/src/components/__tests__/RuleResultRemediations.spec.js

@@ -1,10 +1,9 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import messages from "@truedat/dq/messages";
 import { RuleResultRemediations } from "../RuleResultRemediations";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useParams: () => ({ rule_result_id: 1 }),
 }));
 

package/src/components/__tests__/RuleResultRoutes.spec.js

@@ -1,84 +1,108 @@
 import React from "react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
+import { RuleResultsRoutes } from "../RuleResultsRoutes";
+import { useAuthorized } from "@truedat/core/hooks/useAuthorized";
+import { IMPLEMENTATION_RESULT_QUERY } from "../../api/queries";
 import {
   IMPLEMENTATION_RESULT_DETAILS,
   IMPLEMENTATION_RESULT_SEGMENTS_RESULTS,
   IMPLEMENTATION_RESULT_REMEDIATION_PLAN,
 } from "@truedat/core/routes";
-import { IMPLEMENTATION_RESULT_QUERY } from "../../api/queries";
-import { RuleResultsRoutes } from "../RuleResultsRoutes";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useParams: () => ({ rule_result_id: 1 }),
+jest.mock("@truedat/core/hooks/useAuthorized", () => ({
+  useAuthorized: jest.fn(() => true),
 }));
 
-describe("<RuleResultsRoutes>", () => {
-  const implementationResult = {
-    implementationResult: {
-      date: "2022-06-24",
-      errors: 2,
-      hasRemediation: true,
-      hasSegments: true,
-      id: 1,
-      records: 31,
-      details: {},
-      result: "93.54",
-      params: {},
-      resultType: "percentage",
-    },
-  };
+// Mock child components
+jest.mock("../RuleResult", () => ({ children }) => (
+  <div>RuleResult{children}</div>
+));
+jest.mock("../RuleResultDetails", () => () => <div>RuleResultDetails</div>);
+jest.mock("../RuleResultSegments", () => () => <div>RuleResultSegments</div>);
+jest.mock("../RuleResultRemediations", () => () => (
+  <div>RuleResultRemediations</div>
+));
+jest.mock("../ImplementationCrumbs", () => () => (
+  <div>ImplementationCrumbs</div>
+));
+jest.mock("../RuleResultSegmentsLoader", () => () => (
+  <div>RuleResultSegmentsLoader</div>
+));
 
-  const mock = {
-    request: { query: IMPLEMENTATION_RESULT_QUERY, variables: { id: 1 } },
-    result: { data: implementationResult },
+describe("<RuleResultsRoutes />", () => {
+  const mockResult = {
+    date: "2022-06-24",
+    errors: 2,
+    hasRemediation: true,
+    hasSegments: true,
+    id: 1,
+    records: 31,
+    details: {},
+    result: "93.54",
+    params: {},
+    resultType: "percentage",
   };
-  const key = "mi implementación molona";
-  const state = {
-    ruleImplementation: {
-      id: 2,
-      implementation_key: key,
+
+  const mocks = [
+    {
+      request: {
+        query: IMPLEMENTATION_RESULT_QUERY,
+        variables: { id: "123" },
+      },
+      result: {
+        data: {
+          implementationResult: mockResult,
+        },
+      },
     },
-    authentication: { role: "admin" },
-  };
+  ];
 
-  const renderOpts = { mocks: [mock], state };
+  const renderOpts = { mocks };
 
-  it("matches the latest loading snapshot", () => {
-    const routes = [IMPLEMENTATION_RESULT_DETAILS];
-    const { container } = render(<RuleResultsRoutes />, {
-      ...renderOpts,
-      routes,
+  it("renders correctly with default route", async () => {
+    const rendered = render(<RuleResultsRoutes />, {
+      routes: [IMPLEMENTATION_RESULT_DETAILS.replace(":rule_result_id", "123")],
+      renderOpts,
     });
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest success details route snapshot", async () => {
-    const routes = [IMPLEMENTATION_RESULT_DETAILS];
-    const { container, findByText } = render(<RuleResultsRoutes />, {
-      ...renderOpts,
-      routes,
+  it("renders correctly with segments results route", async () => {
+    const rendered = render(<RuleResultsRoutes />, {
+      routes: [
+        IMPLEMENTATION_RESULT_SEGMENTS_RESULTS.replace(
+          ":rule_result_id",
+          "123"
+        ),
+      ],
+      renderOpts,
     });
-    await findByText(key);
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest success segments route snapshot", async () => {
-    const routes = [IMPLEMENTATION_RESULT_SEGMENTS_RESULTS];
-    const { container, findByText } = render(<RuleResultsRoutes />, {
-      ...renderOpts,
-      routes,
+  it("renders correctly with remediation plan route", async () => {
+    const rendered = render(<RuleResultsRoutes />, {
+      routes: [
+        IMPLEMENTATION_RESULT_REMEDIATION_PLAN.replace(
+          ":rule_result_id",
+          "123"
+        ),
+      ],
+      renderOpts,
     });
-    await findByText(key);
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
-  it("matches the latest success remediation route snapshot", async () => {
-    const routes = [IMPLEMENTATION_RESULT_REMEDIATION_PLAN];
-    const { container, findByText } = render(<RuleResultsRoutes />, {
-      ...renderOpts,
-      routes,
+
+  it("renders unauthorized component when not authorized", async () => {
+    useAuthorized.mockReturnValueOnce(false);
+    const rendered = render(<RuleResultsRoutes />, {
+      routes: [IMPLEMENTATION_RESULT_DETAILS.replace(":rule_result_id", "123")],
+      renderOpts,
     });
-    await findByText(key);
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/__tests__/RuleResultRow.spec.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import { useAuthorized } from "@truedat/core/hooks";
 import { render } from "@truedat/test/render";
 import { RuleResultRow } from "../RuleResultRow";

package/src/components/__tests__/RuleResultSegmentRow.spec.js

@@ -1,16 +1,9 @@
-import _ from "lodash/fp";
-import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import { render, waitForLoad } from "@truedat/test/render";
 import { RuleResultSegmentRow } from "../RuleResultSegmentRow";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<RuleResultSegmentRow />", () => {
-  it("renders customColumns values when passed", () => {
-    const RuleResultSegmentRowProps = {
+  it("renders customColumns values when passed", async () => {
+    const props = {
       rule: { id: 10 },
       segmentResult: {
         id: 54,
@@ -20,11 +13,11 @@ describe("<RuleResultSegmentRow />", () => {
       customColumns: [
         {
           name: "m_parm1",
-          fieldSelector: _.path("params.p1"),
+          fieldSelector: (obj) => obj.params.p1,
         },
         {
           name: "m_parm2",
-          fieldSelector: _.path("params.p2"),
+          fieldSelector: (obj) => obj.params.p2,
         },
       ],
       date: "2019-08-12T02:00:00Z",
@@ -36,34 +29,21 @@ describe("<RuleResultSegmentRow />", () => {
       },
     };
 
-    const wrapper = shallow(
-      <RuleResultSegmentRow {...RuleResultSegmentRowProps} />
-    );
-
-    const customColumn = wrapper
-      .find("TableRow")
-      .find("TableCell")
-      .at(2)
-      .props().children;
-
-    expect(customColumn).toBe("1");
-
-    const customColumn2 = wrapper
-      .find("TableRow")
-      .find("TableCell")
-      .at(3)
-      .props().children;
+    const rendered = render(<RuleResultSegmentRow {...props} />);
+    await waitForLoad(rendered);
 
-    expect(customColumn2).toBe("2");
+    expect(rendered.getByText(/1/i)).toBeInTheDocument();
+    expect(rendered.getByText(/2/i)).toBeInTheDocument();
 
-    expect(wrapper.find("TableRow").find("TableCell")).toHaveLength(4);
+    // Check that we have the right number of cells
+    const cells = rendered.container.querySelectorAll("td");
+    expect(cells.length).toBe(4);
   });
 
-  it("green icon when result is over goal", () => {
-    const RuleResultSegmentRowProps = {
+  it("green icon when result is over goal", async () => {
+    const props = {
       rule: { id: 10 },
       segmentResult: { id: 54, result: 80, params: { segment_name: "foo" } },
-
       date: "2019-08-12T02:00:00Z",
       ruleImplementation: {
         id: 23,
@@ -73,20 +53,15 @@ describe("<RuleResultSegmentRow />", () => {
       },
     };
 
-    const wrapper = shallow(
-      <RuleResultSegmentRow {...RuleResultSegmentRowProps} />
-    );
-    const cell = wrapper.find("TableRow").find("TableCell").at(1).dive();
-
-    expect(cell.find("td").find("Icon")).toHaveLength(1);
+    const rendered = render(<RuleResultSegmentRow {...props} />);
+    await waitForLoad(rendered);
 
-    const icon = cell.find("td").find("Icon").at(0);
-
-    expect(icon.props().color).toBe("green");
+    const icon = rendered.container.querySelector("i.green.icon");
+    expect(icon).toBeInTheDocument();
   });
 
-  it("red icon when result is under minimum", () => {
-    const RuleResultSegmentRowProps = {
+  it("red icon when result is under minimum", async () => {
+    const props = {
       rule: { id: 10 },
       segmentResult: { id: 54, result: 80, params: { segment_name: "foo" } },
       date: "2019-08-12T02:00:00Z",
@@ -98,20 +73,15 @@ describe("<RuleResultSegmentRow />", () => {
       },
     };
 
-    const wrapper = shallow(
-      <RuleResultSegmentRow {...RuleResultSegmentRowProps} />
-    );
-    const cell = wrapper.find("TableRow").find("TableCell").at(1).dive();
-
-    expect(cell.find("td").find("Icon")).toHaveLength(1);
+    const rendered = render(<RuleResultSegmentRow {...props} />);
+    await waitForLoad(rendered);
 
-    const icon = cell.find("td").find("Icon").at(0);
-
-    expect(icon.props().color).toBe("red");
+    const icon = rendered.container.querySelector("i.red.icon");
+    expect(icon).toBeInTheDocument();
   });
 
-  it("yellow icon when result is between minimum and goal", () => {
-    const RuleResultSegmentRowProps = {
+  it("yellow icon when result is between minimum and goal", async () => {
+    const props = {
       rule: { id: 10 },
       ruleImplementation: {
         id: 23,
@@ -123,20 +93,15 @@ describe("<RuleResultSegmentRow />", () => {
       date: "2019-08-12T02:00:00Z",
     };
 
-    const wrapper = shallow(
-      <RuleResultSegmentRow {...RuleResultSegmentRowProps} />
-    );
-    const cell = wrapper.find("TableRow").find("TableCell").at(1).dive();
-
-    expect(cell.find("td").find("Icon")).toHaveLength(1);
+    const rendered = render(<RuleResultSegmentRow {...props} />);
+    await waitForLoad(rendered);
 
-    const icon = cell.find("td").find("Icon").at(0);
-
-    expect(icon.props().color).toBe("yellow");
+    const icon = rendered.container.querySelector("i.yellow.icon");
+    expect(icon).toBeInTheDocument();
   });
 
-  it("renders delete cell in RuleResultSegmentRow when user isAdmin is true", () => {
-    const RuleResultSegmentRowProps = {
+  it("renders delete cell in RuleResultSegmentRow when user isAdmin is true", async () => {
+    const props = {
       rule: { id: 10 },
       ruleImplementation: {
         id: 23,
@@ -149,19 +114,16 @@ describe("<RuleResultSegmentRow />", () => {
       isAdmin: true,
       deleteRuleResult: jest.fn(),
     };
-    const wrapper = shallow(
-      <RuleResultSegmentRow {...RuleResultSegmentRowProps} />
-    );
-    const modal = wrapper
-      .find("TableRow")
-      .find("TableCell")
-      .at(2)
-      .find("ConfirmModal");
-    expect(modal).toHaveLength(1);
+
+    const rendered = render(<RuleResultSegmentRow {...props} />);
+    await waitForLoad(rendered);
+
+    const deleteButton = rendered.container.querySelector(".trash");
+    expect(deleteButton).toBeInTheDocument();
   });
 
-  it("does not render delete cell in RuleResultSegmentRow when user isAdmin is false", () => {
-    const RuleResultSegmentRowProps = {
+  it("does not render delete cell in RuleResultSegmentRow when user isAdmin is false", async () => {
+    const props = {
       rule: { id: 10 },
       ruleImplementation: {
         id: 23,
@@ -174,10 +136,11 @@ describe("<RuleResultSegmentRow />", () => {
       isAdmin: false,
       deleteRuleResult: jest.fn(),
     };
-    const wrapper = shallow(
-      <RuleResultSegmentRow {...RuleResultSegmentRowProps} />
-    );
-    const modal = wrapper.find("ConfirmModal");
-    expect(modal).toHaveLength(0);
+
+    const rendered = render(<RuleResultSegmentRow {...props} />);
+    await waitForLoad(rendered);
+
+    const deleteButton = rendered.container.querySelector("button");
+    expect(deleteButton).not.toBeInTheDocument();
   });
 });

package/src/components/__tests__/RuleResultSegments.spec.js

@@ -1,16 +1,10 @@
 import _ from "lodash/fp";
-import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import { render, waitForLoad } from "@truedat/test/render";
 import {
   RuleResultSegments,
   getCustomColumnsWithData,
 } from "../RuleResultSegments";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<RuleResultSegments />", () => {
   const rule = {
     resultType: "percentage",
@@ -27,9 +21,10 @@ describe("<RuleResultSegments />", () => {
     customColumns,
   };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<RuleResultSegments {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<RuleResultSegments {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });
 

package/src/components/__tests__/RuleResultSegmentsLoader.spec.js

@@ -1,32 +1,33 @@
-import React from "react";
-import { mount } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { RuleResultSegmentsLoader } from "../RuleResultSegmentsLoader";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useParams: () => ({ rule_result_id: 123 }),
 }));
 
 describe("<RuleResultSegmentsLoader />", () => {
-  it("calls fetchSegmentResults when component mounts but not when it unmounts", () => {
+  it("calls fetchSegmentResults when component mounts but not when it unmounts", async () => {
     const props = {
       clearSegmentResults: jest.fn(),
       fetchSegmentResults: jest.fn(),
     };
-    const wrapper = mount(<RuleResultSegmentsLoader {...props} />);
-    expect(props.fetchSegmentResults.mock.calls.length).toBe(1);
-    wrapper.unmount();
-    expect(props.fetchSegmentResults.mock.calls.length).toBe(1);
+    const rendered = render(<RuleResultSegmentsLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(props.fetchSegmentResults).toHaveBeenCalledTimes(1);
+    rendered.unmount();
+    expect(props.fetchSegmentResults).toHaveBeenCalledTimes(1);
   });
 
-  it("calls clearSegmentResults when component unmounts but not when it mounts", () => {
+  it("calls clearSegmentResults when component unmounts but not when it mounts", async () => {
     const props = {
       clearSegmentResults: jest.fn(),
       fetchSegmentResults: jest.fn(),
     };
-    const wrapper = mount(<RuleResultSegmentsLoader {...props} />);
-    expect(props.clearSegmentResults.mock.calls.length).toBe(0);
-    wrapper.unmount();
-    expect(props.clearSegmentResults.mock.calls.length).toBe(1);
+    const rendered = render(<RuleResultSegmentsLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(props.clearSegmentResults).toHaveBeenCalledTimes(0);
+    rendered.unmount();
+    expect(props.clearSegmentResults).toHaveBeenCalledTimes(1);
   });
 });

package/src/components/__tests__/RuleResultsUpload.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
 import RuleResultsUpload from "../RuleResultsUpload";