@truedat/core 7.5.9 → 7.5.11

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

@@ -1,7 +1,7 @@
-import React from "react";
-import { waitFor, fireEvent } from "@testing-library/react";
-import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 import { Card } from "semantic-ui-react";
+import userEvent from "@testing-library/user-event";
 import { CardGroupsAccordion } from "..";
 
 const groups_all_cards_grouped = {
@@ -79,61 +79,70 @@ const cardComponent = (props) => (
 );
 
 describe("<CardGroupsAccordion />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
       <CardGroupsAccordion
         groups={groups_all_cards_grouped}
         cardComponent={cardComponent}
       />
     );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("Data without group appear in without group section", async () => {
-    const { getByText } = render(
+    const rendered = render(
       <CardGroupsAccordion
         groups={groups_any_cards_without_group}
         cardComponent={cardComponent}
       />
     );
+    await waitForLoad(rendered);
 
     await waitFor(() => {
-      expect(getByText("Without Groups")).toBeTruthy();
+      expect(
+        rendered.getByText(/components.CardGroupsAccordion.withoutGroups/i)
+      ).toBeInTheDocument();
     });
   });
 
   it("Data without group appear in first position", async () => {
-    const { container } = render(
+    const rendered = render(
       <CardGroupsAccordion
         groups={groups_any_cards_without_group}
         cardComponent={cardComponent}
       />
     );
+    await waitForLoad(rendered);
 
-    const firstGroup = container.getElementsByClassName("title")[0].innerHTML;
+    const firstGroup =
+      rendered.container.getElementsByClassName("title")[0].innerHTML;
 
     await waitFor(() => {
-      expect(firstGroup).toMatch("Without Groups");
+      expect(firstGroup).toMatch(
+        /components.CardGroupsAccordion.withoutGroups/i
+      );
     });
   });
 
   it("CardGroupsAccordion fold and unfold when click in title", async () => {
-    const { container } = render(
+    const rendered = render(
       <CardGroupsAccordion
         groups={groups_any_cards_without_group}
         cardComponent={cardComponent}
       />
     );
+    await waitForLoad(rendered);
 
-    const firstTitle = container.querySelector(".title");
+    const firstTitle = rendered.container.querySelector(".title");
 
-    fireEvent.click(firstTitle);
+    userEvent.click(firstTitle);
 
     await waitFor(() => {
       expect(firstTitle.classList.contains("active")).toBeFalsy();
     });
 
-    fireEvent.click(firstTitle);
+    userEvent.click(firstTitle);
 
     await waitFor(() => {
       expect(firstTitle.classList.contains("active")).toBeTruthy();

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

@@ -1,12 +1,8 @@
-import _ from "lodash/fp";
-import React from "react";
-import { render } from "@truedat/test/render";
 import { within } from "@testing-library/react";
-import { MemoryRouter } from "react-router-dom";
-import { waitForElementToBeRemoved } from "@testing-library/react";
-
+import _ from "lodash/fp";
+import { render, waitForLoad } from "@truedat/test/render";
 import { linkTo } from "@truedat/core/routes";
-import { CATALOG_VIEW_CONFIGS_QUERY } from "@truedat/dd/api/queries";
+import { CATALOG_VIEW_CONFIGS_QUERY } from "@truedat/core/api/queries";
 import CatalogMenu from "../CatalogMenu";
 
 jest.mock("../../hooks", () => ({
@@ -37,69 +33,55 @@ const mocks = [
   },
 ];
 
-const commonRenderOpts = {
+const renderOpts = {
   mocks,
   state: { sidebarVisible: true },
 };
 
 describe("<CatalogMenu />", () => {
   it("matches the latest snapshot", async () => {
-    const { container } = render(
-      <MemoryRouter initialEntries={[linkTo.STRUCTURE({ id: 1234 })]}>
-        <CatalogMenu />
-      </MemoryRouter>,
-      commonRenderOpts
-    );
-    const loader = container.querySelector(".loader");
-    await waitForElementToBeRemoved(loader);
-    expect(container).toMatchSnapshot();
+    const rendered = render(<CatalogMenu />, {
+      ...renderOpts,
+      routes: [linkTo.STRUCTURE({ id: "1234" })],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("Path active route", async () => {
-    const { container } = render(
-      <MemoryRouter initialEntries={[linkTo.STRUCTURE({ id: 1234 })]}>
-        <CatalogMenu />
-      </MemoryRouter>,
-      commonRenderOpts
-    );
-    const loader = container.querySelector(".loader");
-    await waitForElementToBeRemoved(loader);
+    const rendered = render(<CatalogMenu />, {
+      ...renderOpts,
+      routes: [linkTo.STRUCTURE({ id: "1234" })],
+    });
+    await waitForLoad(rendered);
 
-    const activeMenus = container.querySelectorAll("a.active");
+    const activeMenus = rendered.container.querySelectorAll("a.active");
     expect(activeMenus.length).toBe(1);
-    expect(within(activeMenus[0]).getByText("Structures")).toBeInTheDocument();
+    expect(within(activeMenus[0]).getByText("structures")).toBeInTheDocument();
   });
 
   it("Navigation filter has priority over path for active menu and submenu", async () => {
-    const renderOpts = _.merge(commonRenderOpts, {
+    const customRenderOpts = _.merge(renderOpts, {
       state: {
         navFilter: { "metadata.region": "eu-west-1" },
       },
+      routes: [linkTo.BUCKETS_VIEW({ propertyPath: "metadata.region" })],
     });
 
-    const { getByText, container } = render(
-      <MemoryRouter
-        initialEntries={[
-          linkTo.BUCKETS_VIEW({ propertyPath: `metadata.region` }),
-        ]}
-      >
-        <CatalogMenu />
-      </MemoryRouter>,
-      renderOpts
-    );
-
-    const loader = container.querySelector(".loader");
-    await waitForElementToBeRemoved(loader);
+    const rendered = render(<CatalogMenu />, customRenderOpts);
+    await waitForLoad(rendered);
 
-    const structuresMenu = getByText("Structures").closest("a");
-    const metadataBucketMenu = getByText("metadata.region").closest("a");
-    const noteBucketMenu = getByText("note.layer").closest("a");
+    const structuresMenu = rendered.getByText("structures").closest("a");
+    const metadataBucketMenu = rendered
+      .getByText("metadata.region")
+      .closest("a");
+    const noteBucketMenu = rendered.getByText("note.layer").closest("a");
 
     expect(structuresMenu).toBeInTheDocument();
     expect(metadataBucketMenu).toBeInTheDocument();
     expect(noteBucketMenu).toBeInTheDocument();
 
-    const activeMenus = container.querySelectorAll("a.active");
+    const activeMenus = rendered.container.querySelectorAll("a.active");
     expect(activeMenus.length).toBe(1);
     expect(
       within(activeMenus[0]).getByText("metadata.region")

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

@@ -1,31 +1,34 @@
-import React from "react";
-import { mount } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { CommentsLoader } from "../CommentsLoader";
 
 describe("<CommentsLoader />", () => {
-  it("calls fetchComments when component mounts but not when it unmounts", () => {
+  it("calls fetchComments when component mounts but not when it unmounts", async () => {
     const props = {
       clearComments: jest.fn(),
       fetchComments: jest.fn(),
       resource_type: "foo",
-      resource_id: 1
+      resource_id: 1,
     };
-    const wrapper = mount(<CommentsLoader {...props} />);
-    expect(props.fetchComments.mock.calls.length).toBe(1);
-    wrapper.unmount();
-    expect(props.fetchComments.mock.calls.length).toBe(1);
+    const rendered = render(<CommentsLoader {...props} />);
+    await waitForLoad(rendered);
+
+    expect(props.fetchComments).toHaveBeenCalledTimes(1);
+    rendered.unmount();
+    expect(props.fetchComments).toHaveBeenCalledTimes(1);
   });
 
-  it("calls clearComments when component unmounts but not when it mounts", () => {
+  it("calls clearComments when component unmounts but not when it mounts", async () => {
     const props = {
       clearComments: jest.fn(),
       fetchComments: jest.fn(),
       resource_type: "foo",
-      resource_id: 1
+      resource_id: 1,
     };
-    const wrapper = mount(<CommentsLoader {...props} />);
-    expect(props.clearComments.mock.calls.length).toBe(0);
-    wrapper.unmount();
-    expect(props.clearComments.mock.calls.length).toBe(1);
+    const rendered = render(<CommentsLoader {...props} />);
+    await waitForLoad(rendered);
+
+    expect(props.clearComments).toHaveBeenCalledTimes(0);
+    rendered.unmount();
+    expect(props.clearComments).toHaveBeenCalledTimes(1);
   });
 });

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

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

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

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

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

@@ -1,40 +1,18 @@
-import React from "react";
-import { shallow, mount } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import { render, waitForLoad } from "@truedat/test/render";
 import { DateFilter } from "../DateFilter";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
-const props = {
-  label: false,
-  onChange: jest.fn(),
-  name: "updated_at",
-  defaultValues: {
-    type: "since",
-    value: "1",
-    unit: "d",
-    range: "2020-01-01 - 2020-02-02"
-  }
-};
-
 describe("<DateFilter/>", () => {
   const props = {
     active: true,
     name: "updated_at",
     type: "range",
     range: "2020-01-01 - 2020-02-02",
-    onChange: jest.fn()
+    onChange: jest.fn(),
   };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<DateFilter {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("calls onChange if props are valid", () => {
-    mount(<DateFilter {...props} />);
-    expect(props.onChange.mock.calls.length).toBe(1);
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<DateFilter {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

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

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

@@ -1,10 +1,10 @@
-import React from "react";
 import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
 import { domainsMock } from "@truedat/test/mocks";
 import DomainSelector from "../DomainSelector";
 
+const user = userEvent.setup({ delay: null });
 const action = "manageTags";
 const variables = { action: action };
 
@@ -48,16 +48,16 @@ describe("<DomainSelector />", () => {
     );
 
     await waitFor(() => {
-      expect(getByText("Select domains")).toBeTruthy();
+      expect(getByText("domain.multiple.placeholder")).toBeTruthy();
     });
 
-    userEvent.click(getByText("Select domains"));
+    await user.click(getByText("domain.multiple.placeholder"));
 
     await waitFor(() => {
       expect(getByRole("option", { name: /foo/i })).toBeTruthy();
     });
 
-    userEvent.click(getByRole("option", { name: /foo/i }));
+    await user.click(getByRole("option", { name: /foo/i }));
     expect(props.onChange.mock.calls.length).toBe(1);
     expect(props.onChange.mock.calls[0][1]).toEqual({ value: ["1"] });
   });

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

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

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

@@ -1,11 +1,11 @@
 import _ from "lodash/fp";
-import React from "react";
 import { render } from "@truedat/test/render";
-import { waitFor, within, screen } from "@testing-library/react";
+import { waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import { FilterDropdown } from "../FilterDropdown";
 
+const user = userEvent.setup({ delay: null });
 const options = _.map((value) => ({ value, text: value }))([
   "value1",
   "value2",
@@ -46,7 +46,7 @@ describe("<FilterDropdown/>", () => {
     expect(queryByRole("textbox")).toBeNull();
   });
 
-  it("check option check it correctly", () => {
+  it("check option check it correctly", async () => {
     const customProps = {
       ...props,
       options: largeOptions,
@@ -59,7 +59,7 @@ describe("<FilterDropdown/>", () => {
     );
 
     expect(customProps.toggleFilterValue).toBeCalledTimes(0);
-    userEvent.click(
+    await user.click(
       getByRole("option", { name: new RegExp(selectedOption, "i") })
     );
     expect(customProps.toggleFilterValue).toBeCalledWith({
@@ -78,7 +78,7 @@ describe("<FilterDropdown/>", () => {
     ).not.toBeNull();
   });
 
-  it("type in filter input filter options", () => {
+  it("type in filter input filter options", async () => {
     const customProps = {
       ...props,
       options: largeOptions,
@@ -97,7 +97,7 @@ describe("<FilterDropdown/>", () => {
       })
     ).toBeInTheDocument();
 
-    userEvent.type(input, searchText);
+    await user.type(input, searchText);
 
     expect(
       queryByRole("option", {
@@ -112,7 +112,7 @@ describe("<FilterDropdown/>", () => {
     expect(getAllByRole("option").length).toBe(1);
   });
 
-  it("type in filter not hidde selected values", () => {
+  it("type in filter not hidde selected values", async () => {
     const selectedOption = largeOptions[6].text;
 
     const customProps = {
@@ -128,7 +128,7 @@ describe("<FilterDropdown/>", () => {
     );
     const input = getByRole("textbox");
 
-    userEvent.type(input, searchText);
+    await user.type(input, searchText);
 
     expect(
       within(getAllByRole("option")[0]).getByText(selectedOption)
@@ -147,34 +147,35 @@ describe("<FilterDropdown/>", () => {
     expect(getAllByRole("option").length).toBe(2);
   });
 
-  it("dispatches openFilter", () => {
-    const customProps = {
-      ...props,
-      options: [],
-    };
+  // TD-7077: PREGUNTAR A GUILLE, PARA QUÉ ESTÁ ESTE TEST.
+  // it("dispatches openFilter", () => {
+  //   const customProps = {
+  //     ...props,
+  //     options: [],
+  //   };
 
-    const { rerender } = render(<FilterDropdown {...customProps} />);
+  //   const { rerender } = render(<FilterDropdown {...customProps} />);
 
-    rerender(<FilterDropdown {...props} />);
+  //   rerender(<FilterDropdown {...props} />);
 
-    waitFor(() => expect(props.openFilter).toBeCalledTimes(1));
-  });
+  //   waitFor(() => expect(props.openFilter).toBeCalledTimes(1));
+  // });
 
-  it("dispatches closeFilter", () => {
-    const customProps = {
-      ...props,
-      options: [],
-    };
+  // it("dispatches closeFilter", () => {
+  //   const customProps = {
+  //     ...props,
+  //     options: [],
+  //   };
 
-    const { rerender } = render(<FilterDropdown {...props} />);
-    rerender(<FilterDropdown {...customProps} />);
+  //   const { rerender } = render(<FilterDropdown {...props} />);
+  //   rerender(<FilterDropdown {...customProps} />);
 
-    waitFor(() => expect(props.closeFilter).toBeCalledTimes(1));
-  });
+  //   waitFor(() => expect(props.closeFilter).toBeCalledTimes(1));
+  // });
 
   it("remove filter dispatches removeFilter", async () => {
     const { container } = render(<FilterDropdown {...props} />);
-    userEvent.click(container.querySelector('[class="delete icon"]'));
+    await user.click(container.querySelector('[class="delete icon"]'));
     await waitFor(() => {
       expect(props.removeFilter).toBeCalledTimes(1);
     });

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

@@ -1,27 +1,26 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { Dropdown } from "semantic-ui-react";
+import { render, waitForLoad } from "@truedat/test/render";
 import { FilterItem } from "../FilterItem";
 
-const props = {
-  active: true,
-  filter: "foo",
-  toggleFilterValue: jest.fn(),
-  option: { value: "foo", text: "bar" }
-};
-
 describe("<FilterItem/>", () => {
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<FilterItem {...props} />);
-    const filterItemText = wrapper.find("FilterItemText").dive();
-    expect(wrapper).toMatchSnapshot();
-    expect(filterItemText).toMatchSnapshot();
+  const props = {
+    active: true,
+    filter: "foo",
+    toggleFilterValue: jest.fn(),
+    option: { value: "foo", text: "bar" },
+  };
+
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<FilterItem {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("dispatches toggleFilterValue on click", () => {
-    const wrapper = shallow(<FilterItem {...props} />);
-    expect(props.toggleFilterValue.mock.calls.length).toBe(0);
-    wrapper.find(Dropdown.Item).simulate("click");
-    expect(props.toggleFilterValue.mock.calls.length).toBe(1);
+  it("dispatches toggleFilterValue on click", async () => {
+    const rendered = render(<FilterItem {...props} />);
+    await waitForLoad(rendered);
+
+    expect(props.toggleFilterValue).toHaveBeenCalledTimes(0);
+    rendered.getByRole("option").click();
+    expect(props.toggleFilterValue).toHaveBeenCalledTimes(1);
   });
 });

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

@@ -1,10 +1,10 @@
-import React from "react";
 import { waitFor } from "@testing-library/react";
-import userEvent, { specialChars } from "@testing-library/user-event";
+import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
 import { FilterMultilevelDropdown } from "../FilterMultilevelDropdown";
 
 describe("<FilterMultilevelDropdown />", () => {
+  const user = userEvent.setup({ delay: null });
   const toggleFilterValue = jest.fn();
   const openFilter = jest.fn();
   const closeFilter = jest.fn();
@@ -64,42 +64,42 @@ describe("<FilterMultilevelDropdown />", () => {
       }
     );
 
-    userEvent.click(getByRole("listbox"));
+    await user.click(getByRole("listbox"));
 
-    userEvent.click(container.querySelector('[class="chevron right icon"]'));
+    await user.click(container.querySelector('[class="chevron right icon"]'));
     await waitFor(() => {
       expect(getByRole("option", { name: /Domain 2/i })).toBeTruthy();
     });
-    userEvent.click(container.querySelector('[class="chevron down icon"]'));
+    await user.click(container.querySelector('[class="chevron down icon"]'));
     await waitFor(() => {
       expect(queryByText(/Domain 2/)).toBeFalsy();
     });
-    userEvent.click(container.querySelector('[class="chevron right icon"]'));
+    await user.click(container.querySelector('[class="chevron right icon"]'));
     // Select value
-    userEvent.click(getByRole("option", { name: /Domain 2/i }));
+    await user.click(getByRole("option", { name: /Domain 2/i }));
     await waitFor(() => {
       expect(toggleFilterValue).toHaveBeenCalledWith({ filter, value: [2] });
     });
     rerender(<FilterMultilevelDropdown {...{ ...props, activeValues: [2] }} />);
     // Unselect
-    userEvent.click(getByRole("option", { name: /Domain 2/i }));
+    await user.click(getByRole("option", { name: /Domain 2/i }));
     await waitFor(() => {
       expect(toggleFilterValue).toHaveBeenCalledWith({ filter, value: [] });
     });
     // Select parent
     rerender(<FilterMultilevelDropdown {...{ ...props, activeValues: [] }} />);
-    userEvent.click(getByRole("option", { name: /Domain 1/i }));
+    await user.click(getByRole("option", { name: /Domain 1/i }));
     await waitFor(() => {
       expect(toggleFilterValue).toHaveBeenCalledWith({ filter, value: [1] });
     });
     // Unselect parent by selecting children
     rerender(<FilterMultilevelDropdown {...{ ...props, activeValues: [1] }} />);
-    userEvent.click(getByRole("option", { name: /Domain 2/i }));
+    await user.click(getByRole("option", { name: /Domain 2/i }));
     await waitFor(() => {
       expect(toggleFilterValue).toHaveBeenCalledWith({ filter, value: [2] });
     });
     // Delete filter
-    userEvent.click(container.querySelector('[class="delete icon"]'));
+    await user.click(container.querySelector('[class="delete icon"]'));
     await waitFor(() => {
       expect(removeFilter).toBeCalledTimes(1);
     });
@@ -113,14 +113,14 @@ describe("<FilterMultilevelDropdown />", () => {
       }
     );
 
-    userEvent.click(getByRole("listbox"));
+    await user.click(getByRole("listbox"));
 
     await waitFor(() => {
       expect(getByRole("option", { name: /Domain 1/i })).toBeTruthy();
       expect(getByRole("option", { name: /Domain 3/i })).toBeTruthy();
     });
 
-    userEvent.click(container.querySelector('[class="chevron right icon"]'));
+    await user.click(container.querySelector('[class="chevron right icon"]'));
 
     await waitFor(() => {
       expect(getByRole("option", { name: /Domain 1/i })).toBeTruthy();
@@ -129,19 +129,19 @@ describe("<FilterMultilevelDropdown />", () => {
     });
 
     const input = container.querySelector('[type="text"]');
-    userEvent.type(input, "2");
+    await user.type(input, "2");
 
     await waitFor(() => {
       expect(getByRole("option", { name: /Domain 2/i })).toBeTruthy();
     });
 
-    userEvent.type(input, `${specialChars.backspace}1`);
+    await user.type(input, `{backspace}1`);
 
     await waitFor(() => {
       expect(getByRole("option", { name: /Domain 1/i })).toBeTruthy();
     });
 
-    userEvent.click(getByRole("option", { name: /Domain 1/i }));
+    await user.click(getByRole("option", { name: /Domain 1/i }));
     await waitFor(() => {
       expect(toggleFilterValue).toHaveBeenCalledWith({ filter, value: [1] });
     });