@truedat/lm 7.5.9 → 7.5.11

package/src/components/RelationsGraphLoader.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { useEffect } from "react";
 import { connect } from "react-redux";

package/src/components/StructureLinkRow.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Table } from "semantic-ui-react";
 import { columnDecorator } from "@truedat/core/services";

package/src/components/StructureLinks.js

@@ -1,10 +1,9 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Table, Button, Grid } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { linkTo } from "@truedat/core/routes";
 import { accentInsensitivePathOrder } from "@truedat/core/services/sort";
 import { getStructureToConceptLinks } from "../selectors/getStructureLinks";

package/src/components/StructureRelationForm.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { lazy, useState } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { connect } from "react-redux";
@@ -10,12 +10,12 @@ import { linkTo } from "@truedat/core/routes";
 import { linkConcept } from "../routines";
 import RelationTagsLoader from "./RelationTagsLoader";
 
-const ConceptSelector = React.lazy(() =>
-  import("@truedat/bg/concepts/relations/components/ConceptSelector")
+const ConceptSelector = lazy(
+  () => import("@truedat/bg/concepts/relations/components/ConceptSelector")
 );
 
-const TagTypeDropdownSelector = React.lazy(() =>
-  import("@truedat/lm/components/TagTypeDropdownSelector")
+const TagTypeDropdownSelector = lazy(
+  () => import("@truedat/lm/components/TagTypeDropdownSelector")
 );
 
 const filters = {
@@ -57,19 +57,16 @@ export const StructureRelationForm = ({
           as="h4"
           content={<FormattedMessage id="structures.relation.new.header" />}
         />
-
         {!_.isEmpty(tagOptions) ? (
           <Form.Field className="concept-relation-form">
             <TagTypeDropdownSelector options={tagOptions} />
           </Form.Field>
         ) : null}
-
         <ConceptSelector
           selectedConcept={selectedConcept}
           handleConceptSelected={handleConceptSelected}
           defaultFilters={filters}
         />
-
         <div className="actions">
           <Button
             primary
@@ -78,7 +75,6 @@ export const StructureRelationForm = ({
             loading={conceptLinking}
             onClick={handleSubmit}
           />
-
           <HistoryBackButton
             content={<FormattedMessage id="actions.cancel" />}
           />

package/src/components/TagTypeDropdownSelector.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { Form, Dropdown } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";

package/src/components/TagTypeSelector.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Form, Checkbox } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -35,7 +34,6 @@ export const TagTypeSelector = ({
       <label>
         <FormattedMessage id="relations.relationType" />
       </label>
-
       {options &&
         options.map((option, key) => (
           <div

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { ConceptImplementationLink } from "../ConceptImplementationLink";
 

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

@@ -1,16 +1,14 @@
-import _ from "lodash/fp";
-import React from "react";
-import { render } from "@truedat/test/render";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 
 import ConceptLinkTags from "../ConceptLinkTags";
 
-describe("ConceptLinkTags", () => {
-  it("matches the latest snapshot", () => {
-    const link = {
+describe("<ConceptLinkTags />", () => {
+  it("matches the latest snapshot", async () => {
+    const props = {
       tags: ["otro tipo", "business_concept_to_field_master"],
     };
-    const wrapper = shallow(<ConceptLinkTags {...link} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<ConceptLinkTags {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,40 +1,88 @@
-import React, { Suspense } from "react";
-import { shallow, mount } from "enzyme";
-import { MemoryRouter } from "react-router-dom";
-import { intl } from "@truedat/test/intl-stub";
+import { render, waitForLoad } from "@truedat/test/render";
 import { ConceptStructureLinkForm } from "../ConceptStructureLinkForm";
 
-// 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("@truedat/core/hooks/useUserFilters");
+
+const structure = {
+  external_id: "external_id",
+  id: 67583,
+  updated_at: "2021-06-10T12:01:17.343065Z",
+  name: "structure",
+};
+
+jest.mock("@truedat/dd/hooks/useStructures", () => {
+  const originalModule = jest.requireActual("@truedat/dd/hooks/useStructures");
+
+  const data = {
+    _actions: { bulkUpdate: { href: "/structures/bulkUpdate" } },
+    data: [structure],
+  };
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useDataStructureFilters: () => ({
+      trigger: () => ({
+        then: (callback) =>
+          callback({
+            data: { data: {} },
+          }),
+      }),
+    }),
+    useDataStructureSearch: () => ({
+      trigger: () => ({
+        then: (callback) =>
+          callback({
+            data,
+            headers: {},
+          }),
+      }),
+    }),
+  };
+});
+
+const useFilters = jest.fn(() => ({
+  trigger: jest.fn(() => new Promise(() => {})),
+  isMutating: false,
+}));
+
+const useSearch = () => ({
+  trigger: () => ({
+    then: (callback) =>
+      callback({
+        data: {
+          data: [structure],
+        },
+      }),
+  }),
+});
 
 const makeProps = () => ({
   clearSelectedRelationTags: jest.fn(),
   clearStructures: jest.fn(),
   createRelation: jest.fn(),
   id: 42,
-  sourceId: 42
+  sourceId: 42,
 });
 
 describe("<ConceptStructureLinkForm />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const props = makeProps();
-    const wrapper = shallow(<ConceptStructureLinkForm {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<ConceptStructureLinkForm {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("calls clearSelectedRelationTags and clearStructures on unmount", () => {
+  it("calls clearSelectedRelationTags and clearStructures on unmount", async () => {
     const props = makeProps();
-    const wrapper = mount(
-      <Suspense fallback={null}>
-        <MemoryRouter>
-          <ConceptStructureLinkForm {...props} />
-        </MemoryRouter>
-      </Suspense>
-    );
+    const rendered = render(<ConceptStructureLinkForm {...props} />);
+    await waitForLoad(rendered);
+
     expect(props.clearSelectedRelationTags).not.toHaveBeenCalled();
     expect(props.clearStructures).not.toHaveBeenCalled();
-    wrapper.unmount();
+
+    rendered.unmount();
+
     expect(props.clearSelectedRelationTags).toHaveBeenCalled();
     expect(props.clearStructures).toHaveBeenCalled();
   });

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { ConfirmDeleteRelation } from "../ConfirmDeleteRelation";
 

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { Table } from "semantic-ui-react";
 import { ImplementationLinkRow } from "../ImplementationLinkRow";

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { ImplementationLinks } from "../ImplementationLinks";
 

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

@@ -1,13 +1,13 @@
-import React from "react";
-import { render } from "@truedat/test/render";
-import { linkTo } from "@truedat/core/routes";
 import userEvent from "@testing-library/user-event";
 import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
+import { linkTo } from "@truedat/core/routes";
 import { ImplementationRelationForm } from "../ImplementationRelationForm";
-import en from "../../messages/en";
 
 const linkConcept = jest.fn();
 
+jest.mock("@truedat/core/hooks/useUserFilters");
+
 const data = {
   data: [
     {
@@ -80,8 +80,6 @@ const tagOptions = [
   { id: 2, text: "text", value: 1 },
 ];
 
-const concepts = [];
-
 const props = {
   implementation: { rule_id: 2, id: 4, implementation_ref: 1 },
   tagOptions,
@@ -90,53 +88,27 @@ const props = {
   selectedRelationTags: [1],
 };
 
-const renderOpts = {
-  messages: {
-    en: {
-      ...en,
-      "implementations.relation.new.header": "header",
-      "conceptRelations.relationType": "relationType",
-      "actions.cancel": "Cancel",
-      "actions.create": "Create",
-      "conceptRelations.relationType.text": "text",
-      "concepts.props.name": "Name",
-      "concepts.props.domain": "Domain",
-      "concepts.props.status": "Status",
-      "search.save_filters": "Save Filters",
-      "search.clear_filters": "Clear Filters",
-      "search.applied_filters": "Applied Filters",
-      "conceptRelations.relatedConcept": "Related Concept",
-      "concepts.search.placeholder": "Search",
-      "concepts.search.placeholder": "Search",
-      "search.placeholder": "Search...",
-      "concepts.search.results.empty": "No concepts found",
-    },
-  },
-  // state: {},
-  fallback: "lazy",
-};
-
 describe("<ImplementationRelationForm />", () => {
   it("matches the latest snapshot", async () => {
-    const { container, getByText, findByText } = render(
-      <ImplementationRelationForm {...props} />,
-      renderOpts
-    );
+    const rendered = render(<ImplementationRelationForm {...props} />);
+    await waitForLoad(rendered);
 
-    await waitFor(
-      () => {
-        expect(getByText(/relates_to/)).toBeInTheDocument();
-      },
-      { timeout: 60000 }
+    await waitFor(() =>
+      expect(rendered.getByText(/relates_to/i)).toBeInTheDocument()
     );
-    userEvent.click(await findByText(/some/));
-    await waitFor(() => {
-      expect(container.querySelector(".loading")).toBeNull();
-    });
+
+    const user = userEvent.setup({ delay: null });
+    await user.click(await rendered.findByText(/some/i));
+
     await waitFor(() => {
-      expect(getByText(/foo concept/)).toBeInTheDocument();
+      expect(rendered.container.querySelector(".loading")).toBeNull();
     });
-    expect(container).toMatchSnapshot();
+
+    await waitFor(() =>
+      expect(rendered.getByText(/foo concept/i)).toBeInTheDocument()
+    );
+
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("disables submit and shows loading state if concept is linking", async () => {
@@ -145,44 +117,44 @@ describe("<ImplementationRelationForm />", () => {
       conceptLinking: true,
     };
 
-    const { queryByRole, getByText, findByRole, findByText } = render(
-      <ImplementationRelationForm {...newProps} />,
-      renderOpts
+    const rendered = render(<ImplementationRelationForm {...newProps} />);
+
+    await waitFor(() =>
+      expect(rendered.getByText(/relates_to/i)).toBeInTheDocument()
     );
 
-    await waitFor(() => {
-      expect(getByText(/relates_to/)).toBeInTheDocument();
-    });
+    expect(rendered.queryByRole("button", { name: /create/i })).toBeDisabled();
 
-    expect(queryByRole("button", { name: /Create/ })).toBeDisabled();
-    userEvent.click(await findByText(/relates_to/));
-    userEvent.click(await findByText(/bar concept/));
+    const user = userEvent.setup({ delay: null });
+    await user.click(await rendered.findByText(/relates_to/i));
+    await user.click(await rendered.findByText(/bar concept/i));
 
-    await waitFor(() => {
-      expect(queryByRole("button", { name: /Create/ })).toBeEnabled();
-    });
+    await waitFor(() =>
+      expect(rendered.queryByRole("button", { name: /create/i })).toBeEnabled()
+    );
 
-    userEvent.click(await findByRole("button", { name: /Create/ }));
+    await user.click(await rendered.findByRole("button", { name: /create/i }));
 
-    await waitFor(() => {
-      expect(queryByRole("button", { name: /Create/ })).toHaveClass("loading");
-    });
+    await waitFor(() =>
+      expect(rendered.queryByRole("button", { name: /create/i })).toHaveClass(
+        "loading"
+      )
+    );
   });
 
   it("submits the selected relation", async () => {
-    const { getByText, findByRole, findByText } = render(
-      <ImplementationRelationForm {...props} />,
-      renderOpts
-    );
+    const rendered = render(<ImplementationRelationForm {...props} />);
+    await waitForLoad(rendered);
 
-    await waitFor(() => {
-      expect(getByText(/relates_to/)).toBeInTheDocument();
-    });
+    await waitFor(() =>
+      expect(rendered.getByText(/relates_to/i)).toBeInTheDocument()
+    );
 
-    userEvent.click(await findByText(/relates_to/));
-    userEvent.click(await findByText(/bar concept/));
+    const user = userEvent.setup({ delay: null });
+    await user.click(await rendered.findByText(/relates_to/i));
+    await user.click(await rendered.findByText(/bar concept/i));
 
-    userEvent.click(await findByRole("button", { name: /Create/ }));
+    await user.click(await rendered.findByRole("button", { name: /create/i }));
 
     const expectedRelation = {
       redirectUrl: linkTo.IMPLEMENTATION_CONCEPT_LINKS({

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { LinksPane } from "../LinksPane";
 

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { NewRelationTag } from "../NewRelationTag";
 

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

@@ -1,24 +1,23 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { RelationActions } from "../RelationActions";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useLocation: () => ({ pathname: "my_path" })
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useLocation: () => ({ pathname: "my_path" }),
 }));
 
 describe("<RelationActions />", () => {
-  it("matches the latest snapshot", () => {
-    const addConceptRelation = false;
-    const props = { addConceptRelation };
-    const wrapper = shallow(<RelationActions {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const props = { addConceptRelation: false };
+    const rendered = render(<RelationActions {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("when addConceptRelation it renders a button", () => {
-    const addConceptRelation = true;
-    const props = { addConceptRelation };
-    const wrapper = shallow(<RelationActions {...props} />);
-    expect(wrapper.find("Button").length).toBe(1);
+  it("when addConceptRelation it renders a button", async () => {
+    const props = { addConceptRelation: true };
+    const rendered = render(<RelationActions {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.getByText(/relations.actions.create/i)).toBeInTheDocument();
   });
 });

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

@@ -1,14 +1,66 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
+import { useAuthorized } from "@truedat/core/hooks/useAuthorized";
+import { RELATION_TAGS, RELATION_TAGS_NEW } from "@truedat/core/routes";
 import { RelationRoutes } from "../RelationRoutes";
 
-jest.mock("@truedat/core/hooks", () => ({
-  useAuthorized: jest.fn(() => true)
+// Mock the hooks module
+jest.mock("@truedat/core/hooks/useAuthorized");
+
+// Mock child components
+jest.mock(
+  "../NewRelationTag",
+  () =>
+    function NewRelationTag() {
+      return <div>NewRelationTag</div>;
+    }
+);
+jest.mock(
+  "../RelationTags",
+  () =>
+    function RelationTags() {
+      return <div>RelationTags</div>;
+    }
+);
+jest.mock(
+  "../RelationTagsLoader",
+  () =>
+    function RelationTagsLoader() {
+      return <div>RelationTagsLoader</div>;
+    }
+);
+jest.mock("@truedat/core/components", () => ({
+  Unauthorized: () => <div>Unauthorized</div>,
+  ...jest.requireActual("@truedat/core/components"),
 }));
 
 describe("<RelationRoutes />", () => {
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<RelationRoutes />);
-    expect(wrapper).toMatchSnapshot();
+  it("renders correctly with default route", async () => {
+    const rendered = render(<RelationRoutes />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with RELATION_TAGS route", async () => {
+    const rendered = render(<RelationRoutes />, {
+      routes: [RELATION_TAGS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with RELATION_TAGS_NEW route", async () => {
+    const rendered = render(<RelationRoutes />, {
+      routes: [RELATION_TAGS_NEW],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders unauthorized component when not authorized", async () => {
+    useAuthorized.mockReturnValueOnce(false);
+
+    const rendered = render(<RelationRoutes />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,10 +1,9 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { RelationRow } from "../RelationRow";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useHistory: () => ({ push: jest.fn() })
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useNavigate: () => jest.fn(),
 }));
 
 describe("<RelationRow />", () => {
@@ -15,36 +14,60 @@ describe("<RelationRow />", () => {
     relationContext: {},
     tags: [],
     relationPath: "",
-    history: {}
+    history: {},
   };
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<RelationRow {...defaultProps} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
+      <table>
+        <tbody>
+          <RelationRow {...defaultProps} />
+        </tbody>
+      </table>
+    );
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("renders null when relationContext not empty and source and target whitin it are null", () => {
-    const wrapper = shallow(<RelationRow {...defaultProps} />);
-    expect(wrapper.type()).toEqual(null);
+  it("renders null when relationContext not empty and source and target whitin it are null", async () => {
+    const rendered = render(
+      <table>
+        <tbody>
+          <RelationRow {...defaultProps} />
+        </tbody>
+      </table>
+    );
+    await waitForLoad(rendered);
+    expect(rendered.container.firstChild.firstChild.firstChild).toBeNull();
   });
 
-  it("renders a row with one cell when relationContext not empty and source and target whitin it are null", () => {
+  it("renders a row with one cell when relationContext not empty and source and target whitin it are null", async () => {
     const relationContext = { source: null, target: null };
-    const wrapper = shallow(
-      <RelationRow {...{ ...defaultProps, relationContext }} />
+    const rendered = render(
+      <table>
+        <tbody>
+          <RelationRow {...{ ...defaultProps, relationContext }} />
+        </tbody>
+      </table>
     );
-    expect(wrapper.find("TableRow").length).toBe(1);
-    expect(wrapper.find("TableCell").length).toBe(1);
+    await waitForLoad(rendered);
+    expect(rendered.container.querySelectorAll("tr").length).toBe(1);
+    expect(rendered.container.querySelectorAll("td").length).toBe(1);
   });
 
-  it("renders a row with four cells when relationContext not empty and source and target whitin it are informed", () => {
+  it("renders a row with four cells when relationContext not empty and source and target whitin it are informed", async () => {
     const relationContext = {
       source: { name: "source name" },
-      target: { name: "target name" }
+      target: { name: "target name" },
     };
-    const wrapper = shallow(
-      <RelationRow {...{ ...defaultProps, relationContext }} />
+    const rendered = render(
+      <table>
+        <tbody>
+          <RelationRow {...{ ...defaultProps, relationContext }} />
+        </tbody>
+      </table>
     );
-    expect(wrapper.find("TableRow").length).toBe(1);
-    expect(wrapper.find("TableCell").length).toBe(4);
+    await waitForLoad(rendered);
+    expect(rendered.container.querySelectorAll("tr").length).toBe(1);
+    expect(rendered.container.querySelectorAll("td").length).toBe(4);
   });
 });

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { RelationTagCards } from "../RelationTagCards";