@truedat/qx 7.0.8 → 7.1.0

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

@@ -0,0 +1,47 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import { templateByNameMock } from "@truedat/test/mocks";
+import { qualityControlData } from "./__fixtures__/qualityControlHelper";
+import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import QualityControl from "../QualityControl";
+
+const renderOpts = {
+  mocks: [templateByNameMock({ name: "template1", domainIds: [2] })],
+  messages,
+  fallback: "loading",
+};
+
+describe("<QualityControl />", () => {
+  it("matches the latest snapshot", async () => {
+    const context = { qualityControl: qualityControlData() };
+    const { container, queryByText } = render(
+      <TestFormWrapper context={context}>
+        <QualityControl />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    await waitFor(() => {
+      expect(queryByText(/loading/i)).not.toBeInTheDocument();
+      expect(container.querySelector(".loader")).not.toBeInTheDocument();
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot without df_type", async () => {
+    const context = {
+      qualityControl: qualityControlData({ df_type: undefined }),
+    };
+    const { queryByText } = render(
+      <TestFormWrapper context={context}>
+        <QualityControl />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    await waitFor(() =>
+      expect(queryByText(/Information/i)).not.toBeInTheDocument()
+    );
+  });
+});

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

@@ -0,0 +1,192 @@
+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 { 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() };
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useHistory: () => mockHistory,
+}));
+
+jest.mock("@truedat/core/hooks", () => ({
+  useAuthorized: jest.fn(() => true),
+}));
+
+jest.mock("@truedat/qx/hooks/useQualityControls", () => {
+  const { qualityControlData } = jest.requireActual(
+    "./__fixtures__/qualityControlHelper"
+  );
+
+  return {
+    useQualityControlUpdateMain: jest.fn(() => ({
+      trigger: jest.fn(() => Promise.resolve()),
+      data: qualityControlData(),
+      isMutating: false,
+      loading: false,
+    })),
+    useQualityControlUpdateStatus: jest.fn(() => ({
+      trigger: jest.fn(() => Promise.resolve()),
+      data: { ...qualityControlData(), status: "published" },
+      isMutating: false,
+      loading: false,
+    })),
+  };
+});
+
+jest.mock("@truedat/qx/hooks/useScoreGroups", () => {
+  const { scoreGroup } = jest.requireActual(
+    "@truedat/qx/components/scores/__tests__/__fixtures__/scoreHelper"
+  );
+
+  return {
+    useScoreGroupCreate: jest.fn(() => ({
+      trigger: jest.fn(() => Promise.resolve({ data: { data: scoreGroup } })),
+      loading: false,
+    })),
+  };
+});
+
+const actions = ["deprecate", "create_draft", "toggle_active"];
+const mutate = jest.fn();
+const qualityControl = qualityControlData();
+
+const context = {
+  actions,
+  qualityControl,
+  mutate,
+};
+const variables = { scope: "qe" };
+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(
+      <TestFormWrapper context={{ ...context }}>
+        <QualityControlActions />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("render actions for dratf status", () => {
+    const newContext = {
+      ...context,
+      actions: ["send_to_approval", "publish", "edit", "toggle_active"],
+    };
+    const { queryByText } = render(
+      <TestFormWrapper context={{ ...newContext }}>
+        <QualityControlActions />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    expect(queryByText(/Edit/i)).toBeInTheDocument();
+  });
+
+  it("renders the correct actions", async () => {
+    const { getByText, queryByText } = 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();
+  });
+
+  it("render the correct actions when is disabled", async () => {
+    const disableQualityControl = qualityControlData({ active: false });
+    const { getByText, queryByText } = render(
+      <TestFormWrapper
+        context={{ ...context, qualityControl: disableQualityControl }}
+      >
+        <QualityControlActions />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    expect(getByText(/Enable/i)).toBeInTheDocument();
+  });
+
+  it("render onConfirm when toggle_active button is clicked", async () => {
+    const { getByText, queryByText } = render(
+      <TestFormWrapper context={{ ...context }}>
+        <QualityControlActions />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    userEvent.click(getByText(/Enable|Disable/i));
+    await waitFor(() =>
+      expect(queryByText(/confirm_yes/i)).toBeInTheDocument()
+    );
+    userEvent.click(getByText(/confirm_yes/i));
+    await waitFor(() => expect(mutate).toHaveBeenCalledTimes(1));
+  });
+
+  it("renders correct Link components for create_draft and edit actions", () => {
+    const actions = ["create_draft", "edit"];
+    const { getByText } = render(
+      <TestFormWrapper context={{ ...context, actions }}>
+        <QualityControlActions />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    expect(getByText(/Create Draft/i).closest("a")).toHaveAttribute(
+      "href",
+      `/qualityControls/${qualityControl.id}/new_draft`
+    );
+    expect(getByText(/Edit/i).closest("a")).toHaveAttribute(
+      "href",
+      `/qualityControls/${qualityControl.id}/edit`
+    );
+  });
+
+  it("calls updateStatus when default action button is clicked", async () => {
+    const { getByText, queryByText } = render(
+      <TestFormWrapper context={{ ...context, actions: ["publish"] }}>
+        <QualityControlActions />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    userEvent.click(getByText(/Publish/i));
+    await waitFor(() => expect(queryByText(/Publish/i)).toBeInTheDocument());
+  });
+
+  it("calls onCreateScoreGroup when ScoreGroupPopup is submitted", async () => {
+    const { getByText, queryByText } = render(
+      <TestFormWrapper context={{ ...context }}>
+        <QualityControlActions />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+
+    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");
+  });
+});

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import QualityControlCrumbs from "../QualityControlCrumbs";
+import { qualityControlData } from "./__fixtures__/qualityControlHelper";
+
+const renderOpts = { messages };
+
+describe("<QualityControlCrumbs />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <QualityControlCrumbs qualityControl={qualityControlData()} />,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,296 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor, fireEvent } from "@testing-library/react";
+import { act } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { DOMAINS_QUERY } from "@truedat/core/api/queries";
+import { singleTemplateMock } from "@truedat/test/mocks";
+import { REFERENCE_DATASETS_HEADERS_QUERY } from "@truedat/dd/api/queries";
+import { SOURCE_OPTIONS_QUERY } from "@truedat/cx/sources/api/queries";
+import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import { defaultQualityControl } from "../NewQualityControl";
+import QualityControlEditor from "../QualityControlEditor";
+import {
+  sources,
+  domains,
+  qualityControlData,
+} from "./__fixtures__/qualityControlHelper";
+
+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 createDomainsMock = {
+  request: {
+    query: DOMAINS_QUERY,
+    variables: { action: "createQualityControls" },
+  },
+  result: { data: { domains } },
+};
+
+const publishDomainsMock = {
+  request: {
+    query: DOMAINS_QUERY,
+    variables: { action: "publishQualityControls" },
+  },
+  result: { data: { domains } },
+};
+
+const mocks = [
+  publishDomainsMock,
+  createDomainsMock,
+  sourcesMock,
+  referenceDatasetsMock,
+  singleTemplateMock({ scope: "quality_control", domainIds: ["2"] }),
+  singleTemplateMock({ scope: "quality_control", domainIds: [2] }),
+  singleTemplateMock({ scope: "quality_control", domainIds: [] }),
+];
+
+const renderOpts = {
+  mocks,
+  messages,
+  fallback: "lazy",
+};
+
+const props = {
+  value: qualityControlData(),
+  isModification: true,
+  onPublish: jest.fn(),
+  onSave: jest.fn(),
+  onCancel: jest.fn(),
+  isSubmitting: false,
+};
+
+describe("<QualityControlEditor />", () => {
+  it("matches the latest snapshot for edition", async () => {
+    const { container, queryByText } = render(
+      <QualityControlEditor {...props} />,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitFor(() =>
+      expect(container.querySelector(".loader")).not.toBeInTheDocument()
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot for creation", async () => {
+    const { getByRole, container, queryByText } = render(
+      <QualityControlEditor
+        {...props}
+        isModification={false}
+        value={defaultQualityControl}
+      />,
+      renderOpts
+    );
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(container.querySelector(".loader")).not.toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(getByRole("button", { name: /Save/ })).toBeDisabled()
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("test cancel button with out modal confirmation", async () => {
+    const onCancel = jest.fn();
+    const newProps = { ...props, onCancel };
+    const { getByRole, queryByText } = render(
+      <QualityControlEditor {...newProps} />,
+      renderOpts
+    );
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    userEvent.click(getByRole("button", { name: /Cancel/i }));
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it("test cancel button with modal confirmation", async () => {
+    const onCancel = jest.fn();
+    const newProps = { ...props, onCancel };
+    const { getByRole, queryByText, getByPlaceholderText, getByText } = render(
+      <QualityControlEditor {...newProps} />,
+      renderOpts
+    );
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    const nameInput = getByPlaceholderText("Name");
+    fireEvent.change(nameInput, { target: { value: "test_modified" } });
+    await act(async () =>
+      userEvent.click(getByRole("button", { name: /Cancel/i }))
+    );
+
+    await waitFor(() =>
+      expect(queryByText(/confirm_yes/i)).toBeInTheDocument()
+    );
+    userEvent.click(getByText(/confirm_yes/));
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it("test onSave", async () => {
+    const onSave = jest.fn();
+    const { getByRole, getByPlaceholderText, queryByText } = render(
+      <QualityControlEditor {...props} onSave={onSave} />,
+      renderOpts
+    );
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    expect(getByRole("button", { name: /Save/i })).toBeDisabled();
+
+    userEvent.type(getByPlaceholderText("Name"), "_modified");
+
+    await waitFor(() =>
+      expect(getByRole("button", { name: /Save/i })).toBeEnabled()
+    );
+
+    const expectedQualityControl = qualityControlData({
+      name: "test_modified",
+    });
+
+    userEvent.click(getByRole("button", { name: /Save/i }));
+
+    await waitFor(() =>
+      expect(onSave).toHaveBeenCalledWith(expectedQualityControl)
+    );
+  });
+  it("test onPublish", async () => {
+    const onPublish = jest.fn();
+    const { getByRole, getByPlaceholderText, queryByText } = render(
+      <QualityControlEditor {...props} onPublish={onPublish} />,
+      renderOpts
+    );
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    expect(getByRole("button", { name: /Publish/i })).toBeDisabled();
+
+    userEvent.type(getByPlaceholderText("Name"), "_modified");
+
+    await waitFor(() =>
+      expect(getByRole("button", { name: /Publish/i })).toBeEnabled()
+    );
+
+    const expectedQualityControl = qualityControlData({
+      name: "test_modified",
+    });
+
+    userEvent.click(getByRole("button", { name: /Publish/i }));
+
+    await waitFor(() =>
+      expect(onPublish).toHaveBeenCalledWith(expectedQualityControl)
+    );
+  });
+
+  it("test fill form", async () => {
+    const {
+      container,
+      getByText,
+      getByPlaceholderText,
+      queryByText,
+      getByRole,
+    } = render(
+      <QualityControlEditor
+        {...props}
+        value={defaultQualityControl}
+        isModification={false}
+      />,
+      renderOpts
+    );
+
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(getByRole("button", { name: /Publish/i })).toBeDisabled()
+    );
+
+    userEvent.click(getByText(/Enable/));
+
+    // Fill in the 'Name' field
+    userEvent.type(getByPlaceholderText("Name"), "test_modified");
+
+    // Select a domain
+    userEvent.click(getByText(/Select domains/));
+    userEvent.click(getByText(/barDomain/));
+
+    // Select a source
+    userEvent.click(getByText(/Select source/));
+    userEvent.click(getByRole("option", { name: /external_source_id/i }));
+
+    userEvent.click(getByRole("option", { name: /Error count/i }));
+
+    // Fill in the 'Goal' field
+    userEvent.type(getByPlaceholderText("Goal"), "25");
+    // Fill in the 'Threshold' field
+    userEvent.type(getByPlaceholderText("Threshold"), "50");
+
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(container.querySelector(".loader")).not.toBeInTheDocument()
+    );
+
+    // Select the 'Reference datasets' for the resource type
+    userEvent.click(getByText(/Resource type/));
+    userEvent.click(getByText(/Reference datasets/));
+    userEvent.click(getByRole("option", { name: /dataset1/i }));
+
+    await waitFor(() =>
+      expect(getByRole("button", { name: /Publish/i })).toBeEnabled()
+    );
+  });
+});

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

@@ -0,0 +1,68 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import { useQualityControl } from "@truedat/qx/hooks/useQualityControls";
+import QualityControlHeader from "../QualityControlHeader";
+import { qualityControlData } from "./__fixtures__/qualityControlHelper";
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useParams: () => ({ id: "8" }),
+}));
+
+jest.mock("@truedat/qx/hooks/useQualityControls", () => {
+  const { qualityControlData } = jest.requireActual(
+    "@truedat/qx/components/qualityControls/__tests__/__fixtures__/qualityControlHelper"
+  );
+
+  return {
+    useQualityControl: jest.fn(() => ({
+      data: { data: qualityControlData() },
+      loading: false,
+      mutate: jest.fn(),
+    })),
+    useQualityControlUpdateMain: jest.fn(() => ({
+      trigger: jest.fn(() => Promise.resolve()),
+      data: qualityControlData(),
+      loading: false,
+    })),
+    useQualityControlUpdateStatus: jest.fn(() => ({
+      trigger: jest.fn(() => Promise.resolve()),
+      data: { ...qualityControlData(), status: "published" },
+      loading: false,
+    })),
+  };
+});
+
+const renderOpts = { messages };
+
+describe("<QualityControlHeader />", () => {
+  it("matches the latest snapshot with control quality active", () => {
+    const { container, queryByText } = render(
+      <QualityControlHeader />,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+    expect(queryByText(/Enabled/i)).toBeInTheDocument();
+  });
+
+  it("render control quality active = false", () => {
+    useQualityControl.mockImplementation(() => ({
+      data: { data: { ...qualityControlData(), active: false } },
+      loading: true,
+    }));
+    const { queryByText } = render(<QualityControlHeader />, renderOpts);
+
+    expect(queryByText(/Disabled/i)).toBeInTheDocument();
+  });
+
+  it("renders nothing when quality control is empty", () => {
+    useQualityControl.mockImplementation(() => ({
+      data: { data: {} },
+      loading: true,
+    }));
+    const { queryByText } = render(<QualityControlHeader />, renderOpts);
+    expect(queryByText(".header")).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,21 @@
+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 { qualityControlData } from "./__fixtures__/qualityControlHelper";
+import QualityControlsHistory from "../QualityControlHistory";
+
+const renderOpts = { messages };
+
+describe("<QualityControlsHistory />", () => {
+  it("matches the latest snapshot", async () => {
+    const context = { qualityControl: qualityControlData() };
+    const { container } = render(
+      <TestFormWrapper context={context}>
+        <QualityControlsHistory />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});