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 * as Adapter from "enzyme-adapter-react-16";
   8 import DataTable from "./data-table";
   9 import { DataColumn } from "./data-column";
  10 import { TableHead, TableCell, Typography, TableBody, Button } from "@material-ui/core";
  11
  12 configure({ adapter: new Adapter() });
  13
  14 describe("<DataTable />", () => {
  15     it("shows only selected columns", () => {
  16         const columns: Array<DataColumn<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 columns={columns} items={["item 1"]}/>);
  34         expect(dataTable.find(TableHead).find(TableCell)).toHaveLength(2);
  35     });
  36
  37     it("renders column name", () => {
  38         const columns: Array<DataColumn<string>> = [
  39             {
  40                 name: "Column 1",
  41                 render: () => <span />,
  42                 selected: true
  43             }
  44         ];
  45         const dataTable = mount(<DataTable columns={columns} items={["item 1"]}/>);
  46         expect(dataTable.find(TableHead).find(TableCell).text()).toBe("Column 1");
  47     });
  48
  49     it("uses renderHeader instead of name prop", () => {
  50         const columns: Array<DataColumn<string>> = [
  51             {
  52                 name: "Column 1",
  53                 renderHeader: () => <span>Column Header</span>,
  54                 render: () => <span />,
  55                 selected: true
  56             }
  57         ];
  58         const dataTable = mount(<DataTable columns={columns} items={["item 1"]}/>);
  59         expect(dataTable.find(TableHead).find(TableCell).text()).toBe("Column Header");
  60     });
  61
  62     it("passes column key prop to corresponding cells", () => {
  63         const columns: Array<DataColumn<string>> = [
  64             {
  65                 name: "Column 1",
  66                 key: "column-1-key",
  67                 render: () => <span />,
  68                 selected: true
  69             }
  70         ];
  71         const dataTable = mount(<DataTable columns={columns} items={["item 1"]}/>);
  72         expect(dataTable.find(TableHead).find(TableCell).key()).toBe("column-1-key");
  73         expect(dataTable.find(TableBody).find(TableCell).key()).toBe("column-1-key");
  74     });
  75
  76     it("shows information that items array is empty", () => {
  77         const columns: Array<DataColumn<string>> = [
  78             {
  79                 name: "Column 1",
  80                 render: () => <span />,
  81                 selected: true
  82             }
  83         ];
  84         const dataTable = mount(<DataTable columns={columns} items={[]}/>);
  85         expect(dataTable.find(Typography).text()).toBe("No items");
  86     });
  87
  88     it("renders items", () => {
  89         const columns: Array<DataColumn<string>> = [
  90             {
  91                 name: "Column 1",
  92                 render: (item) => <Typography>{item}</Typography>,
  93                 selected: true
  94             },
  95             {
  96                 name: "Column 2",
  97                 render: (item) => <Button>{item}</Button>,
  98                 selected: true
  99             }
 100         ];
 101         const dataTable = mount(<DataTable columns={columns} items={["item 1"]}/>);
 102         expect(dataTable.find(TableBody).find(Typography).text()).toBe("item 1");
 103         expect(dataTable.find(TableBody).find(Button).text()).toBe("item 1");
 104     });
 105
 106
 107 });