@truedat/qx 8.5.1 → 8.5.2

package/src/components/qualityControls/__tests__/__snapshots__/ScoreCriteria.spec.js.snap

@@ -63,7 +63,7 @@ exports[`<ScoreCriteria /> matches the latest snapshot for deviation 1`] = `
 
 exports[`<ScoreCriteria /> matches the latest snapshot for empty controlMode 1`] = `<div />`;
 
-exports[`<ScoreCriteria /> matches the latest snapshot for count 1`] = `
+exports[`<ScoreCriteria /> matches the latest snapshot for error_count 1`] = `
 <div>
   <div
     class="ui segment"
@@ -74,7 +74,7 @@ exports[`<ScoreCriteria /> matches the latest snapshot for count 1`] = `
       <label
         class="field-label"
       >
-        Goal
+        quality_control.score_criteria.error_count.goal
         <span>
           *
         </span>
@@ -87,7 +87,7 @@ exports[`<ScoreCriteria /> matches the latest snapshot for count 1`] = `
         >
           <input
             autocomplete="off"
-            placeholder="Goal"
+            placeholder="quality_control.score_criteria.error_count.goal"
             type="text"
             value=""
           />
@@ -100,7 +100,7 @@ exports[`<ScoreCriteria /> matches the latest snapshot for count 1`] = `
       <label
         class="field-label"
       >
-        Threshold
+        quality_control.score_criteria.error_count.maximum
         <span>
           *
         </span>
@@ -113,7 +113,7 @@ exports[`<ScoreCriteria /> matches the latest snapshot for count 1`] = `
         >
           <input
             autocomplete="off"
-            placeholder="Threshold"
+            placeholder="quality_control.score_criteria.error_count.maximum"
             type="text"
             value=""
           />
@@ -184,3 +184,11 @@ exports[`<ScoreCriteria /> matches the latest snapshot for percentage 1`] = `
   </div>
 </div>
 `;
+
+exports[`<ScoreCriteria /> matches the latest snapshot for unsupported controlMode 1`] = `
+<div>
+  <div
+    class="ui segment"
+  />
+</div>
+`;

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

@@ -154,13 +154,13 @@ describe("qualityByControlMode", () => {
     expect(qualityByControlMode(score)).toEqual(result);
   });
 
-  it("returns correct object when controlMode is count with green", () => {
+  it("returns correct object when controlMode is error_count with green", () => {
     const score = scoreData({
       score_content: {
         count: 10,
       },
       quality_control: {
-        control_mode: "count",
+        control_mode: "error_count",
         score_criteria: {
           maximum: 30,
           goal: 20,
@@ -169,8 +169,8 @@ describe("qualityByControlMode", () => {
     });
     const result = {
       color: "green",
-      label1: "quality_control.score_criteria.count.goal",
-      label2: "quality_control.score_criteria.count.maximum",
+      label1: "quality_control.score_criteria.error_count.goal",
+      label2: "quality_control.score_criteria.error_count.maximum",
       text: 10,
       value1: 20,
       value2: 30,
@@ -178,14 +178,13 @@ describe("qualityByControlMode", () => {
     expect(qualityByControlMode(score)).toEqual(result);
   });
 
-  it("returns correct object when controlMode is count with yellow", () => {
+  it("returns correct object when controlMode is error_count with yellow", () => {
     const score = scoreData({
       score_content: {
         count: 20,
       },
       quality_control: {
-        control_mode: "count",
-
+        control_mode: "error_count",
         score_criteria: {
           maximum: 30,
           goal: 20,
@@ -194,8 +193,8 @@ describe("qualityByControlMode", () => {
     });
     const result = {
       color: "yellow",
-      label1: "quality_control.score_criteria.count.goal",
-      label2: "quality_control.score_criteria.count.maximum",
+      label1: "quality_control.score_criteria.error_count.goal",
+      label2: "quality_control.score_criteria.error_count.maximum",
       text: 20,
       value1: 20,
       value2: 30,
@@ -203,14 +202,13 @@ describe("qualityByControlMode", () => {
     expect(qualityByControlMode(score)).toEqual(result);
   });
 
-  it("returns correct object when controlMode is count with red", () => {
+  it("returns correct object when controlMode is error_count with red", () => {
     const score = scoreData({
       score_content: {
         count: 40,
       },
       quality_control: {
-        control_mode: "count",
-
+        control_mode: "error_count",
         score_criteria: {
           maximum: 30,
           goal: 20,
@@ -219,8 +217,8 @@ describe("qualityByControlMode", () => {
     });
     const result = {
       color: "red",
-      label1: "quality_control.score_criteria.count.goal",
-      label2: "quality_control.score_criteria.count.maximum",
+      label1: "quality_control.score_criteria.error_count.goal",
+      label2: "quality_control.score_criteria.error_count.maximum",
       text: 40,
       value1: 20,
       value2: 30,
@@ -245,4 +243,57 @@ describe("qualityByControlMode", () => {
     const result = {};
     expect(qualityByControlMode(score)).toEqual(result);
   });
+
+  it("returns correct object when controlMode is deviation with no results", () => {
+    const score = scoreData({
+      noResultsMessage: "No results",
+      score_content: {
+        total_count: 0,
+        validation_count: 0,
+      },
+      quality_control: {
+        control_mode: "deviation",
+        score_criteria: {
+          maximum: 80,
+          goal: 50,
+        },
+      },
+    });
+    const result = {
+      color: "grey",
+      label1: "quality_control.score_criteria.deviation.goal",
+      label2: "quality_control.score_criteria.deviation.maximum",
+      text: "No results",
+      value1: 50,
+      value2: 80,
+    };
+    expect(qualityByControlMode(score)).toEqual(result);
+  });
+
+  it("returns correct object when controlMode is percentage with no results", () => {
+    const score = scoreData({
+      noResultsMessage: "No results",
+      score_type: "ratio",
+      score_content: {
+        total_count: 0,
+        validation_count: 0,
+      },
+      quality_control: {
+        control_mode: "percentage",
+        score_criteria: {
+          goal: 30,
+          minimum: 20,
+        },
+      },
+    });
+    const result = {
+      color: "grey",
+      label1: "quality_control.score_criteria.percentage.minimum",
+      label2: "quality_control.score_criteria.percentage.goal",
+      text: "No results",
+      value1: 20,
+      value2: 30,
+    };
+    expect(qualityByControlMode(score)).toEqual(result);
+  });
 });

package/src/components/qualityControls/controlProperties/{Ratio.js → ResourceWithValidation.js}

@@ -10,17 +10,21 @@ import { useDataViews } from "@truedat/qx/hooks/useDataViews";
 import { useFunctions } from "@truedat/qx/hooks/useFunctions";
 import ResourceSelector from "@truedat/qx/components/common/ResourceSelector";
 import { Clauses } from "@truedat/qx/components/common/expressions";
+import PropTypes from "prop-types";
 
-export default function Ratio() {
+export default function ResourceWithValidation({
+  resourceKey,
+  resourceLabelId,
+  validationLabelId,
+}) {
   const { field, fields } = use(QxContext);
   const { watch } = useFormContext();
 
   const formData = watch();
-
   const { control_properties: controlProperties, source_id: sourceId } =
     formData;
 
-  const resource = _.prop("resource")(controlProperties);
+  const resource = _.prop(resourceKey)(controlProperties);
 
   const { data, loading: dataViewsLoading } = useDataViews();
   const { data: functionsData, loading: functionsLoading } = useFunctions();
@@ -35,7 +39,7 @@ export default function Ratio() {
   const referenceDatasets = _.flow(
     _.getOr([], "referenceDatasets"),
     _.sortBy([({ name }) => lowerDeburrTrim(name), "name"]),
-    _.map((row) => ({ ...row, id: Number(row?.id) }))
+    _.map((row) => ({ ...row, id: Number(row?.id) })),
   )(referenceDatasetsData);
   const context = {
     dataViews,
@@ -47,11 +51,10 @@ export default function Ratio() {
     <Loading />
   ) : (
     <>
-      <QxContext value={{ ...context, sourceId, field: `${field}.resource` }}>
-        <ResourceSelector
-          required
-          labelId="quality_control.form.control_properties.ratio.resource"
-        />
+      <QxContext
+        value={{ ...context, sourceId, field: `${field}.${resourceKey}` }}
+      >
+        <ResourceSelector required labelId={resourceLabelId} />
       </QxContext>
       {resource?.id ? (
         <div className="vertical-space">
@@ -63,10 +66,16 @@ export default function Ratio() {
               field: `${field}.validation`,
             }}
           >
-            <Clauses labelId="quality_control.form.control_properties.ratio.validation" />
+            <Clauses labelId={validationLabelId} />
           </QxContext>
         </div>
       ) : null}
     </>
   );
 }
+
+ResourceWithValidation.propTypes = {
+  resourceKey: PropTypes.oneOf(["resource", "errors_resource"]).isRequired,
+  resourceLabelId: PropTypes.string.isRequired,
+  validationLabelId: PropTypes.string.isRequired,
+};

package/src/components/qualityControls/controlProperties/__tests__/ResourceWithValidation.spec.js

@@ -0,0 +1,192 @@
+import { FormProvider, useForm } from "react-hook-form";
+import { render, waitForLoad } from "@truedat/test/render";
+import QxContext from "@truedat/qx/components/QxContext";
+import ResourceWithValidation from "../ResourceWithValidation";
+
+const mockedUseQuery = jest.fn();
+const mockedUseDataViews = jest.fn();
+const mockedUseFunctions = jest.fn();
+
+jest.mock("@apollo/client", () => ({
+  ...jest.requireActual("@apollo/client"),
+  useQuery: (...args) => mockedUseQuery(...args),
+}));
+
+jest.mock("@truedat/qx/hooks/useDataViews", () => ({
+  useDataViews: () => mockedUseDataViews(),
+}));
+
+jest.mock("@truedat/qx/hooks/useFunctions", () => ({
+  useFunctions: () => mockedUseFunctions(),
+}));
+
+jest.mock("@truedat/core/components", () => ({
+  Loading: () => <div>loading-component</div>,
+}));
+
+jest.mock("@truedat/qx/components/common/ResourceSelector", () =>
+  jest.fn(({ labelId, required }) => (
+    <div>
+      <div>resource-selector</div>
+      <div data-testid="resource-selector-label">{labelId}</div>
+      <div data-testid="resource-selector-required">{String(required)}</div>
+    </div>
+  ))
+);
+
+jest.mock("@truedat/qx/components/common/expressions", () => ({
+  Clauses: jest.fn(({ labelId }) => (
+    <div>
+      <div>clauses-component</div>
+      <div data-testid="clauses-label">{labelId}</div>
+    </div>
+  )),
+}));
+
+function ComponentWrapper({ children, defaultValues, contextValue }) {
+  const form = useForm({ defaultValues });
+
+  return (
+    <FormProvider {...form}>
+      <QxContext value={contextValue}>{children}</QxContext>
+    </FormProvider>
+  );
+}
+
+describe("<ResourceWithValidation />", () => {
+  beforeEach(() => {
+    mockedUseDataViews.mockReturnValue({
+      data: { data: [{ id: 9 }, { id: 1 }] },
+      loading: false,
+    });
+    mockedUseFunctions.mockReturnValue({
+      data: { data: [{ id: "fn_1" }] },
+      loading: false,
+    });
+    mockedUseQuery.mockReturnValue({
+      data: {
+        referenceDatasets: [
+          { id: "3", name: "zeta" },
+          { id: "2", name: "Alpha" },
+        ],
+      },
+      loading: false,
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders loading while dependencies are still loading", async () => {
+    mockedUseFunctions.mockReturnValue({
+      data: { data: [] },
+      loading: true,
+    });
+
+    const rendered = render(
+      <ComponentWrapper
+        defaultValues={{
+          source_id: 77,
+          control_properties: {},
+        }}
+        contextValue={{ field: "control_properties", fields: [{ name: "a" }] }}
+      >
+        <ResourceWithValidation
+          resourceKey="resource"
+          resourceLabelId="resource.label"
+          validationLabelId="validation.label"
+        />
+      </ComponentWrapper>
+    );
+
+    expect(rendered.getByText(/loading-component/i)).toBeInTheDocument();
+    expect(rendered.queryByText(/resource-selector/i)).not.toBeInTheDocument();
+  });
+
+  it("renders resource selector when loading is completed", async () => {
+    const rendered = render(
+      <ComponentWrapper
+        defaultValues={{
+          source_id: 88,
+          control_properties: {},
+        }}
+        contextValue={{
+          field: "control_properties",
+          fields: [{ name: "one" }],
+        }}
+      >
+        <ResourceWithValidation
+          resourceKey="resource"
+          resourceLabelId="resource.label"
+          validationLabelId="validation.label"
+        />
+      </ComponentWrapper>
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText(/resource-selector/i)).toBeInTheDocument();
+    expect(rendered.getByTestId("resource-selector-label")).toHaveTextContent(
+      "resource.label"
+    );
+    expect(
+      rendered.getByTestId("resource-selector-required")
+    ).toHaveTextContent("true");
+    expect(rendered.queryByText(/clauses-component/i)).not.toBeInTheDocument();
+  });
+
+  it("renders validation clauses when resource has id", async () => {
+    const rendered = render(
+      <ComponentWrapper
+        defaultValues={{
+          source_id: 42,
+          control_properties: {
+            resource: { id: 123 },
+          },
+        }}
+        contextValue={{
+          field: "control_properties",
+          fields: [{ name: "field_1" }, { name: "field_2" }],
+        }}
+      >
+        <ResourceWithValidation
+          resourceKey="resource"
+          resourceLabelId="resource.label"
+          validationLabelId="validation.label"
+        />
+      </ComponentWrapper>
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText(/clauses-component/i)).toBeInTheDocument();
+    expect(rendered.getByTestId("clauses-label")).toHaveTextContent(
+      "validation.label"
+    );
+  });
+
+  it("uses errors_resource key to decide validation visibility", async () => {
+    const rendered = render(
+      <ComponentWrapper
+        defaultValues={{
+          source_id: 99,
+          control_properties: {
+            errors_resource: { id: 456 },
+          },
+        }}
+        contextValue={{ field: "control_properties", fields: [] }}
+      >
+        <ResourceWithValidation
+          resourceKey="errors_resource"
+          resourceLabelId="errors.resource.label"
+          validationLabelId="validation.label"
+        />
+      </ComponentWrapper>
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.getByTestId("resource-selector-label")).toHaveTextContent(
+      "errors.resource.label"
+    );
+    expect(rendered.getByText(/clauses-component/i)).toBeInTheDocument();
+  });
+});

package/src/components/qualityControls/qualityByControlMode.js

@@ -9,20 +9,6 @@ export default function qualityByControlMode(score) {
   if (!scoreContent) return { isEmpty: true };
 
   switch (controlMode) {
-    case "count":
-      return {
-        color:
-          scoreContent.count < scoreCriteria.goal
-            ? "green"
-            : scoreContent.count < scoreCriteria.maximum
-              ? "yellow"
-              : "red",
-        label1: "quality_control.score_criteria.count.goal",
-        value1: scoreCriteria.goal,
-        label2: "quality_control.score_criteria.count.maximum",
-        value2: scoreCriteria.maximum,
-        text: scoreContent.count,
-      };
     case "deviation":
       const deviationRatio =
         scoreContent.total_count == 0
@@ -73,28 +59,18 @@ export default function qualityByControlMode(score) {
         text: percentageResult,
       };
     case "error_count":
-      const errorCount =
-        scoreContent.total_count == 0
-          ? null
-          : (scoreContent.validation_count / scoreContent.total_count) * 100;
-
-      const errorCountResult =
-        scoreContent.total_count == 0 ? noResultsMessage : `${errorCount}%`;
-
       return {
         color:
-          scoreContent.total_count == 0
-            ? "grey"
-            : errorCount < scoreCriteria.goal
-              ? "green"
-              : errorCount < scoreCriteria.maximum
-                ? "yellow"
-                : "red",
+          scoreContent.count < scoreCriteria.goal
+            ? "green"
+            : scoreContent.count < 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,
+        text: scoreContent.count,
       };
     default:
       return {};

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

@@ -56,7 +56,6 @@ export default function ErrorCount() {
         rules={numberRules({
           formatMessage,
           minValue: goal,
-          maxValue: 100,
           required: true,
         })}
         render={({

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

@@ -26,10 +26,10 @@ describe("<ErrorCount />", () => {
 
     const user = userEvent.setup({ delay: null });
     const goalInput = rendered.getByPlaceholderText(
-      "quality_control.score_criteria.error_count.goal"
+      /quality_control\.score_criteria\.error_count\.goal/i
     );
     const thresholdInput = rendered.getByPlaceholderText(
-      "quality_control.score_criteria.error_count.maximum"
+      /quality_control\.score_criteria\.error_count\.maximum/i
     );
 
     await user.type(goalInput, "10");
@@ -52,10 +52,10 @@ describe("<ErrorCount />", () => {
 
     const user = userEvent.setup({ delay: null });
     const goalInput = rendered.getByPlaceholderText(
-      "quality_control.score_criteria.error_count.goal"
+      /quality_control\.score_criteria\.error_count\.goal/i
     );
     const thresholdInput = rendered.getByPlaceholderText(
-      "quality_control.score_criteria.error_count.maximum"
+      /quality_control\.score_criteria\.error_count\.maximum/i
     );
 
     await user.type(goalInput, "10");