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

Forms library for React

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactStylesheet = require('@deskpro/react-stylesheet');

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

var _Input2 = _interopRequireDefault(_Input);

var _Label = require('../Label');

var _Label2 = _interopRequireDefault(_Label);

var _Field = require('../Field');

var _Field2 = _interopRequireDefault(_Field);

var _ErrorList = require('../ErrorList');

var _ErrorList2 = _interopRequireDefault(_ErrorList);

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

var _shallow2 = _interopRequireDefault(_shallow);

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

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

  function assertLabel(renderer) {
    var Component = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _Label2.default;

    var result = renderer.getRenderOutput();
    var label = result.props.children[0];
    assert(label);
    assert(label.type === Component);
    return label;
  }

  function assertInput(renderer) {
    var Component = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _Input2.default;

    var result = renderer.getRenderOutput();
    var input = result.props.children[1].props.children;
    assert(input);
    assert(input.type === Component);
    return input;
  }

  function assertErrorList(renderer) {
    var Component = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _ErrorList2.default;

    var result = renderer.getRenderOutput();
    var errorList = result.props.children[2];
    assert(errorList);
    assert(errorList.type === Component);
    return errorList;
  }

  var renderer = void 0;

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

  it('renders an input with value', function () {
    var formValue = { value: 'hello', params: {} };
    renderer.render(_react2.default.createElement(_Field2.default, { formValue: formValue }));
    var input = assertInput(renderer);
    assert(input.props.value === 'hello');
  });

  it('reacts on onChange (DOM event passed) from input by updating the formValue', function () {
    var formValue = { value: 'hello', params: {}, update: sinon.spy() };
    renderer.render(_react2.default.createElement(_Field2.default, { formValue: formValue }));
    var input = void 0;
    input = assertInput(renderer);
    assert(input.props.value === 'hello');
    var event = { target: { value: 'changed!' }, stopPropagation: sinon.spy() };
    input.props.onChange(event);
    assert(event.stopPropagation.calledOnce);
    assert(formValue.update.calledOnce);
    assert(formValue.update.firstCall.args[0] === 'changed!');
  });

  it('normalizes an empty string from DOM event to null', function () {
    var formValue = { value: 'hello', params: {}, update: sinon.spy() };
    renderer.render(_react2.default.createElement(_Field2.default, { formValue: formValue }));
    var input = void 0;
    input = assertInput(renderer);
    assert(input.props.value === 'hello');
    var event = { target: { value: '' }, stopPropagation: sinon.spy() };
    input.props.onChange(event);
    assert(event.stopPropagation.calledOnce);
    assert(formValue.update.calledOnce);
    assert(formValue.update.firstCall.args[0] === null);
  });

  it('reacts on onChange (value passed) from input by updating the formValue', function () {
    var formValue = { value: 'hello', params: {}, update: sinon.spy() };
    renderer.render(_react2.default.createElement(_Field2.default, { formValue: formValue }));
    var input = void 0;
    input = assertInput(renderer);
    assert(input.props.value === 'hello');
    var value = 'changed!';
    input.props.onChange(value);
    assert(formValue.update.calledOnce);
    assert(formValue.update.firstCall.args[0] === 'changed!');
  });

  it('renders a label', function () {
    var formValue = { value: 'hello', params: {}, schema: {} };
    renderer.render(_react2.default.createElement(_Field2.default, { formValue: formValue, label: 'Label' }));
    var label = assertLabel(renderer);
    assert(label.props.label === 'Label');
    assert(label.props.schema === formValue.schema);
  });

  it('does not show error list if not dirty', function () {
    var formValue = {};
    renderer.render(_react2.default.createElement(_Field2.default, { formValue: formValue, label: 'Label' }));
    var errorList = assertErrorList(renderer);
    assert(errorList.props.formValue === formValue);
    assert(errorList.props.hideNonForced);
  });

  it('renders an error list if it becomes dirty', function () {
    var formValue = {};
    renderer.render(_react2.default.createElement(_Field2.default, { formValue: formValue, label: 'Label' }));
    var self = void 0;
    var errorList = void 0;
    errorList = assertErrorList(renderer);
    assert(errorList.props.formValue === formValue);
    assert(errorList.props.hideNonForced);
    self = renderer.getRenderOutput();
    assert(self.props.onBlur);
    self.props.onBlur();
    errorList = assertErrorList(renderer);
    assert(errorList.props.formValue === formValue);
    assert(!errorList.props.hideNonForced);
  });

  it('renders an error list if forced', function () {
    var formValue = { params: { forceShowErrors: true } };
    renderer.render(_react2.default.createElement(_Field2.default, { formValue: formValue, label: 'Label' }));
    var errorList = assertErrorList(renderer);
    assert(errorList.props.formValue === formValue);
    assert(!errorList.props.hideNonForced);
  });

  it('virtualizes rendering of self component', function () {
    var formValue = {};
    function Custom(props) {
      return _react2.default.createElement('div', null);
    }
    var CustomField = (0, _reactStylesheet.style)(_Field2.default, {
      Root: Custom
    });
    renderer.render(_react2.default.createElement(CustomField, { formValue: formValue }));
    var self = renderer.getRenderOutput();
    assert(self);
    assert(self.type === Custom);
  });

  it('virtualizes rendering of input component', function () {
    var formValue = {};
    function Custom(props) {
      return _react2.default.createElement('div', null);
    }
    renderer.render(_react2.default.createElement(_Field2.default, { Input: Custom, formValue: formValue }));
    assertInput(renderer, Custom);
  });

  it('virtualizes rendering of input component (via children element)', function () {
    var formValue = {};
    function Custom(props) {
      return _react2.default.createElement('div', null);
    }
    renderer.render(_react2.default.createElement(
      _Field2.default,
      { formValue: formValue },
      _react2.default.createElement(Custom, { x: '1' })
    ));
    var input = assertInput(renderer, Custom);
    assert(input.props.x === '1');
  });
}); /**
     * @copyright 2016, Prometheus Research, LLC
     */