services/workbench2/src/components/search-input/search-input.cy.js

   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     let WrappedComponent;
  14     let onSearch
  15
  16     beforeEach(() => {
  17         cy.clock();
  18         onSearch = cy.spy().as('onSearch');
  19         // Wrap the component to test it with props update
  20         WrappedComponent = ({ selfClearProp = '', textProp }) => {
  21             const [text, setText] = React.useState(textProp);
  22             const [selfClear, setSelfClear] = React.useState(selfClearProp);
  23
  24             window.updateProps = (newClear, newText) => {
  25                 setText(newText);
  26                 setSelfClear(newClear);
  27             };
  28
  29             return <SearchInput selfClearProp={selfClear} value={text} onSearch={onSearch} />;
  30         };
  31     });
  32
  33     describe("on submit", () => {
  34         it("calls onSearch with initial value passed via props", () => {
  35             cy.mount(<SearchInput selfClearProp="" value="initial value" onSearch={onSearch} />);
  36             cy.get('form').submit();
  37             cy.get('@onSearch').should('have.been.calledWith', 'initial value');
  38         });
  39
  40         it("calls onSearch with current value", () => {
  41             cy.mount(<SearchInput selfClearProp="" value="" onSearch={onSearch} />);
  42             cy.get('input').type('current value');
  43             cy.get('form').submit();
  44             cy.get('@onSearch').should('have.been.calledWith', 'current value');
  45         });
  46
  47         it("calls onSearch with new value passed via props", () => {
  48             cy.mount(<WrappedComponent />);
  49             cy.get('input').type('current value');
  50             //simulate change of props
  51             cy.window().then((win) => {
  52                 win.updateProps('', 'new value');
  53               });
  54             cy.get('form').submit();
  55             cy.get('@onSearch').should('have.been.calledWith', 'new value');
  56         });
  57
  58         it("cancels timeout set on input value change", () => {
  59             cy.mount(<SearchInput selfClearProp="" value="" onSearch={onSearch} debounce={1000} />);
  60             cy.get('input').type('current value');
  61             cy.get('form').submit();
  62             cy.get('@onSearch').should('have.been.calledOnce');
  63             cy.tick(1000)
  64             cy.get('@onSearch').should('have.been.calledOnce');
  65             cy.get('@onSearch').should('have.been.calledWith', 'current value');
  66         });
  67
  68     });
  69
  70     describe("on input value change", () => {
  71         it("calls onSearch after default timeout", () => {
  72             cy.mount(<SearchInput selfClearProp="" value="" onSearch={onSearch} />);
  73             cy.get('input').type('current value');
  74             cy.get('@onSearch').should('not.have.been.called');
  75             cy.tick(DEFAULT_SEARCH_DEBOUNCE);
  76             cy.get('@onSearch').should('have.been.calledWith', 'current value');
  77         });
  78
  79         it("calls onSearch after the time specified in props has passed", () => {
  80             cy.mount(<SearchInput selfClearProp="" value="" onSearch={onSearch} debounce={2000}/>);
  81             cy.get('input').type('current value');
  82             cy.tick(1000);
  83             cy.get('@onSearch').should('not.have.been.called');
  84             cy.tick(1000);
  85             cy.get('@onSearch').should('have.been.calledWith', 'current value');
  86         });
  87
  88         it("calls onSearch only once after no change happened during the specified time", () => {
  89             cy.mount(<SearchInput selfClearProp="" value="" onSearch={onSearch} debounce={1000}/>);
  90             cy.get('input').type('current value');
  91             cy.tick(500);
  92             cy.get('input').type('current value');
  93             cy.tick(1000);
  94             cy.get('@onSearch').should('have.been.calledOnce');
  95         });
  96
  97         it("calls onSearch again after the specified time has passed since previous call", () => {
  98             cy.mount(<SearchInput selfClearProp="" value="" onSearch={onSearch} debounce={1000}/>);
  99             cy.get('input').type('current value');
 100             cy.tick(500);
 101             cy.get('input').clear();
 102             cy.get('input').type('intermediate value');
 103             cy.tick(1000);
 104             cy.get('@onSearch').should('have.been.calledWith', 'intermediate value');
 105             cy.get('input').clear();
 106             cy.get('input').type('latest value');
 107             cy.tick(1000);
 108             cy.get('@onSearch').should('have.been.calledWith', 'latest value');
 109             cy.get('@onSearch').should('have.been.calledTwice');
 110
 111         });
 112
 113     });
 114
 115     describe("on input target change", () => {
 116         it("clears the input value on selfClearProp change", () => {
 117             cy.mount(<WrappedComponent selfClearProp="abc" />);
 118
 119             // component should clear value upon creation
 120             cy.tick(1000);
 121             cy.get('@onSearch').should('have.been.calledWith', '');
 122             cy.get('@onSearch').should('have.been.calledOnce');
 123
 124             // component should not clear on same selfClearProp
 125             cy.window().then((win) => {
 126                 win.updateProps('', 'abc');
 127               });
 128             cy.tick(1000);
 129             cy.get('@onSearch').should('have.been.called');
 130
 131             // component should clear on selfClearProp change
 132             cy.window().then((win) => {
 133                 win.updateProps('', '111');
 134               });
 135             // cy.get('@onSearch').should('have.been.calledOnce');
 136             cy.tick(1000);
 137             cy.get('@onSearch').should('have.been.calledWith', '');
 138             cy.get('@onSearch').should('have.been.calledTwice');
 139         });
 140     });
 141 });