@truedat/core 5.18.1 → 5.18.3

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

@@ -1,47 +1,182 @@
 import _ from "lodash/fp";
 import React from "react";
-import { shallow } from "enzyme";
-import { Dropdown } from "semantic-ui-react";
+import { render } from "@truedat/test/render";
+import { waitFor, within, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
 import { FilterDropdown } from "../FilterDropdown";
 
-const options = _.map(value => ({ value, text: value }))(["value1", "value2"]);
+const options = _.map((value) => ({ value, text: value }))([
+  "value1",
+  "value2",
+]);
+
+const largeOptions = _.range(0, 8).map((n) => ({
+  value: `value${n}`,
+  text: `value${n}`,
+}));
+
+const props = {
+  openFilter: jest.fn(),
+  closeFilter: jest.fn(),
+  removeFilter: jest.fn(),
+  toggleFilterValue: jest.fn(),
+  filter: "foo",
+  options,
+};
 
 describe("<FilterDropdown/>", () => {
   it("matches the latest snapshot", () => {
-    const filter = "foo";
-    const props = { filter, options };
-    const wrapper = shallow(<FilterDropdown {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("dispatches openFilter, closeFilter and removeFilter", () => {
-    const closeFilter = jest.fn();
-    const openFilter = jest.fn();
-    const removeFilter = jest.fn();
-    const filter = "foo";
-    const props = {
-      closeFilter,
-      filter,
-      openFilter,
-      options,
-      removeFilter
+    const { container } = render(<FilterDropdown {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("render search input if has more than eight options", () => {
+    const customProps = {
+      ...props,
+      options: largeOptions,
+    };
+    const { getByRole } = render(<FilterDropdown {...customProps} />);
+
+    expect(getByRole("textbox")).toBeInTheDocument();
+  });
+
+  it("no render search input if has more than eight options", () => {
+    const { queryByRole } = render(<FilterDropdown {...props} />);
+    expect(queryByRole("textbox")).toBeNull();
+  });
+
+  it("check option check it correctly", () => {
+    const customProps = {
+      ...props,
+      options: largeOptions,
+    };
+
+    const selectedOption = customProps.options[6].text;
+
+    const { getByRole, getAllByRole, rerender } = render(
+      <FilterDropdown {...customProps} />
+    );
+
+    expect(customProps.toggleFilterValue).toBeCalledTimes(0);
+    userEvent.click(
+      getByRole("option", { name: new RegExp(selectedOption, "i") })
+    );
+    expect(customProps.toggleFilterValue).toBeCalledWith({
+      filter: props.filter,
+      value: selectedOption,
+    });
+
+    const rerenderProps = {
+      ...customProps,
+      activeValues: [selectedOption],
+    };
+    rerender(<FilterDropdown {...rerenderProps} />);
+
+    expect(
+      within(getAllByRole("option")[0]).queryByText(selectedOption)
+    ).not.toBeNull();
+  });
+
+  it("type in filter input filter options", () => {
+    const customProps = {
+      ...props,
+      options: largeOptions,
     };
-    const wrapper = shallow(<FilterDropdown {...props} />);
-    expect(openFilter.mock.calls.length).toBe(0);
-    expect(closeFilter.mock.calls.length).toBe(0);
-    expect(removeFilter.mock.calls.length).toBe(0);
-
-    wrapper.find(Dropdown).simulate("open");
-    expect(openFilter.mock.calls.length).toBe(1);
-
-    wrapper.find(Dropdown).simulate("close");
-    expect(closeFilter.mock.calls.length).toBe(1);
-
-    const e = { preventDefault: jest.fn(), stopPropagation: jest.fn() };
-    wrapper
-      .prop("trigger")
-      .props["children"].find(_.has("props.onClick"))
-      .props.onClick(e);
-    expect(removeFilter.mock.calls.length).toBe(1);
+
+    const searchText = "3";
+
+    const { getByRole, queryByRole, getAllByRole } = render(
+      <FilterDropdown {...customProps} />
+    );
+    const input = getByRole("textbox");
+
+    expect(
+      getByRole("option", {
+        name: new RegExp(customProps.options[1].text, "i"),
+      })
+    ).toBeInTheDocument();
+
+    userEvent.type(input, searchText);
+
+    expect(
+      queryByRole("option", {
+        name: new RegExp(customProps.options[1].text, "i"),
+      })
+    ).toBeNull();
+
+    expect(
+      within(getByRole("option")).getByText(`value${searchText}`)
+    ).toBeInTheDocument();
+
+    expect(getAllByRole("option").length).toBe(1);
+  });
+
+  it("type in filter not hidde selected values", () => {
+    const selectedOption = largeOptions[6].text;
+
+    const customProps = {
+      ...props,
+      options: largeOptions,
+      activeValues: [selectedOption],
+    };
+
+    const searchText = "3";
+
+    const { getByRole, queryByRole, getAllByRole } = render(
+      <FilterDropdown {...customProps} />
+    );
+    const input = getByRole("textbox");
+
+    userEvent.type(input, searchText);
+
+    expect(
+      within(getAllByRole("option")[0]).getByText(selectedOption)
+    ).toBeInTheDocument();
+
+    expect(
+      within(getAllByRole("option")[1]).getByText(`value${searchText}`)
+    ).toBeInTheDocument();
+
+    expect(
+      queryByRole("option", {
+        name: new RegExp(customProps.options[1].text, "i"),
+      })
+    ).toBeNull();
+
+    expect(getAllByRole("option").length).toBe(2);
+  });
+
+  it("dispatches openFilter", () => {
+    const customProps = {
+      ...props,
+      options: [],
+    };
+
+    const { rerender } = render(<FilterDropdown {...customProps} />);
+
+    rerender(<FilterDropdown {...props} />);
+
+    waitFor(() => expect(props.openFilter).toBeCalledTimes(1));
+  });
+
+  it("dispatches closeFilter", () => {
+    const customProps = {
+      ...props,
+      options: [],
+    };
+
+    const { rerender } = render(<FilterDropdown {...props} />);
+    rerender(<FilterDropdown {...customProps} />);
+
+    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 waitFor(() => {
+      expect(props.removeFilter).toBeCalledTimes(1);
+    });
   });
 });

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

@@ -0,0 +1,106 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import { render } from "@truedat/test/render";
+import { within, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Icon, Dropdown, Segment } from "semantic-ui-react";
+
+import SearchFilterDropdown from "../SearchFilterDropdown";
+
+const DummyLoader = () => <div></div>;
+const DummyFilerItem = ({ active, toggleFilterValue, option }) => (
+  <Dropdown.Item onClick={() => toggleFilterValue(option)} active={active}>
+    <Segment vertical>
+      <Icon name={active ? "check square outline" : "square outline"} />
+      {option.name}
+    </Segment>
+  </Dropdown.Item>
+);
+
+const props = {
+  query: "foo_query",
+  searchCallback: jest.fn(),
+  placeholder: "search dropdown",
+  options: [
+    {
+      id: 1,
+      name: "foo_option",
+    },
+    {
+      id: 2,
+      name: "bar_option",
+    },
+    {
+      id: 3,
+      name: "baz_option",
+    },
+  ],
+  open: true,
+  loading: false,
+  activeValues: [1],
+  closeFilter: jest.fn(),
+  filter: "foo_filter",
+  FilterDataLoader: DummyLoader,
+  loaderProps: { name: "loader-prop" },
+  FilterItem: DummyFilerItem,
+  openFilter: jest.fn(),
+  removeFilter: jest.fn(),
+  toggleFilterValue: jest.fn(),
+  searchFilterDispacher: jest.fn(),
+};
+
+describe("<SearchFilterDropDown/>", () => {
+  it("matches the latest snapshot unfolded", () => {
+    const { container } = render(<SearchFilterDropdown {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot folded", () => {
+    const customProps = {
+      ...props,
+      open: false,
+    };
+    const { container } = render(<SearchFilterDropdown {...customProps} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("check option check it correctly", () => {
+    const { getByRole, getAllByRole } = render(
+      <SearchFilterDropdown {...props} />
+    );
+
+    expect(props.toggleFilterValue).toBeCalledTimes(0);
+    userEvent.click(getByRole("option", { name: "baz_option" }));
+    expect(props.toggleFilterValue).toBeCalledWith({
+      value: 3,
+      filter: "foo_filter",
+    });
+
+    expect(
+      within(getAllByRole("option")[0]).queryByText("baz_option")
+    ).not.toBeNull();
+  });
+
+  it("type in filter input dispatch searchCallback with correct query", () => {
+    const searchText = "a";
+
+    const { getByRole } = render(<SearchFilterDropdown {...props} />);
+    const input = getByRole("textbox");
+
+    userEvent.type(input, searchText);
+
+    expect(props.searchCallback).toBeCalledWith({
+      query: `${props.query}${searchText}`,
+    });
+    expect(props.searchFilterDispacher).toBeCalledTimes(1);
+  });
+
+  it("remove filter dispatches removeFilter", async () => {
+    const { container } = render(<SearchFilterDropdown {...props} />);
+    userEvent.click(container.querySelector('[class="delete icon"]'));
+    await waitFor(() => {
+      expect(props.removeFilter).toBeCalledTimes(1);
+    });
+  });
+});

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

@@ -1,66 +1,94 @@
+/* eslint-disable react/prop-types */
 import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
+import { render } from "@truedat/test/render";
+
+import userEvent from "@testing-library/user-event";
+import { Icon, Dropdown, Segment } from "semantic-ui-react";
+
 import { SelectedFilters } from "../SelectedFilters";
 
+const DummyLoader = () => <div></div>;
+const DummyFilerItem = ({ active, toggleFilterValue, option }) => (
+  <Dropdown.Item onClick={() => toggleFilterValue(option)} active={active}>
+    <Segment vertical>
+      <Icon name={active ? "check square outline" : "square outline"} />
+      {option.name}
+    </Segment>
+  </Dropdown.Item>
+);
+
 describe("<SelectedFilters/>", () => {
-  const getProps = () => ({
+  const props = {
     resetFilters: jest.fn(),
     filterTypes: {
       foo: "fooType",
     },
+    openFilter: jest.fn(),
+    closeFilter: jest.fn(),
     selectedFilter: "foo",
     selectedFilters: ["foo", "bar"],
     selectedFilterActiveValues: ["value2"],
     selectedFilterValues: ["value1", "value2"],
-    saveFilters: jest.fn(),
     selectedUserFilter: null,
     userFilters: ["uf1", "uf2"],
-  });
+    searchFiltersPropsMapping: {},
+    searchFilterDispacher: jest.fn(),
+  };
+
+  const messages = {
+    "search.clear_filters": "clean filters",
+    "search.save_filters": "save filters",
+  };
+
+  const renderOptions = {
+    messages: {
+      en: messages,
+    },
+  };
 
   it("matches the latest snapshot", () => {
-    const props = getProps();
-    const wrapper = shallowWithIntl(<SelectedFilters {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<SelectedFilters {...props} />);
+    expect(container).toMatchSnapshot();
   });
 
   it("dispatches resetFilters", () => {
-    const props = getProps();
-    const wrapper = shallowWithIntl(<SelectedFilters {...props} />);
+    const { getByText } = render(<SelectedFilters {...props} />, renderOptions);
 
-    expect(props.resetFilters.mock.calls.length).toBe(0);
-    wrapper.find("a").simulate("click");
-    expect(props.resetFilters.mock.calls.length).toBe(1);
+    expect(props.resetFilters).toBeCalledTimes(0);
+    userEvent.click(getByText(messages["search.clear_filters"]));
+    expect(props.resetFilters).toBeCalledTimes(1);
   });
 
   it("does not render Save filters option if saveFilters is undefined", () => {
-    const props = getProps();
-    const customProps = { ...props, saveFilters: undefined };
-    const wrapper = shallowWithIntl(<SelectedFilters {...customProps} />);
-    expect(wrapper.find("ModalSaveFilter")).toHaveLength(0);
+    const { queryByText } = render(
+      <SelectedFilters {...props} />,
+      renderOptions
+    );
+    expect(queryByText(messages["search.save_filters"])).toBeNull();
   });
 
   it("renders Save filters option if saveFilters is defined", () => {
-    const props = getProps();
-    const wrapper = shallowWithIntl(<SelectedFilters {...props} />);
-    expect(wrapper.find("ModalSaveFilter")).toHaveLength(1);
+    const customProps = { ...props, saveFilters: jest.fn() };
+    const { getByText } = render(
+      <SelectedFilters {...customProps} />,
+      renderOptions
+    );
+    expect(getByText(messages["search.save_filters"])).toBeInTheDocument();
   });
 
   it("does not render userFilters if they are empty", () => {
-    const props = getProps();
     const customProps = { ...props, userFilters: [] };
-    const wrapper = shallowWithIntl(<SelectedFilters {...customProps} />);
-    expect(wrapper.find("UserFilters")).toHaveLength(0);
+    const { container } = render(<SelectedFilters {...customProps} />);
+    expect(container.getElementsByClassName("userFilter")).toHaveLength(0);
   });
 
   it("renders userFilters if they are defined", () => {
-    const props = getProps();
     const customProps = { ...props, userFilters: [{ country: ["a"] }] };
-    const wrapper = shallowWithIntl(<SelectedFilters {...customProps} />);
-    expect(wrapper.find("UserFilters")).toHaveLength(1);
+    const { container } = render(<SelectedFilters {...customProps} />);
+    expect(container.getElementsByClassName("userFilter")).toHaveLength(1);
   });
 
   it("renders FilterMultilevelDropdown if filter is of type domain", () => {
-    const props = getProps();
     const customProps = {
       ...props,
       selectedFilters: ["taxonomy"],
@@ -68,20 +96,49 @@ describe("<SelectedFilters/>", () => {
       filterTypes: { taxonomy: "domain" },
       selectedFilterValues: [{ id: 1, name: "foo", level: 0 }],
     };
-    const wrapper = shallowWithIntl(<SelectedFilters {...customProps} />);
-    expect(wrapper.find("FilterMultilevelDropdown")).toHaveLength(1);
+    const { container } = render(<SelectedFilters {...customProps} />);
+    expect(
+      container.querySelector('[name="filterMultilevelDropdown"]')
+    ).not.toBeNull();
   });
 
   it("renders HierarchyFilterDropdown if filter is of type hierarchy", () => {
-    const props = getProps();
     const customProps = {
       ...props,
       selectedFilters: ["hierarchy_field"],
       selectedFilter: "hierarchy_field",
       filterTypes: { hierarchy_field: "hierarchy" },
-      selectedFilterValues: [{ key: "2_1", id: 1, name: "foo", level: 0 }],
+      selectedFilterValues: [],
+    };
+    const { container } = render(<SelectedFilters {...customProps} />);
+    expect(
+      container.querySelector('[name="hierarchyFilterDropdown"]')
+    ).not.toBeNull();
+  });
+
+  it("renders SearchFilterDropdown if filter is of type search", () => {
+    const customProps = {
+      ...props,
+      selectedFilters: ["search_filter"],
+      selectedFilter: "search_filter",
+      filterTypes: { search_filter: "search" },
+      selectedFilterValues: [],
+      searchFiltersPropsMapping: {
+        search_filter: {
+          query: "query test",
+          searchCallback: jest.fn(),
+          options: [],
+          placeholder: "test",
+          FilterDataLoader: DummyLoader,
+          loaderProps: { pageSize: 50 },
+          FilterItem: DummyFilerItem,
+        },
+      },
+      searchFilterDispacher: jest.fn(),
     };
-    const wrapper = shallowWithIntl(<SelectedFilters {...customProps} />);
-    expect(wrapper.find("HierarchyFilterDropdown")).toHaveLength(1);
+    const { container } = render(<SelectedFilters {...customProps} />);
+    expect(
+      container.querySelector('[name="searchFilterDropdown"]')
+    ).not.toBeNull();
   });
 });

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { StructureFilterItem } from "../StructureFilterItem";
+
+const props = {
+  active: true,
+  filter: "foo",
+  toggleFilterValue: jest.fn(),
+  option: { id: 123, name: "bar", path: ["one", "two", "three"], type: "baz" },
+};
+
+describe("<StructureFilterItem/>", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<StructureFilterItem {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("dispatches toggleFilterValue on click", () => {
+    const { container } = render(<StructureFilterItem {...props} />);
+    expect(props.toggleFilterValue.mock.calls.length).toBe(0);
+    userEvent.click(within(container).getByText(props.option.name));
+    expect(props.toggleFilterValue.mock.calls.length).toBe(1);
+  });
+});

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

@@ -1,67 +1,48 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<FilterDropdown/> matches the latest snapshot 1`] = `
-<Dropdown
-  additionLabel="Add "
-  additionPosition="top"
-  closeOnBlur={true}
-  closeOnEscape={true}
-  deburr={false}
-  floating={true}
-  icon={false}
-  item={true}
-  minCharacters={1}
-  noResultsMessage="No results found."
-  onClose={[Function]}
-  onOpen={[Function]}
-  open={true}
-  openOnFocus={true}
-  renderLabel={[Function]}
-  scrolling={true}
-  searchInput="text"
-  selectOnBlur={true}
-  selectOnNavigation={true}
-  trigger={
-    <Label>
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="foo"
-        id="filters.foo"
-      />
-      <Icon
-        as="i"
-        name="delete"
-        onClick={[Function]}
-      />
-    </Label>
-  }
-  upward={false}
-  wrapSelection={true}
->
-  <DimmerDimmable
-    as={[Function]}
+<div>
+  <div
+    aria-expanded="true"
+    class="ui active visible floating item scrolling dropdown"
+    role="listbox"
+    tabindex="0"
   >
-    <FilterItem
-      active={false}
-      filter="foo"
-      key="0"
-      option={
-        {
-          "text": "value1",
-          "value": "value1",
-        }
-      }
-    />
-    <FilterItem
-      active={false}
-      filter="foo"
-      key="1"
-      option={
-        {
-          "text": "value2",
-          "value": "value2",
-        }
-      }
-    />
-  </DimmerDimmable>
-</Dropdown>
+    <div
+      class="ui label"
+    >
+      foo
+      <i
+        aria-hidden="true"
+        class="delete icon"
+      />
+    </div>
+    <div
+      class="menu transition dimmable visible"
+    >
+      <div
+        aria-checked="false"
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="square outline icon"
+        />
+        value1
+      </div>
+      <div
+        aria-checked="false"
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="square outline icon"
+        />
+        value2
+      </div>
+    </div>
+  </div>
+</div>
 `;

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

@@ -5,6 +5,7 @@ exports[`<FilterMultilevelDropdown /> matches the latest snapshot 1`] = `
   <div
     aria-expanded="true"
     class="ui active visible floating item dropdown"
+    name="filterMultilevelDropdown"
     role="listbox"
     tabindex="0"
   >

package/src/components/__tests__/__snapshots__/HierarchyFilterDropdown.spec.js.snap

@@ -5,6 +5,7 @@ exports[`<HierarchyFilterDropdown /> matches the latest snapshot 1`] = `
   <div
     aria-expanded="true"
     class="ui active visible floating item dropdown"
+    name="hierarchyFilterDropdown"
     role="listbox"
     tabindex="0"
   >
@@ -68,6 +69,7 @@ exports[`<HierarchyFilterDropdown /> matches the latest snapshot for empty optio
   <div
     aria-expanded="false"
     class="ui floating item dropdown"
+    name="hierarchyFilterDropdown"
     role="listbox"
     tabindex="0"
   >