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             },
  22             {
  23                 name: "Column 2",
  24                 render: () => <span />,
  25                 selected: true,
  26                 configurable: true,
  27             },
  28             {
  29                 name: "Column 3",
  30                 render: () => <span />,
  31                 selected: true,
  32                 configurable: false
  33             }
  34         ];
  35         const columnsConfigurator = mount(<ColumnSelector columns={columns} onColumnToggle={jest.fn()} />);
  36         columnsConfigurator.find(ColumnSelectorTrigger).simulate("click");
  37         expect(columnsConfigurator.find(ListItem)).toHaveLength(2);
  38     });
  39
  40     it("renders checked checkboxes next to selected columns", () => {
  41         const columns: DataColumns<void> = [
  42             {
  43                 name: "Column 1",
  44                 render: () => <span />,
  45                 selected: true
  46             },
  47             {
  48                 name: "Column 2",
  49                 render: () => <span />,
  50                 selected: false
  51             },
  52             {
  53                 name: "Column 3",
  54                 render: () => <span />,
  55                 selected: true
  56             }
  57         ];
  58         const columnsConfigurator = mount(<ColumnSelector columns={columns} onColumnToggle={jest.fn()} />);
  59         columnsConfigurator.find(ColumnSelectorTrigger).simulate("click");
  60         expect(columnsConfigurator.find(Checkbox).at(0).prop("checked")).toBe(true);
  61         expect(columnsConfigurator.find(Checkbox).at(1).prop("checked")).toBe(false);
  62         expect(columnsConfigurator.find(Checkbox).at(2).prop("checked")).toBe(true);
  63     });
  64
  65     it("calls onColumnToggle with clicked column", () => {
  66         const columns: DataColumns<void> = [
  67             {
  68                 name: "Column 1",
  69                 render: () => <span />,
  70                 selected: true
  71             }
  72         ];
  73         const onColumnToggle = jest.fn();
  74         const columnsConfigurator = mount(<ColumnSelector columns={columns} onColumnToggle={onColumnToggle} />);
  75         columnsConfigurator.find(ColumnSelectorTrigger).simulate("click");
  76         columnsConfigurator.find(ListItem).simulate("click");
  77         expect(onColumnToggle).toHaveBeenCalledWith(columns[0]);
  78     });
  79 });