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

Components to build React map apps.

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

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

var defaultItems = [
  {
    label: 'foo',
  },
  {
    label: 'bar',
  },
  {
    label: 'foo2',
  } ];

var items = [
  {
    label: 'qux',
  },
  {
    label: 'quux',
  },
  {
    label: 'corge',
  } ];

var state = {
  showList: false,
};

var mountDflt = function () {
  return mount(
    React.createElement( Autocomplete, {
      value: "fooval", defaultItems: defaultItems, items: items, renderItem: function (item) { return item.label; }, getItemKey: function (item) { return item.label; } })
  );
};

describe('Autocomplete', 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('matches snapshot', function () {
      var component = renderer.create(React.createElement( Autocomplete, null ));
      var tree = component.toJSON();
      expect(tree).toMatchSnapshot();
    });
  });

  describe('when properties are set', function () {
    test('should match snapshot without items and defaultItems using defaultProps', function () {
      var component = renderer.create(React.createElement( Autocomplete, { value: "fooval" }));
      state.showList = true;
      component.root.instance.setState(state);
      var tree = component.toJSON();
      expect(tree).toMatchSnapshot();
    });

    test('should match snapshot without items and defaultItems', function () {
      var component = renderer.create(
        React.createElement( Autocomplete, {
          value: "fooval", renderTitle: function () { return 'my_foo_title'; }, renderItem: function (item) { return item.label; }, getItemKey: function () { return Math.random(); } })
      );
      state.showList = true;
      component.root.instance.setState(state);
      var tree = component.toJSON();
      expect(tree).toMatchSnapshot();
    });

    test('should match snapshot without defaultItems', function () {
      var component = renderer.create(
        React.createElement( Autocomplete, {
          value: "fooval", items: items, renderTitle: function () { return 'my_foo_title'; }, renderItem: function (item) { return item.label; }, getItemKey: function () { return Math.random(); } })
      );
      state.showList = true;
      component.root.instance.setState(state);
      var tree = component.toJSON();
      expect(tree).toMatchSnapshot();
    });

    test('should match snapshot without items', function () {
      var component = renderer.create(
        React.createElement( Autocomplete, {
          value: "fooval", defaultItems: defaultItems, renderTitle: function () { return 'my_foo_title'; }, renderItem: function (item) { return item.label; }, getItemKey: function () { return Math.random(); }, onSelect: function () {} })
      );
      state.showList = true;
      component.root.instance.setState(state);
      var tree = component.toJSON();
      expect(tree).toMatchSnapshot();
    });

    test('should match snapshot', function () {
      var component = renderer.create(
        React.createElement( Autocomplete, {
          value: "fooval", defaultItems: defaultItems, items: items, renderTitle: function () { return 'my_foo_title'; }, renderItem: function (item) { return item.label; }, getItemKey: function () { return Math.random(); }, onSelect: function () {} })
      );
      component.root.instance.setState(state);
      var tree = component.toJSON();
      expect(tree).toMatchSnapshot();
    });

    test('should match snapshot showing list', function () {
      var component = renderer.create(
        React.createElement( Autocomplete, {
          value: "fooval", defaultItems: defaultItems, items: items, renderTitle: function () { return 'my_foo_title'; }, renderItem: function (item) { return item.label; }, getItemKey: function () { return Math.random(); }, onSelect: function () {} })
      );
      state.showList = true;
      component.root.instance.setState(state);
      var tree = component.toJSON();
      expect(tree).toMatchSnapshot();
    });

    describe('#onDocClick()', function () {
      test('hide the list and removes the focus.', function () {
        var component = mountDflt();
        component.setState({
          showList: true,
          focus: true,
        });
        expect(component.state('showList')).toBe(true);
        expect(component.state('focus')).toBe(true);

        // Hide the list on click on document
        document.dispatchEvent(new Event('click'));
        expect(component.state('showList')).toBe(false);
        expect(component.state('focus')).toBe(false);
      });

      test('does nothing when click comes from ana element of Autocomplete.', function () {
        var component = mountDflt();
        component.setState({
          showList: true,
          focus: true,
        });
        expect(component.state('showList')).toBe(true);
        expect(component.state('focus')).toBe(true);
        component.instance().onDocClick({
          target: component
            .find('div')
            .at(0)
            .getDOMNode(),
        });
        expect(component.state('showList')).toBe(true);
        expect(component.state('focus')).toBe(true);
      });
    });

    describe('#onFocus()', function () {
      test('updates set showList state property to true', function () {
        var component = mountDflt();
        expect(component.state('showList')).toBe(false);
        expect(component.state('focus')).toBe(false);
        component.find('input').simulate('focus', { target: { value: '' } });
        expect(component.state('showList')).toBe(true);
        expect(component.state('focus')).toBe(true);

        // Hide the list on click on document
        document.dispatchEvent(new Event('click'));
        expect(component.state('showList')).toBe(false);

        // Verifies the listener is remove on unmount
        component.instance().onFocus({ target: { value: '' } });
        expect(component.state('showList')).toBe(true);
        component.instance().componentWillUnmount();
        document.dispatchEvent(new Event('click'));
        expect(component.state('showList')).toBe(true);
      });
    });

    describe('#onBlurInput()', function () {
      test('does nothing if no lastKeyPress parameter', function () {
        var component = mountDflt();
        component.setState({
          showList: true,
          focus: true,
        });
        expect(component.state('showList')).toBe(true);
        expect(component.state('focus')).toBe(true);
        component.find('input').simulate('blur');
        expect(component.state('showList')).toBe(true);
        expect(component.state('focus')).toBe(true);
      });

      test('hide list and renove focus if lastKeyPress is not an arrow down.', function () {
        var component = mountDflt();
        component.setState({
          showList: true,
          focus: true,
        });
        expect(component.state('showList')).toBe(true);
        expect(component.state('focus')).toBe(true);
        component.instance().onBlurInput({}, { which: 41 });
        expect(component.state('showList')).toBe(false);
        expect(component.state('focus')).toBe(false);
      });
    });

    describe('#onKeyPress()', function () {
      test('gives focus to the first element of the list', function () {
        var component = mountDflt();
        component.find('input').simulate('keyup', { which: 40 });
        var li = component.find('li').at(0);
        expect(li.getDOMNode()).toBe(document.activeElement);
      });

      test("doesn't give focus to the first element of the list", function () {
        var component = mountDflt();
        component.find('input').simulate('keyup', { which: 41 });
        var li = component.find('li').at(0);
        expect(li.getDOMNode()).not.toBe(document.activeElement);
      });
    });

    describe('#onKeyPressItem()', function () {
      test('does nothing when another key than arrows is pressed.', function () {
        var component = mountDflt();
        var li = component.find('li').at(1);
        li.getDOMNode().focus();
        li.simulate('keydown', { which: 39 });
        expect(li.getDOMNode()).toBe(document.activeElement);
      });

      test('moves focus to search input.', function () {
        var component = mountDflt();
        var li = component.find('li').at(0);
        li.getDOMNode().focus();
        li.simulate('keydown', { which: 38 });
        expect(component.find('input').getDOMNode()).toBe(
          document.activeElement
        );
      });

      test('moves focus to previous item.', function () {
        var component = mountDflt();
        var lis = component.find('li');
        var li = lis.at(1);
        li.getDOMNode().focus();
        li.simulate('keydown', { which: 38 });
        expect(lis.at(0).getDOMNode()).toBe(document.activeElement);
      });

      test('moves focus to next item.', function () {
        var component = mountDflt();
        var lis = component.find('li');
        var li = lis.at(1);
        li.getDOMNode().focus();
        li.simulate('keydown', { which: 40 });
        expect(lis.at(2).getDOMNode()).toBe(document.activeElement);
      });

      test('moves focus to default items.', function () {
        var component = mountDflt();
        var lis = component.find('li');
        var li = lis.at(2);
        li.getDOMNode().focus();
        li.simulate('keydown', { which: 40 });
        expect(lis.at(3).getDOMNode()).toBe(document.activeElement);
      });

      test('moves focus to the beginning of the list.', function () {
        var component = mountDflt();
        var lis = component.find('li');
        var li = lis.at(5);
        li.getDOMNode().focus();
        li.simulate('keydown', { which: 40 });
        expect(lis.at(0).getDOMNode()).toBe(document.activeElement);
      });
    });

    describe('#onSelect()', function () {
      test('hide list and remove focus when select an item.', function () {
        var fn = jest.fn();
        var component = mount(
          React.createElement( Autocomplete, {
            value: "fooval", defaultItems: defaultItems, items: items, renderItem: function (item) { return item.label; }, getItemKey: function (item) { return item.label; }, onSelect: fn })
        );
        component.setState({
          showList: true,
          focus: true,
        });
        expect(component.state('showList')).toBe(true);
        expect(component.state('focus')).toBe(true);
        component
          .find('li')
          .at(0)
          .simulate('click', {});
        expect(component.state('showList')).toBe(false);
        expect(component.state('focus')).toBe(false);
        expect(fn).toBeCalledTimes(1);
      });

      test('hide list and remove focus when select on default item.', function () {
        var fn = jest.fn();
        var component = mount(
          React.createElement( Autocomplete, {
            value: "fooval", defaultItems: defaultItems, items: items, renderItem: function (item) { return item.label; }, getItemKey: function (item) { return item.label; }, onSelect: fn })
        );
        component.setState({
          showList: true,
          focus: true,
        });
        expect(component.state('showList')).toBe(true);
        expect(component.state('focus')).toBe(true);
        component
          .find('li')
          .at(4)
          .simulate('click', {});
        expect(component.state('showList')).toBe(false);
        expect(component.state('focus')).toBe(false);
        expect(fn).toBeCalledTimes(1);
      });
    });

    describe('#onChange()', function () {
      test('gives focus to the input and display the list.', function () {
        var fn = jest.fn();
        var component = mount(
          React.createElement( Autocomplete, {
            value: "fooval", defaultItems: defaultItems, items: items, renderItem: function (item) { return item.label; }, getItemKey: function (item) { return item.label; }, onChange: fn })
        );
        expect(component.state('showList')).toBe(false);
        expect(component.state('focus')).toBe(false);
        component.find('input').simulate('change', {});
        expect(component.state('showList')).toBe(true);
        expect(component.state('focus')).toBe(true);
        expect(fn).toBeCalledTimes(1);
      });
    });

    test('hides the list on click on search button if the list is open.', function () {
      var component = mountDflt();
      component.setState({
        showList: true,
        focus: true,
      });
      expect(component.state('showList')).toBe(true);
      expect(component.state('focus')).toBe(true);
      component
        .find('[role="button"]')
        .at(1)
        .simulate('click', {});
      expect(component.state('showList')).toBe(false);
      expect(component.state('focus')).toBe(false);
    });
  });
});

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