merge-commit
[arvados-workbench2.git] / 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 * as React from "react";
6 import { configure, mount } from "enzyme";
7 import * as Adapter from 'enzyme-adapter-react-16';
8
9 import DataExplorer from "./data-explorer";
10 import ContextMenu from "../context-menu/context-menu";
11 import ColumnSelector from "../column-selector/column-selector";
12 import DataTable from "../data-table/data-table";
13 import SearchInput from "../search-input/search-input";
14 import { TablePagination } from "@material-ui/core";
15 import { MockItem } from "../data-table/data-table.test";
16
17 configure({ adapter: new Adapter() });
18
19 describe("<DataExplorer />", () => {
20
21     it("communicates with <ContextMenu/>", () => {
22         const onContextAction = jest.fn();
23         const dataExplorer = mount(<DataExplorer
24             {...mockDataExplorerProps()}
25             contextActions={[]}
26             onContextAction={onContextAction}
27             items={[{ key: "1", name: "item 1" }] as MockItem[]}
28             columns={[{ name: "Column 1", render: jest.fn(), selected: true }]} />);
29         expect(dataExplorer.find(ContextMenu).prop("actions")).toEqual([]);
30         dataExplorer.find(DataTable).prop("onRowContextMenu")({
31             preventDefault: jest.fn(),
32             stopPropagation: jest.fn()
33         }, "Item 1");
34         dataExplorer.find(ContextMenu).prop("onActionClick")({ name: "Action 1", icon: "" });
35         expect(onContextAction).toHaveBeenCalledWith({ name: "Action 1", icon: "" }, "Item 1");
36     });
37
38     it("communicates with <SearchInput/>", () => {
39         const onSearch = jest.fn();
40         const dataExplorer = mount(<DataExplorer
41             {...mockDataExplorerProps()}
42             items={[{ key: "1", name: "item 1" }] as MockItem[]}
43             searchValue="search value"
44             onSearch={onSearch} />);
45         expect(dataExplorer.find(SearchInput).prop("value")).toEqual("search value");
46         dataExplorer.find(SearchInput).prop("onSearch")("new value");
47         expect(onSearch).toHaveBeenCalledWith("new value");
48     });
49
50     it("communicates with <ColumnSelector/>", () => {
51         const onColumnToggle = jest.fn();
52         const columns = [{ name: "Column 1", render: jest.fn(), selected: true }];
53         const dataExplorer = mount(<DataExplorer
54             {...mockDataExplorerProps()}
55             columns={columns}
56             onColumnToggle={onColumnToggle}
57             contextActions={[]}
58             items={[{ key: "1", name: "item 1" }] as MockItem[]} />);
59         expect(dataExplorer.find(ColumnSelector).prop("columns")).toBe(columns);
60         dataExplorer.find(ColumnSelector).prop("onColumnToggle")("columns");
61         expect(onColumnToggle).toHaveBeenCalledWith("columns");
62     });
63
64     it("communicates with <DataTable/>", () => {
65         const onFiltersChange = jest.fn();
66         const onSortToggle = jest.fn();
67         const onRowClick = jest.fn();
68         const columns = [{ name: "Column 1", render: jest.fn(), selected: true }];
69         const items = [{ key: "1", name: "item 1" }] as MockItem[];
70         const dataExplorer = mount(<DataExplorer
71             {...mockDataExplorerProps()}
72             columns={columns}
73             items={items}
74             onFiltersChange={onFiltersChange}
75             onSortToggle={onSortToggle}
76             onRowClick={onRowClick} />);
77         expect(dataExplorer.find(DataTable).prop("columns").slice(0, -1)).toEqual(columns);
78         expect(dataExplorer.find(DataTable).prop("items")).toBe(items);
79         dataExplorer.find(DataTable).prop("onRowClick")("event", "rowClick");
80         dataExplorer.find(DataTable).prop("onFiltersChange")("filtersChange");
81         dataExplorer.find(DataTable).prop("onSortToggle")("sortToggle");
82         expect(onFiltersChange).toHaveBeenCalledWith("filtersChange");
83         expect(onSortToggle).toHaveBeenCalledWith("sortToggle");
84         expect(onRowClick).toHaveBeenCalledWith("rowClick");
85     });
86
87     it("does not render <TablePagination/> if there is no items", () => {
88         const dataExplorer = mount(<DataExplorer
89             {...mockDataExplorerProps()}
90             items={[]}
91         />);
92         expect(dataExplorer.find(TablePagination)).toHaveLength(0);
93     });
94
95     it("communicates with <TablePagination/>", () => {
96         const onChangePage = jest.fn();
97         const onChangeRowsPerPage = jest.fn();
98         const dataExplorer = mount(<DataExplorer
99             {...mockDataExplorerProps()}
100             items={[{ key: "1", name: "item 1" }] as MockItem[]}
101             page={10}
102             rowsPerPage={50}
103             onChangePage={onChangePage}
104             onChangeRowsPerPage={onChangeRowsPerPage}
105         />);
106         expect(dataExplorer.find(TablePagination).prop("page")).toEqual(10);
107         expect(dataExplorer.find(TablePagination).prop("rowsPerPage")).toEqual(50);
108         dataExplorer.find(TablePagination).prop("onChangePage")(undefined, 6);
109         dataExplorer.find(TablePagination).prop("onChangeRowsPerPage")({ target: { value: 10 } });
110         expect(onChangePage).toHaveBeenCalledWith(6);
111         expect(onChangeRowsPerPage).toHaveBeenCalledWith(10);
112     });
113 });
114
115 const mockDataExplorerProps = () => ({
116     columns: [],
117     items: [],
118     itemsAvailable: 0,
119     contextActions: [],
120     searchValue: "",
121     page: 0,
122     rowsPerPage: 0,
123     onSearch: jest.fn(),
124     onFiltersChange: jest.fn(),
125     onSortToggle: jest.fn(),
126     onRowClick: jest.fn(),
127     onColumnToggle: jest.fn(),
128     onContextAction: jest.fn(),
129     onChangePage: jest.fn(),
130     onChangeRowsPerPage: jest.fn()
131 });