react-spatial/components/SearchInput/SearchInput.test.js

Components to build React map apps.

import React from 'react';
import { configure, shallow, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import renderer from 'react-test-renderer';
import SearchInput from './SearchInput';

configure({ adapter: new Adapter() });

describe('SearchInput', function () {
  describe('when no properties are set', function () {
    var spy = null;

    beforeEach(function () {
      window.console.error = jest.fn().mockImplementation(function () {});
      spy = jest.spyOn(window.console, 'error');
    });

    afterEach(function () {
      spy.mockRestore();
      window.console.error.mockRestore();
    });

    test('displays 1 error for required property ', function () {
      shallow(React.createElement( SearchInput, null ));
      expect(spy).toHaveBeenCalledTimes(0);
    });

    test('matches snapshot', function () {
      var component = renderer.create(React.createElement( SearchInput, null ));
      var tree = component.toJSON();
      expect(tree).toMatchSnapshot();
    });

    test('calls default onBlurInput, onFocus, onKeyPress without errors.', function () {
      var wrapper = shallow(React.createElement( SearchInput, null ));
      wrapper
        .find('input')
        .first()
        .simulate('focus', {})
        .simulate('blur', {})
        .simulate('keydown', {})
        .simulate('keyup', {});
    });
  });

  describe('when properties are set', function () {
    test('matches snapshot ', function () {
      var component = renderer.create(
        React.createElement( SearchInput, {
          value: "bar", className: "tm-foo", placeholder: "gux", onBlur: function () {}, onKeyPress: function () {}, onChange: function () {} })
      );
      expect(component.getInstance().state.focus).toBe(false);
      expect(component.toJSON()).toMatchSnapshot();
      component.getInstance().setState({ focus: true });
      expect(component.getInstance().state.focus).toBe(true);
      expect(component.toJSON()).toMatchSnapshot();
    });

    test('matches snapshot when className is undefined ', function () {
      var component = renderer.create(React.createElement( SearchInput, { className: undefined }));
      expect(component.getInstance().state.focus).toBe(false);
      component.getInstance().setState({ focus: true });
      expect(component.getInstance().state.focus).toBe(true);
      expect(component.toJSON()).toMatchSnapshot();
    });

    test('calls onBlurInput, onFocus, onKeyPress properties.', function () {
      var fn = jest.fn();
      var wrapper = shallow(
        React.createElement( SearchInput, { onBlurInput: fn, onFocus: fn, onKeyPress: fn })
      );
      wrapper
        .find('input')
        .first()
        .simulate('focus', {})
        .simulate('blur', {})
        .simulate('keydown', {})
        .simulate('keyup', {});
      expect(fn).toHaveBeenCalledTimes(3);
    });

    test('searchs on input change event.', function () {
      var wrapper = shallow(React.createElement( SearchInput, null ));
      var spy = jest.spyOn(wrapper.instance(), 'search');
      var evt = {
        target: {
          value: 'foo',
        },
      };
      wrapper
        .find('input')
        .first()
        .simulate('change', evt);
      expect(spy).toHaveBeenCalledTimes(1);
      expect(spy).toHaveBeenCalledWith(evt, 'foo');
    });

    test('searchs with an empty string on click on cross button.', function () {
      var wrapper = shallow(React.createElement( SearchInput, null ));
      var spy = jest.spyOn(wrapper.instance(), 'search');
      var evt = {
        target: {
          value: 'foo',
        },
      };
      expect(wrapper.state('focus')).toBe(false);
      wrapper
        .find('Button')
        .first()
        .simulate('click', evt);
      expect(spy).toHaveBeenCalledTimes(1);
      expect(spy).toHaveBeenCalledWith(evt, '');
      expect(wrapper.state('focus')).toBe(true);
    });

    test('searchs on click on search button.', function () {
      var fn = jest.fn();
      var wrapper = shallow(React.createElement( SearchInput, { onClickSearchButton: fn }));
      var spy = jest.spyOn(wrapper.instance(), 'search');
      var evt = {
        target: {
          value: 'foo',
        },
      };
      wrapper
        .find('Button')
        .at(1)
        .simulate('click', evt);
      expect(spy).toHaveBeenCalledTimes(1);
      expect(spy).toHaveBeenCalledWith(evt);
      expect(fn).toHaveBeenCalledTimes(1);
    });

    test('searchs on enter key up.', function () {
      var wrapper = shallow(React.createElement( SearchInput, null ));
      var spy = jest.spyOn(wrapper.instance(), 'search');
      var evt = {
        which: 13,
      };
      wrapper.find('input').simulate('keyup', evt);
      expect(spy).toHaveBeenCalledTimes(1);
      expect(spy).toHaveBeenCalledWith(evt);
    });

    test('focuses the input on state change.', function () {
      var wrapper = mount(React.createElement( SearchInput, null ));
      expect(document.activeElement).toBe(document.body);
      expect(wrapper.state('focus')).toBe(false);
      wrapper.setState({
        focus: true,
      });
      wrapper.update();
      expect(wrapper.instance().refInput).toBeDefined();
      expect(document.activeElement).toBe(wrapper.instance().refInput);
    });
  });
});

//# sourceMappingURL=SearchInput.test.js.map