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

wix-style-react

'use strict';

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 _InputArea = require('./InputArea.driver');

var _InputArea2 = _interopRequireDefault(_InputArea);

var _InputArea3 = require('./InputArea');

var _InputArea4 = _interopRequireDefault(_InputArea3);

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

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

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

var _sinon = require('sinon');

var _sinon2 = _interopRequireDefault(_sinon);

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

var _enzyme2 = require('enzyme');

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

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

describe('InputArea', function () {
  var render = (0, _unit.createRendererWithDriver)(_InputArea2.default);
  var createDriver = function createDriver(jsx) {
    return render(jsx).driver;
  };

  var InputAreaForTesting = function InputAreaForTesting(props) {
    return _react2.default.createElement(_InputArea4.default, _extends({}, props, { dataHook: 'textarea-div' }));
  };

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

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

  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(InputAreaForTesting, props));
      expect(driver.getValue()).toEqual(props.value);
    });
  });

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

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

  describe('maxHeight attribute', function () {
    it('should pass down to the wrapped input', function () {
      var maxHeight = '50px';

      var driver = createDriver(_react2.default.createElement(InputAreaForTesting, { maxHeight: maxHeight }));
      expect(driver.getStyle().maxHeight).toEqual(maxHeight);
    });
  });

  describe('maxLength attribute', function () {
    it('should pass down to the wrapped input - with max length', function () {
      var maxLength = 5;

      var driver = createDriver(_react2.default.createElement(InputAreaForTesting, { maxLength: maxLength }));
      expect(driver.getMaxLength()).toEqual(maxLength);
    });
  });

  describe('counter', function () {
    it('should show correct value when hasCounter and maxLength present', function () {
      var driver = createDriver(_react2.default.createElement(InputAreaForTesting, { hasCounter: true, maxLength: 30, value: 'abc' }));
      expect(driver.getCounterValue()).toEqual('3/30');
    });

    it('should not show counter when hasCounter is not present', function () {
      var driver = createDriver(_react2.default.createElement(InputAreaForTesting, null));
      expect(driver.getHasCounter()).toBeFalsy();
    });
  });

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

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

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

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

    it('should not display an error icon even if the error is true', function () {
      var driver = createDriver(_react2.default.createElement(InputAreaForTesting, { disabled: true, error: true }));
      expect(driver.hasExclamation()).toBeFalsy();
    });

    it('should not be resizable', function () {
      var driver = createDriver(_react2.default.createElement(InputAreaForTesting, { disabled: true }));
      expect(driver.getResizable()).toBeFalsy();
    });
  });

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

      var driver = createDriver(_react2.default.createElement(InputAreaForTesting, { rows: rows }));
      expect(driver.getRowsCount()).toEqual(rows);
    });
  });

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

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

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

      var driver = createDriver(_react2.default.createElement(InputAreaForTesting, { name: name }));
      expect(driver.getName()).toEqual(name);
    });
  });

  describe('readOnly attribute', function () {
    it('should pass down to the wrapped input', function () {
      var driver = createDriver(_react2.default.createElement(InputAreaForTesting, { 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(InputAreaForTesting, null));
      expect(driver.getReadOnly()).toBeFalsy();
    });
  });

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

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

  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(InputAreaForTesting, { 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(InputAreaForTesting, { 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(InputAreaForTesting, { 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(InputAreaForTesting, { 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(InputAreaForTesting, { onKeyDown: onKeyDown }));

      driver.trigger('keyDown', event);

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

  describe('onEnter attribute', function () {
    it('should be called when text is entered to the wrapped input', function () {
      var onEnterPressed = jest.fn();
      var event = { key: 'Enter', keyCode: 13, which: 13 };

      var driver = createDriver(_react2.default.createElement(InputAreaForTesting, { onEnterPressed: onEnterPressed }));

      driver.trigger('keyDown', event);

      expect(onEnterPressed).toBeCalled();
    });
  });

  describe('forceFocus attribute', function () {
    it('should have focus class on input if forceFocus is true', function () {
      var driver = createDriver(_react2.default.createElement(InputAreaForTesting, { 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(InputAreaForTesting, { 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(InputAreaForTesting, { forceHover: true, forceFocus: false }));
      expect(driver.isHoveredStyle()).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(InputAreaForTesting, { autoFocus: false })),
          driver = _render.driver,
          rerender = _render.rerender;

      expect(driver.isFocus()).toBeFalsy();
      rerender(_react2.default.createElement(InputAreaForTesting, { 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(InputAreaForTesting, { autoFocus: true }));
      expect(driver.isFocus()).toBeTruthy();
    });
  });

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

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

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

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

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

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

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

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

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

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

  describe('test tooltip', function () {
    describe('onTooltipShow attribute', function () {
      it('should not display the tooltip by default', function () {
        var driver = createDriver(_react2.default.createElement(InputAreaForTesting, { 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 });

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

      it('should display the tooltip on mouse hover', function () {
        var driver = createDriver(_react2.default.createElement(InputAreaForTesting, { 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");
        });
      });

      it('should call onTooltipShow callback when error tooltip become active', function () {
        var onTooltipShow = _sinon2.default.spy();
        var driver = createDriver(_react2.default.createElement(InputAreaForTesting, {
          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();
        });
      });
    });

    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(InputAreaForTesting, {
            error: true,
            errorMessage: 'I\'m the error message',
            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('testkit', function () {
  it('should exist', function () {
    var value = 'hello';
    var onChange = function onChange() {};
    expect((0, _testkitSanity.isTestkitExists)(_react2.default.createElement(_InputArea4.default, { dataHook: 'texarea-div', value: value, onChange: onChange }), _testkit.inputAreaTestkitFactory)).toBe(true);
  });
});

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