@truedat/dq 4.44.4 → 4.44.5

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

@@ -1,57 +1,22 @@
-import React, { Suspense } from "react";
+import React from "react";
 import { waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
-import { TEMPLATES_QUERY } from "@truedat/core/api/queries";
+import { multipleTemplatesMock } from "@truedat/test/mocks";
 import RemediationForm from "../RemediationForm";
 
-const templatesMock = {
-  request: { query: TEMPLATES_QUERY, variables: { scope: "remediation" } },
-  result: {
-    data: {
-      templates: [
-        {
-          id: "1",
-          name: "template1",
-          label: "template1",
-          scope: "remediation",
-          content: [
-            { name: "g1", fields: [{ name: "field1", label: "field1" }] },
-          ],
-        },
-        {
-          id: "2",
-          name: "template2",
-          label: "template2",
-          scope: "remediation",
-          content: {},
-        },
-      ],
-    },
-  },
-};
-
 const renderOpts = {
-  mocks: [templatesMock],
-  state: { remediation: {} },
+  mocks: [multipleTemplatesMock({ scope: "remediation", domainIds: [1] })],
+  state: { remediation: {}, ruleImplementation: { domain_id: 1 } },
+  fallback: "lazy",
 };
 
 describe("<RemediationForm />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(<RemediationForm />, renderOpts);
-    expect(container).toMatchSnapshot();
-  });
-
-  it("selecting a template switches the dynamic form", async () => {
-    const { getByText, findByText } = render(
-      <Suspense fallback="loading...">
-        <RemediationForm />
-      </Suspense>,
-      renderOpts
+  it("matches the latest snapshot", async () => {
+    const { container, queryByText } = render(<RemediationForm />, renderOpts);
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
     );
-    userEvent.click(await findByText("template1"));
-    await waitFor(() => {
-      expect(getByText("field1")).toBeInTheDocument();
-    });
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,106 +1,82 @@
-import React, { Suspense } from "react";
-import { render } from "@truedat/test/render";
+import React from "react";
+import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { RemediationPlan } from "../RemediationPlan";
-
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-//jest.spyOn(React, "useContext").mockImplementation(() => intl);
+import { render } from "@truedat/test/render";
+import { multipleTemplatesMock } from "@truedat/test/mocks";
+import RemediationPlan from "../RemediationPlan";
 
 jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"), // use actual for all non-hook parts
+  ...jest.requireActual("react-router-dom"),
   useParams: () => ({
     id: 777,
     implementation_id: 862,
     rule_result_id: 66322,
   }),
-  useRouteMatch: () => ({
-    url: "/rules/777/implementations/862/results/66322",
-  }),
 }));
 
-describe("<RemediationPlan />", () => {
-  const template1 = { id: 1, name: "remediation_template1" };
-  const template2 = { id: 2, name: "remediation_template2" };
-  const props = {
-    remediationLoading: false,
-    clearRemediation: jest.fn(),
-    fetchRemediation: jest.fn(),
-    templates: [template1, template2],
-    lastResultId: undefined,
-    manageRemediations: true,
-  };
-  const remediation = {
-    df_content: {
-      texto: "66322_cambiado",
-    },
-    df_name: "remediation_template",
-    id: 60,
-  };
+const remediation = {
+  df_content: {
+    texto: "66322_cambiado",
+  },
+  df_name: "template1",
+  id: 60,
+};
 
-  const renderOpts = {
-    messages: {
-      en: {
-        "actions.cancel": "Cancel",
-        "actions.edit": "Edit",
-        "actions.save": "Save",
-        remediation: "Remediation plan",
-        "remediation.actions.create": "Create Remediation Plan",
-        "remediation.actions.edit": "Edit Remediation Plan",
-        "template.not_found.message": "Error: Invalid template",
-      },
-    },
-  };
+const state = {
+  remediation,
+  remediationLoading: false,
+  remediationActions: { create: true },
+};
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(
-      <Suspense fallback={null}>
-        <RemediationPlan {...props} />
-      </Suspense>,
-      renderOpts
+const renderOpts = {
+  state,
+  routes: ["/rules/777/implementations/862/results/66322"],
+  fallback: "lazy",
+  mocks: [multipleTemplatesMock({ scope: "remediation", domainIds: [1] })],
+};
+
+describe("<RemediationPlan />", () => {
+  it("matches the latest snapshot", async () => {
+    const { container, queryByText } = render(<RemediationPlan />, renderOpts);
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
     );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
     expect(container).toMatchSnapshot();
   });
 
-  it("New remediation component is shown if there is no existing remediation", () => {
+  it("New remediation component is shown if there is no existing remediation", async () => {
     const state = {
-      remediationActions: {
-        create: { href: "something" },
-      },
-      templates: props.templates,
+      remediationActions: { create: true },
+      templates: [{ id: 1 }],
     };
-
-    const { queryByText } = render(<RemediationPlan {...props} />, {
+    const { queryByText } = render(<RemediationPlan />, {
       ...renderOpts,
       state,
     });
-
-    expect(queryByText(/Create Remediation Plan/)).toBeInTheDocument();
+    await waitFor(() =>
+      expect(queryByText(/Create Remediation Plan/)).toBeInTheDocument()
+    );
   });
 
-  it("Remediation view is shown if there is an existing remediation", () => {
-    const { queryByText } = render(
-      <Suspense fallback={null}>
-        <RemediationPlan {...props} remediation={remediation} />
-      </Suspense>,
-      renderOpts
-    );
+  it("Remediation view is shown if there is an existing remediation", async () => {
+    const { queryByText } = render(<RemediationPlan />, renderOpts);
 
-    expect(queryByText(/Edit/)).toBeInTheDocument();
+    await waitFor(() => expect(queryByText(/Edit/)).toBeInTheDocument());
   });
 
   it("Remediation form is shown if edit button is clicked", async () => {
-    const { queryByText, findByRole } = await render(
-      <Suspense fallback={null}>
-        <RemediationPlan {...props} remediation={remediation} />
-      </Suspense>,
+    const { queryByText, queryByRole } = render(
+      <RemediationPlan />,
       renderOpts
     );
 
+    await waitFor(() => expect(queryByText("loading")).not.toBeInTheDocument());
     userEvent.click(await queryByText(/Edit/));
-
-    expect(
-      await findByRole("form", { name: "remediation-form" })
-    ).toBeInTheDocument();
+    await waitFor(() =>
+      expect(
+        queryByRole("form", { name: "remediation-form" })
+      ).toBeInTheDocument()
+    );
   });
 });

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

@@ -1,36 +1,10 @@
 import React from "react";
 import { waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
-import { TEMPLATES_QUERY } from "@truedat/core/api/queries";
+import userEvent from "@testing-library/user-event";
+import { multipleTemplatesMock } from "@truedat/test/mocks";
 import RuleForm from "../RuleForm";
 
-const templatesMock = {
-  request: { query: TEMPLATES_QUERY, variables: { scope: "remediation" } },
-  result: {
-    data: {
-      templates: [
-        {
-          id: "1",
-          name: "template1",
-          label: "template1",
-          scope: "remediation",
-          content: [
-            { name: "g1", fields: [{ name: "field1", label: "field1" }] },
-          ],
-        },
-        {
-          id: "2",
-          name: "template2",
-          label: "template2",
-          scope: "remediation",
-          content: {},
-        },
-      ],
-    },
-  },
-};
-
 const rule = {
   id: 123,
   business_concept_id: "2D2B3",
@@ -43,49 +17,45 @@ const state = {
   domains: [{ id: 1, name: "domain1" }],
 };
 
-const renderOpts = { mocks: [templatesMock], state };
+const renderOpts = {
+  mocks: [multipleTemplatesMock({ scope: "dq", domainIds: [1] })],
+  state,
+  fallback: "lazy",
+};
 
 describe("<RuleForm />", () => {
   it("matches the latest snapshot", async () => {
     const props = { onSubmit: jest.fn() };
     const { container, queryByText } = render(
-      <React.Suspense fallback="loading...">
-        <RuleForm {...props} />
-      </React.Suspense>,
+      <RuleForm {...props} />,
       renderOpts
     );
-    await waitFor(() => {
-      expect(queryByText(/loading/i)).not.toBeInTheDocument();
-    });
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
     expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot (edit mode)", async () => {
     const props = { onSubmit: jest.fn(), editMode: true };
-    const { container, queryByText } = render(
-      <React.Suspense fallback="loading...">
-        <RuleForm {...props} />
-      </React.Suspense>,
-      { ...renderOpts, state: { ...state, rule } }
-    );
-    await waitFor(() => {
-      expect(queryByText(/loading/i)).not.toBeInTheDocument();
+    const { container, queryByText } = render(<RuleForm {...props} />, {
+      ...renderOpts,
+      state: { ...state, rule },
     });
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
     expect(container).toMatchSnapshot();
   });
 
   it("enables save button after name and domain are specified", async () => {
     const props = { onSubmit: jest.fn() };
-    const { getByRole, queryByText } = render(
-      <React.Suspense fallback="loading...">
-        <RuleForm {...props} />
-      </React.Suspense>,
-      renderOpts
+    const { getByRole } = render(<RuleForm {...props} />, renderOpts);
+    await waitFor(() =>
+      expect(getByRole("button", { name: /save/i })).toBeDisabled()
     );
-    await waitFor(() => {
-      expect(queryByText(/loading/i)).not.toBeInTheDocument();
-    });
-    expect(getByRole("button", { name: /save/i })).toBeDisabled();
     userEvent.click(getByRole("option", { name: "domain1" }));
     userEvent.type(getByRole("textbox", { name: /rule name/i }), "rule1");
     await waitFor(() => {

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

@@ -1,37 +1,49 @@
 import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
-import { RuleProperties } from "../RuleProperties";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import RuleProperties from "../RuleProperties";
 
-const mockHistory = {
-  push: jest.fn(),
-};
-
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useHistory: () => mockHistory,
-}));
-
-describe("<RuleProperties />", () => {
-  it("matches the latest snapshot", () => {
-    const props = {
-      business_concept_id: "2D2B3",
-      domain_id: 1,
-      domain: { id: 1, name: "foo", external_id: "bar" },
-      description: {
-        document: {
+const rule = {
+  active: true,
+  business_concept_id: "2D2B3",
+  domain_id: 1,
+  domain: { id: 1, name: "foo", external_id: "bar" },
+  description: {
+    document: {
+      data: {},
+      nodes: [
+        {
           data: {},
-          object: "document",
           nodes: [
             {
-              data: {},
-              nodes: [{ marks: [{ data: {}, object: "text", text: "desc1" }] }],
+              marks: [],
+              object: "text",
+              text: "desc",
             },
           ],
+          object: "block",
+          type: "paragraph",
         },
-      },
-      rule_type: { name: "type1" },
-    };
-    const wrapper = shallowWithIntl(<RuleProperties {...props} />);
-    expect(wrapper).toMatchSnapshot();
+      ],
+      object: "document",
+    },
+    object: "value",
+  },
+  rule_type: { name: "type1" },
+};
+
+const renderOpts = {
+  state: { rule },
+  fallback: "lazy",
+};
+
+describe("<RuleProperties />", () => {
+  it("matches the latest snapshot", async () => {
+    const { container, queryByText } = render(<RuleProperties />, renderOpts);
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/__tests__/__snapshots__/ExecutionForm.spec.js.snap

@@ -5,13 +5,83 @@ exports[`<ExecutionForm /> matches the latest snapshot 1`] = `
   <h2
     class="ui header"
   >
-    header
+    Implementations execution
   </h2>
   <form
-    class="ui loading form"
+    class="ui form"
   >
+    <div
+      class="field"
+    >
+      <label>
+        Template
+      </label>
+      <div
+        class="field"
+      >
+        <div
+          aria-busy="false"
+          aria-expanded="false"
+          class="ui search selection dropdown"
+          name="template"
+          role="combobox"
+        >
+          <input
+            aria-autocomplete="list"
+            autocomplete="off"
+            class="search"
+            tabindex="0"
+            type="text"
+            value=""
+          />
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider default text"
+            role="alert"
+          >
+            Select a template...
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+            role="listbox"
+          >
+            <div
+              aria-checked="false"
+              aria-selected="true"
+              class="selected item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                template1
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                template2
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <p>
-      content
+      This implementation will be executed. Are you sure?
     </p>
     <div
       class="actions"
@@ -19,12 +89,12 @@ exports[`<ExecutionForm /> matches the latest snapshot 1`] = `
       <button
         class="ui secondary button"
       >
-        cancel
+        Cancel
       </button>
       <button
         class="ui primary button"
       >
-        create
+        Create
       </button>
     </div>
   </form>