@truedat/qx 7.0.7 → 7.1.0

package/src/components/qualityControls/ScoreCriteria.js

@@ -0,0 +1,40 @@
+import React, { useContext } from "react";
+import { useFormContext } from "react-hook-form";
+import { Segment } from "semantic-ui-react";
+import QxContext from "@truedat/qx/components/QxContext";
+
+import Deviation from "./scoreCriterias/Deviation";
+import ErrorCount from "./scoreCriterias/ErrorCount";
+import Percentage from "./scoreCriterias/Percentage";
+
+export default function ScoreCriteria() {
+  const { watch } = useFormContext();
+  const context = useContext(QxContext);
+
+  const controlMode = watch("control_mode");
+
+  const scoreCriteriaForMode = {
+    deviation: <Deviation />,
+    error_count: <ErrorCount />,
+    percentage: <Percentage />,
+  };
+
+  return controlMode ? (
+    <Segment>
+      <QxContext.Provider value={{ ...context, field: "score_criteria" }}>
+        {scoreCriteriaForMode[controlMode]}
+      </QxContext.Provider>
+    </Segment>
+  ) : null;
+}
+
+export const defaultForMode = (controlMode) => {
+  switch (controlMode) {
+    case "deviation":
+      return { goal: null, maximum: null };
+    case "error_count":
+      return { goal: null, maximum: null };
+    case "percentage":
+      return { goal: null, minimum: null };
+  }
+};

package/src/components/qualityControls/{ResultCriteria.js → ScoreCriteriaView.js}

@@ -3,14 +3,12 @@ import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { Header, Icon, Segment, List } from "semantic-ui-react";
 
-export default function ResultCriteria({ qualityControl }) {
-  const { result_criteria, result_type } = qualityControl;
-  const resultCriteriaForType = {
-    percentage: <ResultCriteriaPercentage resultCriteria={result_criteria} />,
-    deviation: <ResultCriteriaDeviation resultCriteria={result_criteria} />,
-    errors_number: (
-      <ResultCriteriaErrorsNumber resultCriteria={result_criteria} />
-    ),
+export default function ScoreCriteriaView({ qualityControl }) {
+  const { score_criteria, control_mode } = qualityControl;
+  const scoreCriteriaForMode = {
+    percentage: <ScoreCriteriaPercentage scoreCriteria={score_criteria} />,
+    deviation: <ScoreCriteriaDeviation scoreCriteria={score_criteria} />,
+    error_count: <ScoreCriteriaErrorCount scoreCriteria={score_criteria} />,
   };
 
   return (
@@ -18,43 +16,29 @@ export default function ResultCriteria({ qualityControl }) {
       <Header as="h3">
         <Icon name="flag checkered" size="small" />
         <Header.Content>
-          <FormattedMessage id="quality_control.result_criteria" />
+          <FormattedMessage id="quality_control.score_criteria" />
         </Header.Content>
       </Header>
       <Segment>
-        {result_criteria ? (
-          <List>
-            <List.Item>
-              <List.Header>
-                <FormattedMessage id="quality.thresholds" />
-              </List.Header>
-              <List.Content>
-                <List.Description>
-                  <FormattedMessage
-                    id={`quality_control.result_type.${result_type}`}
-                  />
-                </List.Description>
-              </List.Content>
-            </List.Item>
-            {resultCriteriaForType[result_type]}
-          </List>
+        {score_criteria ? (
+          scoreCriteriaForMode[control_mode]
         ) : (
-          <FormattedMessage id="quality_control.result_criteria.empty" />
+          <FormattedMessage id="quality_control.score_criteria.empty" />
         )}
       </Segment>
     </>
   );
 }
 
-const ResultCriteriaPercentage = ({ resultCriteria }) => (
-  <>
+const ScoreCriteriaPercentage = ({ scoreCriteria }) => (
+  <List>
     <List.Item>
       <Icon name="circle" color="green" />
       <List.Content>
         <List.Header>
           <FormattedMessage id="quality.goal" />
         </List.Header>
-        <List.Description>{resultCriteria.goal}%</List.Description>
+        <List.Description>{scoreCriteria.goal}%</List.Description>
       </List.Content>
     </List.Item>
     <List.Item>
@@ -63,21 +47,21 @@ const ResultCriteriaPercentage = ({ resultCriteria }) => (
         <List.Header>
           <FormattedMessage id="quality.threshold" />
         </List.Header>
-        <List.Description>{resultCriteria.minimum}%</List.Description>
+        <List.Description>{scoreCriteria.minimum}%</List.Description>
       </List.Content>
     </List.Item>
-  </>
+  </List>
 );
 
-const ResultCriteriaDeviation = ({ resultCriteria }) => (
-  <>
+const ScoreCriteriaDeviation = ({ scoreCriteria }) => (
+  <List>
     <List.Item>
       <Icon name="circle" color="green" />
       <List.Content>
         <List.Header>
           <FormattedMessage id="quality.goal" />
         </List.Header>
-        <List.Description>{resultCriteria.goal}%</List.Description>
+        <List.Description>{scoreCriteria.goal}%</List.Description>
       </List.Content>
     </List.Item>
     <List.Item>
@@ -86,21 +70,21 @@ const ResultCriteriaDeviation = ({ resultCriteria }) => (
         <List.Header>
           <FormattedMessage id="quality.threshold" />
         </List.Header>
-        <List.Description>{resultCriteria.maximum}%</List.Description>
+        <List.Description>{scoreCriteria.maximum}%</List.Description>
       </List.Content>
     </List.Item>
-  </>
+  </List>
 );
 
-const ResultCriteriaErrorsNumber = ({ resultCriteria }) => (
-  <>
+const ScoreCriteriaErrorCount = ({ scoreCriteria }) => (
+  <List>
     <List.Item>
       <Icon name="circle" color="green" />
       <List.Content>
         <List.Header>
           <FormattedMessage id="quality.goal" />
         </List.Header>
-        <List.Description>{resultCriteria.goal}</List.Description>
+        <List.Description>{scoreCriteria.goal}</List.Description>
       </List.Content>
     </List.Item>
     <List.Item>
@@ -109,12 +93,12 @@ const ResultCriteriaErrorsNumber = ({ resultCriteria }) => (
         <List.Header>
           <FormattedMessage id="quality.threshold" />
         </List.Header>
-        <List.Description>{resultCriteria.maximum}</List.Description>
+        <List.Description>{scoreCriteria.maximum}</List.Description>
       </List.Content>
     </List.Item>
-  </>
+  </List>
 );
 
-ResultCriteria.propTypes = {
+ScoreCriteriaView.propTypes = {
   qualityControl: PropTypes.object,
 };

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

@@ -0,0 +1,86 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+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 = {
+  id: "7",
+  name: "dataset1",
+  headers: ["campo1", "campo2"],
+};
+const referenceDatasetsMock = {
+  request: { query: REFERENCE_DATASETS_HEADERS_QUERY },
+  result: { data: { referenceDatasets: [dataSet], loading: false } },
+};
+
+const renderOpts = {
+  mocks: [referenceDatasetsMock],
+  messages,
+  fallback: "lazy",
+};
+
+const defaultValues = {
+  control_mode: "percentage",
+  source_id: "181",
+  control_properties: {
+    resource: {
+      id: 11859650,
+      embedded: { fields: [{ id: 11859651 }] },
+    },
+  },
+};
+
+describe("<ControlProperties />", () => {
+  it("matches the latest snapshot with ratio", async () => {
+    const { container } = render(
+      <TestFormWrapper defaultValues={defaultValues}>
+        <ControlProperties />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    await waitFor(() =>
+      expect(container.querySelector(".loader")).not.toBeInTheDocument()
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot with error count", async () => {
+    const errorCountDefaultValues = {
+      ...defaultValues,
+      control_mode: "error_count",
+    };
+    const { container } = render(
+      <TestFormWrapper defaultValues={errorCountDefaultValues}>
+        <ControlProperties />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    await waitFor(() =>
+      expect(container.querySelector(".loader")).not.toBeInTheDocument()
+    );
+    expect(container).toMatchSnapshot();
+  });
+});
+
+describe("defaultForMode", () => {
+  it("returns correct default for 'error_count' control mode", () => {
+    const result = defaultForMode("error_count");
+    expect(result).toEqual({ errors_resource: null });
+  });
+
+  it("returns correct default for other control modes", () => {
+    const result = defaultForMode("some_other_mode");
+    expect(result).toEqual({
+      resource: null,
+      validation: [
+        {
+          expressions: [{ shape: "function", value: { isCondition: true } }],
+        },
+      ],
+    });
+  });
+});

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

@@ -0,0 +1,86 @@
+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";
+import ControlPropertiesView from "../ControlPropertiesView";
+import { qualityControlData } from "./__fixtures__/qualityControlHelper";
+
+const renderOpts = { messages };
+
+const qualityControl = qualityControlData();
+
+describe("<ControlPropertiesView />", () => {
+  it("matches the latest snapshot for ratio", async () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <ControlPropertiesView qualityControl={qualityControl} />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot for error count", async () => {
+    const errorCountQualityControl = {
+      ...qualityControl,
+      control_mode: "error_count",
+      control_properties: {
+        errors_resource: {
+          id: 11859650,
+          type: "data_structure",
+        },
+      },
+    };
+    const { container } = render(
+      <TestFormWrapper>
+        <ControlPropertiesView qualityControl={errorCountQualityControl} />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot for empty control properties", async () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <ControlPropertiesView
+          qualityControl={{ ...qualityControl, control_properties: null }}
+        />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot for empty errors_resource", async () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <ControlPropertiesView
+          qualityControl={{
+            ...qualityControl,
+            control_mode: "error_count",
+            control_properties: { errors_resource: null },
+          }}
+        />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot for empty ratio validation and resource", async () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <ControlPropertiesView
+          qualityControl={{
+            ...qualityControl,
+            control_mode: "percentage",
+            control_properties: { resource: null, validation: null },
+          }}
+        />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,219 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+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 {
+  sources,
+  domains,
+  qualityControlData,
+} from "./__fixtures__/qualityControlHelper";
+import EditQualityControl from "../EditQualityControl";
+
+const mockHistory = { push: jest.fn() };
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useParams: () => ({ id: "8" }),
+  useHistory: () => mockHistory,
+}));
+
+jest.mock("@truedat/qx/hooks/useQualityControls", () => {
+  const { qualityControlData } = jest.requireActual(
+    "./__fixtures__/qualityControlHelper"
+  );
+
+  return {
+    useQualityControl: jest.fn(() => ({
+      data: {
+        data: qualityControlData({
+          versions: [],
+          status: "draft",
+        }),
+        _actions: ["send_to_approval", "publish", "edit", "toggle_active"],
+      },
+      loading: false,
+    })),
+    useQualityControlUpdateDraft: jest.fn(() => ({
+      trigger: jest.fn(() => Promise.resolve()),
+      isMutating: false,
+    })),
+  };
+});
+
+jest.mock("@truedat/core/hooks/useUserFilters", () => {
+  const originalModule = jest.requireActual(
+    "@truedat/core/hooks/useUserFilters"
+  );
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useUserFilters: jest.fn(() => ({})),
+  };
+});
+jest.mock("@truedat/qx/hooks/useFunctions", () => {
+  const originalModule = jest.requireActual("@truedat/qx/hooks/useFunctions");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useFunctions: jest.fn(() => ({})),
+  };
+});
+jest.mock("@truedat/qx/hooks/useDataViews", () => {
+  const originalModule = jest.requireActual("@truedat/qx/hooks/useDataViews");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useDataViews: jest.fn(() => ({})),
+  };
+});
+
+const sourcesMock = {
+  request: { query: SOURCE_OPTIONS_QUERY },
+  result: { data: { sources } },
+};
+
+const referenceDatasetsMock = {
+  request: { query: REFERENCE_DATASETS_HEADERS_QUERY },
+  result: {
+    data: {
+      referenceDatasets: [
+        {
+          id: "7",
+          name: "dataset1",
+          headers: ["campo1", "campo2"],
+        },
+      ],
+      loading: false,
+    },
+  },
+};
+
+const publishDomainsMock = {
+  request: {
+    query: DOMAINS_QUERY,
+    variables: { action: "publishQualityControls" },
+  },
+  result: { data: { domains } },
+};
+const createDomainsMock = {
+  request: {
+    query: DOMAINS_QUERY,
+    variables: { action: "createQualityControls" },
+  },
+  result: { data: { domains } },
+};
+
+const renderOpts = {
+  mocks: [
+    singleTemplateMock({ scope: "quality_control", domainIds: [2] }),
+    singleTemplateMock({ scope: "quality_control", domainIds: undefined }),
+    sourcesMock,
+    referenceDatasetsMock,
+    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();
+  });
+
+  it("matches the latest snapshot with empty qualityControl", async () => {
+    useQualityControl.mockImplementationOnce(() => ({
+      data: {},
+      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();
+  });
+
+  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/));
+
+    expect(mockHistory.push.mock.calls.length).toBe(1);
+    expect(mockHistory.push.mock.calls[0][0]).toBe("/qualityControls");
+  });
+
+  it("test save submit ", async () => {
+    const trigger = jest.fn(() =>
+      Promise.resolve({ data: { data: { id: "9" } } })
+    );
+
+    useQualityControlUpdateDraft.mockImplementation(() => ({
+      trigger,
+    }));
+
+    const { getByText, getByPlaceholderText, queryByText, getByRole } = render(
+      <EditQualityControl />,
+      renderOpts
+    );
+
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(getByRole("button", { name: /Save/ })).toBeDisabled()
+    );
+
+    userEvent.type(getByPlaceholderText("Name"), "_modified");
+
+    await waitFor(() =>
+      expect(getByRole("button", { name: /Save/ })).toBeEnabled()
+    );
+    userEvent.click(getByText(/Save/));
+
+    const qualityControl = qualityControlData({
+      versions: [],
+      status: "draft",
+      name: "test_modified",
+    });
+    await waitFor(() =>
+      expect(trigger).toHaveBeenCalledWith({ quality_control: qualityControl })
+    );
+  });
+});

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

@@ -0,0 +1,33 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { fireEvent } from "@testing-library/react";
+import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import IconPopup from "../IconPopup";
+
+const renderOpts = { messages };
+
+const props = {
+  color: "red",
+  label1: "quality_control.score_criteria.deviation.goal",
+  value1: 10,
+  label2: "quality_control.score_criteria.deviation.maximum",
+  value2: 30,
+};
+
+describe("<IconPopup />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<IconPopup {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("show popup information with mouse over", async () => {
+    const { container, findByText } = render(
+      <IconPopup {...props} />,
+      renderOpts
+    );
+    const icon = container.querySelector(".red.circle.icon");
+    fireEvent.mouseOver(icon);
+
+    expect(await findByText("Result criteria")).toBeInTheDocument();
+  });
+});