src/components/search-input/search-input.test.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from "react";
   6 import { mount, configure } from "enzyme";
   7 import { SearchInput, DEFAULT_SEARCH_DEBOUNCE } from "./search-input";
   8 import Adapter from 'enzyme-adapter-react-16';
   9
  10 configure({ adapter: new Adapter() });
  11
  12 describe("<SearchInput />", () => {
  13
  14     jest.useFakeTimers();
  15
  16     let onSearch: () => void;
  17
  18     beforeEach(() => {
  19         onSearch = jest.fn();
  20     });
  21
  22     describe("on submit", () => {
  23         it("calls onSearch with initial value passed via props", () => {
  24             const searchInput = mount(<SearchInput selfClearProp="" value="initial value" onSearch={onSearch} />);
  25             searchInput.find("form").simulate("submit");
  26             expect(onSearch).toBeCalledWith("initial value");
  27         });
  28
  29         it("calls onSearch with current value", () => {
  30             const searchInput = mount(<SearchInput selfClearProp="" value="" onSearch={onSearch} />);
  31             searchInput.find("input").simulate("change", { target: { value: "current value" } });
  32             searchInput.find("form").simulate("submit");
  33             expect(onSearch).toBeCalledWith("current value");
  34         });
  35
  36         it("calls onSearch with new value passed via props", () => {
  37             const searchInput = mount(<SearchInput selfClearProp="" value="" onSearch={onSearch} />);
  38             searchInput.find("input").simulate("change", { target: { value: "current value" } });
  39             searchInput.setProps({value: "new value"});
  40             searchInput.find("form").simulate("submit");
  41             expect(onSearch).toBeCalledWith("new value");
  42         });
  43
  44         it("cancels timeout set on input value change", () => {
  45             const searchInput = mount(<SearchInput selfClearProp="" value="" onSearch={onSearch} debounce={1000} />);
  46             searchInput.find("input").simulate("change", { target: { value: "current value" } });
  47             searchInput.find("form").simulate("submit");
  48             jest.runTimersToTime(1000);
  49             expect(onSearch).toHaveBeenCalledTimes(1);
  50             expect(onSearch).toBeCalledWith("current value");
  51         });
  52
  53     });
  54
  55     describe("on input value change", () => {
  56         it("calls onSearch after default timeout", () => {
  57             const searchInput = mount(<SearchInput selfClearProp="" value="" onSearch={onSearch} />);
  58             searchInput.find("input").simulate("change", { target: { value: "current value" } });
  59             expect(onSearch).not.toBeCalled();
  60             jest.runTimersToTime(DEFAULT_SEARCH_DEBOUNCE);
  61             expect(onSearch).toBeCalledWith("current value");
  62         });
  63
  64         it("calls onSearch after the time specified in props has passed", () => {
  65             const searchInput = mount(<SearchInput selfClearProp="" value="" onSearch={onSearch} debounce={2000}/>);
  66             searchInput.find("input").simulate("change", { target: { value: "current value" } });
  67             jest.runTimersToTime(1000);
  68             expect(onSearch).not.toBeCalled();
  69             jest.runTimersToTime(1000);
  70             expect(onSearch).toBeCalledWith("current value");
  71         });
  72
  73         it("calls onSearch only once after no change happened during the specified time", () => {
  74             const searchInput = mount(<SearchInput selfClearProp="" value="" onSearch={onSearch} debounce={1000}/>);
  75             searchInput.find("input").simulate("change", { target: { value: "current value" } });
  76             jest.runTimersToTime(500);
  77             searchInput.find("input").simulate("change", { target: { value: "changed value" } });
  78             jest.runTimersToTime(1000);
  79             expect(onSearch).toHaveBeenCalledTimes(1);
  80         });
  81
  82         it("calls onSearch again after the specified time has passed since previous call", () => {
  83             const searchInput = mount(<SearchInput selfClearProp="" value="" onSearch={onSearch} debounce={1000}/>);
  84             searchInput.find("input").simulate("change", { target: { value: "current value" } });
  85             jest.runTimersToTime(500);
  86             searchInput.find("input").simulate("change", { target: { value: "intermediate value" } });
  87             jest.runTimersToTime(1000);
  88             expect(onSearch).toBeCalledWith("intermediate value");
  89             searchInput.find("input").simulate("change", { target: { value: "latest value" } });
  90             jest.runTimersToTime(1000);
  91             expect(onSearch).toBeCalledWith("latest value");
  92             expect(onSearch).toHaveBeenCalledTimes(2);
  93
  94         });
  95
  96     });
  97
  98     describe("on input target change", () => {
  99         it("clears the input value on selfClearProp change", () => {
 100             const searchInput = mount(<SearchInput selfClearProp="abc" value="123" onSearch={onSearch} debounce={1000}/>);
 101
 102             // component should clear value upon creation
 103             jest.runTimersToTime(1000);
 104             expect(onSearch).toBeCalledWith("");
 105             expect(onSearch).toHaveBeenCalledTimes(1);
 106
 107             // component should not clear on same selfClearProp
 108             searchInput.setProps({ selfClearProp: 'abc' });
 109             jest.runTimersToTime(1000);
 110             expect(onSearch).toHaveBeenCalledTimes(1);
 111
 112             // component should clear on selfClearProp change
 113             searchInput.setProps({ selfClearProp: '111' });
 114             jest.runTimersToTime(1000);
 115             expect(onSearch).toBeCalledWith("");
 116             expect(onSearch).toHaveBeenCalledTimes(2);
 117         });
 118     });
 119 });