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