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