wix-style-react/dist/src/InputWithOptions/InputWithOptions.spec.js

wix-style-react

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _testUtils = require('react-dom/test-utils');

var _testUtils2 = _interopRequireDefault(_testUtils);

var _enzyme = require('enzyme');

var _InputWithOptions2 = require('./InputWithOptions.driver');

var _InputWithOptions3 = _interopRequireDefault(_InputWithOptions2);

var _InputWithOptions4 = require('./InputWithOptions');

var _InputWithOptions5 = _interopRequireDefault(_InputWithOptions4);

var _driverFactory = require('wix-ui-test-utils/driver-factory');

var _utils = require('../../test/utils');

var _testkit = require('../../testkit');

var _enzyme2 = require('../../testkit/enzyme');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

describe('InputWithOptions', function () {
  var ControlledInputWithOptions = (0, _utils.makeControlled)(_InputWithOptions5.default);

  var createDriver = (0, _driverFactory.createDriverFactory)(_InputWithOptions3.default);

  var options = [{ id: 0, value: 'Option 1' }, { id: 1, value: 'Option 2' }, { id: 2, value: 'Option 3', disabled: true }, { id: 3, value: 'Option 4' }, { id: 'divider1', value: '-' }, {
    id: 'element1',
    value: _react2.default.createElement(
      'span',
      { style: { color: 'brown' } },
      'Option 4'
    )
  }];

  it('should NOT show dropdown when autofocus is on', function () {
    var _createDriver = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options, autoFocus: true })),
        inputDriver = _createDriver.inputDriver,
        dropdownLayoutDriver = _createDriver.dropdownLayoutDriver;

    expect(inputDriver.isFocus()).toBeTruthy();
    expect(dropdownLayoutDriver.isShown()).toBeFalsy();
  });

  it('should have an Input and an hidden DropdownLayout', function () {
    var _createDriver2 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options })),
        inputDriver = _createDriver2.inputDriver,
        dropdownLayoutDriver = _createDriver2.dropdownLayoutDriver;

    expect(inputDriver.exists()).toBeTruthy();
    expect(dropdownLayoutDriver.exists()).toBeTruthy();
    expect(dropdownLayoutDriver.isShown()).toBeFalsy();
  });

  it('should show DropdownLayout when input get focused', function () {
    var _createDriver3 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options })),
        driver = _createDriver3.driver,
        dropdownLayoutDriver = _createDriver3.dropdownLayoutDriver;

    driver.focus();
    expect(dropdownLayoutDriver.isShown()).toBeFalsy();
  });

  describe('showOptionsIfEmptyInput property', function () {
    describe('show options if input is empty (default behaviour)', function () {
      it('should show DropdownLayout if input is empty and down arrow pressed', function () {
        var _createDriver4 = createDriver(_react2.default.createElement(ControlledInputWithOptions, {
          showOptionsIfEmptyInput: true,
          options: options
        })),
            driver = _createDriver4.driver,
            dropdownLayoutDriver = _createDriver4.dropdownLayoutDriver;

        driver.pressKey('ArrowDown');
        expect(dropdownLayoutDriver.isShown()).toBe(true);
      });
    });

    describe('do not show options if input is empty', function () {
      it('should not show DropdownLayout if input is empty and focused', function () {
        var _createDriver5 = createDriver(_react2.default.createElement(ControlledInputWithOptions, {
          showOptionsIfEmptyInput: false,
          options: options
        })),
            driver = _createDriver5.driver,
            dropdownLayoutDriver = _createDriver5.dropdownLayoutDriver;

        driver.pressKey('ArrowDown');
        expect(dropdownLayoutDriver.isShown()).toBe(false);
      });

      it('should show DropdownLayout if initial value passed and input focused', function () {
        var _createDriver6 = createDriver(_react2.default.createElement(ControlledInputWithOptions, {
          showOptionsIfEmptyInput: false,
          value: options[0].value,
          options: options
        })),
            driver = _createDriver6.driver,
            dropdownLayoutDriver = _createDriver6.dropdownLayoutDriver;

        expect(dropdownLayoutDriver.isShown()).toBe(false);
        driver.pressKey('ArrowDown');
        expect(dropdownLayoutDriver.isShown()).toBe(true);
      });

      it('should show DropdownLayout if text was entered', function () {
        var driver = createDriver(_react2.default.createElement(ControlledInputWithOptions, {
          showOptionsIfEmptyInput: false,
          options: options
        }));

        expect(driver.dropdownLayoutDriver.isShown()).toBe(false);
        driver.inputDriver.focus();
        expect(driver.dropdownLayoutDriver.isShown()).toBe(false);
        driver.inputDriver.enterText('some value');
        expect(driver.dropdownLayoutDriver.isShown()).toBe(true);
      });

      it('should not show DropdownLayout if input was emptied', function () {
        var driver = createDriver(_react2.default.createElement(ControlledInputWithOptions, {
          showOptionsIfEmptyInput: false,
          options: options
        }));

        driver.inputDriver.enterText('some value');
        driver.inputDriver.clearText();
        expect(driver.dropdownLayoutDriver.isShown()).toBe(false);
      });

      it('should not show DropdownLayout if input is empty and no char was produced by keypress', function () {
        var driver = createDriver(_react2.default.createElement(ControlledInputWithOptions, {
          showOptionsIfEmptyInput: false,
          options: options
        }));

        driver.inputDriver.trigger('keyDown', {
          key: 37 // <Left Arrow> key code
        });
        expect(driver.dropdownLayoutDriver.isShown()).toBe(false);
      });

      it('should hide options on option select', function () {
        var driver = createDriver(_react2.default.createElement(ControlledInputWithOptions, {
          value: 'some value',
          showOptionsIfEmptyInput: false,
          options: options,
          closeOnSelect: true,
          onSelect: function onSelect(option) {
            this.setState({ value: option.value });
          }
        }));

        driver.inputDriver.focus();
        driver.dropdownLayoutDriver.clickAtOption(0);
        expect(driver.dropdownLayoutDriver.isShown()).toBe(false);
      });
    });
  });

  it('should not show DropdownLayout when a non whitelisted key is pressed', function () {
    var _createDriver7 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options })),
        driver = _createDriver7.driver,
        dropdownLayoutDriver = _createDriver7.dropdownLayoutDriver;

    driver.pressKey('Any');
    expect(dropdownLayoutDriver.isShown()).toBeFalsy();
  });

  it('should show DropdownLayout on down key', function () {
    var _createDriver8 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options })),
        driver = _createDriver8.driver,
        dropdownLayoutDriver = _createDriver8.dropdownLayoutDriver;

    driver.pressKey('ArrowDown');
    expect(dropdownLayoutDriver.isShown()).toBeTruthy();
  });

  it('should not show DropdownLayout on modifier keys', function () {
    var _createDriver9 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options })),
        driver = _createDriver9.driver,
        dropdownLayoutDriver = _createDriver9.dropdownLayoutDriver;

    driver.pressKey('Shift');
    expect(dropdownLayoutDriver.isShown()).toBeFalsy();
    driver.pressKey('Alt');
    expect(dropdownLayoutDriver.isShown()).toBeFalsy();
    driver.pressKey('Control');
    expect(dropdownLayoutDriver.isShown()).toBeFalsy();
  });

  it('should hide DropdownLayout on enter and esc key press', function () {
    var _createDriver10 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options })),
        driver = _createDriver10.driver,
        dropdownLayoutDriver = _createDriver10.dropdownLayoutDriver;

    driver.pressKey('ArrowDown');
    expect(dropdownLayoutDriver.isShown()).toBeTruthy();
    driver.pressKey('Enter');
    expect(dropdownLayoutDriver.isShown()).toBeFalsy();
    driver.pressKey('Escape');
    expect(dropdownLayoutDriver.isShown()).toBeFalsy();
  });

  it('should start keyboard navigation from last selected option when re-opening the dropdown layout', function () {
    var _createDriver11 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options, selectedId: 1 })),
        driver = _createDriver11.driver,
        dropdownLayoutDriver = _createDriver11.dropdownLayoutDriver;

    driver.focus();

    dropdownLayoutDriver.clickAtOption(1);
    driver.outsideClick();
    driver.focus();
    driver.pressKey('ArrowDown');

    expect(dropdownLayoutDriver.isOptionSelected(1)).toBeTruthy();

    driver.pressKey('ArrowDown'); // going to skip disabled option at index 2
    expect(dropdownLayoutDriver.isOptionHovered(3)).toBeTruthy();
  });

  it('should call onManuallyInput on enter key press with a trimed value', function () {
    var onManuallyInput = jest.fn();

    var _createDriver12 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options, onManuallyInput: onManuallyInput })),
        driver = _createDriver12.driver,
        inputDriver = _createDriver12.inputDriver;

    inputDriver.enterText('my text      ');
    driver.pressKey('Enter');
    expect(onManuallyInput).toBeCalledWith('my text', undefined);
  });

  it('should call onManuallyInput on enter key press', function () {
    var onManuallyInput = jest.fn();

    var _createDriver13 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options, onManuallyInput: onManuallyInput })),
        driver = _createDriver13.driver,
        inputDriver = _createDriver13.inputDriver;

    inputDriver.enterText('my text');
    driver.pressKey('Enter');
    expect(onManuallyInput).toBeCalledWith('my text', undefined);
  });

  it('should call onManuallyInput on tab key press', function () {
    var onManuallyInput = jest.fn();

    var _createDriver14 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options, onManuallyInput: onManuallyInput })),
        driver = _createDriver14.driver,
        inputDriver = _createDriver14.inputDriver;

    inputDriver.enterText('my text');
    driver.pressKey('Tab');
    expect(onManuallyInput).toBeCalledWith('my text', undefined);
  });

  it('should close dropdown on press tab key', function () {
    var onManuallyInput = jest.fn();

    var _createDriver15 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options, onManuallyInput: onManuallyInput })),
        driver = _createDriver15.driver,
        inputDriver = _createDriver15.inputDriver,
        dropdownLayoutDriver = _createDriver15.dropdownLayoutDriver;

    inputDriver.focus();
    driver.pressKey('ArrowDown');
    expect(inputDriver.isFocus()).toBe(true);
    expect(dropdownLayoutDriver.isShown()).toBe(true);
    driver.pressKey('Tab');
    // todo: jest limitation of mimicking native Tab browser behaviour
    // expect(inputDriver.isFocus()).toBe(false);
    expect(dropdownLayoutDriver.isShown()).toBe(false);
  });

  it('should open options when clicked', function () {
    var _createDriver16 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options })),
        inputDriver = _createDriver16.inputDriver,
        dropdownLayoutDriver = _createDriver16.dropdownLayoutDriver;

    expect(dropdownLayoutDriver.isShown()).toBe(false);
    inputDriver.click();
    expect(dropdownLayoutDriver.isShown()).toBe(true);
  });

  it('should NOT close options when input clicked before 2 seconds passed from last opening', function () {
    var _createDriver17 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options })),
        inputDriver = _createDriver17.inputDriver,
        dropdownLayoutDriver = _createDriver17.dropdownLayoutDriver;

    var originalNow = Date.now;

    Date.now = function () {
      return 0;
    };
    inputDriver.click();
    expect(dropdownLayoutDriver.isShown()).toBe(true);

    Date.now = function () {
      return 1500;
    };
    inputDriver.click();
    expect(dropdownLayoutDriver.isShown()).toBe(true);

    Date.now = originalNow;
  });

  it('should close options when input clicked after 2 seconds from last opening', function () {
    var _createDriver18 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options })),
        inputDriver = _createDriver18.inputDriver,
        dropdownLayoutDriver = _createDriver18.dropdownLayoutDriver;

    var originalNow = Date.now;

    Date.now = function () {
      return 0;
    };
    inputDriver.click();
    expect(dropdownLayoutDriver.isShown()).toBe(true);

    Date.now = function () {
      return 2500;
    };
    inputDriver.click();
    expect(dropdownLayoutDriver.isShown()).toBe(false);

    Date.now = originalNow;
  });

  it('should stay focused on tab key press with closeOnSelect=false', function () {
    var onManuallyInput = jest.fn();

    var _createDriver19 = createDriver(_react2.default.createElement(_InputWithOptions5.default, {
      options: options,
      onManuallyInput: onManuallyInput,
      closeOnSelect: false
    })),
        driver = _createDriver19.driver,
        inputDriver = _createDriver19.inputDriver,
        dropdownLayoutDriver = _createDriver19.dropdownLayoutDriver;

    inputDriver.focus();
    inputDriver.enterText('Option 1');
    driver.pressKey('ArrowDown');
    expect(inputDriver.isFocus()).toBe(true);
    driver.pressKey('Tab');
    expect(inputDriver.isFocus()).toBe(true);
    expect(dropdownLayoutDriver.isShown()).toBe(true);
  });

  it('should suggest an option when calling onManuallyInput', function () {
    var onManuallyInput = jest.fn();

    var _createDriver20 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options, onManuallyInput: onManuallyInput })),
        driver = _createDriver20.driver,
        inputDriver = _createDriver20.inputDriver;

    inputDriver.enterText('Option 2');
    driver.pressKey('Enter');
    expect(onManuallyInput).toBeCalledWith('Option 2', {
      id: 1,
      value: 'Option 2'
    });
  });

  it('should hide options on selection by default', function () {
    var _createDriver21 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options })),
        driver = _createDriver21.driver,
        dropdownLayoutDriver = _createDriver21.dropdownLayoutDriver;

    driver.focus();
    dropdownLayoutDriver.clickAtOption(0);
    expect(dropdownLayoutDriver.isShown()).toBeFalsy();
  });

  it('should hide options on outside click', function () {
    var _createDriver22 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options })),
        driver = _createDriver22.driver,
        dropdownLayoutDriver = _createDriver22.dropdownLayoutDriver;

    driver.outsideClick();
    expect(dropdownLayoutDriver.isShown()).toBeFalsy();
  });

  it('should not hide options on selection', function () {
    var _createDriver23 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options, closeOnSelect: false })),
        driver = _createDriver23.driver,
        dropdownLayoutDriver = _createDriver23.dropdownLayoutDriver;

    driver.focus();
    dropdownLayoutDriver.clickAtOption(0);
    expect(dropdownLayoutDriver.isShown()).toBeTruthy();
  });

  it('should call onSelect when an option is pressed', function () {
    var onSelect = jest.fn();

    var _createDriver24 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options, onSelect: onSelect })),
        driver = _createDriver24.driver,
        dropdownLayoutDriver = _createDriver24.dropdownLayoutDriver;

    driver.focus();
    dropdownLayoutDriver.clickAtOption(0);
    expect(onSelect).toBeCalledWith(options[0]);
  });

  it('should call onSelect when a selected option is pressed', function () {
    var onSelect = jest.fn();

    var _createDriver25 = createDriver(_react2.default.createElement(_InputWithOptions5.default, {
      options: options,
      onSelect: onSelect,
      selectedId: options[0].id
    })),
        driver = _createDriver25.driver,
        dropdownLayoutDriver = _createDriver25.dropdownLayoutDriver;

    driver.focus();
    dropdownLayoutDriver.clickAtOption(0);
    expect(onSelect).toBeCalled();
  });

  it('should call onFocus', function () {
    var onFocus = jest.fn();

    var _createDriver26 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options, onFocus: onFocus })),
        driver = _createDriver26.driver;

    driver.focus();
    expect(onFocus).toBeCalled();
  });

  it('should call onBlur if clicked outside and input is focused', function () {
    var onBlur = jest.fn();

    var _createDriver27 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options, onBlur: onBlur })),
        driver = _createDriver27.driver,
        inputDriver = _createDriver27.inputDriver;

    driver.outsideClick();
    expect(onBlur).not.toBeCalled();
    driver.focus();
    driver.outsideClick();
    inputDriver.blur(); // apparently, jsdom does not fire onBlur after input.blur() is called
    expect(onBlur).toBeCalled();
  });

  it('should not call onManuallyInput when composing text via external means', function () {
    var onManualInput = jest.fn();

    var _createDriver28 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options, onManuallyInput: onManualInput })),
        driver = _createDriver28.driver,
        inputDriver = _createDriver28.inputDriver;

    inputDriver.startComposing();
    driver.pressKey('Enter');
    expect(onManualInput).not.toBeCalled();
    inputDriver.endComposing();
    driver.pressKey('Enter');
    expect(onManualInput).toBeCalled();
  });

  it('should wrap all options to highlighter component if prop highlight true', function () {
    var _createDriver29 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options, highlight: true })),
        driver = _createDriver29.driver;

    expect(driver.isOptionWrappedToHighlighter(options[0].id)).toBeTruthy();
  });

  it('should not wrap all options to highlighter component if prop highlight false', function () {
    var _createDriver30 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options, highlight: false })),
        driver = _createDriver30.driver;

    expect(driver.isOptionWrappedToHighlighter(options[0].id)).toBeFalsy();
  });

  // TODO
  it.skip('should change input value when an option is pressed', function () {
    var driver = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options }));
    driver.inputDriver.focus();

    var OPTION_INDEX = 0;
    driver.dropdownLayoutDriver.clickAtOption(OPTION_INDEX);
    expect(driver.inputDriver.getValue()).toBe(options[OPTION_INDEX].value);
  });

  // TODO
  it.skip('should invoke onChange with proper event object when an option is pressed', function () {
    var onChange = jest.fn();
    var driver = createDriver(_react2.default.createElement(_InputWithOptions5.default, {
      options: options,
      value: 'some value',
      onChange: onChange
    }));
    driver.inputDriver.focus();

    var OPTION_INDEX = 0;
    driver.dropdownLayoutDriver.clickAtOption(OPTION_INDEX);
    expect(onChange).toBeCalled();
    expect(onChange.mock.calls[0][0].target.value).toBe(options[OPTION_INDEX].value);
  });

  it('should support autocomplete prop', function () {
    var _createDriver31 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { autocomplete: 'off' })),
        inputDriver = _createDriver31.inputDriver;

    expect(inputDriver.getAutocomplete()).toBe('off');
  });

  it('should support tabIndex prop', function () {
    var _createDriver32 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { tabIndex: -1 })),
        dropdownLayoutDriver = _createDriver32.dropdownLayoutDriver;

    expect(dropdownLayoutDriver.tabIndex()).toBe(-1);
  });

  it('should support required prop', function () {
    var _createDriver33 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { required: true })),
        inputDriver = _createDriver33.inputDriver;

    expect(inputDriver.getRequired()).toBeTruthy();
  });

  it('should support a divider option', function () {
    var _createDriver34 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options })),
        dropdownLayoutDriver = _createDriver34.dropdownLayoutDriver;

    expect(dropdownLayoutDriver.isOptionADivider(4)).toBeTruthy();
  });

  describe('onKeyArrowDown', function () {
    it('should behave normal when external onKeyArrowDown passed', function () {
      var _createDriver35 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options, onKeyArrowDown: function onKeyArrowDown() {
          return null;
        } })),
          driver = _createDriver35.driver,
          dropdownLayoutDriver = _createDriver35.dropdownLayoutDriver;

      driver.pressKey('ArrowDown');
      expect(dropdownLayoutDriver.isShown()).toBeTruthy();
      driver.pressKey('Enter');
      expect(dropdownLayoutDriver.isShown()).toBeFalsy();
      driver.pressKey('Escape');
      expect(dropdownLayoutDriver.isShown()).toBeFalsy();
    });
  });

  describe('onSelect', function () {
    it('should call onSelect on enter key press', function () {
      var onSelect = jest.fn();

      var _createDriver36 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options, onSelect: onSelect })),
          driver = _createDriver36.driver;

      driver.pressKey('ArrowDown');
      driver.pressKey('ArrowDown');
      driver.pressKey('Enter');
      expect(onSelect).toBeCalledWith(options[0]);
    });

    it('should call onSelect on tab key press', function () {
      var onSelect = jest.fn();

      var _createDriver37 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options, onSelect: onSelect })),
          driver = _createDriver37.driver;

      driver.pressKey('ArrowDown');
      driver.pressKey('ArrowDown');
      driver.pressKey('Tab');
      expect(onSelect).toBeCalledWith(options[0]);
    });

    it('should not call onSelect on space key press', function () {
      var onSelect = jest.fn();

      var _createDriver38 = createDriver(_react2.default.createElement(_InputWithOptions5.default, { options: options, onSelect: onSelect })),
          driver = _createDriver38.driver;

      driver.focus();
      driver.pressKey('ArrowDown');
      driver.pressKey(' ');
      expect(onSelect).not.toHaveBeenCalled();
    });

    it('should call onSelect on space key press in readOnly mode', function () {
      var onSelect = jest.fn();

      var ReadOnlyInput = function (_InputWithOptions) {
        _inherits(ReadOnlyInput, _InputWithOptions);

        function ReadOnlyInput() {
          var _ref;

          var _temp, _this, _ret;

          _classCallCheck(this, ReadOnlyInput);

          for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
            args[_key] = arguments[_key];
          }

          return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ReadOnlyInput.__proto__ || Object.getPrototypeOf(ReadOnlyInput)).call.apply(_ref, [this].concat(args))), _this), _this.inputAdditionalProps = function () {
            return { readOnly: true };
          }, _temp), _possibleConstructorReturn(_this, _ret);
        }

        return ReadOnlyInput;
      }(_InputWithOptions5.default);

      var _createDriver39 = createDriver(_react2.default.createElement(ReadOnlyInput, { options: options, onSelect: onSelect })),
          driver = _createDriver39.driver;

      driver.pressKey('ArrowDown');
      driver.pressKey('ArrowDown');
      driver.pressKey(' ');
      expect(onSelect).toBeCalledWith(options[0]);
    });
  });

  describe('testkit', function () {
    it('should exist', function () {
      var div = document.createElement('div');
      var dataHook = 'myDataHook';
      var wrapper = div.appendChild(_testUtils2.default.renderIntoDocument(_react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(_InputWithOptions5.default, { dataHook: dataHook })
      )));
      var inputWithOptionsTestkit = (0, _testkit.inputWithOptionsTestkitFactory)({
        wrapper: wrapper,
        dataHook: dataHook
      });
      expect(inputWithOptionsTestkit.driver.exists()).toBeTruthy();
      expect(inputWithOptionsTestkit.inputDriver.exists()).toBeTruthy();
      expect(inputWithOptionsTestkit.dropdownLayoutDriver.exists()).toBeTruthy();
    });
  });

  describe('enzyme testkit', function () {
    it('should exist', function () {
      var dataHook = 'myDataHook';
      var wrapper = (0, _enzyme.mount)(_react2.default.createElement(_InputWithOptions5.default, { dataHook: dataHook }));
      var inputWithOptionsTestkit = (0, _enzyme2.inputWithOptionsTestkitFactory)({
        wrapper: wrapper,
        dataHook: dataHook
      });
      expect(inputWithOptionsTestkit.driver.exists()).toBeTruthy();
      expect(inputWithOptionsTestkit.inputDriver.exists()).toBeTruthy();
      expect(inputWithOptionsTestkit.dropdownLayoutDriver.exists()).toBeTruthy();
    });
  });

  describe('appearance', function () {
    it('should be possible to specify the theme of underlying elements', function () {
      var props = { theme: 'material', dataHook: 'myDataHook' };
      var wrapper = (0, _enzyme.mount)(_react2.default.createElement(_InputWithOptions5.default, props));
      var testkit = (0, _enzyme2.inputWithOptionsTestkitFactory)({
        wrapper: wrapper,
        dataHook: props.dataHook
      });
      expect(testkit.inputDriver.isOfStyle(props.theme)).toBe(true);
      expect(testkit.dropdownLayoutDriver.hasTheme(props.theme)).toBe(true);
    });
  });
});