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 });