services/workbench2/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";
  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 import { combineReducers, createStore } from "redux";
  17 import { Provider } from "react-redux";
  18
  19 configure({ adapter: new Adapter() });
  20
  21 describe("<DataExplorer />", () => {
  22     let store;
  23     beforeEach(() => {
  24         const initialMSState = {
  25             multiselect: {
  26                 checkedList: {},
  27                 isVisible: false,
  28             },
  29             resources: {},
  30         };
  31         store = createStore(
  32             combineReducers({
  33                 multiselect: (state: any = initialMSState.multiselect, action: any) => state,
  34                 resources: (state: any = initialMSState.resources, action: any) => state,
  35             })
  36         );
  37     });
  38
  39     it("communicates with <SearchInput/>", () => {
  40         const onSearch = jest.fn();
  41         const onSetColumns = jest.fn();
  42
  43         const dataExplorer = mount(
  44             <Provider store={store}>
  45                 <DataExplorer
  46                     {...mockDataExplorerProps()}
  47                     items={[{ name: "item 1" }]}
  48                     searchValue="search value"
  49                     onSearch={onSearch}
  50                     onSetColumns={onSetColumns}
  51                 />
  52             </Provider>
  53         );
  54         expect(dataExplorer.find(SearchInput).prop("value")).toEqual("search value");
  55         dataExplorer.find(SearchInput).prop("onSearch")("new value");
  56         expect(onSearch).toHaveBeenCalledWith("new value");
  57     });
  58
  59     it("communicates with <ColumnSelector/>", () => {
  60         const onColumnToggle = jest.fn();
  61         const onSetColumns = jest.fn();
  62         const columns = [{ name: "Column 1", render: jest.fn(), selected: true, configurable: true, sortDirection: SortDirection.ASC, filters: {} }];
  63         const dataExplorer = mount(
  64             <Provider store={store}>
  65                 <DataExplorer
  66                     {...mockDataExplorerProps()}
  67                     columns={columns}
  68                     onColumnToggle={onColumnToggle}
  69                     items={[{ name: "item 1" }]}
  70                     onSetColumns={onSetColumns}
  71                 />
  72             </Provider>
  73         );
  74         expect(dataExplorer.find(ColumnSelector).prop("columns")).toBe(columns);
  75         dataExplorer.find(ColumnSelector).prop("onColumnToggle")("columns");
  76         expect(onColumnToggle).toHaveBeenCalledWith("columns");
  77     });
  78
  79     it("communicates with <DataTable/>", () => {
  80         const onFiltersChange = jest.fn();
  81         const onSortToggle = jest.fn();
  82         const onRowClick = jest.fn();
  83         const onSetColumns = jest.fn();
  84         const columns = [{ name: "Column 1", render: jest.fn(), selected: true, configurable: true, sortDirection: SortDirection.ASC, filters: {} }];
  85         const items = [{ name: "item 1" }];
  86         const dataExplorer = mount(
  87             <Provider store={store}>
  88                 <DataExplorer
  89                     {...mockDataExplorerProps()}
  90                     columns={columns}
  91                     items={items}
  92                     onFiltersChange={onFiltersChange}
  93                     onSortToggle={onSortToggle}
  94                     onRowClick={onRowClick}
  95                     onSetColumns={onSetColumns}
  96                 />
  97             </Provider>
  98         );
  99         expect(dataExplorer.find(DataTable).prop("columns").slice(1, 2)).toEqual(columns);
 100         expect(dataExplorer.find(DataTable).prop("items")).toBe(items);
 101         dataExplorer.find(DataTable).prop("onRowClick")("event", "rowClick");
 102         dataExplorer.find(DataTable).prop("onFiltersChange")("filtersChange");
 103         dataExplorer.find(DataTable).prop("onSortToggle")("sortToggle");
 104         expect(onFiltersChange).toHaveBeenCalledWith("filtersChange");
 105         expect(onSortToggle).toHaveBeenCalledWith("sortToggle");
 106         expect(onRowClick).toHaveBeenCalledWith("rowClick");
 107     });
 108
 109     it("communicates with <TablePagination/>", () => {
 110         const onChangePage = jest.fn();
 111         const onChangeRowsPerPage = jest.fn();
 112         const onSetColumns = jest.fn();
 113         const dataExplorer = mount(
 114             <Provider store={store}>
 115                 <DataExplorer
 116                     {...mockDataExplorerProps()}
 117                     items={[{ name: "item 1" }]}
 118                     page={10}
 119                     rowsPerPage={50}
 120                     onChangePage={onChangePage}
 121                     onChangeRowsPerPage={onChangeRowsPerPage}
 122                     onSetColumns={onSetColumns}
 123                 />
 124             </Provider>
 125         );
 126         expect(dataExplorer.find(TablePagination).prop("page")).toEqual(10);
 127         expect(dataExplorer.find(TablePagination).prop("rowsPerPage")).toEqual(50);
 128         dataExplorer.find(TablePagination).prop("onChangePage")(undefined, 6);
 129         dataExplorer.find(TablePagination).prop("onChangeRowsPerPage")({ target: { value: 10 } });
 130         expect(onChangePage).toHaveBeenCalledWith(6);
 131         expect(onChangeRowsPerPage).toHaveBeenCalledWith(10);
 132     });
 133 });
 134
 135 const mockDataExplorerProps = () => ({
 136     fetchMode: DataTableFetchMode.PAGINATED,
 137     columns: [],
 138     items: [],
 139     itemsAvailable: 0,
 140     contextActions: [],
 141     searchValue: "",
 142     page: 0,
 143     rowsPerPage: 0,
 144     rowsPerPageOptions: [0],
 145     onSearch: jest.fn(),
 146     onFiltersChange: jest.fn(),
 147     onSortToggle: jest.fn(),
 148     onRowClick: jest.fn(),
 149     onRowDoubleClick: jest.fn(),
 150     onColumnToggle: jest.fn(),
 151     onChangePage: jest.fn(),
 152     onChangeRowsPerPage: jest.fn(),
 153     onContextMenu: jest.fn(),
 154     defaultIcon: ProjectIcon,
 155     onSetColumns: jest.fn(),
 156     onLoadMore: jest.fn(),
 157     defaultMessages: ["testing"],
 158     contextMenuColumn: true,
 159     setCheckedListOnStore: jest.fn(),
 160     toggleMSToolbar: jest.fn(),
 161     isMSToolbarVisible: false,
 162     checkedList: {},
 163 });