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
  12 configure({ adapter: new Adapter() });
  13
  14 describe("<DataTable />", () => {
  15     it("shows only selected columns", () => {
  16         const columns: DataColumns<string> = [
  17             {
  18                 name: "Column 1",
  19                 render: () => <span />,
  20                 selected: true
  21             },
  22             {
  23                 name: "Column 2",
  24                 render: () => <span />,
  25                 selected: true
  26             },
  27             {
  28                 name: "Column 3",
  29                 render: () => <span />,
  30                 selected: false
  31             }
  32         ];
  33         const dataTable = mount(<DataTable
  34             columns={columns}
  35             items={["item 1"]}
  36             onFiltersChange={jest.fn()}
  37             onRowClick={jest.fn()}
  38             onRowContextMenu={jest.fn()}
  39             onSortToggle={jest.fn()} />);
  40         expect(dataTable.find(TableHead).find(TableCell)).toHaveLength(2);
  41     });
  42
  43     it("renders column name", () => {
  44         const columns: DataColumns<string> = [
  45             {
  46                 name: "Column 1",
  47                 render: () => <span />,
  48                 selected: true
  49             }
  50         ];
  51         const dataTable = mount(<DataTable
  52             columns={columns}
  53             items={["item 1"]}
  54             onFiltersChange={jest.fn()}
  55             onRowClick={jest.fn()}
  56             onRowContextMenu={jest.fn()}
  57             onSortToggle={jest.fn()} />);
  58         expect(dataTable.find(TableHead).find(TableCell).text()).toBe("Column 1");
  59     });
  60
  61     it("uses renderHeader instead of name prop", () => {
  62         const columns: DataColumns<string> = [
  63             {
  64                 name: "Column 1",
  65                 renderHeader: () => <span>Column Header</span>,
  66                 render: () => <span />,
  67                 selected: true
  68             }
  69         ];
  70         const dataTable = mount(<DataTable
  71             columns={columns}
  72             items={["item 1"]}
  73             onFiltersChange={jest.fn()}
  74             onRowClick={jest.fn()}
  75             onRowContextMenu={jest.fn()}
  76             onSortToggle={jest.fn()} />);
  77         expect(dataTable.find(TableHead).find(TableCell).text()).toBe("Column Header");
  78     });
  79
  80     it("passes column key prop to corresponding cells", () => {
  81         const columns: DataColumns<string> = [
  82             {
  83                 name: "Column 1",
  84                 key: "column-1-key",
  85                 render: () => <span />,
  86                 selected: true
  87             }
  88         ];
  89         const dataTable = mount(<DataTable
  90             columns={columns}
  91             items={["item 1"]}
  92             onFiltersChange={jest.fn()}
  93             onRowClick={jest.fn()}
  94             onRowContextMenu={jest.fn()}
  95             onSortToggle={jest.fn()} />);
  96         expect(dataTable.find(TableHead).find(TableCell).key()).toBe("column-1-key");
  97         expect(dataTable.find(TableBody).find(TableCell).key()).toBe("column-1-key");
  98     });
  99
 100     it("shows information that items array is empty", () => {
 101         const columns: DataColumns<string> = [
 102             {
 103                 name: "Column 1",
 104                 render: () => <span />,
 105                 selected: true
 106             }
 107         ];
 108         const dataTable = mount(<DataTable
 109             columns={columns}
 110             items={[]}
 111             onFiltersChange={jest.fn()}
 112             onRowClick={jest.fn()}
 113             onRowContextMenu={jest.fn()}
 114             onSortToggle={jest.fn()} />);
 115         expect(dataTable.find(Typography).text()).toBe("No items");
 116     });
 117
 118     it("renders items", () => {
 119         const columns: DataColumns<string> = [
 120             {
 121                 name: "Column 1",
 122                 render: (item) => <Typography>{item}</Typography>,
 123                 selected: true
 124             },
 125             {
 126                 name: "Column 2",
 127                 render: (item) => <Button>{item}</Button>,
 128                 selected: true
 129             }
 130         ];
 131         const dataTable = mount(<DataTable
 132             columns={columns}
 133             items={["item 1"]}
 134             onFiltersChange={jest.fn()}
 135             onRowClick={jest.fn()}
 136             onRowContextMenu={jest.fn()}
 137             onSortToggle={jest.fn()} />);
 138         expect(dataTable.find(TableBody).find(Typography).text()).toBe("item 1");
 139         expect(dataTable.find(TableBody).find(Button).text()).toBe("item 1");
 140     });
 141
 142     it("passes sorting props to <TableSortLabel />", () => {
 143         const columns: DataColumns<string> = [{
 144             name: "Column 1",
 145             sortDirection: "asc",
 146             selected: true,
 147             render: (item) => <Typography>{item}</Typography>
 148         }];
 149         const onSortToggle = jest.fn();
 150         const dataTable = mount(<DataTable
 151             columns={columns}
 152             items={["item 1"]}
 153             onFiltersChange={jest.fn()}
 154             onRowClick={jest.fn()}
 155             onRowContextMenu={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("passes filter props to <DataTableFilter />", () => {
 163         const columns: DataColumns<string> = [{
 164             name: "Column 1",
 165             sortDirection: "asc",
 166             selected: true,
 167             filters: [{name: "Filter 1", selected: true}],
 168             render: (item) => <Typography>{item}</Typography>
 169         }];
 170         const onFiltersChange = jest.fn();
 171         const dataTable = mount(<DataTable
 172             columns={columns}
 173             items={["item 1"]}
 174             onFiltersChange={onFiltersChange}
 175             onRowClick={jest.fn()}
 176             onRowContextMenu={jest.fn()}
 177             onSortToggle={jest.fn()}/>);
 178         expect(dataTable.find(DataTableFilters).prop("filters")).toBe(columns[0].filters);
 179         dataTable.find(DataTableFilters).prop("onChange")([]);
 180         expect(onFiltersChange).toHaveBeenCalledWith([], columns[0]);
 181     });
 182
 183
 184 });