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