1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
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, DataItem } from "./data-table";
10 import DataTableFilters from "../data-table-filters/data-table-filters";
11 import { SortDirection } from "./data-column";
13 configure({ adapter: new Adapter() });
15 export interface MockItem extends DataItem {
19 describe("<DataTable />", () => {
20 it("shows only selected columns", () => {
21 const columns: DataColumns<MockItem> = [
24 render: () => <span />,
29 render: () => <span />,
34 render: () => <span />,
38 const dataTable = mount(<DataTable
40 items={[{ key: "1", name: "item 1" }] as MockItem[]}
41 onFiltersChange={jest.fn()}
42 onRowClick={jest.fn()}
43 onContextMenu={jest.fn()}
44 onSortToggle={jest.fn()} />);
45 expect(dataTable.find(TableHead).find(TableCell)).toHaveLength(2);
48 it("renders column name", () => {
49 const columns: DataColumns<MockItem> = [
52 render: () => <span />,
56 const dataTable = mount(<DataTable
58 items={[{ key: "1", name: "item 1" }] as MockItem[]}
59 onFiltersChange={jest.fn()}
60 onRowClick={jest.fn()}
61 onContextMenu={jest.fn()}
62 onSortToggle={jest.fn()} />);
63 expect(dataTable.find(TableHead).find(TableCell).text()).toBe("Column 1");
66 it("uses renderHeader instead of name prop", () => {
67 const columns: DataColumns<MockItem> = [
70 renderHeader: () => <span>Column Header</span>,
71 render: () => <span />,
75 const dataTable = mount(<DataTable
77 items={[{ key: "1", name: "item 1" }] as MockItem[]}
78 onFiltersChange={jest.fn()}
79 onRowClick={jest.fn()}
80 onContextMenu={jest.fn()}
81 onSortToggle={jest.fn()} />);
82 expect(dataTable.find(TableHead).find(TableCell).text()).toBe("Column Header");
85 it("passes column key prop to corresponding cells", () => {
86 const columns: DataColumns<MockItem> = [
90 render: () => <span />,
94 const dataTable = mount(<DataTable
96 items={[{ key: "1", name: "item 1" }] as MockItem[]}
97 onFiltersChange={jest.fn()}
98 onRowClick={jest.fn()}
99 onContextMenu={jest.fn()}
100 onSortToggle={jest.fn()} />);
101 expect(dataTable.find(TableHead).find(TableCell).key()).toBe("column-1-key");
102 expect(dataTable.find(TableBody).find(TableCell).key()).toBe("column-1-key");
105 it("renders items", () => {
106 const columns: DataColumns<MockItem> = [
109 render: (item) => <Typography>{item.name}</Typography>,
114 render: (item) => <Button>{item.name}</Button>,
118 const dataTable = mount(<DataTable
120 items={[{ key: "1", name: "item 1" }] as MockItem[]}
121 onFiltersChange={jest.fn()}
122 onRowClick={jest.fn()}
123 onContextMenu={jest.fn()}
124 onSortToggle={jest.fn()} />);
125 expect(dataTable.find(TableBody).find(Typography).text()).toBe("item 1");
126 expect(dataTable.find(TableBody).find(Button).text()).toBe("item 1");
129 it("passes sorting props to <TableSortLabel />", () => {
130 const columns: DataColumns<MockItem> = [{
132 sortDirection: SortDirection.Asc,
134 render: (item) => <Typography>{item.name}</Typography>
136 const onSortToggle = jest.fn();
137 const dataTable = mount(<DataTable
139 items={[{ key: "1", name: "item 1" }] as MockItem[]}
140 onFiltersChange={jest.fn()}
141 onRowClick={jest.fn()}
142 onContextMenu={jest.fn()}
143 onSortToggle={onSortToggle} />);
144 expect(dataTable.find(TableSortLabel).prop("active")).toBeTruthy();
145 dataTable.find(TableSortLabel).at(0).simulate("click");
146 expect(onSortToggle).toHaveBeenCalledWith(columns[0]);
149 it("passes filter props to <DataTableFilter />", () => {
150 const columns: DataColumns<MockItem> = [{
152 sortDirection: SortDirection.Asc,
154 filters: [{ name: "Filter 1", selected: true }],
155 render: (item) => <Typography>{item.name}</Typography>
157 const onFiltersChange = jest.fn();
158 const dataTable = mount(<DataTable
160 items={[{ key: "1", name: "item 1" }] as MockItem[]}
161 onFiltersChange={onFiltersChange}
162 onRowClick={jest.fn()}
163 onSortToggle={jest.fn()}
164 onContextMenu={jest.fn()} />);
165 expect(dataTable.find(DataTableFilters).prop("filters")).toBe(columns[0].filters);
166 dataTable.find(DataTableFilters).prop("onChange")([]);
167 expect(onFiltersChange).toHaveBeenCalledWith([], columns[0]);