@truedat/dd 7.5.7 → 7.5.10

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

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

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

@@ -1,39 +1,41 @@
-import React from "react";
-import { shallow, mount } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { SystemLoader } from "../SystemLoader";
 
-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("<SystemLoader />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const fetchSystem = jest.fn();
     const systemLoading = true;
-    const props = { fetchSystem, systemLoading };
-    const wrapper = shallow(<SystemLoader {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const props = { fetchSystem, systemLoading, clearSystem: jest.fn() };
+    const rendered = render(<SystemLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("renders null if systemLoading is false", () => {
+  it("renders null if systemLoading is false", async () => {
     const fetchSystem = jest.fn();
     const systemLoading = false;
-    const props = { fetchSystem, systemLoading };
-    const wrapper = shallow(<SystemLoader {...props} />);
-    expect(wrapper.getElement()).toBeNull();
+    const props = { fetchSystem, systemLoading, clearSystem: jest.fn() };
+    const rendered = render(<SystemLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container.firstChild).toBeNull();
   });
 
-  it("calls fetchSystem when component mounts, clearSystem when component unmounts", () => {
+  it("calls fetchSystem when component mounts, clearSystem when component unmounts", async () => {
     const fetchSystem = jest.fn();
     const clearSystem = jest.fn();
     const systemLoading = false;
     const props = { fetchSystem, systemLoading, clearSystem };
-    const wrapper = mount(<SystemLoader {...props} />);
-    expect(clearSystem.mock.calls.length).toBe(0);
-    expect(fetchSystem.mock.calls.length).toBe(1);
-    wrapper.unmount();
-    expect(clearSystem.mock.calls.length).toBe(1);
-    expect(fetchSystem.mock.calls.length).toBe(1);
+    const rendered = render(<SystemLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(clearSystem).not.toHaveBeenCalled();
+    expect(fetchSystem).toHaveBeenCalledTimes(1);
+    rendered.unmount();
+    expect(clearSystem).toHaveBeenCalledTimes(1);
+    expect(fetchSystem).toHaveBeenCalledTimes(1);
   });
 });

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

@@ -1,15 +1,34 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { SystemStructures } from "../SystemStructures";
+import { render, waitForLoad } from "@truedat/test/render";
+import SystemStructures from "../SystemStructures";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useParams: () => ({ id: 1 }),
 }));
 
+jest.mock("../FilteredNav", () => () => (
+  <div data-testid="filtered-nav">FilteredNav</div>
+));
+jest.mock("../SystemCrumbs", () => () => (
+  <div data-testid="system-crumbs">SystemCrumbs</div>
+));
+jest.mock("../SystemView", () => () => (
+  <div data-testid="system-view">SystemView</div>
+));
+
 describe("<SystemStructures />", () => {
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<SystemStructures />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const saveNavFilter = jest.fn();
+    const props = {
+      navFilter: { filter: { system_id: 1 } },
+      saveNavFilter,
+      system: {},
+      systemStructuresLoading: false,
+      systemTemplate: {},
+    };
+
+    const rendered = render(<SystemStructures {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,37 +1,32 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { SystemStructuresLoader } from "../SystemStructuresLoader";
+import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
+import SystemStructuresLoader from "../SystemStructuresLoader";
+import { clearSystemStructures, fetchSystemStructures } from "../../routines";
+
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useParams: () => ({ id: "1" }),
+}));
 
 describe("<SystemStructuresLoader />", () => {
-  it("matches the latest snapshot", () => {
-    const fetchSystemStructures = jest.fn();
-    const systemStructuresLoading = true;
-    const match = { params: { id: 1 } };
-    const props = { fetchSystemStructures, systemStructuresLoading, match };
-    const wrapper = shallow(<SystemStructuresLoader {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
+  it("calls fetchSystemStructures when component mounts, clearSystemStructures when component unmounts", async () => {
+    const dispatchMock = jest.fn();
+
+    const rendered = render(<SystemStructuresLoader />, {
+      dispatch: dispatchMock,
+    });
+    await waitForLoad(rendered);
+
+    await waitFor(() => {
+      expect(dispatchMock).toHaveBeenCalledWith(
+        fetchSystemStructures({ id: "1" })
+      );
+    });
+
+    rendered.unmount();
 
-  it("calls fetchSystemStructures when component mounts, clearSystemStructures when component unmounts", () => {
-    const fetchSystemStructures = jest.fn();
-    const clearSystemStructures = jest.fn();
-    const systemStructuresLoading = false;
-    const match = { params: { id: 1 } };
-    const props = {
-      fetchSystemStructures,
-      systemStructuresLoading,
-      clearSystemStructures,
-      match
-    };
-    jest.spyOn(SystemStructuresLoader.prototype, "componentDidMount");
-    const wrapper = shallow(<SystemStructuresLoader {...props} />);
-    expect(
-      SystemStructuresLoader.prototype.componentDidMount.mock.calls.length
-    ).toBe(1);
-    expect(clearSystemStructures.mock.calls.length).toBe(0);
-    expect(fetchSystemStructures.mock.calls.length).toBe(1);
-    wrapper.unmount();
-    expect(clearSystemStructures.mock.calls.length).toBe(1);
-    expect(fetchSystemStructures.mock.calls.length).toBe(1);
+    await waitFor(() => {
+      expect(dispatchMock).toHaveBeenCalledWith(clearSystemStructures());
+    });
   });
 });

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

@@ -1,10 +1,39 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { SystemView } from "../SystemView";
 
+jest.mock("assets/searching.png", () => "searchImageMock.png");
+
+jest.mock("@truedat/df/components/DynamicFormViewer", () => {
+  return function MockDynamicFormViewer() {
+    return <div>Dynamic Form Viewer Mock</div>;
+  };
+});
+
 describe("<SystemView />", () => {
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<SystemView />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const props = {
+      system: {
+        name: "Test System",
+        external_id: "TEST-001",
+        dynamic_content: {},
+      },
+    };
+
+    const renderOpts = {
+      state: {
+        templates: [
+          {
+            name: "System",
+            content: [],
+          },
+        ],
+        systemsLoading: false,
+        systems: [],
+      },
+    };
+
+    const rendered = render(<SystemView {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,15 +1,59 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
-import { SystemsRoutes } from "../SystemsRoutes";
+import { render, waitForLoad } from "@truedat/test/render";
+import SystemsRoutes from "../SystemsRoutes";
+import {
+  SYSTEM_STRUCTURES,
+  SYSTEM_NEW,
+  SYSTEM_EDIT,
+} from "@truedat/core/routes";
 
-// 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("../SystemStructures", () => () => <div>SystemStructures</div>);
+jest.mock("../SystemForm", () => () => <div>SystemForm</div>);
+jest.mock("../SystemLoader", () => () => <div>SystemLoader</div>);
+jest.mock("../SystemCrumbs", () => () => <div>SystemCrumbs</div>);
 
 describe("<SystemsRoutes />", () => {
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<SystemsRoutes />);
-    expect(wrapper).toMatchSnapshot();
+  it("renders correctly with default route", async () => {
+    const rendered = render(<SystemsRoutes />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with new system route", async () => {
+    const rendered = render(<SystemsRoutes />, {
+      routes: [SYSTEM_NEW],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with system structures route", async () => {
+    const rendered = render(<SystemsRoutes />, {
+      routes: [SYSTEM_STRUCTURES.replace(":id", "123")],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with system edit route", async () => {
+    const rendered = render(<SystemsRoutes />, {
+      routes: [SYSTEM_EDIT.replace(":id", "123")],
+      state: {
+        system: { id: "123", name: "Test System" },
+      },
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with empty system on edit route", async () => {
+    const rendered = render(<SystemsRoutes />, {
+      routes: [SYSTEM_EDIT.replace(":id", "123")],
+      state: {
+        system: {},
+      },
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

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

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
 import { TAGS_QUERY } from "../../api/queries";

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

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

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

@@ -1,13 +1,31 @@
-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 { DOMAINS_QUERY } from "@truedat/core/api/queries";
 import TagForm from "../TagForm";
 
 const domainsMock = {
-  request: { query: DOMAINS_QUERY },
-  result: { data: { domains: [{ id: "123", name: "foo" }] } },
+  request: {
+    query: DOMAINS_QUERY,
+    variables: {
+      action: "manageTags",
+      domainActions: undefined,
+      ids: undefined,
+    },
+  },
+  result: {
+    data: {
+      domains: [
+        {
+          id: "123",
+          name: "foo",
+          externalId: "bar",
+          parentId: "321",
+          actions: [],
+        },
+      ],
+    },
+  },
 };
 
 const renderOpts = {
@@ -30,35 +48,42 @@ describe("<TagForm />", () => {
   };
 
   it("matches the latest snapshot", async () => {
-    const { container, findByRole } = render(
-      <TagForm {...props} />,
-      renderOpts
+    const rendered = render(<TagForm {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    await waitFor(() =>
+      expect(
+        rendered.getByRole("button", { name: /save/i })
+      ).toBeInTheDocument()
     );
-    await findByRole("button", { name: /save/i });
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("calls onSubmit with data on submit", async () => {
-    const { getByRole } = render(<TagForm {...props} />, renderOpts);
+    const rendered = render(<TagForm {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    const user = userEvent.setup({ delay: null });
 
     // Submit button should initially be disabled
     await waitFor(() =>
-      expect(getByRole("button", { name: /save/i })).toBeDisabled()
+      expect(rendered.getByRole("button", { name: /save/i })).toBeDisabled()
     );
 
     // Name
-    userEvent.type(getByRole("textbox", { name: /name/i }), "foo");
+    await user.type(rendered.getByRole("textbox", { name: /name/i }), "foo");
 
     // Submit button should now be enabled
     await waitFor(() =>
-      expect(getByRole("button", { name: /save/i })).not.toBeDisabled()
+      expect(rendered.getByRole("button", { name: /save/i })).not.toBeDisabled()
     );
 
-    // Name
-    userEvent.type(getByRole("textbox", { name: /description/i }), "bar");
+    // Description
+    await user.type(
+      rendered.getByRole("textbox", { name: /description/i }),
+      "bar"
+    );
 
     // Submit
-    userEvent.click(getByRole("button", { name: /save/i }));
+    await user.click(rendered.getByRole("button", { name: /save/i }));
 
     await waitFor(() => {
       expect(onSubmit.mock.calls.length).toBe(1);

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

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

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

@@ -0,0 +1,69 @@
+import React from "react";
+import { render, waitForLoad } from "@truedat/test/render";
+import { TagsRoutes } from "../TagsRoutes";
+import { useAuthorized } from "@truedat/core/hooks/useAuthorized";
+import {
+  STRUCTURE_TAGS,
+  STRUCTURE_TAG_EDIT,
+  STRUCTURE_TAGS_NEW,
+} from "@truedat/core/routes";
+import { TAG_QUERY } from "../../api/queries";
+
+jest.mock("@truedat/core/hooks/useAuthorized", () => ({
+  useAuthorized: jest.fn(() => true),
+}));
+
+jest.mock("../Tags", () => () => <div>Tags</div>);
+jest.mock("../Tag", () => () => <div>Tag</div>);
+
+describe("<TagsRoutes />", () => {
+  it("renders correctly with default route", async () => {
+    const rendered = render(<TagsRoutes />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with structure tags route", async () => {
+    const rendered = render(<TagsRoutes />, {
+      routes: [STRUCTURE_TAGS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with structure tags new route", async () => {
+    const rendered = render(<TagsRoutes />, {
+      routes: [STRUCTURE_TAGS_NEW],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with structure tag edit route", async () => {
+    const rendered = render(<TagsRoutes />, {
+      routes: [STRUCTURE_TAG_EDIT.replace(":id", "123")],
+      mocks: [
+        {
+          request: {
+            query: TAG_QUERY,
+            variables: { id: "123" },
+          },
+          result: {
+            data: { tag: { id: "123", name: "Test Tag" } },
+          },
+        },
+      ],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders unauthorized component when not authorized", async () => {
+    useAuthorized.mockReturnValueOnce(false);
+    const rendered = render(<TagsRoutes />, {
+      routes: [STRUCTURE_TAGS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+});

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

@@ -1,15 +1,13 @@
-import React from "react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import Task from "../Task";
 import { TASK_QUERY } from "../../api/queries";
-import en from "../../messages/en";
 
 jest.mock("@truedat/core/hooks", () => ({
   useAuthorized: jest.fn(() => true),
 }));
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useParams: () => ({ id: "123" }),
 }));
 
@@ -34,11 +32,11 @@ const taskMock = {
 describe("<Task />", () => {
   it("matches the latest snapshot", async () => {
     const renderOpts = {
-      messages: { en },
       mocks: [taskMock],
     };
-    const { container, findByText } = render(<Task />, renderOpts);
-    await findByText("processing");
-    expect(container).toMatchSnapshot();
+    const rendered = render(<Task />, renderOpts);
+    await waitForLoad(rendered);
+    await rendered.findByText(/processing/i);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,20 +1,14 @@
-/* eslint-disable fp/no-mutation */
-/* eslint-disable fp/no-let */
-import React from "react";
-import { waitFor } 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 { Tasks } from "../Tasks";
 import { TASKS_QUERY } from "../../api/queries";
-import en from "../../messages/en";
 
-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,
 }));
 
 const task = {
@@ -59,10 +53,11 @@ const tasksMock = {
     }
   },
 };
+
 const renderOpts = {
-  messages: { en },
   mocks: [tasksMock],
 };
+
 const props = {
   reindexAllGrants: jest.fn(),
   reindexAllStructures: jest.fn(),
@@ -71,38 +66,50 @@ const props = {
 describe("<Tasks />", () => {
   it("matches the latest snapshot", async () => {
     queryCalled = false;
-    const { container, findByText } = render(<Tasks {...props} />, renderOpts);
-    await findByText("processing");
-    expect(container).toMatchSnapshot();
+    const rendered = render(<Tasks {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    await waitFor(() =>
+      expect(rendered.getByText(/processing/i)).toBeInTheDocument()
+    );
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("refetches button", async () => {
     queryCalled = false;
-    const { container, findByText, findByRole } = render(
-      <Tasks {...props} />,
-      renderOpts
+    const rendered = render(<Tasks {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    await waitFor(() =>
+      expect(rendered.getByText(/processing/i)).toBeInTheDocument()
     );
-    await findByText("processing");
 
-    userEvent.click(await findByRole("button", { name: /Refresh/i }));
-    await findByText("done");
-    expect(container).toMatchSnapshot();
+    const user = userEvent.setup({ delay: null });
+    await user.click(await rendered.findByRole("button", { name: /refresh/i }));
+    await waitFor(() =>
+      expect(rendered.getByText(/done/i)).toBeInTheDocument()
+    );
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("triggers Reindex Grants and Structures", async () => {
     queryCalled = false;
-    const { findByText, findByRole } = render(<Tasks {...props} />, renderOpts);
-    await findByText("processing");
+    const rendered = render(<Tasks {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    await waitFor(() =>
+      expect(rendered.getByText(/processing/i)).toBeInTheDocument()
+    );
 
-    userEvent.click(
-      await findByRole("button", { name: /Reindex all structures/i })
+    const user = userEvent.setup({ delay: null });
+    await user.click(
+      await rendered.findByRole("button", {
+        name: /task.reindex_all_structures/i,
+      })
     );
     await waitFor(() =>
       expect(props.reindexAllStructures).toHaveBeenCalledTimes(1)
     );
 
-    userEvent.click(
-      await findByRole("button", { name: /Reindex all grants/i })
+    await user.click(
+      await rendered.findByRole("button", { name: /task.reindex_all_grants/i })
     );
     await waitFor(() =>
       expect(props.reindexAllGrants).toHaveBeenCalledTimes(1)
@@ -111,10 +118,14 @@ describe("<Tasks />", () => {
 
   it("navigates to task detail", async () => {
     queryCalled = false;
-    const { findByText } = render(<Tasks {...props} />, renderOpts);
-    await findByText("processing");
+    const rendered = render(<Tasks {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    await waitFor(() =>
+      expect(rendered.getByText(/processing/i)).toBeInTheDocument()
+    );
 
-    userEvent.click(await findByText(/processing/i));
-    expect(mockHistory.push.mock.calls[0][0]).toBe("/reindex/123");
+    const user = userEvent.setup({ delay: null });
+    await user.click(await rendered.getByText(/processing/i));
+    expect(mockHistory.mock.calls[0][0]).toBe("/reindex/123");
   });
 });