Merge branch '14160-default-data-explorer-view-improvements'
[arvados.git] / src / components / data-table / data-table.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 { mount, configure } from "enzyme";
7 import { TableHead, TableCell, Typography, TableBody, Button, TableSortLabel } from "@material-ui/core";
8 import * as Adapter from "enzyme-adapter-react-16";
9 import { DataTable, DataColumns } from "./data-table";
10 import { DataTableFilters } from "../data-table-filters/data-table-filters";
11 import { SortDirection, createDataColumn } from "./data-column";
12 import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
13
14 configure({ adapter: new Adapter() });
15
16 describe("<DataTable />", () => {
17     it("shows only selected columns", () => {
18         const columns: DataColumns<string> = [
19             createDataColumn({
20                 name: "Column 1",
21                 render: () => <span />,
22                 selected: true,
23                 configurable: true
24             }),
25             createDataColumn({
26                 name: "Column 2",
27                 render: () => <span />,
28                 selected: true,
29                 configurable: true
30             }),
31             createDataColumn({
32                 name: "Column 3",
33                 render: () => <span />,
34                 selected: false,
35                 configurable: true
36             }),
37         ];
38         const dataTable = mount(<DataTable
39             columns={columns}
40             items={[{ key: "1", name: "item 1" }]}
41             onFiltersChange={jest.fn()}
42             onRowClick={jest.fn()}
43             onRowDoubleClick={jest.fn()}
44             onContextMenu={jest.fn()}
45             onSortToggle={jest.fn()} />);
46         expect(dataTable.find(TableHead).find(TableCell)).toHaveLength(2);
47     });
48
49     it("renders column name", () => {
50         const columns: DataColumns<string> = [
51             createDataColumn({
52                 name: "Column 1",
53                 render: () => <span />,
54                 selected: true,
55                 configurable: true
56             }),
57         ];
58         const dataTable = mount(<DataTable
59             columns={columns}
60             items={["item 1"]}
61             onFiltersChange={jest.fn()}
62             onRowClick={jest.fn()}
63             onRowDoubleClick={jest.fn()}
64             onContextMenu={jest.fn()}
65             onSortToggle={jest.fn()} />);
66         expect(dataTable.find(TableHead).find(TableCell).text()).toBe("Column 1");
67     });
68
69     it("uses renderHeader instead of name prop", () => {
70         const columns: DataColumns<string> = [
71             createDataColumn({
72                 name: "Column 1",
73                 renderHeader: () => <span>Column Header</span>,
74                 render: () => <span />,
75                 selected: true,
76                 configurable: true
77             }),
78         ];
79         const dataTable = mount(<DataTable
80             columns={columns}
81             items={[]}
82             onFiltersChange={jest.fn()}
83             onRowClick={jest.fn()}
84             onRowDoubleClick={jest.fn()}
85             onContextMenu={jest.fn()}
86             onSortToggle={jest.fn()} />);
87         expect(dataTable.find(TableHead).find(TableCell).text()).toBe("Column Header");
88     });
89
90     it("passes column key prop to corresponding cells", () => {
91         const columns: DataColumns<string> = [
92             createDataColumn({
93                 name: "Column 1",
94                 key: "column-1-key",
95                 render: () => <span />,
96                 selected: true,
97                 configurable: true
98             })
99         ];
100         const dataTable = mount(<DataTable
101             columns={columns}
102             items={["item 1"]}
103             onFiltersChange={jest.fn()}
104             onRowClick={jest.fn()}
105             onRowDoubleClick={jest.fn()}
106             onContextMenu={jest.fn()}
107             onSortToggle={jest.fn()} />);
108         expect(dataTable.find(TableHead).find(TableCell).key()).toBe("column-1-key");
109         expect(dataTable.find(TableBody).find(TableCell).key()).toBe("column-1-key");
110     });
111
112     it("renders items", () => {
113         const columns: DataColumns<string> = [
114             createDataColumn({
115                 name: "Column 1",
116                 render: (item) => <Typography>{item}</Typography>,
117                 selected: true,
118                 configurable: true
119             }),
120             createDataColumn({
121                 name: "Column 2",
122                 render: (item) => <Button>{item}</Button>,
123                 selected: true,
124                 configurable: true
125             })
126         ];
127         const dataTable = mount(<DataTable
128             columns={columns}
129             items={["item 1"]}
130             onFiltersChange={jest.fn()}
131             onRowClick={jest.fn()}
132             onRowDoubleClick={jest.fn()}
133             onContextMenu={jest.fn()}
134             onSortToggle={jest.fn()} />);
135         expect(dataTable.find(TableBody).find(Typography).text()).toBe("item 1");
136         expect(dataTable.find(TableBody).find(Button).text()).toBe("item 1");
137     });
138
139     it("passes sorting props to <TableSortLabel />", () => {
140         const columns: DataColumns<string> = [
141             createDataColumn({
142             name: "Column 1",
143             sortDirection: SortDirection.ASC,
144             selected: true,
145             configurable: true,
146             render: (item) => <Typography>{item}</Typography>
147         })];
148         const onSortToggle = jest.fn();
149         const dataTable = mount(<DataTable
150             columns={columns}
151             items={["item 1"]}
152             onFiltersChange={jest.fn()}
153             onRowClick={jest.fn()}
154             onRowDoubleClick={jest.fn()}
155             onContextMenu={jest.fn()}
156             onSortToggle={onSortToggle} />);
157         expect(dataTable.find(TableSortLabel).prop("active")).toBeTruthy();
158         dataTable.find(TableSortLabel).at(0).simulate("click");
159         expect(onSortToggle).toHaveBeenCalledWith(columns[0]);
160     });
161
162     it("does not display <DataTableFilter /> if there is no filters provided", () => {
163         const columns: DataColumns<string> = [{
164             name: "Column 1",
165             sortDirection: SortDirection.ASC,
166             selected: true,
167             configurable: true,
168             filters: [],
169             render: (item) => <Typography>{item}</Typography>
170         }];
171         const onFiltersChange = jest.fn();
172         const dataTable = mount(<DataTable
173             columns={columns}
174             items={[]}
175             onFiltersChange={onFiltersChange}
176             onRowClick={jest.fn()}
177             onRowDoubleClick={jest.fn()}
178             onSortToggle={jest.fn()}
179             onContextMenu={jest.fn()} />);
180         expect(dataTable.find(DataTableFilters)).toHaveLength(0);
181     });
182
183     it("passes filter props to <DataTableFilter />", () => {
184         const columns: DataColumns<string> = [{
185             name: "Column 1",
186             sortDirection: SortDirection.ASC,
187             selected: true,
188             configurable: true,
189             filters: [{ name: "Filter 1", selected: true }],
190             render: (item) => <Typography>{item}</Typography>
191         }];
192         const onFiltersChange = jest.fn();
193         const dataTable = mount(<DataTable
194             columns={columns}
195             items={[]}
196             onFiltersChange={onFiltersChange}
197             onRowClick={jest.fn()}
198             onRowDoubleClick={jest.fn()}
199             onSortToggle={jest.fn()}
200             onContextMenu={jest.fn()} />);
201         expect(dataTable.find(DataTableFilters).prop("filters")).toBe(columns[0].filters);
202         dataTable.find(DataTableFilters).prop("onChange")([]);
203         expect(onFiltersChange).toHaveBeenCalledWith([], columns[0]);
204     });
205
206     it("shows default view if there is no items", () => {
207         const columns: DataColumns<string> = [
208             createDataColumn({
209                 name: "Column 1",
210                 render: () => <span />,
211                 selected: true,
212                 configurable: true
213             }),
214         ];
215         const dataTable = mount(<DataTable
216             columns={columns}
217             items={[]}
218             onFiltersChange={jest.fn()}
219             onRowClick={jest.fn()}
220             onRowDoubleClick={jest.fn()}
221             onContextMenu={jest.fn()}
222             onSortToggle={jest.fn()} />);
223         expect(dataTable.find(DataTableDefaultView)).toHaveLength(1);
224     });
225 });