@deskpro/react-forms/lib/__tests__/Input-test.js

Forms library for React

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _Input2 = _interopRequireDefault(_Input);

var _shallow = require('react-test-renderer/shallow');

var _shallow2 = _interopRequireDefault(_shallow);

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

describe('<Input/>', function () {

  var renderer = void 0;

  beforeEach(function () {
    renderer = renderer = new _shallow2.default();
  });

  it('renders into "input" DOM component by default', function () {
    renderer.render(_react2.default.createElement(_Input2.default, { value: 'hello' }));
    var result = renderer.getRenderOutput();
    assert(result.type === 'input');
    assert(result.props.value === 'hello');
  });

  it('can be configured to fire onChange without debounce', function () {
    var onChange = sinon.spy();
    renderer.render(_react2.default.createElement(_Input2.default, { value: 'hello', onChange: onChange, debounce: 0 }));
    var result = void 0;
    result = renderer.getRenderOutput();
    result.props.onChange({ target: { value: 'x' } });
    assert(onChange.calledOnce);
    assert(onChange.firstCall.args[0] === 'x');
  });

  it('it normalizes empty string to null for DOM events', function () {
    var onChange = sinon.spy();
    renderer.render(_react2.default.createElement(_Input2.default, { value: 'hello', onChange: onChange, debounce: 0 }));
    var result = void 0;
    result = renderer.getRenderOutput();
    result.props.onChange({ target: { value: '' } });
    assert(onChange.calledOnce);
    assert(onChange.firstCall.args[0] === null);
  });

  it('it propagates onChange value (which is not a DOM event)', function () {
    var onChange = sinon.spy();
    renderer.render(_react2.default.createElement(_Input2.default, { value: 'hello', onChange: onChange, debounce: 0 }));
    var result = void 0;
    result = renderer.getRenderOutput();
    result.props.onChange('value');
    assert(onChange.calledOnce);
    assert(onChange.firstCall.args[0] === 'value');
  });

  it('it can be parametrized with custom input components', function () {
    function CustomComponent(props) {
      return _react2.default.createElement('input', props);
    }
    renderer.render(_react2.default.createElement(_Input2.default, { value: 'hello', Component: CustomComponent }));
    var result = void 0;
    result = renderer.getRenderOutput();
    assert(result.type === CustomComponent);
  });

  it('debounces on onChange event', function (done) {
    var onChange = sinon.spy();
    renderer.render(_react2.default.createElement(_Input2.default, { debounce: 50, value: 'hello', onChange: onChange }));
    var result = void 0;
    result = renderer.getRenderOutput();
    assert(result.props.value === 'hello');

    result.props.onChange({ target: { value: 'x' } });
    result = renderer.getRenderOutput();
    assert(result.props.value === 'x');

    result.props.onChange({ target: { value: 'x2' } });
    result = renderer.getRenderOutput();
    assert(result.props.value === 'x2');

    setTimeout(function () {
      assert(onChange.calledOnce);
      assert(onChange.firstCall.args[0] === 'x2');
      renderer.unmount();
      done();
    }, 100);
  });

  it('finalizes onChange debounce on blur', function (done) {
    var onChange = sinon.spy();
    renderer.render(_react2.default.createElement(_Input2.default, { debounce: 50, value: 'hello', onChange: onChange }));
    var result = void 0;
    result = renderer.getRenderOutput();
    assert(result.props.value === 'hello');

    result.props.onChange({ target: { value: 'x' } });
    result = renderer.getRenderOutput();
    assert(result.props.value === 'x');

    result.props.onBlur();
    assert(onChange.calledOnce);
    assert(onChange.firstCall.args[0] === 'x');

    setTimeout(function () {
      assert(onChange.calledOnce);
      renderer.unmount();
      done();
    }, 100);
  });

  it('finalizes onChange debounce on unmount', function (done) {
    var onChange = sinon.spy();
    renderer.render(_react2.default.createElement(_Input2.default, { debounce: 50, value: 'hello', onChange: onChange }));
    var result = void 0;
    result = renderer.getRenderOutput();
    assert(result.props.value === 'hello');

    result.props.onChange({ target: { value: 'x' } });
    result = renderer.getRenderOutput();
    assert(result.props.value === 'x');

    renderer.unmount();
    assert(onChange.calledOnce);
    assert(onChange.firstCall.args[0] === 'x');

    setTimeout(function () {
      assert(onChange.calledOnce);
      done();
    }, 100);
  });

  it('cancels debounce if new value is set via props', function (done) {
    var onChange = sinon.spy();
    renderer.render(_react2.default.createElement(_Input2.default, { debounce: 50, value: 'hello', onChange: onChange }));
    var result = void 0;
    result = renderer.getRenderOutput();
    assert(result.props.value === 'hello');

    result.props.onChange({ target: { value: 'x' } });
    result = renderer.getRenderOutput();
    assert(result.props.value === 'x');

    renderer.render(_react2.default.createElement(_Input2.default, { debounce: 50, value: 'hello!', onChange: onChange }));
    result = renderer.getRenderOutput();
    assert(result.props.value === 'hello!');

    setTimeout(function () {
      assert(!onChange.calledOnce);
      done();
    }, 100);
  });
}); /**
     * @copyright 2016, Prometheus Research, LLC
     */