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 } 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             {
  19                 name: "Column 1",
  20                 render: () => <span />,
  21                 selected: true,
  22                 configurable: true
  23             },
  24             {
  25                 name: "Column 2",
  26                 render: () => <span />,
  27                 selected: true,
  28                 configurable: true
  29             },
  30             {
  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             {
  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             {
  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             {
  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             {
 114                 name: "Column 1",
 115                 render: (item) => <Typography>{item}</Typography>,
 116                 selected: true,
 117                 configurable: true
 118             },
 119             {
 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             name: "Column 1",
 141             sortDirection: SortDirection.ASC,
 142             selected: true,
 143             configurable: true,
 144             render: (item) => <Typography>{item}</Typography>
 145         }];
 146         const onSortToggle = jest.fn();
 147         const dataTable = mount(<DataTable
 148             columns={columns}
 149             items={["item 1"]}
 150             onFiltersChange={jest.fn()}
 151             onRowClick={jest.fn()}
 152             onRowDoubleClick={jest.fn()}
 153             onContextMenu={jest.fn()}
 154             onSortToggle={onSortToggle} />);
 155         expect(dataTable.find(TableSortLabel).prop("active")).toBeTruthy();
 156         dataTable.find(TableSortLabel).at(0).simulate("click");
 157         expect(onSortToggle).toHaveBeenCalledWith(columns[0]);
 158     });
 159
 160     it("passes filter props to <DataTableFilter />", () => {
 161         const columns: DataColumns<string> = [{
 162             name: "Column 1",
 163             sortDirection: SortDirection.ASC,
 164             selected: true,
 165             configurable: true,
 166             filters: [{ name: "Filter 1", selected: true }],
 167             render: (item) => <Typography>{item}</Typography>
 168         }];
 169         const onFiltersChange = jest.fn();
 170         const dataTable = mount(<DataTable
 171             columns={columns}
 172             items={[]}
 173             onFiltersChange={onFiltersChange}
 174             onRowClick={jest.fn()}
 175             onRowDoubleClick={jest.fn()}
 176             onSortToggle={jest.fn()}
 177             onContextMenu={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 });