enzyme/build/__tests__/Utils-spec.js

JavaScript Testing utilities for 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 _helpers = require('./_helpers.js');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _chai = require('chai');

var _sinon = require('sinon');

var _sinon2 = _interopRequireDefault(_sinon);

var _Utils = require('../Utils');

var _ = require('../');

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

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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

describe('Utils', function () {

  describe('onPrototype', function () {
    var Foo = function () {
      function Foo() {
        _classCallCheck(this, Foo);
      }

      _createClass(Foo, [{
        key: 'a',
        value: function () {
          function a() {}

          return a;
        }()
      }, {
        key: 'b',
        value: function () {
          function b() {}

          return b;
        }()
      }, {
        key: 'componentDidUpdate',
        value: function () {
          function componentDidUpdate() {}

          return componentDidUpdate;
        }()
      }]);

      return Foo;
    }();

    var lifecycleSpy = _sinon2.default.spy();
    var methodSpy = _sinon2.default.spy();

    (0, _Utils.onPrototype)(Foo, lifecycleSpy, methodSpy);

    (0, _chai.expect)(lifecycleSpy.callCount).to.equal(1);
    (0, _chai.expect)(lifecycleSpy.args[0][0]).to.equal(Foo.prototype);
    (0, _chai.expect)(lifecycleSpy.args[0][1]).to.equal('componentDidUpdate');

    (0, _chai.expect)(methodSpy.callCount).to.equal(2);
    (0, _chai.expect)(methodSpy.args[0][0]).to.equal(Foo.prototype);
    (0, _chai.expect)(methodSpy.args[0][1]).to.equal('a');
    (0, _chai.expect)(methodSpy.args[1][1]).to.equal('b');
  });

  (0, _helpers.describeWithDOM)('getNode', function () {

    it('should return a DOMNode when a DOMComponent is given', function () {
      var div = (0, _.mount)(_react2.default.createElement('div', null)).node;
      (0, _chai.expect)((0, _Utils.getNode)(div)).to.be.instanceOf(window.HTMLElement);
    });

    it('should return the component when a component is given', function () {
      var Foo = function (_React$Component) {
        _inherits(Foo, _React$Component);

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

          return _possibleConstructorReturn(this, Object.getPrototypeOf(Foo).apply(this, arguments));
        }

        _createClass(Foo, [{
          key: 'render',
          value: function () {
            function render() {
              return _react2.default.createElement('div', null);
            }

            return render;
          }()
        }]);

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

      var foo = (0, _.mount)(_react2.default.createElement(Foo, null)).node;
      (0, _chai.expect)((0, _Utils.getNode)(foo)).to.equal(foo);
    });
  });

  describe('nodeEqual', function () {

    it('should match empty elements of same tag', function () {

      (0, _chai.expect)((0, _Utils.nodeEqual)(_react2.default.createElement('div', null), _react2.default.createElement('div', null))).to.equal(true);
    });

    it('should not match empty elements of different type', function () {

      (0, _chai.expect)((0, _Utils.nodeEqual)(_react2.default.createElement('div', null), _react2.default.createElement('nav', null))).to.equal(false);
    });

    it('should match basic prop types', function () {

      (0, _chai.expect)((0, _Utils.nodeEqual)(_react2.default.createElement('div', { className: 'foo' }), _react2.default.createElement('div', { className: 'foo' }))).to.equal(true);

      (0, _chai.expect)((0, _Utils.nodeEqual)(_react2.default.createElement('div', { id: 'foo', className: 'bar' }), _react2.default.createElement('div', { id: 'foo', className: 'bar' }))).to.equal(true);

      (0, _chai.expect)((0, _Utils.nodeEqual)(_react2.default.createElement('div', { id: 'foo', className: 'baz' }), _react2.default.createElement('div', { id: 'foo', className: 'bar' }))).to.equal(false);
    });

    it('should check children as well', function () {

      (0, _chai.expect)((0, _Utils.nodeEqual)(_react2.default.createElement(
        'div',
        null,
        _react2.default.createElement('div', null)
      ), _react2.default.createElement('div', null))).to.equal(false);

      (0, _chai.expect)((0, _Utils.nodeEqual)(_react2.default.createElement(
        'div',
        null,
        _react2.default.createElement('div', null)
      ), _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement('div', null)
      ))).to.equal(true);

      (0, _chai.expect)((0, _Utils.nodeEqual)(_react2.default.createElement(
        'div',
        null,
        _react2.default.createElement('div', { className: 'foo' })
      ), _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement('div', { className: 'foo' })
      ))).to.equal(true);

      (0, _chai.expect)((0, _Utils.nodeEqual)(_react2.default.createElement(
        'div',
        null,
        _react2.default.createElement('div', { className: 'foo' })
      ), _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement('div', null)
      ))).to.equal(false);
    });

    it('should test deepEquality with object props', function () {

      (0, _chai.expect)((0, _Utils.nodeEqual)(_react2.default.createElement('div', { foo: { a: 1, b: 2 } }), _react2.default.createElement('div', { foo: { a: 1, b: 2 } }))).to.equal(true);

      (0, _chai.expect)((0, _Utils.nodeEqual)(_react2.default.createElement('div', { foo: { a: 2, b: 2 } }), _react2.default.createElement('div', { foo: { a: 1, b: 2 } }))).to.equal(false);
    });
  });

  describe('propFromEvent', function () {

    var fn = _Utils.propFromEvent;

    it('should work', function () {
      (0, _chai.expect)(fn('click')).to.equal('onClick');
      (0, _chai.expect)(fn('mouseEnter')).to.equal('onMouseEnter');
    });
  });

  describe('isSimpleSelector', function () {

    describe('prohibited selectors', function () {
      function isComplex(selector) {
        it(selector, function () {
          (0, _chai.expect)((0, _Utils.isSimpleSelector)(selector)).to.equal(false);
        });
      }

      isComplex('.foo .bar');
      isComplex(':visible');
      isComplex('.foo>.bar');
      isComplex('.foo > .bar');
      isComplex('.foo~.bar');
    });

    describe('allowed selectors', function () {
      function isSimple(selector) {
        it(selector, function () {
          (0, _chai.expect)((0, _Utils.isSimpleSelector)(selector)).to.equal(true);
        });
      }

      isSimple('.foo');
      isSimple('.foo-and-foo');
      isSimple('input[foo="bar"]');
      isSimple('input[foo="bar"][bar="baz"][baz="foo"]');
      isSimple('.FoOaNdFoO');
      isSimple('tag');
      isSimple('.foo.bar');
      isSimple('input.foo');
    });
  });

  describe('selectorType', function () {

    it('returns CLASS_TYPE for a prefixed .', function () {
      var type = (0, _Utils.selectorType)('.foo');

      (0, _chai.expect)(type).to.be.equal(_Utils.SELECTOR.CLASS_TYPE);
    });

    it('returns ID_TYPE for a prefixed #', function () {
      var type = (0, _Utils.selectorType)('#foo');

      (0, _chai.expect)(type).to.be.equal(_Utils.SELECTOR.ID_TYPE);
    });

    it('returns PROP_TYPE for []', function () {
      function isProp(selector) {
        (0, _chai.expect)((0, _Utils.selectorType)(selector)).to.be.equal(_Utils.SELECTOR.PROP_TYPE);
      }

      isProp('[foo]');
      isProp('[foo="bar"]');
    });
  });

  describe('coercePropValue', function () {
    var key = 'foo';
    it('returns undefined if passed undefined', function () {
      (0, _chai.expect)((0, _Utils.coercePropValue)(key, undefined)).to.equal(undefined);
    });

    it('returns number if passed a stringified number', function () {
      (0, _chai.expect)((0, _Utils.coercePropValue)(key, '1')).to.be.equal(1);
      (0, _chai.expect)((0, _Utils.coercePropValue)(key, '0')).to.be.equal(0);
    });

    it('returns a boolean if passed a stringified bool', function () {
      (0, _chai.expect)((0, _Utils.coercePropValue)(key, 'true')).to.equal(true);
      (0, _chai.expect)((0, _Utils.coercePropValue)(key, 'false')).to.equal(false);
    });
  });

  describe('mapNativeEventNames', function () {
    describe('given an event that isn\'t a mapped', function () {
      it('returns the original event', function () {
        var result = (0, _Utils.mapNativeEventNames)('click');
        (0, _chai.expect)(result).to.equal('click');
      });
    });

    describe('given a React capitalised mouse event', function () {
      it('returns the original event', function () {
        var result = (0, _Utils.mapNativeEventNames)('mouseEnter');
        (0, _chai.expect)(result).to.equal('mouseEnter');
      });
    });

    describe('given a native lowercase event', function () {
      it('transforms it into the React capitalised event', function () {
        var result = (0, _Utils.mapNativeEventNames)('dragenter');
        (0, _chai.expect)(result).to.equal('dragEnter');
      });
    });
  });
});