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