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     //         <DataExplorer
  65     //             {...mockDataExplorerProps()}
  66     //             columns={columns}
  67     //             onColumnToggle={onColumnToggle}
  68     //             items={[{ name: "item 1" }]}
  69     //             onSetColumns={onSetColumns}
  70     //         />
  71     //     );
  72     //     expect(dataExplorer.find(ColumnSelector).prop("columns")).toBe(columns);
  73     //     dataExplorer.find(ColumnSelector).prop("onColumnToggle")("columns");
  74     //     expect(onColumnToggle).toHaveBeenCalledWith("columns");
  75     // });
  76
  77     // it("communicates with <DataTable/>", () => {
  78     //     const onFiltersChange = jest.fn();
  79     //     const onSortToggle = jest.fn();
  80     //     const onRowClick = jest.fn();
  81     //     const onSetColumns = jest.fn();
  82     //     const columns = [{ name: "Column 1", render: jest.fn(), selected: true, configurable: true, sortDirection: SortDirection.ASC, filters: {} }];
  83     //     const items = [{ name: "item 1" }];
  84     //     const dataExplorer = mount(
  85     //         <DataExplorer
  86     //             {...mockDataExplorerProps()}
  87     //             columns={columns}
  88     //             items={items}
  89     //             onFiltersChange={onFiltersChange}
  90     //             onSortToggle={onSortToggle}
  91     //             onRowClick={onRowClick}
  92     //             onSetColumns={onSetColumns}
  93     //         />
  94     //     );
  95     //     expect(dataExplorer.find(DataTable).prop("columns").slice(1, 2)).toEqual(columns);
  96     //     expect(dataExplorer.find(DataTable).prop("items")).toBe(items);
  97     //     dataExplorer.find(DataTable).prop("onRowClick")("event", "rowClick");
  98     //     dataExplorer.find(DataTable).prop("onFiltersChange")("filtersChange");
  99     //     dataExplorer.find(DataTable).prop("onSortToggle")("sortToggle");
 100     //     expect(onFiltersChange).toHaveBeenCalledWith("filtersChange");
 101     //     expect(onSortToggle).toHaveBeenCalledWith("sortToggle");
 102     //     expect(onRowClick).toHaveBeenCalledWith("rowClick");
 103     // });
 104
 105     // it("communicates with <TablePagination/>", () => {
 106     //     const onChangePage = jest.fn();
 107     //     const onChangeRowsPerPage = jest.fn();
 108     //     const onSetColumns = jest.fn();
 109     //     const dataExplorer = mount(
 110     //         <DataExplorer
 111     //             {...mockDataExplorerProps()}
 112     //             items={[{ name: "item 1" }]}
 113     //             page={10}
 114     //             rowsPerPage={50}
 115     //             onChangePage={onChangePage}
 116     //             onChangeRowsPerPage={onChangeRowsPerPage}
 117     //             onSetColumns={onSetColumns}
 118     //         />
 119     //     );
 120     //     expect(dataExplorer.find(TablePagination).prop("page")).toEqual(10);
 121     //     expect(dataExplorer.find(TablePagination).prop("rowsPerPage")).toEqual(50);
 122     //     dataExplorer.find(TablePagination).prop("onChangePage")(undefined, 6);
 123     //     dataExplorer.find(TablePagination).prop("onChangeRowsPerPage")({ target: { value: 10 } });
 124     //     expect(onChangePage).toHaveBeenCalledWith(6);
 125     //     expect(onChangeRowsPerPage).toHaveBeenCalledWith(10);
 126     // });
 127 });
 128
 129 const mockDataExplorerProps = () => ({
 130     fetchMode: DataTableFetchMode.PAGINATED,
 131     columns: [],
 132     items: [],
 133     itemsAvailable: 0,
 134     contextActions: [],
 135     searchValue: "",
 136     page: 0,
 137     rowsPerPage: 0,
 138     rowsPerPageOptions: [0],
 139     onSearch: jest.fn(),
 140     onFiltersChange: jest.fn(),
 141     onSortToggle: jest.fn(),
 142     onRowClick: jest.fn(),
 143     onRowDoubleClick: jest.fn(),
 144     onColumnToggle: jest.fn(),
 145     onChangePage: jest.fn(),
 146     onChangeRowsPerPage: jest.fn(),
 147     onContextMenu: jest.fn(),
 148     defaultIcon: ProjectIcon,
 149     onSetColumns: jest.fn(),
 150     onLoadMore: jest.fn(),
 151     defaultMessages: ["testing"],
 152     contextMenuColumn: true,
 153     setCheckedListOnStore: jest.fn(),
 154     toggleMSToolbar: jest.fn(),
 155     isMSToolbarVisible: false,
 156     checkedList: {},
 157 });