@truedat/dd 7.5.9 → 7.5.10

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

@@ -1,14 +1,13 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import { StructureItemRoot } from "../StructureItemRoot";
 
-const mockHistory = {
-  push: jest.fn(),
-};
+const mockHistory = jest.fn();
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useHistory: () => mockHistory,
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useNavigate: () => mockHistory,
 }));
 
 describe("<StructureItemRoot />", () => {
@@ -16,17 +15,23 @@ describe("<StructureItemRoot />", () => {
   const name = "foo";
   const navFilter = {};
 
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const props = { id, name, navFilter };
 
-    const wrapper = shallow(<StructureItemRoot {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<StructureItemRoot {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("clicking the item will push to history", () => {
-    const wrapper = shallow(<StructureItemRoot navFilter={{}} />);
-    wrapper.find("ListItem").simulate("click");
-    expect(mockHistory.push.mock.calls.length).toBe(1);
-    expect(mockHistory.push.mock.calls[0][0]).toEqual("/structures");
+  it("clicking the item will push to history", async () => {
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<StructureItemRoot navFilter={{}} />);
+    await waitForLoad(rendered);
+
+    await user.click(rendered.container.querySelector(".item"));
+    await waitFor(() => {
+      expect(mockHistory).toHaveBeenCalledTimes(1);
+      expect(mockHistory).toHaveBeenCalledWith("/structures");
+    });
   });
 });

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

@@ -1,10 +1,9 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { StructureItems } from "../StructureItems";
 
 describe("<StructureItems />", () => {
   it("matches the latest snapshot", () => {
-    const structures = [{ id: 1, name: "some structure" }];
+    const structures = [{ id: "1", name: "some structure" }];
     const props = { structures, fnHasCatalogViewProp: jest.fn() };
 
     const { container } = render(<StructureItems {...props} />);
@@ -12,7 +11,7 @@ describe("<StructureItems />", () => {
   });
 
   it("matches the latest snapshot with alias", () => {
-    const structures = [{ id: 1, name: "some structure", alias: "alias" }];
+    const structures = [{ id: "1", name: "some structure", alias: "alias" }];
     const props = { structures, fnHasCatalogViewProp: jest.fn() };
 
     const { container } = render(<StructureItems {...props} />);

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

@@ -1,9 +1,8 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { StructureLoader } from "../StructureLoader";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useParams: () => ({ id: 1, version: 8 }),
 }));
 

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

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

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

@@ -1,14 +1,7 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { StructureNav, hasNavClass, navClasses } from "../StructureNav";
 
 const renderOpts = {
-  messages: {
-    en: {
-      "structure.navigation.home": "Home",
-      "structure.navigation.showing": "from a total of",
-    },
-  },
   state: {
     navFilter: {},
   },
@@ -16,7 +9,7 @@ const renderOpts = {
 
 describe("<StructureNav />", () => {
   it("matches the latest snapshot", () => {
-    const childStructures = [{ id: 1 }];
+    const childStructures = [{ id: "1" }];
     const props = { childStructures, fnHasCatalogViewProp: jest.fn() };
 
     const { container } = render(<StructureNav {...props} />, renderOpts);
@@ -24,7 +17,7 @@ describe("<StructureNav />", () => {
   });
 
   it("matches the latest snapshot with classified structures", () => {
-    const childStructures = [{ id: 1, classes: { foo: "bar" } }];
+    const childStructures = [{ id: "1", classes: { foo: "bar" } }];
     const props = { childStructures };
 
     const { container } = render(<StructureNav {...props} />, renderOpts);
@@ -32,7 +25,7 @@ describe("<StructureNav />", () => {
   });
 
   it("matches the latest snapshot with total greater than showed structures", () => {
-    const childStructures = [{ id: 1, classes: { foo: "bar" } }];
+    const childStructures = [{ id: "1", classes: { foo: "bar" } }];
     const totalChildStructures = 10;
     const props = { childStructures, totalChildStructures };
 

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

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

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

@@ -1,12 +1,10 @@
-import React from "react";
-import { shallow } from "enzyme";
-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 { StructureNoteActions } from "../StructureNoteActions";
 
 describe("<StructureNoteActions />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const props = {
       doStructureNoteAction: () => {},
       actions: {
@@ -18,8 +16,9 @@ describe("<StructureNoteActions />", () => {
       },
       structure: { id: 1 },
     };
-    const wrapper = shallow(<StructureNoteActions {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<StructureNoteActions {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("invokes opens modal when clicking a delete or deprecate action", async () => {
@@ -36,11 +35,11 @@ describe("<StructureNoteActions />", () => {
       structure: { id: 1 },
     };
 
-    const { findByText } = render(<StructureNoteActions {...props} />);
-
-    userEvent.click(await findByText(/Delete/));
+    const rendered = render(<StructureNoteActions {...props} />);
+    await waitForLoad(rendered);
 
-    userEvent.click(await findByText(/Yes/));
+    userEvent.click(await rendered.findByText(/deleted/i));
+    userEvent.click(await rendered.findByText(/yes/i));
 
     await waitFor(() => {
       expect(doStructureNoteAction.mock.calls.length).toBe(1);
@@ -71,9 +70,10 @@ describe("<StructureNoteActions />", () => {
       structure: { id: 1 },
     };
 
-    const { findByText } = render(<StructureNoteActions {...props} />);
+    const rendered = render(<StructureNoteActions {...props} />);
+    await waitForLoad(rendered);
 
-    userEvent.click(await findByText(/Send to approve/));
+    userEvent.click(await rendered.findByText(/pending_approval/i));
 
     await waitFor(() => {
       expect(doStructureNoteAction.mock.calls.length).toBe(1);

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

@@ -1,6 +1,5 @@
-import React, { Suspense } from "react";
 import userEvent from "@testing-library/user-event";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import { StructureNotes } from "../StructureNotes";
 
 jest.mock("@truedat/df/components/DynamicFormViewer", () => {
@@ -32,20 +31,20 @@ describe("<StructureNotes />", () => {
       template: { id: 2 },
       doStructureNoteAction: () => {},
     };
-    const { findByText, container } = render(
-      <Suspense fallback={null}>
-        <StructureNotes {...props} />
-      </Suspense>
-    );
-    expect(container).toMatchSnapshot();
-
-    userEvent.click(await findByText("Show previous versions"));
+    const rendered = render(<StructureNotes {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
 
-    expect(container).toMatchSnapshot();
-
-    userEvent.click(await findByText("Show content"));
+    const user = userEvent.setup({ delay: null });
+    await user.click(
+      await rendered.findByText(/structure.notes.actions.show_versioned/i)
+    );
+    expect(rendered.container).toMatchSnapshot();
 
-    expect(container).toMatchSnapshot();
+    await user.click(
+      await rendered.findByText(/structure.notes.df_content.collapsed.true/i)
+    );
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot with draft structure note", async () => {
@@ -102,11 +101,14 @@ describe("<StructureNotes />", () => {
       },
       doStructureNoteAction: () => {},
     };
-    const { findByText, container } = render(<StructureNotes {...props} />);
-    expect(container).toMatchSnapshot();
-
-    userEvent.click(await findByText("Show content"));
+    const rendered = render(<StructureNotes {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
 
-    expect(container).toMatchSnapshot();
+    const user = userEvent.setup({ delay: null });
+    await user.click(
+      await rendered.findByText(/structure.notes.df_content.collapsed.true/i)
+    );
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,12 +1,11 @@
-import React, { Suspense } 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 { applyTemplate } from "@truedat/df/utils";
 import { StructureNotesEdit } from "../StructureNotesEdit";
 
 describe("<StructureNotesEdit />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const props = {
       structure: { id: 1 },
       template: { id: 2 },
@@ -20,15 +19,12 @@ describe("<StructureNotesEdit />", () => {
       applyTemplate: applyTemplate({ id: 2 }),
       selectDomains: jest.fn(),
     };
-    const { container } = render(
-      <Suspense fallback={null}>
-        <StructureNotesEdit {...props} />
-      </Suspense>
-    );
-    expect(container).toMatchSnapshot();
+    const rendered = render(<StructureNotesEdit {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot with ai suggestion action", () => {
+  it("matches the latest snapshot with ai suggestion action", async () => {
     const props = {
       structure: { id: 1 },
       template: { id: 2 },
@@ -45,23 +41,11 @@ describe("<StructureNotesEdit />", () => {
       applyTemplate: applyTemplate({ id: 2 }),
       selectDomains: jest.fn(),
     };
-    const { container } = render(
-      <Suspense fallback={null}>
-        <StructureNotesEdit {...props} />
-      </Suspense>,
-      {
-        messages: {
-          en: {
-            "actions.cancel": "cancel",
-            "actions.save": "save",
-            "structure_note.ai_suggestion.header": "header",
-            "actions.ai_suggestion": "ai_suggestion",
-          },
-        },
-      }
-    );
-    expect(container).toMatchSnapshot();
+    const rendered = render(<StructureNotesEdit {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
+
   it("calls doStructureNoteAction when submit is clicked", async () => {
     const doStructureNoteAction = jest.fn();
     const template = {
@@ -94,13 +78,11 @@ describe("<StructureNotesEdit />", () => {
       selectDomains: jest.fn(),
     };
 
-    const { findByText } = render(
-      <Suspense fallback={null}>
-        <StructureNotesEdit {...props} />
-      </Suspense>
-    );
+    const rendered = render(<StructureNotesEdit {...props} />);
+    await waitForLoad(rendered);
 
-    userEvent.click(await findByText("Save"));
+    const user = userEvent.setup({ delay: null });
+    await user.click(await rendered.findByText(/save/i));
 
     await waitFor(() => {
       expect(doStructureNoteAction.mock.calls.length).toBe(1);

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

@@ -1,14 +1,8 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { render, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { intl } from "@truedat/test/intl-stub";
+import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 import { StructureProfileButton } from "../StructureProfileButton";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<StructureProfileButton />", () => {
   const createProfileGroup = jest.fn();
   const structure = {
@@ -21,20 +15,22 @@ describe("<StructureProfileButton />", () => {
     createProfileGroup,
   };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<StructureProfileButton {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<StructureProfileButton {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("calls create job when button is pressed", async () => {
-    const { getByRole } = render(<StructureProfileButton {...props} />);
+    const rendered = render(<StructureProfileButton {...props} />);
+    await waitForLoad(rendered);
 
-    await waitFor(() => {
-      userEvent.click(getByRole("button"));
-    });
+    userEvent.click(rendered.getByRole("button"));
 
-    expect(createProfileGroup).toHaveBeenCalledWith({
-      data_structure_ids: [structure.id],
+    await waitFor(() => {
+      expect(createProfileGroup).toHaveBeenCalledWith({
+        data_structure_ids: [structure.id],
+      });
     });
   });
 });

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

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

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

@@ -1,6 +1,7 @@
+import userEvent from "@testing-library/user-event";
+import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 import _ from "lodash/fp";
-import React from "react";
-import { shallow } from "enzyme";
 import { StructureRelationRow } from "../StructureRelationRow";
 
 describe("<StructureRelationRow />", () => {
@@ -8,61 +9,73 @@ describe("<StructureRelationRow />", () => {
   const relation_type = {
     description: "relation type 1",
     id: 1,
-    name: "used_by"
+    name: "used_by",
   };
   const relation = {
     id: 1,
     relation_type,
-    structure
+    structure,
   };
 
   const columns = [
     {
       name: "name",
       fieldSelector: _.pick(["structure.data_structure_id", "structure.name"]),
-      fieldDecorator: _.path("structure.name")
+      fieldDecorator: _.path("structure.name"),
     },
     {
       name: "type",
-      fieldSelector: _.path("structure.type")
+      fieldSelector: _.path("structure.type"),
     },
     {
       name: "relation_type_name",
-      fieldSelector: _.path("relation_type.name")
-    }
+      fieldSelector: _.path("relation_type.name"),
+    },
   ];
 
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const props = { relation, columns };
-    const wrapper = shallow(<StructureRelationRow {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<StructureRelationRow {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("clicking the row will pass the relation to onClick()", () => {
+  it("clicking the row will pass the relation to onClick()", async () => {
     const onClick = jest.fn();
     const props = { relation, columns, onClick };
-    const wrapper = shallow(<StructureRelationRow {...props} />);
-    wrapper.find("TableRow").simulate("click");
-    expect(onClick.mock.calls.length).toBe(1);
-    expect(onClick.mock.calls[0][0]).toEqual(relation);
+    const rendered = render(<StructureRelationRow {...props} />);
+    await waitForLoad(rendered);
+    const user = userEvent.setup({ delay: null });
+
+    await user.click(rendered.container.querySelector("tr"));
+    await waitFor(() => {
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(onClick).toHaveBeenCalledWith(relation);
+    });
   });
 
-  it("row prints field selector", () => {
+  it("row prints field selector", async () => {
     const value = _.path("structure.name")(relation);
     const onClick = jest.fn();
     const props = { relation, columns: [_.head(columns)], onClick };
-    const wrapper = shallow(<StructureRelationRow {...props} />);
-    expect(wrapper.find("TableCell").props().content).toEqual(value);
+    const rendered = render(<StructureRelationRow {...props} />);
+    await waitForLoad(rendered);
+
+    expect(rendered.container.querySelector("td")).toHaveTextContent(value);
   });
 
-  it("row prints field decorator", () => {
-    const fieldDecorator = x => x + "_decorated";
+  it("row prints field decorator", async () => {
+    const fieldDecorator = (x) => x + "_decorated";
     const column = _.flow(
       _.last,
       _.set("fieldDecorator", fieldDecorator)
     )(columns);
     const props = { relation, columns: [column] };
-    const wrapper = shallow(<StructureRelationRow {...props} />);
-    expect(wrapper.find("TableCell").props().content).toBe("used_by_decorated");
+    const rendered = render(<StructureRelationRow {...props} />);
+    await waitForLoad(rendered);
+
+    expect(rendered.container.querySelector("td")).toHaveTextContent(
+      "used_by_decorated"
+    );
   });
 });

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

@@ -1,53 +1,66 @@
+import { render, waitForLoad } from "@truedat/test/render";
 import _ from "lodash/fp";
-import React from "react";
-import { shallow } from "enzyme";
 import { StructureRelations } from "../StructureRelations";
+import StructureRelationRow from "../StructureRelationRow";
+
+// Mock the StructureRelationRow component
+jest.mock("../StructureRelationRow", () => {
+  return jest.fn(() => <tr data-testid="mocked-relation-row" />);
+});
 
 describe("<StructureRelations />", () => {
   const relation_type = {
     description: "relation type 1",
     id: 1,
-    name: "used_by"
+    name: "used_by",
   };
   const relations = [
     {
       id: 1,
       relation_type,
-      structure: { id: 1, name: "Structure 1", type: "Some Type 1" }
+      structure: { id: 1, name: "Structure 1", type: "Some Type 1" },
     },
     {
       id: 2,
       relation_type,
-      structure: { id: 1, name: "Structure 2", type: "Some Type 2" }
-    }
+      structure: { id: 1, name: "Structure 2", type: "Some Type 2" },
+    },
   ];
 
   const columns = [
     {
       name: "name",
-      fieldSelector: _.pick(["structure.data_structure_id", "structure.name"])
+      fieldSelector: _.pick(["structure.data_structure_id", "structure.name"]),
     },
     {
       name: "type",
-      fieldSelector: _.path("structure.type")
+      fieldSelector: _.path("structure.type"),
     },
     {
       name: "relation_type_name",
-      fieldSelector: _.path("relation_type.name")
-    }
+      fieldSelector: _.path("relation_type.name"),
+    },
   ];
 
-  it("matches the latest snapshot", () => {
+  beforeEach(() => {
+    StructureRelationRow.mockClear();
+  });
+
+  it("matches the latest snapshot", async () => {
     const props = { relations, columns };
-    const wrapper = shallow(<StructureRelations {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<StructureRelations {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches number of relation rows and table columns", () => {
+  it("matches number of relation rows and table columns", async () => {
     const props = { relations, columns };
-    const wrapper = shallow(<StructureRelations {...props} />);
-    expect(wrapper.find("TableHeaderCell")).toHaveLength(columns.length);
-    expect(wrapper.findWhere(n => n.prop("columns"))).toHaveLength(
+    const rendered = render(<StructureRelations {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container.querySelectorAll("th")).toHaveLength(
+      columns.length
+    );
+    expect(rendered.container.querySelectorAll("tbody tr")).toHaveLength(
       relations.length
     );
   });

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

@@ -1,14 +1,9 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import { intl } from "@truedat/test/intl-stub";
+import { render, waitForLoad } from "@truedat/test/render";
 import StructureRoles from "../StructureRoles";
 
-// 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"),
-  useParams: jest.fn().mockReturnValue({ id: 1 }),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useParams: jest.fn().mockReturnValue({ id: "1" }),
 }));
 
 describe("<StructureRoles />", () => {
@@ -16,8 +11,9 @@ describe("<StructureRoles />", () => {
     type: "domain",
   };
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(<StructureRoles {...props} />);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<StructureRoles {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });