src/views-components/search-bar/search-bar-view.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 { SearchBarView, DEFAULT_SEARCH_DEBOUNCE } from "./search-bar-view";
   8
   9 import * as Adapter from 'enzyme-adapter-react-16';
  10
  11
  12 configure({ adapter: new Adapter() });
  13
  14 describe("<SearchBarView />", () => {
  15
  16     jest.useFakeTimers();
  17
  18     let onSearch: () => void;
  19
  20     beforeEach(() => {
  21         onSearch = jest.fn();
  22     });
  23
  24     describe("on submit", () => {
  25         it("calls onSearch with current value", () => {
  26             const searchBar = mount(<SearchBarView onSearch={onSearch} value="current value" {...mockSearchProps()} />);
  27             searchBar.find("input").simulate("change", { target: { value: "current value" } });
  28             searchBar.find("form").simulate("submit");
  29             expect(onSearch).toBeCalledWith("current value");
  30         });
  31
  32         it("calls onSearch with new value passed via props", () => {
  33             const searchBar = mount(<SearchBarView onSearch={onSearch} value="current value" {...mockSearchProps()} />);
  34             searchBar.find("input").simulate("change", { target: { value: "new value" } });
  35             searchBar.setProps({ value: "new value" });
  36             searchBar.find("form").simulate("submit");
  37             expect(onSearch).toBeCalledWith("new value");
  38         });
  39
  40         it("cancels timeout set on input value change", () => {
  41             const searchBar = mount(<SearchBarView onSearch={onSearch} debounce={1000} value="current value" {...mockSearchProps()} />);
  42             searchBar.find("input").simulate("change", { target: { value: "current value" } });
  43             searchBar.find("form").simulate("submit");
  44             jest.runTimersToTime(1000);
  45             expect(onSearch).toHaveBeenCalledTimes(1);
  46             expect(onSearch).toBeCalledWith("current value");
  47         });
  48
  49     });
  50
  51     describe("on input value change", () => {
  52         it("calls onSearch after default timeout", () => {
  53             const searchBar = mount(<SearchBarView onSearch={onSearch} value="current value" {...mockSearchProps()} />);
  54             searchBar.find("input").simulate("change", { target: { value: "current value" } });
  55             expect(onSearch).not.toBeCalled();
  56             jest.runTimersToTime(DEFAULT_SEARCH_DEBOUNCE);
  57             expect(onSearch).toBeCalledWith("current value");
  58         });
  59
  60         it("calls onSearch after the time specified in props has passed", () => {
  61             const searchBar = mount(<SearchBarView onSearch={onSearch} value="current value" debounce={2000} {...mockSearchProps()} />);
  62             searchBar.find("input").simulate("change", { target: { value: "current value" } });
  63             jest.runTimersToTime(1000);
  64             expect(onSearch).not.toBeCalled();
  65             jest.runTimersToTime(1000);
  66             expect(onSearch).toBeCalledWith("current value");
  67         });
  68
  69         it("calls onSearch only once after no change happened during the specified time", () => {
  70             const searchBar = mount(<SearchBarView onSearch={onSearch} value="current value" debounce={1000} {...mockSearchProps()} />);
  71             searchBar.find("input").simulate("change", { target: { value: "current value" } });
  72             jest.runTimersToTime(500);
  73             searchBar.find("input").simulate("change", { target: { value: "changed value" } });
  74             jest.runTimersToTime(1000);
  75             expect(onSearch).toHaveBeenCalledTimes(1);
  76         });
  77
  78         it("calls onSearch again after the specified time has passed since previous call", () => {
  79             const searchBar = mount(<SearchBarView onSearch={onSearch} value="latest value" debounce={1000} {...mockSearchProps()} />);
  80             searchBar.find("input").simulate("change", { target: { value: "current value" } });
  81             jest.runTimersToTime(500);
  82             searchBar.find("input").simulate("change", { target: { value: "intermediate value" } });
  83             jest.runTimersToTime(1000);
  84             expect(onSearch).toBeCalledWith("intermediate value");
  85             searchBar.find("input").simulate("change", { target: { value: "latest value" } });
  86             jest.runTimersToTime(1000);
  87             expect(onSearch).toBeCalledWith("latest value");
  88             expect(onSearch).toHaveBeenCalledTimes(2);
  89
  90         });
  91     });
  92 });
  93
  94 const mockSearchProps = () => ({
  95     currentView: '',
  96     open: true,
  97     onSetView: jest.fn(),
  98     openView: jest.fn(),
  99     loseView: jest.fn(),
 100     closeView: jest.fn(),
 101     saveQuery: jest.fn(),
 102     loadQueries: () => ['test']
 103 });