@truedat/dd 7.5.9 → 7.5.11

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

@@ -1,36 +1,43 @@
-import React from "react";
-import { mount, shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { ProfileGroupLoader } from "../ProfileGroupLoader";
 
-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("<ProfileGroupLoader />", () => {
-  const clearProfileGroup = jest.fn();
-  const fetchProfileGroup = jest.fn();
-  const props = { clearProfileGroup, fetchProfileGroup };
-
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<ProfileGroupLoader />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const clearProfileGroup = jest.fn();
+    const fetchProfileGroup = jest.fn();
+    const props = { clearProfileGroup, fetchProfileGroup };
+    const rendered = render(<ProfileGroupLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("calls fetchStructure when component mounts but not when it unmounts", () => {
-    const wrapper = mount(<ProfileGroupLoader {...props} />);
+  it("calls fetchStructure when component mounts but not when it unmounts", async () => {
+    const clearProfileGroup = jest.fn();
+    const fetchProfileGroup = jest.fn();
+    const props = { clearProfileGroup, fetchProfileGroup };
+    const rendered = render(<ProfileGroupLoader {...props} />);
+    await waitForLoad(rendered);
     expect(fetchProfileGroup).toHaveBeenCalledTimes(1);
     expect(fetchProfileGroup).toHaveBeenCalledWith({ id: 1 });
 
-    wrapper.unmount();
-    expect(props.fetchProfileGroup).toHaveBeenCalledTimes(1);
+    rendered.unmount();
+    expect(fetchProfileGroup).toHaveBeenCalledTimes(1);
   });
 
-  it("calls clearProfileGroup when component unmounts but not when it mounts", () => {
+  it("calls clearProfileGroup when component unmounts but not when it mounts", async () => {
+    const clearProfileGroup = jest.fn();
+    const fetchProfileGroup = jest.fn();
+    const props = { clearProfileGroup, fetchProfileGroup };
     clearProfileGroup.mockClear();
-    const wrapper = mount(<ProfileGroupLoader {...props} />);
+    const rendered = render(<ProfileGroupLoader {...props} />);
+    await waitForLoad(rendered);
     expect(clearProfileGroup).toHaveBeenCalledTimes(0);
-    wrapper.unmount();
+    rendered.unmount();
     expect(clearProfileGroup).toHaveBeenCalledTimes(1);
   });
 });

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

@@ -1,20 +1,16 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import { render, waitForLoad } from "@truedat/test/render";
 import { ProfileGroupMessage } from "../ProfileGroupMessage";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<ProfileGroupMessage />", () => {
-  it("matches the latest snapshot when we have pending executions", () => {
-    const wrapper = shallow(<ProfileGroupMessage pending={2} count={5} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot when we have pending executions", async () => {
+    const rendered = render(<ProfileGroupMessage pending={2} count={5} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot when we don't have pending executions", () => {
-    const wrapper = shallow(<ProfileGroupMessage pending={0} count={5} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot when we don't have pending executions", async () => {
+    const rendered = render(<ProfileGroupMessage pending={0} count={5} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,7 +1,6 @@
-import React from "react";
 import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import { domainsMock } from "@truedat/test/mocks";
 import ReferenceDataset from "../ReferenceDataset";
 
@@ -22,59 +21,58 @@ jest.mock("@truedat/core/hooks", () => ({
 }));
 
 describe("<ReferenceDataset /> show dataset view", () => {
-  const renderOpts = { routes: ["/referenceDatasets/123"] };
+  const renderOpts = { routes: ["/"] };
   const props = { dataset };
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(<ReferenceDataset {...props} />, renderOpts);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<ReferenceDataset {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("contains the right number of rows", () => {
-    const { queryAllByRole } = render(
-      <ReferenceDataset {...props} />,
-      renderOpts
-    );
-    expect(queryAllByRole("row")).toHaveLength(3);
+  it("contains the right number of rows", async () => {
+    const rendered = render(<ReferenceDataset {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.queryAllByRole("row")).toHaveLength(3);
   });
 });
 
 describe("<ReferenceDataset /> edit dataset view", () => {
   const renderOpts = {
     mocks: [domainsMock({ action: "viewDataStructure" })],
-    routes: ["/referenceDatasets/123/edit"],
+    routes: ["/edit"],
   };
   const props = { dataset };
 
   it("matches the latest snapshot", async () => {
-    const { container, findByText, queryByText } = render(
-      <ReferenceDataset {...props} />,
-      renderOpts
+    const rendered = render(<ReferenceDataset {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    await waitFor(() =>
+      expect(rendered.queryByText(/save/i)).toBeInTheDocument()
     );
-    await findByText("Save");
-
-    await waitFor(() => {
-      expect(queryByText(/barDomain/)).toBeTruthy();
-    });
-    expect(container).toMatchSnapshot();
+    await waitFor(() =>
+      expect(rendered.queryByText(/bardomain/i)).toBeInTheDocument()
+    );
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("form is disabled until modified", async () => {
-    const { findByText, queryByText, findAllByRole, getByRole, queryByRole } =
-      render(<ReferenceDataset {...props} />, renderOpts);
-    await findByText("Save");
-
-    await waitFor(() => {
-      expect(queryByText(/barDomain/)).toBeTruthy();
-    });
+    const rendered = render(<ReferenceDataset {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    await waitFor(() =>
+      expect(rendered.queryByText(/save/i)).toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(rendered.queryByText(/bardomain/i)).toBeInTheDocument()
+    );
 
     // Form is disabled until modified
-    expect(queryByRole("button", { name: /Save/ })).toBeDisabled();
-    userEvent.type((await findAllByRole("textbox"))[1], "bar");
+    expect(rendered.queryByRole("button", { name: /save/i })).toBeDisabled();
+    userEvent.type((await rendered.findAllByRole("textbox"))[1], "bar");
 
     // Form is now enabled
     await waitFor(() =>
-      expect(getByRole("button", { name: /Save/ })).not.toBeDisabled()
+      expect(rendered.getByRole("button", { name: /save/i })).not.toBeDisabled()
     );
   });
 });

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

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

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

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

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
 import { domainsMock } from "@truedat/test/mocks";

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

@@ -1,8 +1,19 @@
 import React from "react";
+import { render, waitForLoad } from "@truedat/test/render";
 import { waitFor } from "@testing-library/react";
-import { render } from "@truedat/test/render";
 import { domainsMock } from "@truedat/test/mocks";
 import ReferenceDatasetDetail from "../ReferenceDatasetDetail";
+import {
+  REFERENCE_DATASET_EDIT,
+  REFERENCE_DATASET,
+} from "@truedat/core/routes";
+
+jest.mock("../ReferenceDatasetTable", () => () => (
+  <div>ReferenceDatasetTable</div>
+));
+jest.mock("../ReferenceDatasetForm", () => () => (
+  <div>ReferenceDatasetForm</div>
+));
 
 const dataset = {
   id: "123",
@@ -19,29 +30,26 @@ const dataset = {
 describe("<ReferenceDatasetDetail />", () => {
   const props = { dataset };
 
-  it("matches the latest snapshot (edit route)", async () => {
-    const renderOpts = {
-      routes: ["/referenceDatasets/123/edit"],
-      mocks: [domainsMock({ action: "viewDataStructure" })],
-    };
-    const { container, findByRole, queryByText } = render(
-      <ReferenceDatasetDetail {...props} />,
-      renderOpts
-    );
-    await waitFor(() => {
-      expect(queryByText(/barDomain/)).toBeTruthy();
+  it("renders correctly with default route", async () => {
+    const rendered = render(<ReferenceDatasetDetail {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with reference dataset route", async () => {
+    const rendered = render(<ReferenceDatasetDetail {...props} />, {
+      routes: [REFERENCE_DATASET.replace(":id", "123")],
     });
-    await findByRole("button", { name: "Save" });
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot (view route)", async () => {
-    const renderOpts = { routes: ["/referenceDatasets/123"] };
-    const { container, findByText } = render(
-      <ReferenceDatasetDetail {...props} />,
-      renderOpts
-    );
-    await findByText("foo");
-    expect(container).toMatchSnapshot();
+  it("renders correctly with edit route", async () => {
+    const rendered = render(<ReferenceDatasetDetail {...props} />, {
+      routes: [REFERENCE_DATASET_EDIT.replace(":id", "123")],
+      mocks: [domainsMock({ action: "viewDataStructure" })],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,7 +1,6 @@
-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 { REFERENCE_DATASETS_QUERY } from "../../api/queries";
 import ReferenceDatasetFieldSelector from "../ReferenceDatasetFieldSelector";
 
@@ -37,28 +36,39 @@ describe("<ReferenceDatasetFieldSelector />", () => {
     const renderOpts = {
       mocks: [referenceDatasetsMock],
     };
-    const { queryAllByText, getByRole } = render(
+    const rendered = render(
       <ReferenceDatasetFieldSelector onChange={onChange} />,
       renderOpts
     );
-    const countriesOptionQuery = () =>
-      getByRole("option", { name: /countries/i });
+    await waitForLoad(rendered);
+    const user = userEvent.setup({ delay: null });
+
     await waitFor(() => {
-      // also matches "reference dataset field", get first
-      expect(queryAllByText(/Reference dataset/i)[0]).toBeInTheDocument();
-      // same text for label and dropdown, match the second one, the dropdown
-      expect(queryAllByText(/Reference dataset field/i)[1]).toBeInTheDocument();
-      expect(countriesOptionQuery()).toBeInTheDocument();
-      expect(getByRole("option", { name: /currencies/i })).toBeInTheDocument();
+      expect(
+        rendered.queryAllByText(/referenceDataset.dropdown.placeholder/i)[0]
+      ).toBeInTheDocument();
+      expect(
+        rendered.queryAllByText(
+          /referenceDatasetFields.dropdown.placeholder/i
+        )[1]
+      ).toBeInTheDocument();
+      expect(
+        rendered.getByRole("option", { name: /countries/i })
+      ).toBeInTheDocument();
+      expect(
+        rendered.getByRole("option", { name: /currencies/i })
+      ).toBeInTheDocument();
     });
 
-    userEvent.click(countriesOptionQuery());
+    await user.click(rendered.getByRole("option", { name: /countries/i }));
 
-    const optionQuery = () => getByRole("option", { name: /CODE/i });
     await waitFor(() => {
-      expect(optionQuery()).toBeInTheDocument();
+      expect(
+        rendered.getByRole("option", { name: /code/i })
+      ).toBeInTheDocument();
     });
-    userEvent.click(optionQuery());
+
+    await user.click(rendered.getByRole("option", { name: /code/i }));
     expect(onChange).toHaveBeenNthCalledWith(
       1,
       null,

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

@@ -1,7 +1,6 @@
-import React from "react";
 import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import { domainsMock } from "@truedat/test/mocks";
 import ReferenceDatasetForm from "../ReferenceDatasetForm";
 
@@ -24,39 +23,45 @@ describe("<ReferenceDatasetForm />", () => {
   const props = { dataset, onSubmit };
 
   it("matches the latest snapshot", async () => {
-    const { container, findByText, queryByText } = render(
-      <ReferenceDatasetForm {...props} />,
-      renderOpts
+    const rendered = render(<ReferenceDatasetForm {...props} />, renderOpts);
+    await waitForLoad(rendered);
+
+    await waitFor(() =>
+      expect(rendered.queryByText(/bardomain/i)).toBeInTheDocument()
     );
-    await waitFor(() => {
-      expect(queryByText(/barDomain/)).toBeTruthy();
-    });
-    await findByText("Save");
-    expect(container).toMatchSnapshot();
+    await waitFor(() =>
+      expect(
+        rendered.getByRole("button", { name: /save/i })
+      ).toBeInTheDocument()
+    );
+
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("form is disabled until modified", async () => {
-    const { findByText, findAllByRole, getByRole, queryByRole, queryByText } =
-      render(<ReferenceDatasetForm {...props} />, renderOpts);
-    await waitFor(() => {
-      expect(queryByText(/barDomain/)).toBeTruthy();
-    });
-    await findByText("Save");
+    const rendered = render(<ReferenceDatasetForm {...props} />, renderOpts);
+    await waitForLoad(rendered);
+
+    await waitFor(() =>
+      expect(rendered.queryByText(/bardomain/i)).toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(
+        rendered.getByRole("button", { name: /save/i })
+      ).toBeInTheDocument()
+    );
 
-    // Form is disabled until modified
-    expect(queryByRole("button", { name: /Save/ })).toBeDisabled();
-    userEvent.type((await findAllByRole("textbox"))[1], "bar");
+    expect(rendered.getByRole("button", { name: /save/i })).toBeDisabled();
+    userEvent.type((await rendered.findAllByRole("textbox"))[1], "bar");
 
-    // Form is now enabled
     await waitFor(() =>
-      expect(getByRole("button", { name: /Save/ })).not.toBeDisabled()
+      expect(rendered.getByRole("button", { name: /save/i })).not.toBeDisabled()
     );
 
-    // Submit
+    userEvent.click(rendered.getByRole("button", { name: /save/i }));
+
     await waitFor(() => {
-      userEvent.click(getByRole("button", { name: /Save/ }));
+      expect(onSubmit).toHaveBeenCalled();
     });
-
-    expect(onSubmit).toHaveBeenCalled();
   });
 });

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

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

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

@@ -1,87 +1,60 @@
 import React from "react";
-import { waitFor } from "@testing-library/react";
-import { render } from "@truedat/test/render";
-import { domainsMock } from "@truedat/test/mocks";
-import ReferenceDatasetRoutes from "../ReferenceDatasetRoutes";
+import { render, waitForLoad } from "@truedat/test/render";
+import { ReferenceDatasetRoutes } from "../ReferenceDatasetRoutes";
+import { useAuthorized } from "@truedat/core/hooks/useAuthorized";
 import {
-  REFERENCE_DATASET_QUERY,
-  REFERENCE_DATASETS_QUERY,
-} from "../../api/queries";
+  REFERENCE_DATASETS,
+  REFERENCE_DATASET_NEW,
+  REFERENCE_DATASET,
+} from "@truedat/core/routes";
 
-jest.mock("@truedat/core/hooks", () => ({
+jest.mock("@truedat/core/hooks/useAuthorized", () => ({
   useAuthorized: jest.fn(() => true),
 }));
-jest
-  .spyOn(global.Date, "now")
-  .mockImplementation(() => new Date("2022-01-01T11:01:58.135Z").valueOf());
 
-const dataset = {
-  __typename: "ReferenceDataset",
-  id: "123",
-  name: "foo",
-  headers: ["foo", "bar", "baz"],
-  rowCount: 2,
-  rows: [
-    ["foo1", "bar1", "baz1"],
-    ["foo2", "bar2", "baz2"],
-  ],
-  updatedAt: "2020-01-01T00:00:00.000Z",
-  domain_ids: [1],
-  domains: [{ name: "fooDomain", id: 1 }],
-};
-
-const datasetsMock = {
-  request: { query: REFERENCE_DATASETS_QUERY },
-  result: { data: { referenceDatasets: [dataset] } },
-};
-
-const datasetMock = {
-  request: { query: REFERENCE_DATASET_QUERY, variables: { id: "123" } },
-  result: { data: { referenceDataset: dataset } },
-};
+jest.mock("../ReferenceDatasets", () => () => <div>ReferenceDatasets</div>);
+jest.mock("../ReferenceDatasetCreate", () => () => (
+  <div>ReferenceDatasetCreate</div>
+));
+jest.mock("../ReferenceDataset", () => () => <div>ReferenceDataset</div>);
 
 describe("<ReferenceDatasetRoutes />", () => {
-  const props = { dataset };
+  it("renders correctly with default route", async () => {
+    const rendered = render(<ReferenceDatasetRoutes />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with reference datasets route", async () => {
+    const rendered = render(<ReferenceDatasetRoutes />, {
+      routes: [REFERENCE_DATASETS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
 
-  it("matches the latest snapshot (list route)", async () => {
-    const renderOpts = {
-      routes: ["/referenceDatasets"],
-      mocks: [datasetsMock],
-    };
-    const { container, findByText } = render(
-      <ReferenceDatasetRoutes {...props} />,
-      renderOpts
-    );
-    await findByText("foo");
-    expect(container).toMatchSnapshot();
+  it("renders correctly with new reference dataset route", async () => {
+    const rendered = render(<ReferenceDatasetRoutes />, {
+      routes: [REFERENCE_DATASET_NEW],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot (create route)", async () => {
-    const renderOpts = {
-      routes: ["/referenceDatasets/new"],
-      mocks: [domainsMock({ action: "viewDataStructure" })],
-    };
-    const { container, findByRole, queryByText } = render(
-      <ReferenceDatasetRoutes {...props} />,
-      renderOpts
-    );
-    await waitFor(() => {
-      expect(queryByText(/barDomain/)).toBeTruthy();
+  it("renders correctly with reference dataset detail route", async () => {
+    const rendered = render(<ReferenceDatasetRoutes />, {
+      routes: [REFERENCE_DATASET.replace(":id", "123")],
     });
-    await findByRole("button", { name: "Save" });
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot (view route)", async () => {
-    const renderOpts = {
-      routes: ["/referenceDatasets/123"],
-      mocks: [datasetMock],
-    };
-    const { container, findByText } = render(
-      <ReferenceDatasetRoutes {...props} />,
-      renderOpts
-    );
-    await findByText("baz2");
-    expect(container).toMatchSnapshot();
+  it("renders unauthorized component when not authorized", async () => {
+    useAuthorized.mockReturnValueOnce(false);
+    const rendered = render(<ReferenceDatasetRoutes />, {
+      routes: [REFERENCE_DATASETS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

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

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import ReferenceDatasets from "../ReferenceDatasets";
 import { REFERENCE_DATASETS_QUERY } from "../../api/queries";
@@ -27,14 +26,10 @@ jest.mock("@truedat/core/hooks", () => ({
   useAuthorized: jest.fn(() => true),
 }));
 
-jest
-  .spyOn(global.Date, "now")
-  .mockImplementation(() => new Date("2022-01-01T11:01:58.135Z").valueOf());
-
 describe("<ReferenceDatasets />", () => {
   it("matches the latest snapshot", async () => {
     const { container, findByText } = render(<ReferenceDatasets />, renderOpts);
-    await findByText("One dataset found");
+    await findByText(/referenceDatasets.count/i);
     expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,11 +1,6 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import ReferenceDatasetsTable from "../ReferenceDatasetsTable";
 
-jest
-  .spyOn(global.Date, "now")
-  .mockImplementation(() => new Date("2022-01-01T11:01:58.135Z").valueOf());
-
 const props = {
   datasets: [
     {

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

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