@truedat/lm 7.5.9 → 7.5.11

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();
   });
 });

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

@@ -1,40 +1,42 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { Relations } from "../Relations";
 
 describe("<Relations />", () => {
   const defaultProps = {
     relationsLoading: false,
-    relations: []
+    relations: [],
   };
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<Relations {...defaultProps} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<Relations {...defaultProps} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("renders empty relations list message whe relations list is empty", () => {
-    const wrapper = shallow(<Relations {...defaultProps} />);
-    expect(wrapper.find({ id: "relations.empty" }).length).toBe(1);
+  it("renders empty relations list message whe relations list is empty", async () => {
+    const rendered = render(<Relations {...defaultProps} />);
+    await waitForLoad(rendered);
+    expect(rendered.getByText(/relations.empty/i)).toBeInTheDocument();
   });
 
-  it("renders as many RelationRow as relations in list", () => {
-    const wrapper = shallow(
+  it("renders as many RelationRow as relations in list", async () => {
+    const rendered = render(
       <Relations
         {...{
           ...defaultProps,
           relations: [
             {
-              id: "1",
+              id: 1,
               name: "relation",
               context: {
                 source: { name: "source name" },
-                target: { name: "target name" }
-              }
-            }
-          ]
+                target: { name: "target name" },
+              },
+            },
+          ],
         }}
       />
     );
-    expect(wrapper.find({ id: "1", name: "relation" }).length).toBe(1);
+    await waitForLoad(rendered);
+    expect(rendered.container.querySelectorAll("tr").length).toBe(1);
   });
 });

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

@@ -1,63 +1,69 @@
-import React from "react";
-import { mount, shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { RelationsGraphLoader } from "../RelationsGraphLoader";
 
 describe("<RelationsGraphLoader />", () => {
   const resource_id = 1;
   const relationsGraphLoading = false;
 
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const props = {
       clearRelationsGraph: jest.fn(),
       fetchRelationsGraph: jest.fn(),
       relationsGraphLoading,
-      resource_id
+      resource_id,
     };
-    const wrapper = mount(<RelationsGraphLoader {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<RelationsGraphLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("renders a loader if relationsGraphLoading is true", () => {
+  it("renders a loader if relationsGraphLoading is true", async () => {
     const props = {
+      clearRelationsGraph: jest.fn(),
+      fetchRelationsGraph: jest.fn(),
       relationsGraphLoading: true,
-      resource_id
+      resource_id,
     };
-    const wrapper = shallow(<RelationsGraphLoader {...props} />);
-    expect(wrapper.find("Loading").length).toBe(1);
+    const rendered = render(<RelationsGraphLoader {...props} />);
+    expect(rendered.container.querySelector(".loader")).toBeInTheDocument();
   });
 
-  it("renders null if relationsGraphLoading is false", () => {
+  it("renders null if relationsGraphLoading is false", async () => {
     const props = {
+      clearRelationsGraph: jest.fn(),
+      fetchRelationsGraph: jest.fn(),
       relationsGraphLoading,
-      resource_id
+      resource_id,
     };
-    const wrapper = shallow(<RelationsGraphLoader {...props} />);
-    expect(wrapper.getElement()).toBeNull();
+    const rendered = render(<RelationsGraphLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container.firstChild).toBeNull();
   });
 
-  it("calls fetchRelationsGraph when component mounts but not when it unmounts", () => {
+  it("calls fetchRelationsGraph when component mounts but not when it unmounts", async () => {
     const props = {
       clearRelationsGraph: jest.fn(),
       fetchRelationsGraph: jest.fn(),
       relationsGraphLoading,
-      resource_id
+      resource_id,
     };
-    const wrapper = mount(<RelationsGraphLoader {...props} />);
-    expect(props.fetchRelationsGraph.mock.calls.length).toBe(1);
-    wrapper.unmount();
-    expect(props.clearRelationsGraph.mock.calls.length).toBe(1);
+    const rendered = render(<RelationsGraphLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(props.fetchRelationsGraph).toHaveBeenCalledTimes(1);
+    rendered.unmount();
+    expect(props.clearRelationsGraph).toHaveBeenCalledTimes(1);
   });
 
-  it("calls clearRelationsGraph when component unmounts but not when it mounts", () => {
+  it("calls clearRelationsGraph when component unmounts but not when it mounts", async () => {
     const props = {
       clearRelationsGraph: jest.fn(),
       fetchRelationsGraph: jest.fn(),
       relationsGraphLoading: true,
-      resource_id
+      resource_id,
     };
-    const wrapper = mount(<RelationsGraphLoader {...props} />);
-    expect(props.clearRelationsGraph.mock.calls.length).toBe(0);
-    wrapper.unmount();
-    expect(props.clearRelationsGraph.mock.calls.length).toBe(1);
+    const rendered = render(<RelationsGraphLoader {...props} />);
+    expect(props.clearRelationsGraph).not.toHaveBeenCalled();
+    rendered.unmount();
+    expect(props.clearRelationsGraph).toHaveBeenCalledTimes(1);
   });
 });

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

@@ -1,38 +1,38 @@
-import React from "react";
-import { mount } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { RelationsLoader } from "../RelationsLoader";
 
 describe("<RelationsLoader />", () => {
-  it("calls fetchRelations on mount and clearRelations on unmount", () => {
+  it("calls fetchRelations on mount and clearRelations on unmount", async () => {
     const props = {
       clearRelations: jest.fn(),
       fetchRelations: jest.fn(),
       resource_id: 123,
       resource_type: "foo",
-      target_type: "bar"
+      target_type: "bar",
     };
-    const wrapper = mount(<RelationsLoader {...props} />);
-    expect(props.clearRelations.mock.calls.length).toBe(0);
-    expect(props.fetchRelations.mock.calls.length).toBe(1);
-    wrapper.unmount();
-    expect(props.fetchRelations.mock.calls.length).toBe(1);
-    expect(props.clearRelations.mock.calls.length).toBe(1);
+    const rendered = render(<RelationsLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(props.clearRelations).not.toHaveBeenCalled();
+    expect(props.fetchRelations).toHaveBeenCalledTimes(1);
+    rendered.unmount();
+    expect(props.fetchRelations).toHaveBeenCalledTimes(1);
+    expect(props.clearRelations).toHaveBeenCalledTimes(1);
   });
 
-  it("calls fetchRelations when a prop changes", () => {
+  it("calls fetchRelations when a prop changes", async () => {
     const props = {
       clearRelations: jest.fn(),
       fetchRelations: jest.fn(),
       resource_id: 123,
       resource_type: "foo",
-      target_type: "bar"
+      target_type: "bar",
     };
-    const wrapper = mount(<RelationsLoader {...props} />);
-    expect(props.fetchRelations.mock.calls.length).toBe(1);
-    wrapper.setProps({
-      ...props,
-      target_type: "new target_type"
-    });
-    expect(props.fetchRelations.mock.calls.length).toBe(2);
+    const rendered = render(<RelationsLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(props.fetchRelations).toHaveBeenCalledTimes(1);
+    rendered.rerender(
+      <RelationsLoader {...props} target_type="new target_type" />
+    );
+    expect(props.fetchRelations).toHaveBeenCalledTimes(2);
   });
 });

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

@@ -1,11 +1,12 @@
-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 { StructureRelationForm } from "../StructureRelationForm";
 import en from "../../messages/en";
 
+jest.mock("@truedat/core/hooks/useUserFilters");
+
 const linkConcept = jest.fn();
 
 const data = {
@@ -115,31 +116,26 @@ const messages = {
 const renderOpts = {
   messages,
   state: { structure },
-  fallback: "lazy",
 };
 
 describe("<StructureRelationForm />", () => {
   it("matches the latest snapshot", async () => {
-    const { container, getByText } = render(
-      <StructureRelationForm {...props} />,
-      renderOpts
-    );
+    const rendered = render(<StructureRelationForm {...props} />, renderOpts);
+    await waitForLoad(rendered);
 
-    await waitFor(
-      () => {
-        expect(getByText(/relates_to/)).toBeInTheDocument();
-      },
-      { timeout: 60000 }
+    await waitFor(() =>
+      expect(rendered.getByText(/relates_to/i)).toBeInTheDocument()
     );
 
     await waitFor(() => {
-      expect(container.querySelector(".loading")).toBeNull();
-    });
-    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 () => {
@@ -148,44 +144,47 @@ describe("<StructureRelationForm />", () => {
       conceptLinking: true,
     };
 
-    const { queryByRole, getByText, findByRole, findByText } = render(
+    const rendered = render(
       <StructureRelationForm {...newProps} />,
       renderOpts
     );
 
-    await waitFor(() => {
-      expect(getByText(/relates_to/)).toBeInTheDocument();
-    });
+    await waitFor(() =>
+      expect(rendered.getByText(/relates_to/i)).toBeInTheDocument()
+    );
 
-    expect(queryByRole("button", { name: /Create/ })).toBeDisabled();
-    userEvent.click(await findByText(/relates_to/));
-    userEvent.click(await findByText(/bar concept/));
+    expect(rendered.queryByRole("button", { name: /create/i })).toBeDisabled();
 
-    await waitFor(() => {
-      expect(queryByRole("button", { name: /Create/ })).toBeEnabled();
-    });
+    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(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(
-      <StructureRelationForm {...props} />,
-      renderOpts
-    );
+    const rendered = render(<StructureRelationForm {...props} />, renderOpts);
+    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.STRUCTURE_LINKS({ id: 3 }),

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

@@ -1,20 +1,14 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import { render, waitForLoad } from "@truedat/test/render";
 import { TagTypeSelector } from "../TagTypeSelector";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<TagTypeSelector />", () => {
-  it("matches last snapshot", () => {
-    const onChange = jest.fn();
-    const defaultProps = {
+  it("matches the latest snapshot", async () => {
+    const props = {
       options: [],
-      onChange
+      onChange: jest.fn(),
     };
-    const wrapper = shallow(<TagTypeSelector {...defaultProps} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<TagTypeSelector {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -3,6 +3,7 @@
 exports[`<ConceptImplementationLink /> matches the latest snapshot 1`] = `
 <div>
   <a
+    data-discover="true"
     href="/concepts/8/versions/current/links/implementations"
   >
     ConceptImplementationLink

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

@@ -1,24 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ConceptLinkTags matches the latest snapshot 1`] = `
-<ul
-  className="concept-link-tags"
->
-  <li
-    key="0"
+exports[`<ConceptLinkTags /> matches the latest snapshot 1`] = `
+<div>
+  <ul
+    class="concept-link-tags"
   >
-    <MemoizedFormattedMessage
-      defaultMessage="otro tipo"
-      id="conceptRelations.relationType.otro tipo"
-    />
-  </li>
-  <li
-    key="1"
-  >
-    <MemoizedFormattedMessage
-      defaultMessage="business_concept_to_field_master"
-      id="conceptRelations.relationType.business_concept_to_field_master"
-    />
-  </li>
-</ul>
+    <li>
+      otro tipo
+    </li>
+    <li>
+      business_concept_to_field_master
+    </li>
+  </ul>
+</div>
 `;