src/components/column-selector/column-selector.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 { ColumnSelector, ColumnSelectorTrigger } from "./column-selector";
   9 import { ListItem, Checkbox } from "@material-ui/core";
  10 import { DataColumns } from "../data-table/data-table";
  11
  12 configure({ adapter: new Adapter() });
  13
  14 describe("<ColumnSelector />", () => {
  15     it("shows only configurable columns", () => {
  16         const columns: DataColumns<void> = [
  17             {
  18                 name: "Column 1",
  19                 render: () => <span />,
  20                 selected: true,
  21                 configurable: true
  22             },
  23             {
  24                 name: "Column 2",
  25                 render: () => <span />,
  26                 selected: true,
  27                 configurable: true,
  28             },
  29             {
  30                 name: "Column 3",
  31                 render: () => <span />,
  32                 selected: true,
  33                 configurable: false
  34             }
  35         ];
  36         const columnsConfigurator = mount(<ColumnSelector columns={columns} onColumnToggle={jest.fn()} />);
  37         columnsConfigurator.find(ColumnSelectorTrigger).simulate("click");
  38         expect(columnsConfigurator.find(ListItem)).toHaveLength(2);
  39     });
  40
  41     it("renders checked checkboxes next to selected columns", () => {
  42         const columns: DataColumns<void> = [
  43             {
  44                 name: "Column 1",
  45                 render: () => <span />,
  46                 selected: true,
  47                 configurable: true
  48             },
  49             {
  50                 name: "Column 2",
  51                 render: () => <span />,
  52                 selected: false,
  53                 configurable: true
  54             },
  55             {
  56                 name: "Column 3",
  57                 render: () => <span />,
  58                 selected: true,
  59                 configurable: true
  60             }
  61         ];
  62         const columnsConfigurator = mount(<ColumnSelector columns={columns} onColumnToggle={jest.fn()} />);
  63         columnsConfigurator.find(ColumnSelectorTrigger).simulate("click");
  64         expect(columnsConfigurator.find(Checkbox).at(0).prop("checked")).toBe(true);
  65         expect(columnsConfigurator.find(Checkbox).at(1).prop("checked")).toBe(false);
  66         expect(columnsConfigurator.find(Checkbox).at(2).prop("checked")).toBe(true);
  67     });
  68
  69     it("calls onColumnToggle with clicked column", () => {
  70         const columns: DataColumns<void> = [
  71             {
  72                 name: "Column 1",
  73                 render: () => <span />,
  74                 selected: true,
  75                 configurable: true
  76             }
  77         ];
  78         const onColumnToggle = jest.fn();
  79         const columnsConfigurator = mount(<ColumnSelector columns={columns} onColumnToggle={onColumnToggle} />);
  80         columnsConfigurator.find(ColumnSelectorTrigger).simulate("click");
  81         columnsConfigurator.find(ListItem).simulate("click");
  82         expect(onColumnToggle).toHaveBeenCalledWith(columns[0]);
  83     });
  84 });