src/components/data-table-filters/data-table-filters.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 { DataTableFilters } from "./data-table-filters";
   8 import * as Adapter from 'enzyme-adapter-react-16';
   9 import { Checkbox, ButtonBase, ListItem, Button, ListItemText } from "@material-ui/core";
  10
  11 configure({ adapter: new Adapter() });
  12
  13 describe("<DataTableFilter />", () => {
  14     it("renders filters according to their state", () => {
  15         const filters = [{
  16             name: "Filter 1",
  17             selected: true
  18         }, {
  19             name: "Filter 2",
  20             selected: false
  21         }];
  22         const dataTableFilter = mount(<DataTableFilters name="" filters={filters} />);
  23         dataTableFilter.find(ButtonBase).simulate("click");
  24         expect(dataTableFilter.find(Checkbox).at(0).prop("checked")).toBeTruthy();
  25         expect(dataTableFilter.find(Checkbox).at(1).prop("checked")).toBeFalsy();
  26     });
  27
  28     it("updates filters after filters prop change", () => {
  29         const filters = [{
  30             name: "Filter 1",
  31             selected: true
  32         }];
  33         const updatedFilters = [, {
  34             name: "Filter 2",
  35             selected: true
  36         }];
  37         const dataTableFilter = mount(<DataTableFilters name="" filters={filters} />);
  38         dataTableFilter.find(ButtonBase).simulate("click");
  39         expect(dataTableFilter.find(Checkbox).prop("checked")).toBeTruthy();
  40         dataTableFilter.find(ListItem).simulate("click");
  41         expect(dataTableFilter.find(Checkbox).prop("checked")).toBeFalsy();
  42         dataTableFilter.setProps({filters: updatedFilters});
  43         expect(dataTableFilter.find(Checkbox).prop("checked")).toBeTruthy();
  44         expect(dataTableFilter.find(ListItemText).text()).toBe("Filter 2");
  45     });
  46
  47     it("calls onChange with modified list of filters", () => {
  48         const filters = [{
  49             name: "Filter 1",
  50             selected: true
  51         }, {
  52             name: "Filter 2",
  53             selected: false
  54         }];
  55         const onChange = jest.fn();
  56         const dataTableFilter = mount(<DataTableFilters name="" filters={filters} onChange={onChange} />);
  57         dataTableFilter.find(ButtonBase).simulate("click");
  58         dataTableFilter.find(ListItem).at(1).simulate("click");
  59         dataTableFilter.find(Button).at(0).simulate("click");
  60         expect(onChange).toHaveBeenCalledWith([{
  61             name: "Filter 1",
  62             selected: true
  63         }, {
  64             name: "Filter 2",
  65             selected: true
  66         }]);
  67     });
  68 });