@truedat/lm 7.5.7 → 7.5.10

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";
 

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

@@ -1,68 +1,57 @@
-import React from "react";
-import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 import { RelationTagForm } from "../RelationTagForm";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "actions.cancel": "cancel",
-      "actions.create": "create",
-      "form.validation.required": "required",
-      "relationTags.props.expandable": "Expandable",
-      "relationTags.props.target_type": "target",
-      "relationTags.props.target_type.placeholder": "...",
-      "relationTags.props.type": "type",
-      "relationTags.props.type.placeholder": "...",
-      "target_type.business_concept": "concept",
-      "target_type.data_field": "structure",
-      "target_type.ingest": "ingest",
-      "target_type.implementations": "implementations",
-    },
-  },
-};
-
 describe("<RelationTagForm />", () => {
   it("matches the latest snapshot", async () => {
-    const { container, findByRole } = render(<RelationTagForm />, renderOpts);
-    await findByRole("button", { name: /create/ });
-    expect(container).toMatchSnapshot();
+    const rendered = render(<RelationTagForm />);
+    await waitForLoad(rendered);
+    await rendered.findByRole("button", { name: /create/i });
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("calls createRelationTag with on submit", async () => {
     const onSubmit = jest.fn();
+    const user = userEvent.setup({ delay: null });
 
-    const { findByRole, getByRole, findByText } = render(
-      <RelationTagForm onSubmit={(props) => onSubmit(props)} />,
-      renderOpts
+    const rendered = render(
+      <RelationTagForm onSubmit={(props) => onSubmit(props)} />
     );
+    await waitForLoad(rendered);
 
     // Submit button should initially be disabled
     await waitFor(() =>
-      expect(getByRole("button", { name: /create/ })).toBeDisabled()
+      expect(rendered.getByRole("button", { name: /create/i })).toBeDisabled()
     );
 
     // Input name
-    userEvent.type(await findByRole("textbox", { name: "type" }), "foo");
+    await user.type(
+      await rendered.findByRole("textbox", { name: /type/i }),
+      "foo"
+    );
 
     // Select type
-    userEvent.click(await findByText("target"));
-    userEvent.click(await findByRole("option", { name: "concept" }));
+    await user.click(
+      await rendered.findByText("relationTags.props.target_type")
+    );
+    await user.click(await rendered.findByRole("option", { name: /concept/i }));
 
     //expandable
-    const expandableCheckbox = await findByRole("checkbox", {
-      name: /Expandable/,
+    const expandableCheckbox = await rendered.findByRole("checkbox", {
+      name: /expandable/i,
     });
-    userEvent.click(expandableCheckbox);
+    await user.click(expandableCheckbox);
 
     // Submit button should now be enabled
     await waitFor(() =>
-      expect(getByRole("button", { name: /create/ })).not.toBeDisabled()
+      expect(
+        rendered.getByRole("button", { name: /create/i })
+      ).not.toBeDisabled()
     );
 
     // Submit
-    userEvent.click(await findByRole("button", { name: /create/ }));
+    await user.click(await rendered.findByRole("button", { name: /create/i }));
 
     await waitFor(() =>
       expect(onSubmit).toHaveBeenCalledWith({

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

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

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

@@ -1,15 +1,15 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { RelationTagsLoader } from "../RelationTagsLoader";
 
 describe("<RelationTagsLoader />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const props = {
       fetchRelationTags: jest.fn(),
       clearRelationTags: jest.fn(),
-      relationTagsLoading: false
+      relationTagsLoading: false,
     };
-    const wrapper = shallow(<RelationTagsLoader {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<RelationTagsLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });