services/workbench2/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, 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(
  41             <DataTable
  42                 columns={columns}
  43                 items={[{ key: "1", name: "item 1" }]}
  44                 onFiltersChange={jest.fn()}
  45                 onRowClick={jest.fn()}
  46                 onRowDoubleClick={jest.fn()}
  47                 onContextMenu={jest.fn()}
  48                 onSortToggle={jest.fn()}
  49                 setCheckedListOnStore={jest.fn()}
  50             />
  51         );
  52         expect(dataTable.find(TableHead).find(TableCell)).toHaveLength(3);
  53     });
  54
  55     it("renders column name", () => {
  56         const columns: DataColumns<string, string> = [
  57             createDataColumn({
  58                 name: "Column 1",
  59                 render: () => <span />,
  60                 selected: true,
  61                 configurable: true,
  62             }),
  63         ];
  64         const dataTable = mount(
  65             <DataTable
  66                 columns={columns}
  67                 items={["item 1"]}
  68                 onFiltersChange={jest.fn()}
  69                 onRowClick={jest.fn()}
  70                 onRowDoubleClick={jest.fn()}
  71                 onContextMenu={jest.fn()}
  72                 onSortToggle={jest.fn()}
  73                 setCheckedListOnStore={jest.fn()}
  74             />
  75         );
  76         expect(dataTable.find(TableHead).find(TableCell).last().text()).toBe("Column 1");
  77     });
  78
  79     it("uses renderHeader instead of name prop", () => {
  80         const columns: DataColumns<string, string> = [
  81             createDataColumn({
  82                 name: "Column 1",
  83                 renderHeader: () => <span>Column Header</span>,
  84                 render: () => <span />,
  85                 selected: true,
  86                 configurable: true,
  87             }),
  88         ];
  89         const dataTable = mount(
  90             <DataTable
  91                 columns={columns}
  92                 items={[]}
  93                 onFiltersChange={jest.fn()}
  94                 onRowClick={jest.fn()}
  95                 onRowDoubleClick={jest.fn()}
  96                 onContextMenu={jest.fn()}
  97                 onSortToggle={jest.fn()}
  98                 setCheckedListOnStore={jest.fn()}
  99             />
 100         );
 101         expect(dataTable.find(TableHead).find(TableCell).last().text()).toBe("Column Header");
 102     });
 103
 104     it("passes column key prop to corresponding cells", () => {
 105         const columns: DataColumns<string, string> = [
 106             createDataColumn({
 107                 name: "Column 1",
 108                 key: "column-1-key",
 109                 render: () => <span />,
 110                 selected: true,
 111                 configurable: true,
 112             }),
 113         ];
 114         const dataTable = mount(
 115             <DataTable
 116                 columns={columns}
 117                 working={false}
 118                 items={["item 1"]}
 119                 onFiltersChange={jest.fn()}
 120                 onRowClick={jest.fn()}
 121                 onRowDoubleClick={jest.fn()}
 122                 onContextMenu={jest.fn()}
 123                 onSortToggle={jest.fn()}
 124                 setCheckedListOnStore={jest.fn()}
 125             />
 126         );
 127         setTimeout(() => {
 128             expect(dataTable.find(TableBody).find(TableCell).last().key()).toBe("column-1-key");
 129         }, 1000);
 130     });
 131
 132     it("renders items", () => {
 133         const columns: DataColumns<string, string> = [
 134             createDataColumn({
 135                 name: "Column 1",
 136                 render: item => <Typography>{item}</Typography>,
 137                 selected: true,
 138                 configurable: true,
 139             }),
 140             createDataColumn({
 141                 name: "Column 2",
 142                 render: item => <Button>{item}</Button>,
 143                 selected: true,
 144                 configurable: true,
 145             }),
 146         ];
 147         const dataTable = mount(
 148             <DataTable
 149                 columns={columns}
 150                 working={false}
 151                 items={["item 1"]}
 152                 onFiltersChange={jest.fn()}
 153                 onRowClick={jest.fn()}
 154                 onRowDoubleClick={jest.fn()}
 155                 onContextMenu={jest.fn()}
 156                 onSortToggle={jest.fn()}
 157                 setCheckedListOnStore={jest.fn()}
 158             />
 159         );
 160         setTimeout(() => {
 161             expect(dataTable.find(TableBody).find(Typography).last().text()).toBe("item 1");
 162             expect(dataTable.find(TableBody).find(Button).last().text()).toBe("item 1");
 163         }, 1000);
 164     });
 165
 166     it("passes sorting props to <TableSortLabel />", () => {
 167         const columns: DataColumns<string, string> = [
 168             createDataColumn({
 169                 name: "Column 1",
 170                 sort: { direction: SortDirection.ASC, field: "length" },
 171                 selected: true,
 172                 configurable: true,
 173                 render: item => <Typography>{item}</Typography>,
 174             }),
 175         ];
 176         const onSortToggle = jest.fn();
 177         const dataTable = mount(
 178             <DataTable
 179                 columns={columns}
 180                 items={["item 1"]}
 181                 onFiltersChange={jest.fn()}
 182                 onRowClick={jest.fn()}
 183                 onRowDoubleClick={jest.fn()}
 184                 onContextMenu={jest.fn()}
 185                 onSortToggle={onSortToggle}
 186                 setCheckedListOnStore={jest.fn()}
 187             />
 188         );
 189         expect(dataTable.find(TableSortLabel).prop("active")).toBeTruthy();
 190         dataTable.find(TableSortLabel).at(0).simulate("click");
 191         expect(onSortToggle).toHaveBeenCalledWith(columns[1]);
 192     });
 193
 194     it("does not display <DataTableFiltersPopover /> if there is no filters provided", () => {
 195         const columns: DataColumns<string, string> = [
 196             {
 197                 name: "Column 1",
 198                 selected: true,
 199                 configurable: true,
 200                 filters: [],
 201                 render: item => <Typography>{item}</Typography>,
 202             },
 203         ];
 204         const onFiltersChange = jest.fn();
 205         const dataTable = mount(
 206             <DataTable
 207                 columns={columns}
 208                 items={[]}
 209                 onFiltersChange={onFiltersChange}
 210                 onRowClick={jest.fn()}
 211                 onRowDoubleClick={jest.fn()}
 212                 onSortToggle={jest.fn()}
 213                 onContextMenu={jest.fn()}
 214                 setCheckedListOnStore={jest.fn()}
 215             />
 216         );
 217         expect(dataTable.find(DataTableFiltersPopover)).toHaveLength(0);
 218     });
 219
 220     it("passes filter props to <DataTableFiltersPopover />", () => {
 221         const filters = pipe(() => createTree<DataTableFilterItem>(), setNode(initTreeNode({ id: "filter", value: { name: "filter" } })));
 222         const columns: DataColumns<string, string> = [
 223             {
 224                 name: "Column 1",
 225                 selected: true,
 226                 configurable: true,
 227                 filters: filters(),
 228                 render: item => <Typography>{item}</Typography>,
 229             },
 230         ];
 231         const onFiltersChange = jest.fn();
 232         const dataTable = mount(
 233             <DataTable
 234                 columns={columns}
 235                 items={[]}
 236                 onFiltersChange={onFiltersChange}
 237                 onRowClick={jest.fn()}
 238                 onRowDoubleClick={jest.fn()}
 239                 onSortToggle={jest.fn()}
 240                 onContextMenu={jest.fn()}
 241                 setCheckedListOnStore={jest.fn()}
 242             />
 243         );
 244         expect(dataTable.find(DataTableFiltersPopover).prop("filters")).toBe(columns[1].filters);
 245         dataTable.find(DataTableFiltersPopover).prop("onChange")([]);
 246         expect(onFiltersChange).toHaveBeenCalledWith([], columns[1]);
 247     });
 248 });