enzyme/build/__tests__/Debug-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 _chai = require('chai');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Debug = require('../Debug');

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

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

var _version = require('../version');

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

describe('debug', function () {

  describe('spaces(n)', function () {
    it('should return n spaces', function () {
      (0, _chai.expect)((0, _Debug.spaces)(4)).to.equal('    ');
      (0, _chai.expect)((0, _Debug.spaces)(2)).to.equal('  ');
      (0, _chai.expect)((0, _Debug.spaces)(0)).to.equal('');
    });
  });

  describe('indent(depth, string)', function () {
    it('should indent a single-line string by (n) spaces', function () {
      (0, _chai.expect)((0, _Debug.indent)(4, 'hello')).to.equal('    hello');
      (0, _chai.expect)((0, _Debug.indent)(2, 'hello')).to.equal('  hello');
      (0, _chai.expect)((0, _Debug.indent)(0, 'hello')).to.equal('hello');
    });

    it('should intent a multiline string by (n) spaces', function () {
      (0, _chai.expect)((0, _Debug.indent)(2, 'foo\nbar')).to.equal('  foo\n  bar');
    });
  });

  describe('debugNode(node)', function () {

    it('should render a node with no props or children as single single xml tag', function () {
      (0, _chai.expect)((0, _Debug.debugNode)(_react2.default.createElement('div', null))).to.equal('<div />');
    });

    it('should render props inline inline', function () {
      (0, _chai.expect)((0, _Debug.debugNode)(_react2.default.createElement('div', { id: 'foo', className: 'bar' }))).to.equal('<div id="foo" className="bar" />');
    });

    it('should render children on newline and indented', function () {
      (0, _chai.expect)((0, _Debug.debugNode)(_react2.default.createElement(
        'div',
        null,
        _react2.default.createElement('span', null)
      ))).to.equal('<div>\n  <span />\n</div>');
    });

    it('should render props on root and children', function () {
      (0, _chai.expect)((0, _Debug.debugNode)(_react2.default.createElement(
        'div',
        { id: 'foo' },
        _react2.default.createElement('span', { id: 'bar' })
      ))).to.equal('<div id="foo">\n  <span id="bar" />\n</div>');
    });

    it('should render text on new line and indented', function () {
      (0, _chai.expect)((0, _Debug.debugNode)(_react2.default.createElement(
        'span',
        null,
        'some text'
      ))).to.equal('<span>\n  some text\n</span>');
    });

    it('should render composite components as tags w/ displayName', 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);

      Foo.displayName = 'Bar';

      (0, _chai.expect)((0, _Debug.debugNode)(_react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(Foo, null)
      ))).to.equal('<div>\n  <Bar />\n</div>');
    });

    it('should render composite components as tags w/ name', function () {
      var Foo = function (_React$Component2) {
        _inherits(Foo, _React$Component2);

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

      (0, _chai.expect)((0, _Debug.debugNode)(_react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(Foo, null)
      ))).to.equal('<div>\n  <Foo />\n</div>');
    });

    (0, _helpers.itIf)(!_version.REACT013, 'should render stateless components as tags w/ name', function () {

      var Foo = function Foo() {
        return _react2.default.createElement('div', null);
      };

      (0, _chai.expect)((0, _Debug.debugNode)(_react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(Foo, null)
      ))).to.equal('<div>\n  <Foo />\n</div>');
    });

    it('should render mapped children properly', function () {
      (0, _chai.expect)((0, _Debug.debugNode)(_react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          'i',
          null,
          'not in array'
        ),
        ['a', 'b', 'c']
      ))).to.equal('<div>\n  <i>\n    not in array\n  </i>\n  a\n  b\n  c\n</div>');
    });

    it('should render number children properly', function () {
      (0, _chai.expect)((0, _Debug.debugNode)(_react2.default.createElement(
        'div',
        null,
        -1,
        0,
        1
      ))).to.equal('<div>\n  -1\n  0\n  1\n</div>');
    });

    it('renders html entities properly', function () {
      (0, _chai.expect)((0, _Debug.debugNode)(_react2.default.createElement(
        'div',
        null,
        '>'
      ))).to.equal('<div>\n  &gt;\n</div>');
    });

    it('should not render falsy children ', function () {
      (0, _chai.expect)((0, _Debug.debugNode)(_react2.default.createElement(
        'div',
        { id: 'foo' },
        false,
        null,
        undefined,
        ''
      ))).to.equal('<div id="foo" />');
    });
  });

  (0, _helpers.describeWithDOM)('debugInst(inst)', function () {
    it('renders basic debug of mounted components', function () {
      var Foo = function (_React$Component3) {
        _inherits(Foo, _React$Component3);

        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',
                { className: 'foo' },
                _react2.default.createElement(
                  'span',
                  null,
                  'Foo'
                )
              );
            }

            return render;
          }()
        }]);

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

      (0, _chai.expect)((0, _.mount)(_react2.default.createElement(Foo, { id: '2' })).debug()).to.eql('<Foo id="2">\n  <div className="foo">\n    <span>\n      Foo\n    </span>\n  </div>\n</Foo>');
    });

    it('renders debug of compositional components', function () {
      var Foo = function (_React$Component4) {
        _inherits(Foo, _React$Component4);

        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',
                { className: 'foo' },
                _react2.default.createElement(
                  'span',
                  null,
                  'Foo'
                )
              );
            }

            return render;
          }()
        }]);

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

      var Bar = function (_React$Component5) {
        _inherits(Bar, _React$Component5);

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

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

        _createClass(Bar, [{
          key: 'render',
          value: function () {
            function render() {
              return _react2.default.createElement(
                'div',
                { className: 'bar' },
                _react2.default.createElement(
                  'span',
                  null,
                  'Non-Foo'
                ),
                _react2.default.createElement(Foo, { baz: 'bax' })
              );
            }

            return render;
          }()
        }]);

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

      (0, _chai.expect)((0, _.mount)(_react2.default.createElement(Bar, { id: '2' })).debug()).to.eql('<Bar id="2">\n  <div className="bar">\n    <span>\n      Non-Foo\n    </span>\n    <Foo baz="bax">\n      <div className="foo">\n        <span>\n          Foo\n        </span>\n      </div>\n    </Foo>\n  </div>\n</Bar>');
    });

    it('renders a subtree of a mounted tree', function () {
      var Foo = function (_React$Component6) {
        _inherits(Foo, _React$Component6);

        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',
                { className: 'foo' },
                _react2.default.createElement(
                  'span',
                  null,
                  'Foo'
                )
              );
            }

            return render;
          }()
        }]);

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

      var Bar = function (_React$Component7) {
        _inherits(Bar, _React$Component7);

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

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

        _createClass(Bar, [{
          key: 'render',
          value: function () {
            function render() {
              return _react2.default.createElement(
                'div',
                { className: 'bar' },
                _react2.default.createElement(
                  'span',
                  null,
                  'Non-Foo'
                ),
                _react2.default.createElement(Foo, { baz: 'bax' })
              );
            }

            return render;
          }()
        }]);

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

      (0, _chai.expect)((0, _.mount)(_react2.default.createElement(Bar, { id: '2' })).find(Foo).debug()).to.eql('<Foo baz="bax">\n  <div className="foo">\n    <span>\n      Foo\n    </span>\n  </div>\n</Foo>');
    });

    it('renders passed children properly', function () {
      var Foo = function (_React$Component8) {
        _inherits(Foo, _React$Component8);

        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',
                { className: 'foo' },
                _react2.default.createElement(
                  'span',
                  null,
                  'From Foo'
                ),
                this.props.children
              );
            }

            return render;
          }()
        }]);

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

      var Bar = function (_React$Component9) {
        _inherits(Bar, _React$Component9);

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

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

        _createClass(Bar, [{
          key: 'render',
          value: function () {
            function render() {
              return _react2.default.createElement(
                'div',
                { className: 'bar' },
                _react2.default.createElement(
                  Foo,
                  { baz: 'bax' },
                  _react2.default.createElement(
                    'span',
                    null,
                    'From Bar'
                  )
                )
              );
            }

            return render;
          }()
        }]);

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

      (0, _chai.expect)((0, _.mount)(_react2.default.createElement(Bar, { id: '2' })).debug()).to.eql('<Bar id="2">\n  <div className="bar">\n    <Foo baz="bax">\n      <div className="foo">\n        <span>\n          From Foo\n        </span>\n        <span>\n          From Bar\n        </span>\n      </div>\n    </Foo>\n  </div>\n</Bar>');
    });
  });
});