src/components/data-explorer/data-explorer.test.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from "react";
   6 import { configure, mount } from "enzyme";
   7 import Adapter from "enzyme-adapter-react-16";
   8
   9 import { DataExplorer } from "./data-explorer"; //here
  10 import { ColumnSelector } from "../column-selector/column-selector";
  11 import { DataTable, DataTableFetchMode } from "../data-table/data-table";
  12 import { SearchInput } from "../search-input/search-input";
  13 import { TablePagination } from "@material-ui/core";
  14 import { ProjectIcon } from "../icon/icon";
  15 import { SortDirection } from "../data-table/data-column";
  16
  17 configure({ adapter: new Adapter() });
  18
  19 describe("<DataExplorer />", () => {
  20     it("communicates with <SearchInput/>", () => {
  21         const onSearch = jest.fn();
  22         const onSetColumns = jest.fn();
  23         const dataExplorer = mount(
  24             <DataExplorer
  25                 {...mockDataExplorerProps()}
  26                 items={[{ name: "item 1" }]}
  27                 searchValue="search value"
  28                 onSearch={onSearch}
  29                 onSetColumns={onSetColumns}
  30             />
  31         );
  32         expect(dataExplorer.find(SearchInput).prop("value")).toEqual("search value");
  33         dataExplorer.find(SearchInput).prop("onSearch")("new value");
  34         expect(onSearch).toHaveBeenCalledWith("new value");
  35     });
  36
  37     it("communicates with <ColumnSelector/>", () => {
  38         const onColumnToggle = jest.fn();
  39         const onSetColumns = jest.fn();
  40         const columns = [{ name: "Column 1", render: jest.fn(), selected: true, configurable: true, sortDirection: SortDirection.ASC, filters: {} }];
  41         const dataExplorer = mount(
  42             <DataExplorer
  43                 {...mockDataExplorerProps()}
  44                 columns={columns}
  45                 onColumnToggle={onColumnToggle}
  46                 items={[{ name: "item 1" }]}
  47                 onSetColumns={onSetColumns}
  48             />
  49         );
  50         expect(dataExplorer.find(ColumnSelector).prop("columns")).toBe(columns);
  51         dataExplorer.find(ColumnSelector).prop("onColumnToggle")("columns");
  52         expect(onColumnToggle).toHaveBeenCalledWith("columns");
  53     });
  54
  55     it("communicates with <DataTable/>", () => {
  56         const onFiltersChange = jest.fn();
  57         const onSortToggle = jest.fn();
  58         const onRowClick = jest.fn();
  59         const onSetColumns = jest.fn();
  60         const columns = [{ name: "Column 1", render: jest.fn(), selected: true, configurable: true, sortDirection: SortDirection.ASC, filters: {} }];
  61         const items = [{ name: "item 1" }];
  62         const dataExplorer = mount(
  63             <DataExplorer
  64                 {...mockDataExplorerProps()}
  65                 columns={columns}
  66                 items={items}
  67                 onFiltersChange={onFiltersChange}
  68                 onSortToggle={onSortToggle}
  69                 onRowClick={onRowClick}
  70                 onSetColumns={onSetColumns}
  71             />
  72         );
  73         expect(dataExplorer.find(DataTable).prop("columns").slice(1, 2)).toEqual(columns);
  74         expect(dataExplorer.find(DataTable).prop("items")).toBe(items);
  75         dataExplorer.find(DataTable).prop("onRowClick")("event", "rowClick");
  76         dataExplorer.find(DataTable).prop("onFiltersChange")("filtersChange");
  77         dataExplorer.find(DataTable).prop("onSortToggle")("sortToggle");
  78         expect(onFiltersChange).toHaveBeenCalledWith("filtersChange");
  79         expect(onSortToggle).toHaveBeenCalledWith("sortToggle");
  80         expect(onRowClick).toHaveBeenCalledWith("rowClick");
  81     });
  82
  83     it("communicates with <TablePagination/>", () => {
  84         const onChangePage = jest.fn();
  85         const onChangeRowsPerPage = jest.fn();
  86         const onSetColumns = jest.fn();
  87         const dataExplorer = mount(
  88             <DataExplorer
  89                 {...mockDataExplorerProps()}
  90                 items={[{ name: "item 1" }]}
  91                 page={10}
  92                 rowsPerPage={50}
  93                 onChangePage={onChangePage}
  94                 onChangeRowsPerPage={onChangeRowsPerPage}
  95                 onSetColumns={onSetColumns}
  96             />
  97         );
  98         expect(dataExplorer.find(TablePagination).prop("page")).toEqual(10);
  99         expect(dataExplorer.find(TablePagination).prop("rowsPerPage")).toEqual(50);
 100         dataExplorer.find(TablePagination).prop("onChangePage")(undefined, 6);
 101         dataExplorer.find(TablePagination).prop("onChangeRowsPerPage")({ target: { value: 10 } });
 102         expect(onChangePage).toHaveBeenCalledWith(6);
 103         expect(onChangeRowsPerPage).toHaveBeenCalledWith(10);
 104     });
 105 });
 106
 107 const mockDataExplorerProps = () => ({
 108     fetchMode: DataTableFetchMode.PAGINATED,
 109     columns: [],
 110     items: [],
 111     itemsAvailable: 0,
 112     contextActions: [],
 113     searchValue: "",
 114     page: 0,
 115     rowsPerPage: 0,
 116     rowsPerPageOptions: [0],
 117     onSearch: jest.fn(),
 118     onFiltersChange: jest.fn(),
 119     onSortToggle: jest.fn(),
 120     onRowClick: jest.fn(),
 121     onRowDoubleClick: jest.fn(),
 122     onColumnToggle: jest.fn(),
 123     onChangePage: jest.fn(),
 124     onChangeRowsPerPage: jest.fn(),
 125     onContextMenu: jest.fn(),
 126     defaultIcon: ProjectIcon,
 127     onSetColumns: jest.fn(),
 128     onLoadMore: jest.fn(),
 129     defaultMessages: ["testing"],
 130     contextMenuColumn: true,
 131     setCheckedListOnStore: jest.fn(),
 132 });