wix-style-react/dist/src/Input/Input.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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _sinon = require('sinon');

var _sinon2 = _interopRequireDefault(_sinon);

var _Input = require('./Input.driver');

var _Input2 = _interopRequireDefault(_Input);

var _ = require('.');

var _2 = _interopRequireDefault(_);

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

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

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

var _testkitSanity = require('../../test/utils/testkit-sanity');

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

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('Input', function () {
  var render = (0, _unit.createRendererWithDriver)(_Input2.default);
  var createDriver = (0, _driverFactory.createDriverFactory)(_Input2.default);
  var ControlledInput = (0, _utils.makeControlled)(_2.default);

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

  describe('test tooltip', function () {
    it('should display the error tooltip on hover', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { error: true, errorMessage: 'I\'m the error message' }));
      var dataHook = driver.getTooltipDataHook();
      var wrapper = driver.getTooltipElement();
      var tooltipDriver = (0, _testkit.tooltipTestkitFactory)({ wrapper: wrapper, dataHook: dataHook });
      tooltipDriver.mouseEnter();

      return (0, _utils.resolveIn)(500).then(function () {
        expect(tooltipDriver.getContent()).toBe("I'm the error message");
      });
    });

    describe('tooltipPlacement attribute', function () {
      ['top', 'bottom', 'left', 'right'].forEach(function (placement) {
        it('should have a tooltip positioned to the ' + placement, function () {
          var driver = createDriver(_react2.default.createElement(_2.default, {
            error: true,
            errorMessage: 'I\'m the error message',
            theme: 'amaterial',
            tooltipPlacement: placement
          }));
          var dataHook = driver.getTooltipDataHook();
          var wrapper = driver.getTooltipElement();
          var tooltipDriver = (0, _testkit.tooltipTestkitFactory)({ wrapper: wrapper, dataHook: dataHook });
          tooltipDriver.mouseEnter();

          return (0, _utils.resolveIn)(500).then(function () {
            expect(tooltipDriver.getPlacement()).toBe(placement);
          });
        });
      });
    });

    describe('onTooltipShow attribute (only for amaterial theme for now)', function () {
      it('should be called when error tooltip is active', function () {
        var onTooltipShow = _sinon2.default.spy();

        var driver = createDriver(_react2.default.createElement(_2.default, {
          theme: 'amaterial',
          error: true,
          errorMessage: 'I\'m the error message',
          onTooltipShow: onTooltipShow
        }));
        var dataHook = driver.getTooltipDataHook();
        var wrapper = driver.getTooltipElement();
        var tooltipDriver = (0, _testkit.tooltipTestkitFactory)({ wrapper: wrapper, dataHook: dataHook });
        tooltipDriver.mouseEnter();

        return (0, _utils.resolveIn)(500).then(function () {
          expect(onTooltipShow.calledOnce).toBeTruthy();
        });
      });

      it('should be called when help tooltip is active (only for amaterial theme for now)', function () {
        var onTooltipShow = _sinon2.default.spy();

        var driver = createDriver(_react2.default.createElement(_2.default, {
          theme: 'amaterial',
          help: true,
          helpMessage: 'I\'m the help message',
          onTooltipShow: onTooltipShow
        }));
        var dataHook = driver.getTooltipDataHook();
        var wrapper = driver.getTooltipElement();
        var tooltipDriver = (0, _testkit.tooltipTestkitFactory)({ wrapper: wrapper, dataHook: dataHook });
        tooltipDriver.mouseEnter();

        return (0, _utils.resolveIn)(500).then(function () {
          expect(onTooltipShow.calledOnce).toBeTruthy();
        });
      });
    });
  });

  describe('enterText driver method', function () {
    it('passes the name and value attribute', function () {
      var onChange = jest.fn();
      var props = {
        type: 'text',
        name: 'gal',
        onChange: onChange
      };
      var driver = createDriver(_react2.default.createElement(_2.default, props));
      driver.enterText('some text');
      expect(onChange).toHaveBeenCalledTimes(1);
      var eventTarget = onChange.mock.calls[0][0].target;
      expect(eventTarget).toEqual({
        name: 'gal',
        type: 'text',
        value: 'some text'
      });
    });
  });

  describe('name attribute', function () {
    it('should pass down to the wrapped input', function () {
      var props = {
        name: 'hello'
      };

      var driver = createDriver(_react2.default.createElement(_2.default, props));
      expect(driver.getName()).toEqual(props.name);
    });
  });

  describe('type attribute', function () {
    it('should pass down to the wrapped input', function () {
      var props = {
        type: 'number'
      };

      var driver = createDriver(_react2.default.createElement(_2.default, props));
      expect(driver.getType()).toEqual(props.type);
    });
  });

  describe('value attribute', function () {
    it('should pass down to the wrapped input', function () {
      var props = {
        value: 'hello',
        onChange: function onChange() {}
      };

      var driver = createDriver(_react2.default.createElement(_2.default, props));
      expect(driver.getValue()).toEqual(props.value);
    });
  });

  describe('required attribute', function () {
    it('should pass down to the wrapped input', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { required: true }));
      expect(driver.getRequired()).toBeTruthy();
    });
  });

  describe('autocomplete attribute', function () {
    it('should pass down to the wrapped input', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { autocomplete: 'email' }));
      expect(driver.getAutocomplete()).toBe('email');
    });
  });

  describe('defaultValue attribute', function () {
    it('should pass down to the wrapped input', function () {
      var defaultValue = 'hello';

      var driver = createDriver(_react2.default.createElement(_2.default, { defaultValue: defaultValue }));
      expect(driver.getDefaultValue()).toEqual(defaultValue);
    });
  });

  describe('tabIndex attribute', function () {
    it('should pass down to the wrapped input', function () {
      var tabIndex = 1;

      var driver = createDriver(_react2.default.createElement(_2.default, { tabIndex: tabIndex }));
      expect(driver.getTabIndex()).toEqual(tabIndex);
    });
  });

  describe('readOnly attribute', function () {
    it('should pass down to the wrapped input', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { readOnly: true }));
      expect(driver.getReadOnly()).toBeTruthy();
    });

    it('should pass down to the wrapped input with default false value', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, null));
      expect(driver.getReadOnly()).toBeFalsy();
    });
  });

  describe('textOverflow attribute', function () {
    it('should pass down to the wrapped input', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { textOverflow: 'ellipsis' }));
      expect(driver.getTextOverflow()).toBe('ellipsis');
    });

    it('should pass down to the wrapped input with default clip value', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, null));
      expect(driver.getTextOverflow()).toBe('clip');
    });
  });

  describe('`type` prop', function () {
    it('should set type attribute', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { type: 'number' }));
      expect(driver.getType()).toBe('number');
    });

    describe('when "number"', function () {
      it('should prevent onChange to be called with non numeric values', function () {
        var onChange = jest.fn();
        var driver = createDriver(_react2.default.createElement(_2.default, { type: 'number', onChange: onChange, value: '2' }));
        driver.trigger('change', { target: { value: 'a' } });
        driver.trigger('keyPress', { target: { key: 'l' } });
        expect(driver.getValue()).toEqual('2');
        expect(onChange).not.toHaveBeenCalled();
      });
    });
  });

  describe('status attribute', function () {
    it('deprecated - should display an error icon if error is true', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { error: true }));

      expect(driver.hasExclamation()).toBeTruthy();
      expect(driver.hasError()).toBeTruthy();
    });

    it('should display an error icon if status is error', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { status: 'error' }));

      expect(driver.hasExclamation()).toBeTruthy();
      expect(driver.hasError()).toBeTruthy();
    });

    it('should display a loader icon if status is loading', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { status: 'loading' }));

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

  describe('help attribute', function () {
    it('should display an help icon if help is true', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { help: true }));

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

  describe('unit attribute', function () {
    it('should the unit text if passed', function () {
      var unit = '$';

      var driver = createDriver(_react2.default.createElement(_2.default, { unit: unit }));
      expect(driver.getUnit()).toEqual(unit);
    });

    it('should invoke onInputClicked while click on unit', function () {
      var onInputClicked = jest.fn();
      var driver = createDriver(_react2.default.createElement(_2.default, { unit: '$', onInputClicked: onInputClicked }));
      driver.clickUnit();
      expect(onInputClicked).toBeCalled();
    });

    it('should not fail while click on unit without passing onInputClicked', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { unit: '$' }));
      expect(function () {
        driver.clickUnit();
      }).not.toThrowError(/onInputClicked is not a function/);
    });
  });

  describe('magnifyingGlass attribute', function () {
    it('should display a magnifying glass icon if magnifyingGlass is true', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { magnifyingGlass: true }));
      expect(driver.hasMagnifyingGlass()).toBeTruthy();
    });

    it('should not display a magnifying glass icon if magnifyingGlass is false', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { magnifyingGlass: false }));
      expect(driver.hasMagnifyingGlass()).toBeFalsy();
    });

    it('should not display a magnifying glass icon if error is true', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { magnifyingGlass: true, error: true }));
      expect(driver.hasMagnifyingGlass()).toBeFalsy();
    });

    it('should invoke onInputClicked while click on magnifying glass icon', function () {
      var onInputClicked = jest.fn();
      var driver = createDriver(_react2.default.createElement(_2.default, { magnifyingGlass: true, onInputClicked: onInputClicked }));
      driver.clickMagnifyingGlass();
      expect(onInputClicked).toBeCalled();
    });

    it('should not fail while click on magnifying glass icon without passing onInputClicked', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { magnifyingGlass: true }));
      expect(function () {
        driver.clickMagnifyingGlass();
      }).not.toThrowError(/onInputClicked is not a function/);
    });
  });

  describe('menuArrow attribute', function () {
    it('should display a menu arrow icon if menuArrow is true', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { menuArrow: true }));
      expect(driver.hasMenuArrow()).toBeTruthy();
    });

    it('should not display a menu arrow icon if menuArrow is false', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { menuArrow: false }));
      expect(driver.hasMenuArrow()).toBeFalsy();
    });

    it('should display a menu arrow icon if error is true', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { menuArrow: true, error: true }));
      expect(driver.hasMenuArrow()).toBeTruthy();
    });

    it('should have a narrow error style of arrow is shown', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { menuArrow: true, error: true }));
      expect(driver.isNarrowError()).toBeTruthy();
      expect(driver.hasExclamation()).toBeTruthy();
    });

    it('should not display a menu arrow icon if magnifyingGlass is true', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { menuArrow: true, magnifyingGlass: true }));
      expect(driver.hasMenuArrow()).toBeFalsy();
    });

    it('should invoke onInputClicked while click on menu arrow icon', function () {
      var onInputClicked = jest.fn();
      var driver = createDriver(_react2.default.createElement(_2.default, { menuArrow: true, onInputClicked: onInputClicked }));
      driver.clickMenuArrow();
      expect(onInputClicked).toBeCalled();
    });

    it('should not fail while click on menu arrow icon without passing onInputClicked', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { menuArrow: true }));
      expect(function () {
        driver.clickMenuArrow();
      }).not.toThrowError(/onInputClicked is not a function/);
    });
  });

  describe('rtl attribute', function () {
    it('should have rtl if rtl prop is true', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { rtl: true }));
      expect(driver.isRTL()).toBeTruthy();
    });

    it('should not have rtl if rtl prop is false', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { rtl: false }));
      expect(driver.isRTL()).toBeFalsy();
    });
  });

  describe('onChange attribute', function () {
    it('should be called when text is entered to the input', function () {
      var onChange = jest.fn();
      var event = { target: { value: 'world' } };

      var driver = createDriver(_react2.default.createElement(_2.default, { onChange: onChange }));

      driver.trigger('change', event);

      expect(onChange).toBeCalled();
    });
  });

  describe('onKeyUp attribute', function () {
    it('should be called after keybord key got pressed and then released', function () {
      var onKeyUp = jest.fn();
      var event = { target: { value: 'world' } };

      var driver = createDriver(_react2.default.createElement(_2.default, { onKeyUp: onKeyUp }));

      driver.trigger('keyUp', event);

      expect(onKeyUp).toBeCalled();
    });
  });

  describe('onFocus attribute', function () {
    it('should be called when the input gets focused', function () {
      var onFocus = jest.fn();
      var driver = createDriver(_react2.default.createElement(_2.default, { onFocus: onFocus }));

      driver.trigger('focus');

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

  describe('onBlur attribute', function () {
    it('should be called when the input gets blured', function () {
      var onBlur = jest.fn();
      var driver = createDriver(_react2.default.createElement(_2.default, { onBlur: onBlur }));

      driver.trigger('blur');

      expect(onBlur).toBeCalled();
    });
  });

  describe('onKeyDown attribute', function () {
    it('should be called when text is entered to the wrapped input', function () {
      var onKeyDown = jest.fn();
      var event = { keyCode: 40 };

      var driver = createDriver(_react2.default.createElement(_2.default, { onKeyDown: onKeyDown }));

      driver.trigger('keyDown', event);

      expect(onKeyDown).toBeCalled();
    });
  });

  describe('onPaste attribute', function () {
    it('should be called when pasting text to the input', function () {
      var onPaste = jest.fn();

      var driver = createDriver(_react2.default.createElement(_2.default, { onPaste: onPaste }));

      driver.trigger('paste');

      expect(onPaste).toBeCalled();
    });
  });

  describe('forceFocus attribute', function () {
    it('should have focus class on input if forceFocus is true', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { forceFocus: true }));
      expect(driver.isFocusedStyle()).toBeTruthy();
    });
  });

  describe('forceHover attribute', function () {
    it('should have hover class on input if forceHover is true', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { forceHover: true }));
      expect(driver.isHoveredStyle()).toBeTruthy();
    });

    it('should be hovered if forceFocus is false and forceHover is true', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { forceHover: true, forceFocus: false }));
      expect(driver.isHoveredStyle()).toBeTruthy();
    });
  });

  describe('disable attribute', function () {
    it('should have disabled class on input if disabled is true', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { disabled: true }));
      expect(driver.isDisabled()).toBeTruthy();
    });
  });

  describe('autoFocus attribute', function () {
    it('Mounting an input element with autoFocus=false, should give it the focus', function () {
      var _render = render(_react2.default.createElement(_2.default, { autoFocus: false })),
          driver = _render.driver,
          rerender = _render.rerender;

      expect(driver.isFocus()).toBeFalsy();

      rerender(_react2.default.createElement(_2.default, { autoFocus: true }));
      expect(driver.isFocus()).toBeFalsy();
    });

    it('Mounting an input element with autoFocus=true, gives it the focus', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { autoFocus: true }));
      expect(driver.isFocus()).toBeTruthy();
    });

    describe('with value attribute', function () {
      var value = 'this is a string';

      it('Should focus with cursor located at the end of the value', function () {
        var driver = createDriver(_react2.default.createElement(_2.default, { autoFocus: true, value: value }));
        expect(driver.getCursorLocation()).toEqual(value.length);
      });
    });
  });

  describe('driver.focus', function () {
    it('calling driver.focus (wihtout enzyme) should give focus to the input', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { autoFocus: false }));
      expect(driver.isFocus()).toBeFalsy();
      driver.focus();
      expect(driver.isFocus()).toBeTruthy();
    });
  });

  describe('Input.focus', function () {
    it('calling driver.focus (with enzyme) with options, should call the Input instance focus method and pass options', function () {
      var wrapper = (0, _enzyme2.mount)(_react2.default.createElement(_2.default, { autoFocus: false, dataHook: 'test' }));
      var focusMock = jest.fn();
      wrapper.instance().input.focus = focusMock;
      wrapper.instance().focus({ preventScroll: true });
      expect(focusMock).toHaveBeenCalledWith({ preventScroll: true });
    });
  });

  describe('theme attribute', function () {
    it('should set the theme by default to "normal"', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, null));
      expect(driver.isOfStyle('normal')).toBeTruthy();
    });

    it('should allowing setting the theme to "paneltitle"', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { theme: 'paneltitle' }));
      expect(driver.isOfStyle('paneltitle')).toBeTruthy();
    });

    it('should allow setting the theme to "material"', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { theme: 'material' }));
      expect(driver.isOfStyle('material')).toBeTruthy();
    });

    it('should allow setting the theme to "flat"', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { theme: 'flat' }));
      expect(driver.isOfStyle('flat')).toBeTruthy();
    });

    it('should allow setting the theme to "flatdark"', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { theme: 'flatdark' }));
      expect(driver.isOfStyle('flatdark')).toBeTruthy();
    });
  });

  describe('clearButton attribute', function () {
    it('should be displayed when input text is not empty', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { value: 'some value', clearButton: true }));
      expect(driver.hasClearButton()).toBe(true);
    });

    it('should not be displayed when input text is empty', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { value: '', clearButton: true }));
      expect(driver.hasClearButton()).toBe(false);
    });

    it('should clear input and focus it', function () {
      var driver = createDriver(_react2.default.createElement(ControlledInput, { clearButton: true, value: 'some value' }));
      driver.clickClear();
      expect(driver.getValue()).toBe('');
      expect(driver.isFocus()).toBe(true);
    });

    it('should trigger onChange on clearing as if input just emptied', function () {
      var onChange = jest.fn();
      var driver = createDriver(_react2.default.createElement(_2.default, { onChange: onChange, value: 'some value', clearButton: true }));
      driver.clickClear();
      expect(onChange).toHaveBeenCalledTimes(1);
      expect(onChange.mock.calls[0][0].target.value).toBe('');
    });

    describe.skip('Uncontrolled', function () {
      // TODO
      it('should be displayed when using uncontrolled component with defaultValue', function () {
        var driver = createDriver(_react2.default.createElement(_2.default, { defaultValue: 'some value', clearButton: true }));
        expect(driver.hasClearButton()).toBe(true);
      });

      // TODO
      it('should be displayed after entering text into empty uncontrolled input', function () {
        var driver = createDriver(_react2.default.createElement(_2.default, { clearButton: true }));
        driver.enterText('some value');
        expect(driver.hasClearButton()).toBe(true);
      });

      // TODO
      it('should clear input when using uncontrolled component', function () {
        var driver = createDriver(_react2.default.createElement(_2.default, { clearButton: true }));
        driver.enterText('some value');
        driver.clickClear();
        expect(driver.getValue()).toBe('');
        expect(driver.isFocus()).toBe(true);
      });

      // TODO
      it('should be hidden after default value was overridden with some input', function () {
        var driver = createDriver(_react2.default.createElement(_2.default, { defaultValue: 'some default value', clearButton: true }));
        expect(driver.hasClearButton()).toBe(true);
        driver.clearText();
        driver.enterText('new value');
        expect(driver.hasClearButton()).toBe(false);
      });
    });
  });

  describe('onClear attribute', function () {
    it('should display clear-button when input text is not empty', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { value: 'some value', onClear: function onClear() {
          return null;
        } }));
      expect(driver.hasClearButton()).toBe(true);
    });

    it('should invoke callback', function () {
      var onClear = _sinon2.default.spy();
      var driver = createDriver(_react2.default.createElement(_2.default, { onClear: onClear, value: 'some value' }));
      expect(driver.hasClearButton()).toBe(true);
      driver.clickClear();
      expect(onClear.calledOnce).toBe(true);
    });
  });

  describe('clear method', function () {
    it('should fire onChange one time when onChange implementation fires clear', function () {
      var ControlledInputWithRef = function (_React$Component) {
        _inherits(ControlledInputWithRef, _React$Component);

        function ControlledInputWithRef(props) {
          _classCallCheck(this, ControlledInputWithRef);

          var _this = _possibleConstructorReturn(this, (ControlledInputWithRef.__proto__ || Object.getPrototypeOf(ControlledInputWithRef)).call(this, props));

          _this.state = {
            value: ''
          };

          _this.handleChange = _this.handleChange.bind(_this);
          return _this;
        }

        _createClass(ControlledInputWithRef, [{
          key: 'handleChange',
          value: function handleChange(e) {
            this.setState({ value: e.target.value });
            this.input.clear();
          }
        }, {
          key: 'render',
          value: function render() {
            var _this2 = this;

            return _react2.default.createElement(_2.default, {
              ref: function ref(comp) {
                return _this2.input = comp;
              },
              value: this.state.value,
              onChange: this.handleChange,
              dataHook: 'my-input'
            });
          }
        }]);

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

      var handleChangeSpy = jest.spyOn(ControlledInputWithRef.prototype, 'handleChange');

      var _render2 = render(_react2.default.createElement(ControlledInputWithRef, null), 'my-input'),
          driver = _render2.driver;

      driver.enterText('foo');
      expect(handleChangeSpy).toHaveBeenCalledTimes(2);
      expect(handleChangeSpy.mock.calls[0][0].target.value).toBe('foo');
      expect(handleChangeSpy.mock.calls[1][0].target.value).toBe('');
    });
  });

  describe('prefix attribute', function () {
    it('should allow adding a custom prefix component', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { prefix: _react2.default.createElement('div', { className: 'my-button' }) }));
      expect(driver.hasPrefix()).toBeTruthy();
      expect(driver.prefixComponentExists('.my-button')).toBeTruthy();
    });

    it('should add `withPrefix` classname to input', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { prefix: 'hello' }));
      expect(driver.hasPrefixClass()).toBeTruthy();
    });
  });

  describe('suffix attribute', function () {
    it('should allow adding a custom suffix component', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { suffix: _react2.default.createElement('div', { className: 'my-button' }) }));
      expect(driver.hasSuffix()).toBeTruthy();
      expect(driver.suffixComponentExists('.my-button')).toBeTruthy();
    });

    it('should add `withSuffix` classname to input', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { suffix: 'hello' }));
      expect(driver.hasSuffixClass()).toBeTruthy();
    });

    it('should add `withSuffixes` classname to input when more than 1 suffix applied', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { suffix: 'hello', magnifyingGlass: true }));
      expect(driver.hasSuffixesClass()).toBeTruthy();
    });

    it('should render menu arrow as the last suffix', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { suffix: 'hello', menuArrow: true }));
      expect(driver.isMenuArrowLast()).toBeTruthy();
    });
  });

  describe('aria attributes', function () {
    it('should allow adding a custom aria-label', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { ariaLabel: 'hello' }));
      expect(driver.getAriaLabel()).toBe('hello');
    });

    it('should not have any aria label buy default', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, null));
      expect(driver.getAriaLabel()).toBeNull;
    });

    it('should allow adding aria-controls', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { ariaControls: 'id' }));
      expect(driver.getAriaControls()).toBe('id');
    });

    it('should not have any aria controls by default', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, null));
      expect(driver.getAriaControls()).toBeNull;
    });

    it('should allow adding aria-describeby', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, { ariaDescribedby: 'blabla' }));
      expect(driver.getAriaDescribedby()).toBe('blabla');
    });

    it('should not have any aria-describeby buy default', function () {
      var driver = createDriver(_react2.default.createElement(_2.default, null));
      expect(driver.getAriaDescribedby()).toBeNull;
    });
  });

  describe('className prop', function () {
    it('should set className on root element', function () {
      var className = 'foo';
      var driver = createDriver(_react2.default.createElement(_2.default, { className: className }));
      expect(driver.getRootElementClasses()).toContain(className);
    });

    it('should NOT affect the native input classes when className passed', function () {
      var className = 'foo';
      var driver = createDriver(_react2.default.createElement(_2.default, { className: className, suffix: _react2.default.createElement('div', { className: 'my-button' }) }));
      expect(driver.getInputElementClasses()).not.toContain(className);
      expect(driver.suffixComponentExists('.my-button')).toBeTruthy();
    });
  });
});

describe('testkit exists', function () {
  afterEach(function () {
    return (0, _unit.cleanup)();
  });

  it('should NOT exist', function () {
    var dataHook1 = 'hook1';
    var dataHook2 = 'hook2';
    var value = 'hello';
    var onChange = function onChange() {};

    var _render3 = (0, _unit.render)(_react2.default.createElement(_2.default, { value: value, onChange: onChange, dataHook: dataHook1 })),
        container = _render3.container;

    var driver = (0, _testkit.inputTestkitFactory)({
      wrapper: container,
      dataHook: dataHook2
    });

    expect(driver.exists()).toBeFalsy();
  });
});

describe('testkit', function () {
  it('should exist', function () {
    var value = 'hello';
    var onChange = function onChange() {};
    expect((0, _testkitSanity.isTestkitExists)(_react2.default.createElement(_2.default, { value: value, onChange: onChange }), _testkit.inputTestkitFactory)).toBe(true);
  });

  it('should NOT exist', function () {
    var value = 'hello';
    var onChange = function onChange() {};
    expect((0, _testkitSanity.isTestkitExists)(_react2.default.createElement(_2.default, { value: value, onChange: onChange }), _testkit.inputTestkitFactory)).toBe(true);
  });
});

describe('enzyme testkit', function () {
  it('should exist', function () {
    var value = 'hello';
    var onChange = function onChange() {};
    expect((0, _testkitSanity.isEnzymeTestkitExists)(_react2.default.createElement(_2.default, { value: value, onChange: onChange }), _enzyme.inputTestkitFactory, _enzyme2.mount)).toBe(true);
  });
});