@truedat/dd 7.5.9 → 7.5.11

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

@@ -1,10 +1,178 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { StructureTabRoutes } from "../StructureTabRoutes";
+import {
+  STRUCTURE,
+  STRUCTURE_CHILDREN,
+  STRUCTURE_FIELDS,
+  STRUCTURE_VERSION_FIELDS,
+  STRUCTURE_EVENTS,
+  STRUCTURE_GRANTS,
+  STRUCTURE_IMPACT,
+  STRUCTURE_LINEAGE,
+  STRUCTURE_LINKS,
+  STRUCTURE_STRUCTURE_LINKS,
+  STRUCTURE_NOTES,
+  STRUCTURE_PARENTS,
+  STRUCTURE_PROFILE,
+  STRUCTURE_MEMBERS,
+  STRUCTURE_RULES,
+  STRUCTURE_VERSION,
+  STRUCTURE_VERSIONS,
+  STRUCTURE_VERSION_VERSIONS,
+  STRUCTURE_METADATA,
+} from "@truedat/core/routes";
+
+jest.mock("../StructureTabs", () => () => <div>StructureTabs</div>);
 
 describe("<StructureTabRoutes />", () => {
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<StructureTabRoutes />);
-    expect(wrapper).toMatchSnapshot();
+  it("renders correctly with default route", async () => {
+    const rendered = render(<StructureTabRoutes />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with versions route", async () => {
+    const rendered = render(<StructureTabRoutes />, {
+      routes: [STRUCTURE_VERSIONS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with version route", async () => {
+    const rendered = render(<StructureTabRoutes />, {
+      routes: [STRUCTURE_VERSION.replace(":version", "1")],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with version versions route", async () => {
+    const rendered = render(<StructureTabRoutes />, {
+      routes: [STRUCTURE_VERSION_VERSIONS.replace(":version", "1")],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with version fields route", async () => {
+    const rendered = render(<StructureTabRoutes />, {
+      routes: [STRUCTURE_VERSION_FIELDS.replace(":version", "1")],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with profile route", async () => {
+    const rendered = render(<StructureTabRoutes />, {
+      routes: [STRUCTURE_PROFILE],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with links route", async () => {
+    const rendered = render(<StructureTabRoutes />, {
+      routes: [STRUCTURE_LINKS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with structure links route", async () => {
+    const rendered = render(<StructureTabRoutes />, {
+      routes: [STRUCTURE_STRUCTURE_LINKS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with events route", async () => {
+    const rendered = render(<StructureTabRoutes />, {
+      routes: [STRUCTURE_EVENTS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with metadata route", async () => {
+    const rendered = render(<StructureTabRoutes />, {
+      routes: [STRUCTURE_METADATA],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with notes route", async () => {
+    const rendered = render(<StructureTabRoutes />, {
+      routes: [STRUCTURE_NOTES],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with members route", async () => {
+    const rendered = render(<StructureTabRoutes />, {
+      routes: [STRUCTURE_MEMBERS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with rules route", async () => {
+    const rendered = render(<StructureTabRoutes />, {
+      routes: [STRUCTURE_RULES],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with lineage route", async () => {
+    const rendered = render(<StructureTabRoutes />, {
+      routes: [STRUCTURE_LINEAGE],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with children route", async () => {
+    const rendered = render(<StructureTabRoutes />, {
+      routes: [STRUCTURE_CHILDREN],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with fields route", async () => {
+    const rendered = render(<StructureTabRoutes />, {
+      routes: [STRUCTURE_FIELDS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with parents route", async () => {
+    const rendered = render(<StructureTabRoutes />, {
+      routes: [STRUCTURE_PARENTS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with impact route", async () => {
+    const rendered = render(<StructureTabRoutes />, {
+      routes: [STRUCTURE_IMPACT],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with grants route", async () => {
+    const rendered = render(<StructureTabRoutes />, {
+      routes: [STRUCTURE_GRANTS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,25 +1,7 @@
 import _ from "lodash/fp";
-import React from "react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import { StructureTabs } from "../StructureTabs";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "tabs.dd.audit": "Audit",
-      "tabs.dd.fields": "Fields",
-      "tabs.dd.notes": "Notes",
-      "tabs.dd.links": "Linkage",
-      "tabs.dd.profile": "Profiling",
-      "tabs.dd.metadata": "Metadata",
-      "tabs.dd.versions": "Versions",
-      "tabs.dd.grants": "Grants",
-      "tabs.dd.rules": "Rules",
-      "tabs.dd.roles": "Roles",
-    },
-  },
-};
-
 describe("<StructureTabs />", () => {
   const tabs = [
     "fields",
@@ -44,9 +26,10 @@ describe("<StructureTabs />", () => {
   )(tabs);
   const activeTab = "metadata";
 
-  it("matches the latest snapshot: " + activeTab, () => {
+  it("matches the latest snapshot: " + activeTab, async () => {
     const props = { structure, version, tabVisibility, activeTab };
-    const { container } = render(<StructureTabs {...props} />, renderOpts);
-    expect(container).toMatchSnapshot();
+    const rendered = render(<StructureTabs {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,6 +1,6 @@
-import React from "react";
-import { render } from "@truedat/test/render";
-import { waitFor, fireEvent } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { StructureTag } from "../StructureTag";
 
 describe("<StructureTag />", () => {
@@ -17,15 +17,22 @@ describe("<StructureTag />", () => {
     savingId: null,
   };
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(<StructureTag {...props} />);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<StructureTag {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("Show update modal when click in tag edit icon", async () => {
-    const { getByLabelText, container } = render(<StructureTag {...props} />);
-    fireEvent.click(container.getElementsByClassName("edit")[0]);
-    await waitFor(() => expect(getByLabelText("Comments")).toBeInTheDocument());
+    const rendered = render(<StructureTag {...props} />);
+    await waitForLoad(rendered);
+
+    userEvent.click(rendered.container.getElementsByClassName("edit")[0]);
+    await waitFor(() =>
+      expect(
+        rendered.getByLabelText(/structureTag.comment/i)
+      ).toBeInTheDocument()
+    );
   });
 
   it("Show tooltip with description and comment", async () => {
@@ -40,13 +47,20 @@ describe("<StructureTag />", () => {
       },
     };
 
-    const { getByText } = render(<StructureTag {...tagWithDescriptionProps} />);
+    const rendered = render(<StructureTag {...tagWithDescriptionProps} />);
+    await waitForLoad(rendered);
 
-    fireEvent.mouseEnter(getByText(tagName));
+    userEvent.hover(rendered.getByText(tagName));
 
-    await waitFor(() => expect(getByText("Comments")).toBeTruthy());
-    await waitFor(() => expect(getByText(comment)).toBeTruthy());
-    await waitFor(() => expect(getByText(description)).toBeTruthy());
+    await waitFor(() =>
+      expect(rendered.getByText(/structureTag.comment/i)).toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(rendered.getByText(comment)).toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(rendered.getByText(description)).toBeInTheDocument()
+    );
   });
 
   it("Show tooltip with description", async () => {
@@ -59,14 +73,21 @@ describe("<StructureTag />", () => {
       },
     };
 
-    const { getByText, queryByText } = render(
+    const rendered = render(
       <StructureTag {...tagWithDescriptionWithoutCommentProps} />
     );
+    await waitForLoad(rendered);
 
-    fireEvent.mouseEnter(getByText(tagName));
+    userEvent.hover(rendered.getByText(tagName));
 
-    await waitFor(() => expect(queryByText("Comment")).not.toBeInTheDocument());
-    await waitFor(() => expect(getByText(description)).toBeInTheDocument());
+    await waitFor(() =>
+      expect(
+        rendered.queryByText(/structureTag.comment/i)
+      ).not.toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(rendered.getByText(description)).toBeInTheDocument()
+    );
   });
 
   it("Show tooltip with comment", async () => {
@@ -78,10 +99,17 @@ describe("<StructureTag />", () => {
         comment,
       },
     };
-    const { getByText } = render(<StructureTag {...tagWithCommentProps} />);
-    fireEvent.mouseEnter(getByText(tagName));
 
-    await waitFor(() => expect(getByText("Comments")).toBeTruthy());
-    await waitFor(() => expect(getByText(comment)).toBeTruthy());
+    const rendered = render(<StructureTag {...tagWithCommentProps} />);
+    await waitForLoad(rendered);
+
+    userEvent.hover(rendered.getByText(tagName));
+
+    await waitFor(() =>
+      expect(rendered.getByText(/structureTag.comment/i)).toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(rendered.getByText(comment)).toBeInTheDocument()
+    );
   });
 });

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

@@ -1,7 +1,6 @@
-import React from "react";
-import { waitFor, within } from "@testing-library/react";
-import { render } from "@truedat/test/render";
 import userEvent from "@testing-library/user-event";
+import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 import { StructureTagForm } from "../StructureTagForm";
 
 describe("<StructureTagForm />", () => {
@@ -25,97 +24,138 @@ describe("<StructureTagForm />", () => {
   it("matches the latest snapshot create", async () => {
     const structureTag = { structureId: "123" };
     const props = { structureTag, tags };
-    const { container, findByRole, queryByRole } = render(
-      <StructureTagForm {...props} />
+    const rendered = render(<StructureTagForm {...props} />);
+    await waitForLoad(rendered);
+
+    await waitFor(() =>
+      expect(
+        rendered.getByRole("button", { name: /save/i })
+      ).toBeInTheDocument()
     );
-    expect(await findByRole("button", { name: "Save" })).toBeInTheDocument();
     expect(
-      await queryByRole("button", { name: "Delete" })
+      rendered.queryByRole("button", { name: /delete/i })
     ).not.toBeInTheDocument();
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot edit", async () => {
     const props = { structureTag };
-    const { container, findByRole } = render(<StructureTagForm {...props} />);
-    expect(await findByRole("button", { name: "Save" })).toBeInTheDocument();
-    expect(await findByRole("button", { name: "Delete" })).toBeInTheDocument();
-    expect(container).toMatchSnapshot();
+    const rendered = render(<StructureTagForm {...props} />);
+    await waitForLoad(rendered);
+
+    await waitFor(() =>
+      expect(
+        rendered.getByRole("button", { name: /save/i })
+      ).toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(
+        rendered.getByRole("button", { name: /delete/i })
+      ).toBeInTheDocument()
+    );
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("save button enabled if there is only one tag available", async () => {
     const structureTag = { structureId: "123" };
     const props = { structureTag, tags: [tags[0]] };
-    const { getByRole } = render(<StructureTagForm {...props} />);
-    await waitFor(() => {
-      expect(getByRole("button", { name: "Save" })).toBeEnabled();
-    });
+    const rendered = render(<StructureTagForm {...props} />);
+    await waitForLoad(rendered);
+
+    await waitFor(() =>
+      expect(rendered.getByRole("button", { name: /save/i })).toBeEnabled()
+    );
   });
 
   it("save button disabled if there are multiple tags", async () => {
     const structureTag = { structureId: "123" };
     const props = { structureTag, tags };
-    const { getByRole } = render(<StructureTagForm {...props} />);
-    await waitFor(() => {
-      expect(getByRole("button", { name: "Save" })).toBeDisabled();
-    });
+    const rendered = render(<StructureTagForm {...props} />);
+    await waitForLoad(rendered);
+
+    await waitFor(() =>
+      expect(rendered.getByRole("button", { name: /save/i })).toBeDisabled()
+    );
   });
 
   it("Tag dropdown options contain name and description", async () => {
     const structureTag = { structureId: "123" };
     const props = { structureTag, tags };
-    const { findByRole } = render(<StructureTagForm {...props} />);
-    expect(await findByRole("option", { name: /Tag2/ })).toBeInTheDocument();
-    expect(await findByRole("option", { name: /desc1/ })).toBeInTheDocument();
+    const rendered = render(<StructureTagForm {...props} />);
+    await waitForLoad(rendered);
+
+    await waitFor(() =>
+      expect(
+        rendered.getByRole("option", { name: /tag2/i })
+      ).toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(
+        rendered.getByRole("option", { name: /desc1/i })
+      ).toBeInTheDocument()
+    );
   });
 
   it("Tag dropdown items have 'description' class", async () => {
     const longText = tags[2].description;
     const structureTag = { structureId: "123" };
     const props = { structureTag, tags };
-    const { findByRole } = render(<StructureTagForm {...props} />);
-    const option = await findByRole("option", { name: /verylong/ });
-    expect(within(option).getByText(longText)).toHaveClass("description");
+    const rendered = render(<StructureTagForm {...props} />);
+    await waitForLoad(rendered);
+
+    await rendered.findByRole("option", { name: /verylong/i });
+    expect(rendered.getByText(longText)).toHaveClass("description");
   });
 
   it("calls tagStructure on save", async () => {
     const tagStructure = jest.fn();
     const props = { structureTag, tagStructure };
-    const { findByLabelText, findByRole, queryByRole } = render(
-      <StructureTagForm {...props} />
+    const rendered = render(<StructureTagForm {...props} />);
+    await waitForLoad(rendered);
+    const user = userEvent.setup({ delay: null });
+
+    await user.type(
+      await rendered.findByLabelText(/structuretag.comment/i),
+      "bar"
     );
-    userEvent.type(await findByLabelText("Comments"), "bar");
-    userEvent.click(await findByLabelText(/Inherited/));
-    await waitFor(() => {
-      expect(queryByRole("button", { name: "Save" })).toBeEnabled();
-    });
-    userEvent.click(await findByRole("button", { name: "Save" }));
+    await user.click(await rendered.findByLabelText(/structuretag.inherit/i));
+
+    await waitFor(() =>
+      expect(rendered.getByRole("button", { name: /save/i })).toBeEnabled()
+    );
+
+    await user.click(rendered.getByRole("button", { name: /save/i }));
+
     await waitFor(() => {
-      expect(tagStructure.mock.calls.length).toBe(1);
-    });
-    expect(tagStructure.mock.calls[0][0]).toEqual({
-      comment: "foobar",
-      dataStructureId: structureTag.dataStructureId,
-      id: structureTag.id,
-      inherit: true,
-      tagId: structureTag.tagId,
+      expect(tagStructure).toHaveBeenCalledWith({
+        comment: "foobar",
+        dataStructureId: structureTag.dataStructureId,
+        id: structureTag.id,
+        inherit: true,
+        tagId: structureTag.tagId,
+      });
     });
   });
 
   it("calls deleteStructureTag on delete", async () => {
     const deleteStructureTag = jest.fn();
     const props = { structureTag, deleteStructureTag };
-    const { findByLabelText, findByRole, queryByRole } = render(
-      <StructureTagForm {...props} />
+    const rendered = render(<StructureTagForm {...props} />);
+    await waitForLoad(rendered);
+    const user = userEvent.setup({ delay: null });
+
+    await waitFor(() =>
+      expect(rendered.getByRole("button", { name: /delete/i })).toBeEnabled()
     );
+
+    await user.type(
+      await rendered.findByLabelText(/structuretag.comment/i),
+      "bar"
+    );
+    await user.click(rendered.getByRole("button", { name: /delete/i }));
+
     await waitFor(() => {
-      expect(queryByRole("button", { name: "Delete" })).toBeEnabled();
-    });
-    userEvent.type(await findByLabelText("Comments"), "bar");
-    userEvent.click(await findByRole("button", { name: "Delete" }));
-    await waitFor(() => {
-      expect(deleteStructureTag.mock.calls.length).toBe(1);
+      expect(deleteStructureTag).toHaveBeenCalledWith(structureTag.id);
     });
-    expect(deleteStructureTag).toHaveBeenCalledWith(structureTag.id);
   });
 });

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

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

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

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

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

@@ -1,29 +1,33 @@
-import React from "react";
-import { shallow, mount } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { StructureTypeLoader } from "../StructureTypeLoader";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useParams: () => ({ id: 1 })
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useParams: () => ({ id: 1 }),
 }));
 
 describe("<StructureTypeLoader />", () => {
-  it("matches the latest snapshot", () => {
-    const fetchStructureType = jest.fn();
-    const props = { fetchStructureType };
-    const wrapper = shallow(<StructureTypeLoader {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const props = {
+      fetchStructureType: jest.fn(),
+      clearStructureType: jest.fn(),
+    };
+    const rendered = render(<StructureTypeLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("calls fetchStructureType when component mounts, clearStructureType when component unmounts", () => {
-    const fetchStructureType = jest.fn();
-    const clearStructureType = jest.fn();
-    const props = { fetchStructureType, clearStructureType };
-    const wrapper = mount(<StructureTypeLoader {...props} />);
-    expect(clearStructureType.mock.calls.length).toBe(0);
-    expect(fetchStructureType.mock.calls.length).toBe(1);
-    wrapper.unmount();
-    expect(clearStructureType.mock.calls.length).toBe(1);
-    expect(fetchStructureType.mock.calls.length).toBe(1);
+  it("calls fetchStructureType when component mounts, clearStructureType when component unmounts", async () => {
+    const props = {
+      fetchStructureType: jest.fn(),
+      clearStructureType: jest.fn(),
+    };
+    const rendered = render(<StructureTypeLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(props.clearStructureType).toHaveBeenCalledTimes(0);
+    expect(props.fetchStructureType).toHaveBeenCalledTimes(1);
+    rendered.unmount();
+    expect(props.clearStructureType).toHaveBeenCalledTimes(1);
+    expect(props.fetchStructureType).toHaveBeenCalledTimes(1);
   });
 });

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

@@ -1,10 +1,9 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import StructureTypes from "../StructureTypes";
 
 const structureTypes = [
   {
-    id: 1,
+    id: "1",
     name: "foo",
     translation: "bar",
     metadata_fields: ["one"],
@@ -13,16 +12,6 @@ const structureTypes = [
 ];
 
 const renderOpts = {
-  messages: {
-    en: {
-      "structureTypes.header": "header",
-      "structureTypes.subheader": "subheader",
-      "structureType.metadataFields": "metadataFields",
-      "structureType.metadataViews": "metadataViews",
-      "structureType.template": "template",
-      "structureType.translation": "translation",
-    },
-  },
   state: {
     structureTypes,
   },

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

@@ -1,13 +1,13 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { StructureTypesCrumbs } from "../StructureTypesCrumbs";
 
 describe("<StructureTypesCrumbs />", () => {
   const structureType = { id: 1, name: "doc" };
 
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const props = { structureType };
-    const wrapper = shallow(<StructureTypesCrumbs {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<StructureTypesCrumbs {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });