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, DataItem } 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 export interface MockItem extends DataItem {
  16     name: string;
  17 }
  18
  19 describe("<DataTable />", () => {
  20     it("shows only selected columns", () => {
  21         const columns: DataColumns<MockItem> = [
  22             {
  23                 name: "Column 1",
  24                 render: () => <span />,
  25                 selected: true
  26             },
  27             {
  28                 name: "Column 2",
  29                 render: () => <span />,
  30                 selected: true
  31             },
  32             {
  33                 name: "Column 3",
  34                 render: () => <span />,
  35                 selected: false
  36             }
  37         ];
  38         const dataTable = mount(<DataTable
  39             columns={columns}
  40             items={[{ key: "1", name: "item 1" }] as MockItem[]}
  41             onFiltersChange={jest.fn()}
  42             onRowClick={jest.fn()}
  43             onRowContextMenu={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<MockItem> = [
  50             {
  51                 name: "Column 1",
  52                 render: () => <span />,
  53                 selected: true
  54             }
  55         ];
  56         const dataTable = mount(<DataTable
  57             columns={columns}
  58             items={[{ key: "1", name: "item 1" }] as MockItem[]}
  59             onFiltersChange={jest.fn()}
  60             onRowClick={jest.fn()}
  61             onRowContextMenu={jest.fn()}
  62             onSortToggle={jest.fn()} />);
  63         expect(dataTable.find(TableHead).find(TableCell).text()).toBe("Column 1");
  64     });
  65
  66     it("uses renderHeader instead of name prop", () => {
  67         const columns: DataColumns<MockItem> = [
  68             {
  69                 name: "Column 1",
  70                 renderHeader: () => <span>Column Header</span>,
  71                 render: () => <span />,
  72                 selected: true
  73             }
  74         ];
  75         const dataTable = mount(<DataTable
  76             columns={columns}
  77             items={[{ key: "1", name: "item 1" }] as MockItem[]}
  78             onFiltersChange={jest.fn()}
  79             onRowClick={jest.fn()}
  80             onRowContextMenu={jest.fn()}
  81             onSortToggle={jest.fn()} />);
  82         expect(dataTable.find(TableHead).find(TableCell).text()).toBe("Column Header");
  83     });
  84
  85     it("passes column key prop to corresponding cells", () => {
  86         const columns: DataColumns<MockItem> = [
  87             {
  88                 name: "Column 1",
  89                 key: "column-1-key",
  90                 render: () => <span />,
  91                 selected: true
  92             }
  93         ];
  94         const dataTable = mount(<DataTable
  95             columns={columns}
  96             items={[{ key: "1", name: "item 1" }] as MockItem[]}
  97             onFiltersChange={jest.fn()}
  98             onRowClick={jest.fn()}
  99             onRowContextMenu={jest.fn()}
 100             onSortToggle={jest.fn()} />);
 101         expect(dataTable.find(TableHead).find(TableCell).key()).toBe("column-1-key");
 102         expect(dataTable.find(TableBody).find(TableCell).key()).toBe("column-1-key");
 103     });
 104
 105     it("renders items", () => {
 106         const columns: DataColumns<MockItem> = [
 107             {
 108                 name: "Column 1",
 109                 render: (item) => <Typography>{item.name}</Typography>,
 110                 selected: true
 111             },
 112             {
 113                 name: "Column 2",
 114                 render: (item) => <Button>{item.name}</Button>,
 115                 selected: true
 116             }
 117         ];
 118         const dataTable = mount(<DataTable
 119             columns={columns}
 120             items={[{ key: "1", name: "item 1" }] as MockItem[]}
 121             onFiltersChange={jest.fn()}
 122             onRowClick={jest.fn()}
 123             onRowContextMenu={jest.fn()}
 124             onSortToggle={jest.fn()} />);
 125         expect(dataTable.find(TableBody).find(Typography).text()).toBe("item 1");
 126         expect(dataTable.find(TableBody).find(Button).text()).toBe("item 1");
 127     });
 128
 129     it("passes sorting props to <TableSortLabel />", () => {
 130         const columns: DataColumns<MockItem> = [{
 131             name: "Column 1",
 132             sortDirection: SortDirection.Asc,
 133             selected: true,
 134             render: (item) => <Typography>{item.name}</Typography>
 135         }];
 136         const onSortToggle = jest.fn();
 137         const dataTable = mount(<DataTable
 138             columns={columns}
 139             items={[{ key: "1", name: "item 1" }] as MockItem[]}
 140             onFiltersChange={jest.fn()}
 141             onRowClick={jest.fn()}
 142             onRowContextMenu={jest.fn()}
 143             onSortToggle={onSortToggle} />);
 144         expect(dataTable.find(TableSortLabel).prop("active")).toBeTruthy();
 145         dataTable.find(TableSortLabel).at(0).simulate("click");
 146         expect(onSortToggle).toHaveBeenCalledWith(columns[0]);
 147     });
 148
 149     it("passes filter props to <DataTableFilter />", () => {
 150         const columns: DataColumns<MockItem> = [{
 151             name: "Column 1",
 152             sortDirection: SortDirection.Asc,
 153             selected: true,
 154             filters: [{ name: "Filter 1", selected: true }],
 155             render: (item) => <Typography>{item.name}</Typography>
 156         }];
 157         const onFiltersChange = jest.fn();
 158         const dataTable = mount(<DataTable
 159             columns={columns}
 160             items={[{ key: "1", name: "item 1" }] as MockItem[]}
 161             onFiltersChange={onFiltersChange}
 162             onRowClick={jest.fn()}
 163             onRowContextMenu={jest.fn()}
 164             onSortToggle={jest.fn()} />);
 165         expect(dataTable.find(DataTableFilters).prop("filters")).toBe(columns[0].filters);
 166         dataTable.find(DataTableFilters).prop("onChange")([]);
 167         expect(onFiltersChange).toHaveBeenCalledWith([], columns[0]);
 168     });
 169
 170
 171 });