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

wix-style-react

'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _testUtils2 = _interopRequireDefault(_testUtils);

var _MultiSelect = require('./MultiSelect.driver');

var _MultiSelect2 = _interopRequireDefault(_MultiSelect);

var _MultiSelect3 = require('./MultiSelect');

var _MultiSelect4 = _interopRequireDefault(_MultiSelect3);

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

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

var _enzyme2 = require('enzyme');

var _unit = require('../../test/utils/unit');

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('MultiSelect', function () {
  var render = (0, _unit.createRendererWithDriver)(_MultiSelect2.default);
  var createDriver = function createDriver(jsx) {
    return render(jsx).driver;
  };
  var expectEventTargetValue = function expectEventTargetValue(value) {
    return expect.objectContaining({
      target: expect.objectContaining({ value: value })
    });
  };

  var options = [{ value: 'Alabama', id: 'Alabama' }, { value: 'Alaska', id: 'Alaska' }, { value: 'Arkansas', id: 'Arkansas' }, { value: 'Arkansas', id: 'Arkansas' }, { value: 'California', id: 'California' }, { value: 'Two words', id: 'Two words' }];
  var FIRST_OPTION = options[0];
  var FIRST_OPTION_ID = options[0].id;

  afterEach(function () {
    (0, _unit.cleanup)();
  });

  var NewMultiSelect = function NewMultiSelect(props) {
    return _react2.default.createElement(_MultiSelect4.default, _extends({}, props, { upgrade: true }));
  };

  var ControlledMultiSelect = function (_React$Component) {
    _inherits(ControlledMultiSelect, _React$Component);

    function ControlledMultiSelect() {
      var _ref;

      var _temp, _this, _ret;

      _classCallCheck(this, ControlledMultiSelect);

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

      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ControlledMultiSelect.__proto__ || Object.getPrototypeOf(ControlledMultiSelect)).call.apply(_ref, [this].concat(args))), _this), _this.state = { inputValue: _this.props.value || '' }, _temp), _possibleConstructorReturn(_this, _ret);
    }

    _createClass(ControlledMultiSelect, [{
      key: 'componentWillReceiveProps',
      value: function componentWillReceiveProps(nextProps) {
        this.setState({ inputValue: nextProps.value });
      }
    }, {
      key: 'render',
      value: function render() {
        var _this2 = this;

        return _react2.default.createElement(NewMultiSelect, _extends({}, this.props, {
          onChange: function onChange(e) {
            _this2.setState({ inputValue: e.target.value });
          },
          value: this.state.inputValue
        }));
      }
    }]);

    return ControlledMultiSelect;
  }(_react2.default.Component);

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

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

  it('should remove options that were selected and became tags', function () {
    var tags = [{ id: 'Alabama', label: 'Alabama' }];

    var _render = render(_react2.default.createElement(NewMultiSelect, { options: options, autoFocus: true })),
        multiSelectDriver = _render.driver,
        rerender = _render.rerender;

    var dropdownLayoutDriver = multiSelectDriver.dropdownLayoutDriver;

    expect(dropdownLayoutDriver.optionsLength()).toBe(options.length);
    expect(dropdownLayoutDriver.isOptionExists('Alabama')).toBeTruthy();

    rerender(_react2.default.createElement(NewMultiSelect, { options: options, tags: tags, autoFocus: true }));
    expect(dropdownLayoutDriver.optionsLength()).toBe(options.length - tags.length);
    expect(dropdownLayoutDriver.isOptionExists('Alabama')).toBeFalsy();
  });

  it('should not filter anything without predicate function', function () {
    var onSelect = jest.fn();

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

    driver.focus();
    expect(dropdownLayoutDriver.optionsLength()).toBe(options.length);
  });

  describe('click-outside', function () {
    it('should clear input when clicked-out-side given input is non-empty', function () {
      var onChange = jest.fn();

      var _createDriver3 = createDriver(_react2.default.createElement(NewMultiSelect, { value: '', onChange: onChange })),
          driver = _createDriver3.driver,
          inputDriver = _createDriver3.inputDriver;

      inputDriver.focus('ArrowDown');
      inputDriver.enterText('foo');
      expect(onChange).toHaveBeenCalledTimes(1);
      expect(onChange).toBeCalledWith(expectEventTargetValue('foo'));
      onChange.mockReset();

      driver.outsideClick();
      expect(onChange).toHaveBeenCalledTimes(1);
      expect(onChange).toBeCalledWith(expectEventTargetValue(''));
    });

    it('should NOT select option when clicked-out-side given option is marked', function () {
      var onSelect = jest.fn();

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

      driver.pressKey('ArrowDown');
      driver.pressKey('ArrowDown');
      expect(dropdownLayoutDriver.isOptionHovered(0)).toBeTruthy();
      driver.outsideClick();
      expect(onSelect).toHaveBeenCalledTimes(0);
    });
  });

  describe('Tag Input', function () {
    it('should render readonly input on select mode', function () {
      var _createDriver5 = createDriver(_react2.default.createElement(NewMultiSelect, { options: options, mode: 'select' })),
          inputDriver = _createDriver5.inputDriver;

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

    it('should render arrow on select mode', function () {
      var _createDriver6 = createDriver(_react2.default.createElement(NewMultiSelect, { options: options, mode: 'select' })),
          inputDriver = _createDriver6.inputDriver;

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

    it('should render input wrapper with error', function () {
      var _createDriver7 = createDriver(_react2.default.createElement(NewMultiSelect, { error: true, options: options })),
          driver = _createDriver7.driver;

      expect(driver.inputWrapperHasError()).toBeTruthy();
    });

    describe('Placeholder', function () {
      it('should display a placeholder if there are no tags', function () {
        var placeholder = 'myPlaceholder';

        var _createDriver8 = createDriver(_react2.default.createElement(NewMultiSelect, { options: options, placeholder: placeholder })),
            inputDriver = _createDriver8.inputDriver;

        expect(inputDriver.getPlaceholder()).toBe(placeholder);
      });

      it('should not display a placeholder if there are any tags', function () {
        var tags = [{ id: 'Alabama', label: 'Alabama' }];
        var placeholder = 'myPlaceholder';

        var _createDriver9 = createDriver(_react2.default.createElement(NewMultiSelect, {
          options: options,
          tags: tags,
          placeholder: placeholder
        })),
            inputDriver = _createDriver9.inputDriver;

        expect(inputDriver.getPlaceholder()).toBe('');
      });
    });

    it('should focus the input when clicking on the input wrapper', function () {
      var _createDriver10 = createDriver(_react2.default.createElement(NewMultiSelect, { options: options })),
          driver = _createDriver10.driver,
          inputDriver = _createDriver10.inputDriver;

      expect(inputDriver.isFocus()).toBeFalsy();
      driver.clickOnInputWrapper();
      expect(inputDriver.isFocus()).toBeTruthy();
    });

    it('should check that wrapper has focus when the input element does', function () {
      var _createDriver11 = createDriver(_react2.default.createElement(NewMultiSelect, { options: options })),
          driver = _createDriver11.driver,
          inputDriver = _createDriver11.inputDriver;

      driver.clickOnInputWrapper();
      expect(inputDriver.isFocus()).toBeTruthy();
      expect(driver.inputWrapperHasFocus()).toBeTruthy();
    });

    it('should contain specific tags', function () {
      var tags = [{ id: 'Alabama', label: 'Alabama' }, { id: 'Alaska', label: 'Alaska' }];

      var _createDriver12 = createDriver(_react2.default.createElement(NewMultiSelect, { options: options, tags: tags })),
          driver = _createDriver12.driver;

      expect(driver.numberOfTags()).toBe(tags.length);
      expect(driver.getTagLabelAt(0)).toBe('Alabama');
      expect(driver.getTagLabelAt(1)).toBe('Alaska');
    });

    describe('Submit (Add Tag)', function () {
      describe('input is empty', function () {
        it('should NOT submit when Enter is pressed', function () {
          var onManuallyInput = jest.fn();

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

          driver.focus();
          driver.pressKey('Enter');

          expect(onManuallyInput).toHaveBeenCalledTimes(0);
        });
      });

      describe('input is not empty', function () {
        function testCase(_ref2) {
          var props = _ref2.props,
              keyPressed = _ref2.keyPressed,
              enteredText = _ref2.enteredText,
              _ref2$Component = _ref2.Component,
              Component = _ref2$Component === undefined ? NewMultiSelect : _ref2$Component,
              expectSubmit = _ref2.expectSubmit;

          var onSelect = jest.fn();
          var onManuallyInput = jest.fn();

          var _createDriver14 = createDriver(_react2.default.createElement(Component, _extends({
            onManuallyInput: onManuallyInput,
            onSelect: onSelect
          }, props))),
              driver = _createDriver14.driver,
              inputDriver = _createDriver14.inputDriver;

          driver.focus();
          inputDriver.enterText(enteredText);
          driver.pressKey(keyPressed);

          expect(onSelect).toHaveBeenCalledTimes(0);
          expect(onManuallyInput).toHaveBeenCalledTimes(expectSubmit ? 1 : 0);
          expectSubmit && expect(onManuallyInput).toBeCalledWith([enteredText]);
        }

        describe('Controlled', function () {
          it('should submit when text entered and Enter is pressed', function () {
            testCase({
              Component: ControlledMultiSelect,
              props: { options: options },
              enteredText: 'custom value',
              keyPressed: 'Enter',
              expectSubmit: true
            });
          });

          it('should submit when Enter pressed given initial value', function () {
            var onSelect = jest.fn();
            var onManuallyInput = jest.fn();

            var _createDriver15 = createDriver(_react2.default.createElement(ControlledMultiSelect, {
              onManuallyInput: onManuallyInput,
              onSelect: onSelect,
              value: 'foo'
            })),
                driver = _createDriver15.driver;

            driver.focus();
            driver.pressKey('Enter');

            expect(onSelect).toHaveBeenCalledTimes(0);
            expect(onManuallyInput).toHaveBeenCalledTimes(1);
            expect(onManuallyInput).toBeCalledWith(['foo']);
          });

          it('should submit when Enter pressed given value updated', function () {
            var onSelect = jest.fn();
            var onManuallyInput = jest.fn();

            var _render2 = render(_react2.default.createElement(ControlledMultiSelect, {
              onManuallyInput: onManuallyInput,
              onSelect: onSelect,
              value: 'foo'
            })),
                _driver = _render2.driver,
                rerender = _render2.rerender;

            var driver = _driver.driver;

            rerender(_react2.default.createElement(ControlledMultiSelect, {
              onManuallyInput: onManuallyInput,
              onSelect: onSelect,
              value: 'foo2'
            }));
            driver.focus();
            driver.pressKey('Enter');

            expect(onSelect).toHaveBeenCalledTimes(0);
            expect(onManuallyInput).toHaveBeenCalledTimes(1);
            expect(onManuallyInput).toBeCalledWith(['foo2']);
          });
        });

        describe('Uncontrolled', function () {
          it('should submit when text entered and Enter is pressed', function () {
            testCase({
              props: { options: options },
              enteredText: 'custom value',
              keyPressed: 'Enter',
              expectSubmit: true
            });
          });

          it('should submit when text entered and delimiter is pressed', function () {
            testCase({
              props: { options: options },
              enteredText: 'custom value',
              keyPressed: ',',
              expectSubmit: true
            });
          });

          it('should NOT submit when spaces-only text is entered and Enter pressed', function () {
            testCase({
              props: { options: options },
              enteredText: '   ',
              keyPressed: 'Enter',
              expectSubmit: false
            });
          });

          it('should NOT submit when delimited-spaces text is entered and Enter pressed', function () {
            testCase({
              props: { options: options },
              enteredText: ' ,  ',
              keyPressed: 'Enter',
              expectSubmit: false
            });
          });
        });
      });
    });

    describe('Paste', function () {
      function testCase(_ref3) {
        var props = _ref3.props,
            pasteValue = _ref3.pasteValue,
            expectedonManuallyInputArg = _ref3.expectedonManuallyInputArg;

        var onSelect = jest.fn();
        var onManuallyInput = jest.fn();

        var _createDriver16 = createDriver(_react2.default.createElement(NewMultiSelect, _extends({
          options: options,
          onSelect: onSelect,
          onManuallyInput: onManuallyInput
        }, props))),
            driver = _createDriver16.driver,
            inputDriver = _createDriver16.inputDriver;

        driver.focus();
        inputDriver.trigger('paste');
        inputDriver.enterText(pasteValue);

        expect(onSelect).toHaveBeenCalledTimes(0);
        expect(onManuallyInput).toHaveBeenCalledTimes(1);
        expect(onManuallyInput).toBeCalledWith(expectedonManuallyInputArg);
      }

      it('should submit with single value when pasting a single custom value', function () {
        testCase({
          pasteValue: 'custom value',
          expectedonManuallyInputArg: ['custom value']
        });
      });

      it('should submit with multiple values with pasting comma-delimited value (default delimiter)', function () {
        testCase({
          pasteValue: 'value1,value2',
          expectedonManuallyInputArg: ['value1', 'value2']
        });
      });

      it('should submit with multiple values with pasting colon-delimited value (custom delimiter)', function () {
        testCase({
          props: { delimiters: [':'] },
          pasteValue: 'value1:value2',
          expectedonManuallyInputArg: ['value1', 'value2']
        });
      });

      it('should submit with multiple values with pasting mixed delimited value (custom delimiters)', function () {
        testCase({
          props: { delimiters: [':', ';'] },
          pasteValue: 'value1:value2;value3',
          expectedonManuallyInputArg: ['value1', 'value2', 'value3']
        });
      });

      it('should submit with trimmed values', function () {
        testCase({
          pasteValue: ' value1 , value2 ',
          expectedonManuallyInputArg: ['value1', 'value2']
        });
      });
    });

    it('should call onRemoveTag when removing a tag', function () {
      var tagId = 'SweetHome';
      var tags = [{ id: tagId, label: 'Alabama' }];
      var onRemoveTag = jest.fn();

      var _createDriver17 = createDriver(_react2.default.createElement(NewMultiSelect, { autoFocus: true, tags: tags, onRemoveTag: onRemoveTag })),
          driver = _createDriver17.driver;

      var tagDriver = driver.getTagDriverByTagId(tagId);
      tagDriver.removeTag();

      expect(onRemoveTag).toHaveBeenCalledWith(tagId);
    });
  });

  describe('Select Option', function () {
    it('should call onSelect when option clicked', function () {
      var onSelect = jest.fn();

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

      driver.selectOptionById(FIRST_OPTION_ID);

      expect(onSelect).toHaveBeenCalledTimes(1);
    });

    it('should call onSelect with selected option given highlight enabled', function () {
      // This is a regression test for old bug , when highlight enabled the value would be a <Highlight> element
      var onSelect = jest.fn();

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

      driver.selectOptionById(FIRST_OPTION_ID);

      expect(onSelect).toHaveBeenCalledTimes(1);
      expect(onSelect).toBeCalledWith(FIRST_OPTION);
    });

    it('should call onSelect with selected option given highlight disabled', function () {
      var onSelect = jest.fn();

      var _createDriver20 = createDriver(_react2.default.createElement(NewMultiSelect, {
        options: options,
        onSelect: onSelect,
        highlight: false
      })),
          driver = _createDriver20.driver;

      driver.selectOptionById(FIRST_OPTION_ID);
      expect(onSelect).toHaveBeenCalledTimes(1);
      expect(onSelect).toBeCalledWith(FIRST_OPTION);
    });

    it('should call onSelect with selected option when selected by keyboard', function () {
      var onSelect = jest.fn();

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

      driver.pressKey('ArrowDown');
      driver.pressKey('ArrowDown');
      driver.pressKey('Enter');

      expect(onSelect).toHaveBeenCalledTimes(1);
      expect(onSelect).toBeCalledWith(options[0]);
    });

    // TODO: Disabled since in order to support this in new API, we better add ability for Dropdownlayout to accept custom "select" keys.
    // We can also consider removing this feature (Ben?)
    xdescribe('Select with delimiter', function () {
      it('should select option when comma press', function () {
        var onSelect = jest.fn();
        var onChange = jest.fn();

        var _createDriver22 = createDriver(_react2.default.createElement(NewMultiSelect, {
          value: options[0].value,
          options: options,
          delimiters: [','],
          onSelect: onSelect,
          onChange: onChange
        })),
            driver = _createDriver22.driver,
            inputDriver = _createDriver22.inputDriver,
            dropdownLayoutDriver = _createDriver22.dropdownLayoutDriver;

        driver.pressKey('ArrowDown');
        inputDriver.trigger('keyDown', { key: ',' });
        expect(onSelect).toHaveBeenCalledTimes(1);
        expect(onChange).toBeCalledWith({ target: { value: '' } });
        expect(dropdownLayoutDriver.isShown()).toBeTruthy();
        expect(inputDriver.isFocus()).toBeTruthy();
      });

      it('should select option when custom delimiters pressed', function () {
        var onSelect = jest.fn();
        var onChange = jest.fn();

        var _createDriver23 = createDriver(_react2.default.createElement(NewMultiSelect, {
          value: options[0].value,
          options: options,
          delimiters: [';'],
          onSelect: onSelect,
          onChange: onChange
        })),
            driver = _createDriver23.driver,
            inputDriver = _createDriver23.inputDriver,
            dropdownLayoutDriver = _createDriver23.dropdownLayoutDriver;

        driver.pressKey('ArrowDown');
        inputDriver.trigger('keyDown', { key: ';' });
        expect(onSelect).toHaveBeenCalledTimes(1);
        expect(onSelect).toBeCalledWith(options[0]);
        expect(onChange).toBeCalledWith({ target: { value: '' } });
        expect(dropdownLayoutDriver.isShown()).toBeTruthy();
        expect(inputDriver.isFocus()).toBeTruthy();
      });
    });

    describe('Keep Options Open', function () {
      it('should not lose Focus or close the options when options selected by mouse click', function () {
        var _createDriver24 = createDriver(_react2.default.createElement(NewMultiSelect, { options: options })),
            driver = _createDriver24.driver,
            inputDriver = _createDriver24.inputDriver,
            dropdownLayoutDriver = _createDriver24.dropdownLayoutDriver;

        driver.selectOptionById(FIRST_OPTION_ID);
        expect(dropdownLayoutDriver.isShown()).toBeTruthy();
        expect(inputDriver.isFocus());
      });

      it('should not lose Focus or close the options when options selected by pressing Enter', function () {
        var _createDriver25 = createDriver(_react2.default.createElement(NewMultiSelect, { options: options })),
            driver = _createDriver25.driver,
            inputDriver = _createDriver25.inputDriver,
            dropdownLayoutDriver = _createDriver25.dropdownLayoutDriver;

        driver.focus();
        driver.pressKey('ArrowDown');
        driver.pressKey('Enter');
        expect(dropdownLayoutDriver.isShown()).toBeTruthy();
        expect(inputDriver.isFocus()).toBeTruthy();
      });

      it('should not lose Focus or close the options when options selected by pressing Tab', function () {
        var onSelect = jest.fn();

        var _createDriver26 = createDriver(_react2.default.createElement(NewMultiSelect, { options: options, onSelect: onSelect })),
            driver = _createDriver26.driver,
            inputDriver = _createDriver26.inputDriver,
            dropdownLayoutDriver = _createDriver26.dropdownLayoutDriver;

        driver.pressKey('ArrowDown');
        driver.pressKey('ArrowDown');
        driver.pressKey('Tab');
        expect(onSelect).toHaveBeenCalledTimes(1);
        expect(dropdownLayoutDriver.isShown()).toBeTruthy();
        expect(inputDriver.isFocus()).toBeTruthy();
      });
    });
  });

  describe('onKeyDown', function () {
    it('should call onKeyDown once when character key pressed', function () {
      var onKeyDown = jest.fn();

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

      driver.focus();
      inputDriver.keyDown('a');
      expect(onKeyDown.mock.calls).toHaveLength(1);
    });
  });

  describe('maxHeight', function () {
    it('should set maxHeight to initial when no height limit introduced', function () {
      var _createDriver28 = createDriver(_react2.default.createElement(NewMultiSelect, { options: options })),
          driver = _createDriver28.driver;

      expect(driver.getMaxHeight()).toBe('initial');
    });

    it('should set maxHeight when maxNumRows defined', function () {
      var _createDriver29 = createDriver(_react2.default.createElement(NewMultiSelect, { maxNumRows: 2, options: options })),
          driver = _createDriver29.driver;

      expect(driver.getMaxHeight()).toBe('70px');
    });

    it('should set maxHeight when maxNumRows defined (large tags)', function () {
      var _options = [{ value: 'Alaska', id: 'Alaska', label: 'Alaska', size: 'large' }];

      var _createDriver30 = createDriver(_react2.default.createElement(NewMultiSelect, { maxNumRows: 2, tags: _options, options: _options })),
          driver = _createDriver30.driver;

      expect(driver.getMaxHeight()).toBe('94px');
    });
  });

  // TODO: dnd testkit is missing - once it's available, this test has to be completed and run
  xdescribe('Drag & Drop', function () {
    it('should allow reordering the tags', function () {
      var tags = [{ label: 'Alabama', id: 'Alabama' }, { label: 'California2', id: 'California2' }, { label: 'California3', id: 'California3' }, { label: 'California4', id: 'California4' }];
      var onReorder = jest.fn();

      var _createDriver31 = createDriver(_react2.default.createElement(NewMultiSelect, {
        draggable: true,
        options: options,
        tags: tags,
        onReorder: onReorder,
        autoFocus: true
      })),
          _createDriver31$drive = _createDriver31.driver,
          getTagLabelAt = _createDriver31$drive.getTagLabelAt,
          getTagDriverByTagId = _createDriver31$drive.getTagDriverByTagId;

      getTagDriverByTagId('Alabama').dragTo(getTagDriverByTagId('California3').element);
      expect(onReorder).toBeCalledWith({ removedIndex: 0, addedIndex: 2 });

      expect(getTagLabelAt(0)).toBe('California3');
      expect(getTagLabelAt(2)).toBe('Alabama');
    });
  });

  describe('testkit', function () {
    it('should exist', function () {
      var div = document.createElement('div');
      var dataHook = 'myDataHook';
      var tags = [{ id: 'Alabama', label: 'Alabama' }];
      var wrapper = div.appendChild(_testUtils2.default.renderIntoDocument(_react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(NewMultiSelect, { dataHook: dataHook, tags: tags })
      )));
      var multiSelectTestkit = (0, _testkit.multiSelectTestkitFactory)({
        wrapper: wrapper,
        dataHook: dataHook
      });
      expect(multiSelectTestkit.driver.exists()).toBeTruthy();
      expect(multiSelectTestkit.inputDriver.exists()).toBeTruthy();
      expect(multiSelectTestkit.dropdownLayoutDriver.exists()).toBeTruthy();
      expect(multiSelectTestkit.driver.getTagDriverByTagId('Alabama').exists()).toBeTruthy();
    });
  });

  describe('enzyme testkit', function () {
    it('should exist', function () {
      var dataHook = 'myDataHook';
      var tags = [{ id: 'Alabama', label: 'Alabama' }];
      var wrapper = (0, _enzyme2.mount)(_react2.default.createElement(NewMultiSelect, { dataHook: dataHook, tags: tags }));
      var multiSelectTestkit = (0, _enzyme.multiSelectTestkitFactory)({
        wrapper: wrapper,
        dataHook: dataHook
      });
      expect(multiSelectTestkit.driver.exists()).toBeTruthy();
      expect(multiSelectTestkit.inputDriver.exists()).toBeTruthy();
      expect(multiSelectTestkit.dropdownLayoutDriver.exists()).toBeTruthy();
      expect(multiSelectTestkit.driver.getTagDriverByTagId('Alabama').exists()).toBeTruthy();
    });
  });
});