@truedat/dd 7.5.7 → 7.5.10

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

@@ -1,25 +1,9 @@
-import React from "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 SearchContextWrapper from "@truedat/core/components/common/SearchContextWrapper";
 import StructuresSearchResults from "../StructuresSearchResults";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "structure.bar": "Bar",
-      "structure.foo": "Foo",
-      "search.placeholder": "Search...",
-      "structure.group": "Group",
-      "structure.system": "System",
-      "structure.name": "Name",
-      "structures.retrieved.results": "Results",
-      "structures.loading.header": "Header",
-    },
-  },
-};
-
 const structures = [1, 2, 3].map((id) => ({ id: id, foo: id }));
 
 const searchProps = {
@@ -38,17 +22,14 @@ describe("<StructuresSearchResults />", () => {
 
   it("matches the latest snapshot", async () => {
     const props = { structures, columns };
-    const { container } = render(
+    const rendered = render(
       <SearchContextWrapper props={searchProps}>
         <StructuresSearchResults {...props} />
-      </SearchContextWrapper>,
-      renderOpts
+      </SearchContextWrapper>
     );
 
-    await waitFor(() =>
-      expect(container.querySelector(".loader")).not.toBeInTheDocument()
-    );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("selecting a structure in the table will call onSelect passing the structure", async () => {
@@ -61,16 +42,17 @@ describe("<StructuresSearchResults />", () => {
       selectedStructure: structure,
     };
 
-    const { getByRole } = render(
+    const rendered = render(
       <SearchContextWrapper props={searchProps}>
         <StructuresSearchResults {...props} />
-      </SearchContextWrapper>,
-      renderOpts
+      </SearchContextWrapper>
     );
 
-    const structureRow = getByRole("cell", { name: /1/i });
+    await waitForLoad(rendered);
+    const user = userEvent.setup({ delay: null });
+    const structureRow = rendered.getByRole("cell", { name: /1/i });
 
-    userEvent.click(structureRow);
+    await user.click(structureRow);
 
     await waitFor(() => {
       expect(onSelect).toHaveBeenCalledTimes(1);

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
@@ -36,9 +35,9 @@ describe("<StructuresTable />", () => {
     const onStructureSelected = jest.fn();
     const props = { columns, size, onStructureSelected };
     const { container } = render(
-      <SearchContext.Provider value={searchProps}>
+      <SearchContext value={searchProps}>
         <StructuresTable {...props} />
-      </SearchContext.Provider>,
+      </SearchContext>,
       renderOpts
     );
     expect(container).toMatchSnapshot();
@@ -54,9 +53,9 @@ describe("<StructuresTable />", () => {
     };
 
     const { container } = render(
-      <SearchContext.Provider value={searchProps}>
+      <SearchContext value={searchProps}>
         <StructuresTable {...props} />
-      </SearchContext.Provider>,
+      </SearchContext>,
       renderOpts
     );
     expect(container).toMatchSnapshot();
@@ -72,9 +71,9 @@ describe("<StructuresTable />", () => {
     };
 
     const { container } = render(
-      <SearchContext.Provider value={searchProps}>
+      <SearchContext value={searchProps}>
         <StructuresTable {...props} />
-      </SearchContext.Provider>,
+      </SearchContext>,
       renderOpts
     );
     expect(container).toMatchSnapshot();
@@ -87,9 +86,9 @@ describe("<StructuresTable />", () => {
     };
 
     const { getAllByRole } = render(
-      <SearchContext.Provider value={searchProps}>
+      <SearchContext value={searchProps}>
         <StructuresTable {...props} />
-      </SearchContext.Provider>,
+      </SearchContext>,
       renderOpts
     );
 
@@ -103,9 +102,9 @@ describe("<StructuresTable />", () => {
     const props = { columns, size };
 
     const { getAllByRole } = render(
-      <SearchContext.Provider value={searchProps}>
+      <SearchContext value={searchProps}>
         <StructuresTable {...props} />
-      </SearchContext.Provider>,
+      </SearchContext>,
       renderOpts
     );
 

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

@@ -1,5 +1,4 @@
 // only admin user
-import React from "react";
 import { render } from "@truedat/test/render";
 import SearchContext from "@truedat/core/search/SearchContext";
 import StructuresUpdateOption from "../StructuresUpdateOption";
@@ -56,9 +55,9 @@ describe("<StructuresUpdateOption />", () => {
 
   it("matches the latest snapshot", async () => {
     const { container } = render(
-      <SearchContext.Provider value={searchProps}>
+      <SearchContext value={searchProps}>
         <StructuresUpdateOption />
-      </SearchContext.Provider>,
+      </SearchContext>,
       renderOpts
     );
     expect(container).toMatchSnapshot();
@@ -72,9 +71,9 @@ describe("<StructuresUpdateOption />", () => {
       },
     };
     const { getByRole, queryByText } = render(
-      <SearchContext.Provider value={newRenderOps}>
+      <SearchContext value={newRenderOps}>
         <StructuresUpdateOption />
-      </SearchContext.Provider>,
+      </SearchContext>,
       renderOpts
     );
     expect(getByRole("option")).toHaveAttribute("aria-disabled");

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

@@ -1,6 +1,6 @@
-import React from "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 StructuresUploadEventsTable from "../StructuresUploadEventsTable";
 
 const events = [
@@ -59,19 +59,22 @@ const renderOpts = {
 };
 
 describe("<StructuresUploadEventsTable />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(<StructuresUploadEventsTable />, renderOpts);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<StructuresUploadEventsTable />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("toggles row horizontal view when row is clicked", () => {
-    const { getAllByRole } = render(
-      <StructuresUploadEventsTable />,
-      renderOpts
-    );
-    const dataRow = getAllByRole("row")[1];
+  it("toggles row horizontal view when row is clicked", async () => {
+    const rendered = render(<StructuresUploadEventsTable />, renderOpts);
+    await waitForLoad(rendered);
+    const user = userEvent.setup({ delay: null });
+
+    const dataRow = rendered.getAllByRole("row")[1];
     expect(dataRow).toHaveClass("contracted");
-    userEvent.click(dataRow);
-    expect(dataRow).toHaveClass("expanded");
+    await user.click(dataRow);
+    await waitFor(() => {
+      expect(dataRow).toHaveClass("expanded");
+    });
   });
 });

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

@@ -1,5 +1,4 @@
 // only admin user
-import React from "react";
 import { render } from "@truedat/test/render";
 import { StructuresUploadOption } from "../StructuresUploadOption";
 

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

@@ -1,19 +1,15 @@
 import _ from "lodash/fp";
-import React from "react";
-import { render } from "@truedat/test/render";
 import { within } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 import SearchContext from "@truedat/core/search/SearchContext";
 import StructuresView from "../StructuresView";
 import { StructuresViewContent } from "../StructuresView";
-import en from "../../messages/en";
 
-const mockHistory = {
-  goBack: 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,
   useParams: () => ({ propertyPath: "metadata.database" }),
 }));
 
@@ -43,17 +39,7 @@ jest.mock("@truedat/dd/hooks/useStructures", () => {
   };
 });
 
-const messages = {
-  en: {
-    ...en,
-    missingBucket: "_missing",
-    "search.placeholder": "Searching ...",
-    "structure.last_change_at": "Last changed",
-  },
-};
-
 const renderOpts = {
-  messages,
   state: {
     systemsLoading: false,
     filtersGroup: [],
@@ -70,7 +56,7 @@ const renderOpts = {
         metadata_views: [],
         name: "API Level",
         template: {
-          id: 36,
+          id: "36",
           name: "Calculated Table",
         },
         translation: "API Level 2",
@@ -89,7 +75,7 @@ const searchProps = {
   searchData: {
     data: [
       {
-        id: 1,
+        id: "1",
         domain: { name: "org" },
         name: "structure1",
         description: "dd",
@@ -117,70 +103,79 @@ const searchProps = {
 };
 
 describe("<StructuresView />", () => {
-  it("shows header if is embedded", () => {
+  it("shows header if is embedded", async () => {
     const props = { embedded: false };
-    const { getByRole } = render(
-      <SearchContext.Provider value={searchProps}>
+    const rendered = render(
+      <SearchContext value={searchProps}>
         <StructuresView {...props} />
-      </SearchContext.Provider>,
+      </SearchContext>,
       renderOpts
     );
+    await waitForLoad(rendered);
 
-    expect(getByRole("heading")).toBeInTheDocument();
+    expect(rendered.getByRole("heading")).toBeInTheDocument();
   });
 
-  it("not shows header if is not embedded", () => {
+  it("not shows header if is not embedded", async () => {
     const props = { embedded: true };
-    const { queryByText } = render(
-      <SearchContext.Provider value={searchProps}>
+    const rendered = render(
+      <SearchContext value={searchProps}>
         <StructuresView {...props} />
-      </SearchContext.Provider>,
+      </SearchContext>,
       renderOpts
     );
-    expect(queryByText("Data Catalog")).not.toBeInTheDocument();
+    await waitForLoad(rendered);
+
+    expect(rendered.queryByText(/data catalog/i)).not.toBeInTheDocument();
   });
 });
 
 describe("<StructuresViewContent />", () => {
-  it("shows structures table if hasFilterAplied", () => {
+  it("shows structures table if hasFilterAplied", async () => {
     const props = {};
-    const { getByRole } = render(
-      <SearchContext.Provider value={searchProps}>
+    const rendered = render(
+      <SearchContext value={searchProps}>
         <StructuresViewContent {...props} />
-      </SearchContext.Provider>,
+      </SearchContext>,
       renderOpts
     );
+    await waitForLoad(rendered);
 
-    const table = getByRole("table");
+    const table = rendered.getByRole("table");
     const rows = within(table).getAllByRole("row");
     const tableHeaderRow = rows[0];
     const tableDataRow = rows[1];
 
     expect(
-      within(tableHeaderRow).getByRole("columnheader", { name: "Structure" })
+      within(tableHeaderRow).getByRole("columnheader", {
+        name: "structure.name",
+      })
     ).toBeInTheDocument();
     expect(
-      within(tableDataRow).getByRole("cell", { name: "structure1" })
+      within(tableDataRow).getByRole("cell", { name: /structure1/i })
     ).toBeInTheDocument();
   });
 
-  it("shows CatalogCustomViewCards if customView", () => {
+  it("shows CatalogCustomViewCards if customView", async () => {
     const newSearchProps = {
       ...searchProps,
       toggleDateFilter: false,
       allActiveFilters: {},
     };
 
-    const { getByRole } = render(
-      <SearchContext.Provider value={newSearchProps}>
+    const rendered = render(
+      <SearchContext value={newSearchProps}>
         <StructuresViewContent customView />
-      </SearchContext.Provider>,
+      </SearchContext>,
       renderOpts
     );
+    await waitForLoad(rendered);
 
-    const missingCard = getByRole("link", { name: /_missing/ });
+    const missingCard = rendered.getByRole("link", {
+      name: "missingBucket count",
+    });
     expect(missingCard).toBeInTheDocument();
-    const databaseOneCard = getByRole("link", { name: /database_1/ });
+    const databaseOneCard = rendered.getByRole("link", { name: /database_1/ });
     expect(databaseOneCard).toBeInTheDocument();
   });
 });

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

@@ -1,13 +1,12 @@
-/* eslint-disable react/display-name */
-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 { SystemCards, SystemsPopup } from "../SystemCards";
 
 const system_with_structures = {
   external_id: "Microstrategy",
-  id: 1,
+  id: "1",
   name: "Microstrategy",
   structures_count: {
     count: 1239,
@@ -21,7 +20,7 @@ const system_with_structures = {
 
 const system_without_structures = {
   external_id: "vacio",
-  id: 27,
+  id: "27",
   name: "vacio",
   structures_count: { count: 0 },
 };
@@ -32,13 +31,13 @@ const systems = [
 ];
 
 describe("<SystemCards />", () => {
-  it("It matches the latest snapshot without system_groups", () => {
-    const props = { systems };
-    const { container } = render(<SystemCards {...props} />);
-    expect(container).toMatchSnapshot();
+  it("It matches the latest snapshot without system_groups", async () => {
+    const rendered = render(<SystemCards systems={systems} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("It matches the latest snapshot with system_groups", () => {
+  it("It matches the latest snapshot with system_groups", async () => {
     const systems = [
       {
         ...system_with_structures,
@@ -48,30 +47,30 @@ describe("<SystemCards />", () => {
       },
       { ...system_without_structures },
     ];
-    const props = { systems };
-    const { container } = render(<SystemCards {...props} />);
-    expect(container).toMatchSnapshot();
+    const rendered = render(<SystemCards systems={systems} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("mounts structures popup", async () => {
-    const props = { systems };
-    const { container, getByText } = render(<SystemCards {...props} />);
+    const rendered = render(<SystemCards systems={systems} />);
+    await waitForLoad(rendered);
 
-    expect(container.getElementsByClassName("card")).toHaveLength(2);
+    expect(rendered.container.getElementsByClassName("card")).toHaveLength(2);
 
-    const popup = getByText("1,239");
-    fireEvent.mouseEnter(popup);
+    const popup = rendered.getByText(/1,239/i);
+    userEvent.hover(popup);
 
     await waitFor(() => {
       expect(document.getElementsByClassName("popup")).toHaveLength(1);
     });
-    fireEvent.mouseLeave(popup);
+    userEvent.unhover(popup);
     await waitFor(() => {
       expect(document.getElementsByClassName("popup")).toHaveLength(0);
     });
   });
 
-  it("system logo", () => {
+  it("system logo", async () => {
     const imageSrc =
       "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==";
     const systems = [
@@ -83,23 +82,21 @@ describe("<SystemCards />", () => {
       },
       { ...system_without_structures },
     ];
-    const props = { systems };
-    const { container } = render(<SystemCards {...props} />);
+    const rendered = render(<SystemCards systems={systems} />);
+    await waitForLoad(rendered);
 
-    expect(container.getElementsByTagName("img")).toHaveLength(1);
-    expect(container.querySelector("img").getAttribute("src")).toMatch(
+    expect(rendered.container.getElementsByTagName("img")).toHaveLength(1);
+    expect(rendered.container.querySelector("img").getAttribute("src")).toMatch(
       imageSrc
     );
   });
 
   it("systems withouth system_group is not grouped", async () => {
-    const props = { systems };
-
-    const { container } = render(<SystemCards {...props} />);
+    const rendered = render(<SystemCards systems={systems} />);
+    await waitForLoad(rendered);
 
     await waitFor(() => {
-      // Check that the agrupations not appears
-      expect(container.innerHTML).not.toMatch("Without Groups");
+      expect(rendered.queryByText(/withoutGroups/i)).not.toBeInTheDocument();
     });
   });
 
@@ -118,14 +115,12 @@ describe("<SystemCards />", () => {
         },
       },
     ];
-    const props = { systems };
-
-    const { container } = render(<SystemCards {...props} />);
+    const rendered = render(<SystemCards systems={systems} />);
+    await waitForLoad(rendered);
 
     await waitFor(() => {
-      // Check that the agrupations not appears
-      expect(container.innerHTML).not.toMatch("Without Groups");
-      expect(container.innerHTML).not.toMatch("foo-group");
+      expect(rendered.queryByText(/withoutGroups/i)).not.toBeInTheDocument();
+      expect(rendered.queryByText(/foo-group/i)).not.toBeInTheDocument();
     });
   });
 
@@ -144,62 +139,19 @@ describe("<SystemCards />", () => {
         },
       },
     ];
-    const props = { systems };
-
-    const { getByText } = render(<SystemCards {...props} />);
+    const rendered = render(<SystemCards systems={systems} />);
+    await waitForLoad(rendered);
 
     await waitFor(() => {
-      // Check that the agrupations appears
-      expect(getByText("foo-group")).toBeTruthy();
-      expect(getByText("Without Groups")).toBeTruthy();
+      expect(rendered.getByText(/foo-group/i)).toBeInTheDocument();
+      expect(rendered.getByText(/withoutGroups/i)).toBeInTheDocument();
 
-      // Check under foo-group only have one system card
       expect(
-        getByText("foo-group")
+        rendered
+          .getByText(/foo-group/i)
           .closest(".CardGroupTitle")
           .parentNode.getElementsByClassName("card")
       ).toHaveLength(1);
     });
   });
-
-  it("structures types count popup", async () => {
-    const structures_count = { ...system_with_structures.structures_count };
-    const props = { structures_count };
-    const { getByText } = render(<SystemsPopup {...props} />);
-
-    const popup = getByText("1,239");
-    fireEvent.mouseEnter(popup);
-
-    await waitFor(() => {
-      // Check that popup is showed
-      expect(document.getElementsByClassName("popup")).toHaveLength(1);
-
-      // Check that are a row for each type of structures count
-      expect(document.querySelectorAll("tr")).toHaveLength(3);
-
-      // Check each row to have correct data according type of structure count
-      expect(
-        document.querySelectorAll("tr")[0].querySelectorAll("td")[1].innerHTML
-      ).toMatch("carpeta");
-      expect(
-        document.querySelectorAll("tr")[0].querySelectorAll("td")[2].innerHTML
-      ).toMatch("1200");
-
-      expect(
-        document.querySelectorAll("tr")[1].querySelectorAll("td")[1].innerHTML
-      ).toMatch("tabla");
-      expect(
-        document.querySelectorAll("tr")[1].querySelectorAll("td")[2].innerHTML
-      ).toMatch("2");
-
-      expect(
-        document.querySelectorAll("tr")[2].querySelectorAll("td")[1].innerHTML
-      ).toMatch("columna");
-      expect(
-        document.querySelectorAll("tr")[2].querySelectorAll("td")[2].innerHTML
-      ).toMatch("37");
-    });
-
-    expect(document).toMatchSnapshot();
-  });
 });

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

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

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

@@ -1,19 +1,20 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { SystemCrumbs } from "../SystemCrumbs";
 
 describe("<SystemCrumbs />", () => {
   const system = { name: "foo" };
 
-  it("matches the latest snapshot (empty)", () => {
+  it("matches the latest snapshot (empty)", async () => {
     const props = {};
-    const wrapper = shallow(<SystemCrumbs {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<SystemCrumbs {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot (system)", () => {
+  it("matches the latest snapshot (system)", async () => {
     const props = { system };
-    const wrapper = shallow(<SystemCrumbs {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<SystemCrumbs {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,14 +1,14 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { SystemEditButton } from "../SystemEditButton";
 
 jest.mock("@truedat/core/hooks", () => ({
-  useAuthorized: jest.fn(() => true)
+  useAuthorized: jest.fn(() => true),
 }));
 
 describe("<SystemEditButton />", () => {
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<SystemEditButton />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<SystemEditButton />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import SystemFilteredNav from "../SystemFilteredNav";
 
@@ -10,8 +9,8 @@ jest.mock("../../hooks/useStructures.js", () => {
     ...originalModule,
     useStructures: jest.fn(() => ({
       data: [
-        { id: 1, name: "bank_capital" },
-        { id: 2, name: "consumorenovables" },
+        { id: "1", name: "bank_capital" },
+        { id: "2", name: "consumorenovables" },
       ],
       count: 2,
     })),