@truedat/dq 4.44.4 → 4.45.1

package/src/components/ruleImplementationForm/__tests__/RuleImplementationRawForm.spec.js

@@ -1,27 +1,43 @@
 import _ from "lodash/fp";
 import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
-import { FormattedMessage } from "react-intl";
-import { RuleImplementationRawForm } from "../RuleImplementationRawForm";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import { multipleTemplatesMock } from "@truedat/test/mocks";
+import RuleImplementationRawForm from "../RuleImplementationRawForm";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useHistory: () => ({ push: jest.fn() }),
-}));
+const renderOpts = {
+  mocks: [multipleTemplatesMock({ scope: "ri", domainIds: [1] })],
+  state: {
+    rule: { domain_id: 1 },
+    ruleImplementationCreating: false,
+  },
+  fallback: "lazy",
+};
 
-describe("<RuleImplementationRawForm />", () => {
-  const onSubmit = jest.fn();
-  const onChange = jest.fn();
-  const isSubmitting = false;
-  const sources = [
+const props = {
+  onChange: jest.fn(),
+  onSubmit: jest.fn(),
+  implementationKey: "",
+  isSubmitting: false,
+  rawContent: {
+    dataset: "",
+    source_id: 1,
+    population: "",
+    validations: "",
+  },
+  ruleImplementation: {
+    id: 1,
+    executable: true,
+    goal: "10",
+    minimum: "1",
+    result_type: "percentage",
+  },
+  sources: [
     {
       id: "1",
       config: { alias: "source1", job_types: ["quality"] },
-      external_id: "ext_id_1",
+      externalId: "ext_id_1",
     },
     {
       id: "2",
@@ -30,53 +46,31 @@ describe("<RuleImplementationRawForm />", () => {
         job_types: ["quality"],
         databases: ["db1", "db2"],
       },
-      external_id: "ext_id_2",
-    },
-    { id: "3", config: {}, external_id: "ext_id_3" },
-  ];
-  const setImplementationRawContent = jest.fn();
-
-  const props = {
-    implementationKey: "",
-    setImplementationKey: jest.fn(),
-    ruleImplementation: {
-      id: 1,
-      executable: true,
-      goal: "10",
-      minimum: "1",
-      result_type: "percentage",
-    },
-    rawContent: {
-      dataset: "",
-      source_id: 1,
-      population: "",
-      validations: "",
+      externalId: "ext_id_2",
     },
-    setImplementationRawContent: setImplementationRawContent,
-    onSubmit,
-    isSubmitting,
-    sources,
-    onChange,
-  };
+    { id: "3", config: {}, externalId: "ext_id_3" },
+  ],
+};
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<RuleImplementationRawForm {...props} />);
-    expect(wrapper).toMatchSnapshot();
+describe("<RuleImplementationRawForm />", () => {
+  it("matches the latest snapshot", async () => {
+    const { container, queryByText } = render(
+      <RuleImplementationRawForm {...props} />,
+      renderOpts
+    );
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    expect(container).toMatchSnapshot();
   });
 
   it("renders sources", () => {
-    const customProps = {
-      ...props,
-      rawContent: {
-        dataset: "cliente c join address a on c.address_id=a.id",
-        population: "",
-        validations: "a.city='MADRID'",
-      },
-    };
-
-    const wrapper = shallow(<RuleImplementationRawForm {...customProps} />);
-    const sourcesDropdown = wrapper.find("FormDropdown[name='source_id']");
-    expect(sourcesDropdown).toHaveLength(1);
+    const { queryByRole } = render(
+      <RuleImplementationRawForm {...props} />,
+      renderOpts
+    );
+    expect(queryByRole("option", { name: "ext_id_1" })).toBeInTheDocument();
   });
 
   it("renders databases dropdown if selected source has databases", () => {
@@ -90,9 +84,11 @@ describe("<RuleImplementationRawForm />", () => {
       },
     };
 
-    const wrapper = shallow(<RuleImplementationRawForm {...customProps} />);
-    const databaseDropdown = wrapper.find("FormDropdown[name='database']");
-    expect(databaseDropdown).toHaveLength(1);
+    const { queryByRole } = render(
+      <RuleImplementationRawForm {...customProps} />,
+      renderOpts
+    );
+    expect(queryByRole("option", { name: "db1" })).toBeInTheDocument();
   });
 
   it("dont renders databases dropdown if selected source doesnt have databases", () => {
@@ -106,15 +102,21 @@ describe("<RuleImplementationRawForm />", () => {
       },
     };
 
-    const wrapper = shallow(<RuleImplementationRawForm {...customProps} />);
-    const databaseDropdown = wrapper.find("FormDropdown[name='database']");
-    expect(databaseDropdown).toHaveLength(0);
+    const { queryByRole } = render(
+      <RuleImplementationRawForm {...customProps} />,
+      renderOpts
+    );
+    expect(queryByRole("option", { name: "db1" })).not.toBeInTheDocument();
   });
 
-  it("submit button enabled if there is valid content in form with database without rule", () => {
-    const domainProps = _.set("ruleImplementation.domain_id", 5)(props);
+  it("submit button enabled if there is valid content in form with database without rule", async () => {
+    const updatedProps = _.flow(
+      _.set("ruleImplementation.domain_id", 1),
+      _.set("ruleImplementation.dfName", "template1"),
+      _.set("ruleImplementation.dfContent", { field1: "foo" })
+    )(props);
     const customProps = {
-      ...domainProps,
+      ...updatedProps,
       rawContent: {
         dataset: "address a on c.address_id=a.id",
         source_id: 2,
@@ -122,17 +124,24 @@ describe("<RuleImplementationRawForm />", () => {
         population: "",
         validations: "a.city='MADRID'",
       },
-      template: { id: 1 },
-      dfContent: {},
     };
-    const wrapper = shallow(<RuleImplementationRawForm {...customProps} />);
-    const submitButton = wrapper.find("FormButton[type='submit']");
-    expect(submitButton.props().disabled).toBe(false);
+
+    const { getByRole } = render(
+      <RuleImplementationRawForm {...customProps} />,
+      renderOpts
+    );
+    await waitFor(() => {
+      expect(getByRole("button", { name: "Save" })).toBeEnabled();
+    });
   });
 
-  it("submit button enabled if there is valid content in form with database", () => {
+  it("submit button enabled if there is valid content in form with database", async () => {
+    const updatedProps = _.flow(
+      _.set("ruleImplementation.dfName", "template1"),
+      _.set("ruleImplementation.dfContent", { field1: "foo" })
+    )(props);
     const customProps = {
-      ...props,
+      ...updatedProps,
       rawContent: {
         dataset: "address a on c.address_id=a.id",
         source_id: 2,
@@ -140,16 +149,19 @@ describe("<RuleImplementationRawForm />", () => {
         population: "",
         validations: "a.city='MADRID'",
       },
-      template: { id: 1 },
-      dfContent: {},
       rule: { id: 5, name: "regla" },
     };
-    const wrapper = shallow(<RuleImplementationRawForm {...customProps} />);
-    const submitButton = wrapper.find("FormButton[type='submit']");
-    expect(submitButton.props().disabled).toBe(false);
+
+    const { queryByRole } = render(
+      <RuleImplementationRawForm {...customProps} />,
+      renderOpts
+    );
+    await waitFor(() =>
+      expect(queryByRole("button", { name: /save/i })).toBeEnabled()
+    );
   });
 
-  it("submit button disabled if databases are available and not selected", () => {
+  it("submit button disabled if databases are available and not selected", async () => {
     const customProps = {
       ...props,
       rawContent: {
@@ -159,96 +171,109 @@ describe("<RuleImplementationRawForm />", () => {
         validations: "a.city='MADRID'",
       },
     };
-    const wrapper = shallow(<RuleImplementationRawForm {...customProps} />);
-    const submitButton = wrapper.find("FormButton[type='submit']");
-    expect(submitButton.props().disabled).toBe(true);
+
+    const { queryByText, getByRole } = render(
+      <RuleImplementationRawForm {...customProps} />,
+      renderOpts
+    );
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    expect(getByRole("button", { name: "Save" })).toBeDisabled();
   });
 
-  it("calls setImplementationRawContent when filling raw content input fields", () => {
-    const wrapper = shallow(<RuleImplementationRawForm {...props} />);
-    expect(setImplementationRawContent.mock.calls).toHaveLength(0);
-    wrapper.find("FormTextArea").at(0).simulate("change", null, {
-      value: "cliente c join address a on c.address_id=a.id",
+  it("calls setImplementationRawContent when filling raw content input fields", async () => {
+    const setImplementationRawContent = jest.fn();
+    const { findByLabelText } = render(
+      <RuleImplementationRawForm
+        setImplementationRawContent={setImplementationRawContent}
+        {...props}
+      />,
+      renderOpts
+    );
+    userEvent.type(await findByLabelText("Dataset"), "A");
+    expect(setImplementationRawContent).toBeCalledWith({
+      dataset: "A",
+      population: "",
+      source_id: 1,
+      validations: "",
     });
-    expect(setImplementationRawContent.mock.calls).toHaveLength(1);
   });
 
   it("calls setImplementationRawContent when selecting source", () => {
     const setImplementationRawContent = jest.fn();
-    const customProps = {
-      ...props,
-      setImplementationRawContent,
-    };
-    const wrapper = shallow(<RuleImplementationRawForm {...customProps} />);
-
-    expect(setImplementationRawContent.mock.calls).toHaveLength(0);
-    wrapper
-      .find("FormDropdown[name='source_id']")
-      .at(0)
-      .simulate("change", null, {
-        value: 2,
-      });
-    expect(setImplementationRawContent.mock.calls).toHaveLength(1);
-    expect(setImplementationRawContent).toHaveBeenCalledWith({
+    const { queryByRole } = render(
+      <RuleImplementationRawForm
+        setImplementationRawContent={setImplementationRawContent}
+        {...props}
+      />,
+      renderOpts
+    );
+    userEvent.click(queryByRole("option", { name: "ext_id_2" }));
+    expect(setImplementationRawContent).toBeCalledWith({
       database: "",
       dataset: "",
       population: "",
-      source_id: 2,
+      source_id: "2",
       validations: "",
     });
   });
 
-  it("submit button enabled if there is valid content in form without rule", () => {
-    const domainProps = _.set("ruleImplementation.domain_id", 5)(props);
-    const customProps = {
-      ...domainProps,
-      rawContent: {
-        dataset: "cliente c join address a on c.address_id=a.id",
-        source_id: 1,
-        population: "",
-        validations: "a.city='MADRID'",
-      },
-      template: { id: 1 },
-      dfContent: {},
-    };
-    const wrapper = shallow(<RuleImplementationRawForm {...customProps} />);
-    const submitButton = wrapper.find("FormButton[type='submit']");
-    expect(submitButton.props().disabled).toBe(false);
-  });
-
-  it("submit button enabled if there is valid content in form", () => {
+  it("submit button enabled if there is valid content in form without rule", async () => {
+    const updatedProps = _.flow(
+      _.set("ruleImplementation.domain_id", 1),
+      _.set("ruleImplementation.dfName", "template1"),
+      _.set("ruleImplementation.dfContent", { field1: "foo" })
+    )(props);
     const customProps = {
-      ...props,
+      ...updatedProps,
       rawContent: {
         dataset: "cliente c join address a on c.address_id=a.id",
         source_id: 1,
         population: "",
         validations: "a.city='MADRID'",
       },
-      template: { id: 1 },
-      dfContent: {},
-      rule: { id: 5, name: "regla" },
     };
-    const wrapper = shallow(<RuleImplementationRawForm {...customProps} />);
-    const submitButton = wrapper.find("FormButton[type='submit']");
-    expect(submitButton.props().disabled).toBe(false);
+    const { queryByRole, queryByText } = render(
+      <RuleImplementationRawForm {...customProps} />,
+      renderOpts
+    );
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitFor(() =>
+      expect(queryByRole("button", { name: /save/i })).toBeEnabled()
+    );
   });
 
-  it("submit button disabled if there is invalid content in form", () => {
+  it("submit button disabled if there is invalid content in form", async () => {
+    const updatedProps = _.flow(
+      _.set("ruleImplementation.domain_id", 1),
+      _.set("ruleImplementation.dfName", "template1"),
+      _.set("ruleImplementation.dfContent", {})
+    )(props);
     const customProps = {
-      ...props,
+      ...updatedProps,
       rawContent: {
         dataset: "insert into cliente c join address a on c.address_id=a.id",
         population: "",
         validations: "a.city='MADRID'",
       },
     };
-    const wrapper = shallow(<RuleImplementationRawForm {...customProps} />);
-    const submitButton = wrapper.find("FormButton[type='submit']");
-    expect(submitButton.props().disabled).toBe(true);
+    const { queryByRole, queryByText } = render(
+      <RuleImplementationRawForm {...customProps} />,
+      renderOpts
+    );
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    expect(queryByRole("button", { name: /save/i })).toBeDisabled();
   });
 
-  it("input errors if invalid content in dataset field", () => {
+  it("input errors if invalid content in dataset field", async () => {
     const customProps = {
       ...props,
       rawContent: {
@@ -258,26 +283,20 @@ describe("<RuleImplementationRawForm />", () => {
         validations: "a.city='MADRID'",
       },
     };
-    const wrapper = shallow(<RuleImplementationRawForm {...customProps} />);
-    const datasetTextArea = wrapper.find("FormTextArea").at(0);
-    expect(datasetTextArea.props().error).toEqual({
-      content: (
-        <FormattedMessage
-          id="ruleImplementationRawForm.rawText.error"
-          values={{ invalid_content: <i>insert</i> }}
-        />
-      ),
-    });
+    const { queryByText } = render(
+      <RuleImplementationRawForm {...customProps} />,
+      renderOpts
+    );
+    expect(queryByText(/entered content not allowed.*/i)).toBeInTheDocument();
   });
 
-  it("handles executable field", () => {
-    const wrapper = shallow(<RuleImplementationRawForm {...props} />);
-    const radio = wrapper.find({ name: "executable" }).at(0);
-
-    radio.simulate("change", null, {
-      checked: false,
-    });
-
+  it("handles executable field", async () => {
+    const onChange = jest.fn();
+    const { findByText } = render(
+      <RuleImplementationRawForm {...props} onChange={onChange} />,
+      renderOpts
+    );
+    userEvent.click(await findByText("Executable"));
     expect(onChange).toHaveBeenCalledWith("executable", false);
   });
 });

package/src/components/ruleImplementationForm/__tests__/__snapshots__/RuleImplementationForm.spec.js.snap

@@ -351,6 +351,81 @@ exports[`<RuleImplementationForm /> matches the latest snapshot 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="required field"
+        >
+          <label>
+            Template
+            <div
+              class="ui left pointing label"
+            >
+              Empty required field
+            </div>
+          </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>
       </form>
     </div>
     <div