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("renders items", () => {
 101         const columns: DataColumns<string> = [
 102             {
 103                 name: "Column 1",
 104                 render: (item) => <Typography>{item}</Typography>,
 105                 selected: true
 106             },
 107             {
 108                 name: "Column 2",
 109                 render: (item) => <Button>{item}</Button>,
 110                 selected: true
 111             }
 112         ];
 113         const dataTable = mount(<DataTable
 114             columns={columns}
 115             items={["item 1"]}
 116             onFiltersChange={jest.fn()}
 117             onRowClick={jest.fn()}
 118             onRowContextMenu={jest.fn()}
 119             onSortToggle={jest.fn()} />);
 120         expect(dataTable.find(TableBody).find(Typography).text()).toBe("item 1");
 121         expect(dataTable.find(TableBody).find(Button).text()).toBe("item 1");
 122     });
 123
 124     it("passes sorting props to <TableSortLabel />", () => {
 125         const columns: DataColumns<string> = [{
 126             name: "Column 1",
 127             sortDirection: "asc",
 128             selected: true,
 129             render: (item) => <Typography>{item}</Typography>
 130         }];
 131         const onSortToggle = jest.fn();
 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={onSortToggle}/>);
 139         expect(dataTable.find(TableSortLabel).prop("active")).toBeTruthy();
 140         dataTable.find(TableSortLabel).at(0).simulate("click");
 141         expect(onSortToggle).toHaveBeenCalledWith(columns[0]);
 142     });
 143
 144     it("passes filter props to <DataTableFilter />", () => {
 145         const columns: DataColumns<string> = [{
 146             name: "Column 1",
 147             sortDirection: "asc",
 148             selected: true,
 149             filters: [{name: "Filter 1", selected: true}],
 150             render: (item) => <Typography>{item}</Typography>
 151         }];
 152         const onFiltersChange = jest.fn();
 153         const dataTable = mount(<DataTable
 154             columns={columns}
 155             items={["item 1"]}
 156             onFiltersChange={onFiltersChange}
 157             onRowClick={jest.fn()}
 158             onRowContextMenu={jest.fn()}
 159             onSortToggle={jest.fn()}/>);
 160         expect(dataTable.find(DataTableFilters).prop("filters")).toBe(columns[0].filters);
 161         dataTable.find(DataTableFilters).prop("onChange")([]);
 162         expect(onFiltersChange).toHaveBeenCalledWith([], columns[0]);
 163     });
 164
 165
 166 });