@truedat/qx 7.5.7 → 7.5.10

package/src/components/qualityControls/qualityByControlMode.js

@@ -9,19 +9,19 @@ export default function qualityByControlMode(score) {
   if (!scoreContent) return { isEmpty: true };
 
   switch (controlMode) {
-    case "error_count":
+    case "count":
       return {
         color:
-          scoreContent.error_count < scoreCriteria.goal
+          scoreContent.count < scoreCriteria.goal
             ? "green"
-            : scoreContent.error_count < scoreCriteria.maximum
-            ? "yellow"
-            : "red",
-        label1: "quality_control.score_criteria.error_count.goal",
+            : scoreContent.count < scoreCriteria.maximum
+              ? "yellow"
+              : "red",
+        label1: "quality_control.score_criteria.count.goal",
         value1: scoreCriteria.goal,
-        label2: "quality_control.score_criteria.error_count.maximum",
+        label2: "quality_control.score_criteria.count.maximum",
         value2: scoreCriteria.maximum,
-        text: scoreContent.error_count,
+        text: scoreContent.count,
       };
     case "deviation":
       const deviationRatio =
@@ -36,10 +36,10 @@ export default function qualityByControlMode(score) {
           scoreContent.total_count == 0
             ? "grey"
             : deviationRatio < scoreCriteria.goal
-            ? "green"
-            : deviationRatio < scoreCriteria.maximum
-            ? "yellow"
-            : "red",
+              ? "green"
+              : deviationRatio < scoreCriteria.maximum
+                ? "yellow"
+                : "red",
         label1: "quality_control.score_criteria.deviation.goal",
         value1: scoreCriteria.goal,
         label2: "quality_control.score_criteria.deviation.maximum",
@@ -62,17 +62,40 @@ export default function qualityByControlMode(score) {
           scoreContent.total_count == 0
             ? "grey"
             : percentageRatio > scoreCriteria.goal
-            ? "green"
-            : percentageRatio > scoreCriteria.minimum
-            ? "yellow"
-            : "red",
+              ? "green"
+              : percentageRatio > scoreCriteria.minimum
+                ? "yellow"
+                : "red",
         label1: "quality_control.score_criteria.percentage.minimum",
         value1: scoreCriteria.minimum,
         label2: "quality_control.score_criteria.percentage.goal",
         value2: scoreCriteria.goal,
         text: percentageResult,
       };
+    case "error_count":
+      const errorCount =
+        scoreContent.total_count == 0 ? null : scoreContent.validation_count;
+
+      const errorCountResult =
+        scoreContent.total_count == 0
+          ? noResultsMessage
+          : scoreContent.validation_count;
 
+      return {
+        color:
+          scoreContent.total_count == 0
+            ? "grey"
+            : errorCount > scoreCriteria.goal
+              ? "green"
+              : errorCount > scoreCriteria.maximum
+                ? "yellow"
+                : "red",
+        label1: "quality_control.score_criteria.error_count.goal",
+        value1: scoreCriteria.goal,
+        label2: "quality_control.score_criteria.error_count.maximum",
+        value2: scoreCriteria.maximum,
+        text: errorCountResult,
+      };
     default:
       return {};
   }

package/src/components/qualityControls/qualityControlScoresColumns.js

@@ -1,7 +1,6 @@
 import _ from "lodash/fp";
-import React from "react";
+import { Link } from "react-router";
 import PropTypes from "prop-types";
-import { Link } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
 import { DateDecorator } from "@truedat/core/services/columnDecorators";
 import { linkTo } from "@truedat/core/routes";

package/src/components/qualityControls/scoreCriterias/Count.js

@@ -0,0 +1,88 @@
+import React, { useContext } from "react";
+import { useIntl } from "react-intl";
+import { Controller, useFormContext } from "react-hook-form";
+import { Form } from "semantic-ui-react";
+import QxContext from "@truedat/qx/components/QxContext";
+import { FieldLabel } from "@truedat/core/components";
+import { numberRules } from "@truedat/core/services/formRules";
+
+export default function Count() {
+  const { formatMessage } = useIntl();
+  const { field } = useContext(QxContext);
+  const { control, watch } = useFormContext();
+
+  const maximumField = `${field}.maximum`;
+  const goalField = `${field}.goal`;
+  const maximum = watch(maximumField);
+  const goal = watch(goalField);
+
+  return (
+    <>
+      <Controller
+        name={goalField}
+        control={control}
+        rules={numberRules({
+          formatMessage,
+          minValue: 0,
+          maxValue: maximum,
+          required: true,
+        })}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <FieldLabel
+            label={formatMessage({
+              id: "quality_control.score_criteria.count.goal",
+            })}
+            required
+            error={error?.message}
+          >
+            <Form.Input
+              autoComplete="off"
+              placeholder={formatMessage({
+                id: "quality_control.score_criteria.count.goal",
+              })}
+              error={!!error}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              value={value || ""}
+            />
+          </FieldLabel>
+        )}
+      />
+      <Controller
+        name={maximumField}
+        control={control}
+        rules={numberRules({
+          formatMessage,
+          minValue: goal,
+          required: true,
+        })}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <FieldLabel
+            label={formatMessage({
+              id: "quality_control.score_criteria.count.maximum",
+            })}
+            required
+            error={error?.message}
+          >
+            <Form.Input
+              autoComplete="off"
+              placeholder={formatMessage({
+                id: "quality_control.score_criteria.count.maximum",
+              })}
+              error={!!error}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              value={value || ""}
+            />
+          </FieldLabel>
+        )}
+      />
+    </>
+  );
+}

package/src/components/qualityControls/scoreCriterias/Deviation.js

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import { use } from "react";
 import { useIntl } from "react-intl";
 import { Controller, useFormContext } from "react-hook-form";
 import { Form } from "semantic-ui-react";
@@ -8,7 +8,7 @@ import { numberRules } from "@truedat/core/services/formRules";
 
 export default function Deviation() {
   const { formatMessage } = useIntl();
-  const { field } = useContext(QxContext);
+  const { field } = use(QxContext);
   const { control, watch } = useFormContext();
 
   const maximumField = `${field}.maximum`;

package/src/components/qualityControls/scoreCriterias/ErrorCount.js

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import { use } from "react";
 import { useIntl } from "react-intl";
 import { Controller, useFormContext } from "react-hook-form";
 import { Form } from "semantic-ui-react";
@@ -8,7 +8,7 @@ import { numberRules } from "@truedat/core/services/formRules";
 
 export default function ErrorCount() {
   const { formatMessage } = useIntl();
-  const { field } = useContext(QxContext);
+  const { field } = use(QxContext);
   const { control, watch } = useFormContext();
 
   const maximumField = `${field}.maximum`;
@@ -57,6 +57,7 @@ export default function ErrorCount() {
         rules={numberRules({
           formatMessage,
           minValue: goal,
+          maxValue: 100,
           required: true,
         })}
         render={({
@@ -67,8 +68,7 @@ export default function ErrorCount() {
             label={formatMessage({
               id: "quality_control.score_criteria.error_count.maximum",
             })}
-            required
-            error={error?.message}
+            error={!!error}
           >
             <Form.Input
               autoComplete="off"

package/src/components/qualityControls/scoreCriterias/Percentage.js

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import { use } from "react";
 import { useIntl } from "react-intl";
 import { Controller, useFormContext } from "react-hook-form";
 import { Form } from "semantic-ui-react";
@@ -8,7 +8,7 @@ import { numberRules } from "@truedat/core/services/formRules";
 
 export default function Percentage() {
   const { formatMessage } = useIntl();
-  const { field } = useContext(QxContext);
+  const { field } = use(QxContext);
   const { control, watch } = useFormContext();
 
   const minimumField = `${field}.minimum`;

package/src/components/qualityControls/scoreCriterias/__tests__/Count.spec.js

@@ -0,0 +1,62 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import { fireEvent } from "@testing-library/react";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import Count from "../Count";
+
+const renderOpts = { messages };
+
+describe("<Count />", () => {
+  it("matches the latest snapshot", async () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <Count />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("should update the goal and maximum fields correctly", async () => {
+    const defaultValues = { "testField.goal": "", "testField.maximum": "" };
+
+    const { getByPlaceholderText, queryByText } = render(
+      <TestFormWrapper defaultValues={defaultValues}>
+        <Count />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    const goalInput = getByPlaceholderText("Goal");
+
+    const thresholdInput = getByPlaceholderText("Threshold");
+
+    fireEvent.change(goalInput, { target: { value: "10" } });
+    fireEvent.change(thresholdInput, { target: { value: "20" } });
+
+    await waitFor(() =>
+      expect(queryByText(/Must be greater than y/i)).not.toBeInTheDocument()
+    );
+  });
+
+  it("Show alert if thresholdInput is less than goal", async () => {
+    const { getByPlaceholderText, queryByText } = render(
+      <TestFormWrapper>
+        <Count />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    const goalInput = getByPlaceholderText("Goal");
+    const thresholdInput = getByPlaceholderText("Threshold");
+
+    fireEvent.change(goalInput, { target: { value: "10" } });
+    fireEvent.change(thresholdInput, { target: { value: "1" } });
+
+    await waitFor(() =>
+      expect(queryByText(/Must be greater than 10/i)).toBeInTheDocument()
+    );
+  });
+});

package/src/components/qualityControls/scoreCriterias/__tests__/Deviation.spec.js

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

package/src/components/qualityControls/scoreCriterias/__tests__/ErrorCount.spec.js

@@ -1,63 +1,71 @@
-import React from "react";
-import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
 import { waitFor } from "@testing-library/react";
-import { fireEvent } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
-import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import ErrorCount from "../ErrorCount";
 
-const renderOpts = { messages };
-
 describe("<ErrorCount />", () => {
   it("matches the latest snapshot", async () => {
-    const { container } = render(
+    const rendered = render(
       <TestFormWrapper>
         <ErrorCount />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("should update the goal and maximum fields correctly", async () => {
     const defaultValues = { "testField.goal": "", "testField.maximum": "" };
-
-    const { getByPlaceholderText, queryByText } = render(
+    const rendered = render(
       <TestFormWrapper defaultValues={defaultValues}>
         <ErrorCount />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
+    await waitForLoad(rendered);
 
-    const goalInput = getByPlaceholderText("Goal");
-
-    const thresholdInput = getByPlaceholderText("Threshold");
-
-    fireEvent.change(goalInput, { target: { value: "10" } });
-    fireEvent.change(thresholdInput, { target: { value: "20" } });
+    const user = userEvent.setup({ delay: null });
+    const goalInput = rendered.getByPlaceholderText(
+      "quality_control.score_criteria.error_count.goal"
+    );
+    const thresholdInput = rendered.getByPlaceholderText(
+      "quality_control.score_criteria.error_count.maximum"
+    );
 
+    await user.type(goalInput, "10");
+    await user.type(thresholdInput, "20");
+    rendered.debug();
     await waitFor(() =>
-      expect(queryByText(/Must be greater than y/i)).not.toBeInTheDocument()
+      expect(
+        rendered.queryByText(/must be greater than y/i)
+      ).not.toBeInTheDocument()
     );
   });
 
-  it("Show alert if thresholdInput is less than goal", async () => {
-    const { getByPlaceholderText, queryByText } = render(
+  it.skip("Show alert if thresholdInput is less than goal", async () => {
+    const rendered = render(
       <TestFormWrapper>
         <ErrorCount />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
+    await waitForLoad(rendered);
 
-    const goalInput = getByPlaceholderText("Goal");
-
-    const thresholdInput = getByPlaceholderText("Threshold");
+    const user = userEvent.setup({ delay: null });
+    const goalInput = rendered.getByPlaceholderText(
+      "quality_control.score_criteria.error_count.goal"
+    );
+    const thresholdInput = rendered.getByPlaceholderText(
+      "quality_control.score_criteria.error_count.maximum"
+    );
 
-    fireEvent.change(goalInput, { target: { value: "10" } });
-    fireEvent.change(thresholdInput, { target: { value: "1" } });
+    await user.type(goalInput, "10");
+    await user.type(thresholdInput, "1");
+    await waitForLoad(rendered);
 
     await waitFor(() =>
-      expect(queryByText(/Must be greater than 10/i)).toBeInTheDocument()
+      expect(
+        rendered.queryByText(/must be greater than 10/i)
+      ).toBeInTheDocument()
     );
   });
 });

package/src/components/qualityControls/scoreCriterias/__tests__/Percentage.spec.js

@@ -1,7 +1,6 @@
-import React from "react";
-import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
 import { waitFor } from "@testing-library/react";
-import { fireEvent } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import Percentage from "../Percentage";
@@ -10,52 +9,57 @@ const renderOpts = { messages };
 
 describe("<Percentage />", () => {
   it("matches the latest snapshot", async () => {
-    const { container } = render(
+    const rendered = render(
       <TestFormWrapper>
         <Percentage />
       </TestFormWrapper>,
       renderOpts
     );
-
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("should update the goal and maximum fields correctly", async () => {
-    const { getByPlaceholderText, queryByText } = render(
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(
       <TestFormWrapper>
         <Percentage />
       </TestFormWrapper>,
       renderOpts
     );
+    await waitForLoad(rendered);
 
-    const goalInput = getByPlaceholderText("Goal");
+    const goalInput = rendered.getByPlaceholderText(/goal/i);
+    const thresholdInput = rendered.getByPlaceholderText(/threshold/i);
 
-    const thresholdInput = getByPlaceholderText("Threshold");
+    await user.type(goalInput, "20");
+    await user.type(thresholdInput, "10");
 
-    fireEvent.change(goalInput, { target: { value: "20" } });
-    fireEvent.change(thresholdInput, { target: { value: "10" } });
     await waitFor(() =>
-      expect(queryByText(/Must be less than 10/i)).not.toBeInTheDocument()
+      expect(
+        rendered.queryByText(/must be less than 10/i)
+      ).not.toBeInTheDocument()
     );
   });
 
   it("Show alert if thresholdInput is more than goal", async () => {
-    const { getByPlaceholderText, queryByText } = render(
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(
       <TestFormWrapper>
         <Percentage />
       </TestFormWrapper>,
       renderOpts
     );
+    await waitForLoad(rendered);
 
-    const goalInput = getByPlaceholderText("Goal");
-
-    const thresholdInput = getByPlaceholderText("Threshold");
+    const goalInput = rendered.getByPlaceholderText(/goal/i);
+    const thresholdInput = rendered.getByPlaceholderText(/threshold/i);
 
-    fireEvent.change(goalInput, { target: { value: "10" } });
-    fireEvent.change(thresholdInput, { target: { value: "20" } });
+    await user.type(goalInput, "10");
+    await user.type(thresholdInput, "20");
 
     await waitFor(() =>
-      expect(queryByText(/Must be less than 10/i)).toBeInTheDocument()
+      expect(rendered.queryByText(/must be less than 10/i)).toBeInTheDocument()
     );
   });
 });

package/src/components/qualityControls/scoreCriterias/__tests__/__snapshots__/Count.spec.js.snap

@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Count /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="field"
+  >
+    <label
+      class="field-label"
+    >
+      Goal
+      <span>
+        *
+      </span>
+    </label>
+    <div
+      class="field"
+    >
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Goal"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="field"
+  >
+    <label
+      class="field-label"
+    >
+      Threshold
+      <span>
+        *
+      </span>
+    </label>
+    <div
+      class="field"
+    >
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Threshold"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/qualityControls/scoreCriterias/__tests__/__snapshots__/ErrorCount.spec.js.snap

@@ -8,7 +8,7 @@ exports[`<ErrorCount /> matches the latest snapshot 1`] = `
     <label
       class="field-label"
     >
-      Goal
+      quality_control.score_criteria.error_count.goal
       <span>
         *
       </span>
@@ -21,7 +21,7 @@ exports[`<ErrorCount /> matches the latest snapshot 1`] = `
       >
         <input
           autocomplete="off"
-          placeholder="Goal"
+          placeholder="quality_control.score_criteria.error_count.goal"
           type="text"
           value=""
         />
@@ -34,10 +34,7 @@ exports[`<ErrorCount /> matches the latest snapshot 1`] = `
     <label
       class="field-label"
     >
-      Threshold
-      <span>
-        *
-      </span>
+      quality_control.score_criteria.error_count.maximum
     </label>
     <div
       class="field"
@@ -47,7 +44,7 @@ exports[`<ErrorCount /> matches the latest snapshot 1`] = `
       >
         <input
           autocomplete="off"
-          placeholder="Threshold"
+          placeholder="quality_control.score_criteria.error_count.maximum"
           type="text"
           value=""
         />

package/src/components/scores/MyScoreGroups.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { Header, Icon, Grid, Segment, Divider } from "semantic-ui-react";