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

wix-style-react

'use strict';

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

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; }; /* eslint-disable react/prop-types */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _enzyme = require('enzyme');

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

var _Label2 = _interopRequireDefault(_Label);

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

var _FormField = require('./FormField.driver');

var _FormField2 = _interopRequireDefault(_FormField);

var _ = require('.');

var _2 = _interopRequireDefault(_);

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; }

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

var createDriver = (0, _driverFactory.createDriverFactory)(_FormField2.default);

describe('FormField', function () {
  var renderFormField = function renderFormField() {
    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    return _react2.default.createElement(_2.default, _extends({}, props, { children: props.children || _react2.default.createElement('div', null) }));
  };
  var label = 'field label';

  it('should have correct displayName', function () {
    var wrapper = (0, _enzyme.mount)(renderFormField());
    expect(wrapper.name()).toEqual('FormField');
  });

  describe('`label` prop', function () {
    it('should render contents', function () {
      var driver = createDriver(renderFormField({ label: label }));
      expect(driver.getLabel().innerHTML).toMatch(label);
    });

    it('should not render div when `label` is undefined', function () {
      var driver = createDriver(renderFormField());
      expect(driver.getLabel()).toEqual(null);
    });
  });

  describe('`labelPlacement` prop', function () {
    it('should render the label on top', function () {
      var driver = createDriver(renderFormField({ label: label, labelPlacement: 'top' }));
      expect(driver.getLabel().innerHTML).toMatch(label);
    });

    it('should render the label on the right', function () {
      var driver = createDriver(renderFormField({ label: label, labelPlacement: 'right' }));
      expect(driver.getLabel().innerHTML).toMatch(label);
    });

    it('should render the label on the left', function () {
      var driver = createDriver(renderFormField({ label: label, labelPlacement: 'left' }));
      expect(driver.getLabel().innerHTML).toMatch(label);
    });
  });

  describe('required', function () {
    var required = true;

    describe('given `label` and `required` props', function () {
      it('should render as required', function () {
        var driver = createDriver(renderFormField({ label: label, required: required }));
        expect(driver.isRequired()).toEqual(true);
      });
    });

    describe('given only `required` prop', function () {
      it('should render it inline', function () {
        var driver = createDriver(renderFormField({ required: required }));
        expect(driver.isRequired()).toEqual(true);
        expect(!!driver.element().querySelector('[data-hook="formfield-inline-suffixes"]')).toEqual(true);
      });
    });

    it('should not render when `required` prop', function () {
      var driver = createDriver(renderFormField());
      expect(driver.isRequired()).toEqual(false);
    });
  });

  describe('`infoContent` icon with tooltip', function () {
    var infoContent = 'hello from tooltip';
    var tooltipProps = {
      relative: true,
      appendToParent: true,
      showDelay: 0
    };

    it('should display `infoContent` value in tooltip', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
      var driver;
      return regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              driver = createDriver(renderFormField({ infoContent: infoContent, tooltipProps: tooltipProps }));
              _context.t0 = expect;
              _context.next = 4;
              return driver.getInfoContent();

            case 4:
              _context.t1 = _context.sent;
              _context.t2 = infoContent;
              (0, _context.t0)(_context.t1).toBe(_context.t2);

            case 7:
            case 'end':
              return _context.stop();
          }
        }
      }, _callee, undefined);
    })));

    describe('given `label`', function () {
      var props = { label: label, infoContent: infoContent, tooltipProps: tooltipProps };

      it('should display `infoContent` value in tooltip', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
        var driver;
        return regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                driver = createDriver(renderFormField(props));
                _context2.t0 = expect;
                _context2.next = 4;
                return driver.getInfoContent();

              case 4:
                _context2.t1 = _context2.sent;
                _context2.t2 = infoContent;
                (0, _context2.t0)(_context2.t1).toBe(_context2.t2);

              case 7:
              case 'end':
                return _context2.stop();
            }
          }
        }, _callee2, undefined);
      })));
    });
  });

  describe('`children` prop', function () {
    var Children = function (_React$Component) {
      _inherits(Children, _React$Component);

      function Children() {
        _classCallCheck(this, Children);

        return _possibleConstructorReturn(this, (Children.__proto__ || Object.getPrototypeOf(Children)).apply(this, arguments));
      }

      _createClass(Children, [{
        key: 'componentDidMount',
        value: function componentDidMount() {
          this.props.onMount();
        }
      }, {
        key: 'render',
        value: function render() {
          return _react2.default.createElement('div', null);
        }
      }]);

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

    it('should be rendered', function () {
      var text = 'hello';
      var driver = createDriver(renderFormField({ children: text }));
      expect(driver.getChildren().innerHTML).toEqual(text);
    });

    describe('when function', function () {
      var setCharactersLeftOnMount = function setCharactersLeftOnMount(charactersLeft) {
        return function (_ref3) {
          var setCharactersLeft = _ref3.setCharactersLeft;
          return _react2.default.createElement(Children, { onMount: function onMount() {
              return setCharactersLeft(charactersLeft);
            } });
        };
      };

      it('should receive setCharactersLeft', function () {
        var children = jest.fn();
        createDriver(renderFormField({ children: children }));
        expect(_typeof(children.mock.calls[0][0].setCharactersLeft)).toBe('function');
      });

      describe('with `label` prop', function () {
        it('should display counter when `setCharactersLeft` called', function () {
          var charactersLeft = 87987;
          var driver = createDriver(renderFormField({
            label: label,
            children: setCharactersLeftOnMount(charactersLeft)
          }));
          expect(driver.getLengthLeft()).toBe(charactersLeft);
        });

        it('should display different color when lengtLeft < 0', function () {
          var charactersLeft = -1;
          var driver = createDriver(renderFormField({
            label: label,
            children: setCharactersLeftOnMount(charactersLeft)
          }));
          expect(driver.isLengthExceeded()).toBe(true);
        });

        it('should display 0 when lengtLeft === 0', function () {
          var charactersLeft = 0;
          var driver = createDriver(renderFormField({
            label: label,
            children: setCharactersLeftOnMount(charactersLeft)
          }));
          expect(driver.getLengthLeft()).toBe(0);
        });
      });

      describe('without `label` prop', function () {
        it('should not display counter', function () {
          var driver = createDriver(renderFormField({ children: setCharactersLeftOnMount(1) }));
          expect(driver.getLengthLeft()).toEqual(null);
        });
      });
    });
  });

  describe('`id` prop', function () {
    var id = 'five';

    it('should be added to label as `htmlFor` prop', function () {
      var wrapper = (0, _enzyme.mount)(renderFormField({ id: id, label: label }));
      expect(wrapper.find(_Label2.default).prop('for')).toEqual(id);
    });
  });
});