enzyme
Version:
JavaScript Testing utilities for React
1,495 lines (1,230 loc) • 80.1 kB
JavaScript
'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 _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _chai = require('chai');
var _ = require('../');
var _sinon = require('sinon');
var _sinon2 = _interopRequireDefault(_sinon);
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('shallow', function () {
describe('context', function () {
var context = { name: 'foo' };
it('can pass in context', function () {
var SimpleComponent = _react2.default.createClass({
displayName: 'SimpleComponent',
contextTypes: {
name: _react2.default.PropTypes.string
},
render: function () {
function render() {
return _react2.default.createElement(
'div',
null,
this.context.name
);
}
return render;
}()
});
var wrapper = (0, _.shallow)(_react2.default.createElement(SimpleComponent, null), { context: context });
(0, _chai.expect)(wrapper.text()).to.equal('foo');
});
it('should not throw if context is passed in but contextTypes is missing', function () {
var SimpleComponent = _react2.default.createClass({
displayName: 'SimpleComponent',
render: function () {
function render() {
return _react2.default.createElement(
'div',
null,
this.context.name
);
}
return render;
}()
});
(0, _chai.expect)(function () {
return (0, _.shallow)(_react2.default.createElement(SimpleComponent, null), { context: context });
}).to.not['throw'](Error);
});
it('is instrospectable through context API', function () {
var SimpleComponent = _react2.default.createClass({
displayName: 'SimpleComponent',
contextTypes: {
name: _react2.default.PropTypes.string
},
render: function () {
function render() {
return _react2.default.createElement(
'div',
null,
this.context.name
);
}
return render;
}()
});
var wrapper = (0, _.shallow)(_react2.default.createElement(SimpleComponent, null), { context: context });
(0, _chai.expect)(wrapper.context().name).to.equal(context.name);
(0, _chai.expect)(wrapper.context('name')).to.equal(context.name);
});
});
(0, _helpers.describeIf)(!_version.REACT013, 'stateless components', function () {
it('works with stateless components', function () {
var Foo = function Foo(_ref) {
var foo = _ref.foo;
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'div',
{ className: 'bar' },
'bar'
),
_react2.default.createElement(
'div',
{ className: 'qoo' },
foo
)
);
};
var wrapper = (0, _.shallow)(_react2.default.createElement(Foo, { foo: 'qux' }));
(0, _chai.expect)(wrapper.type()).to.equal('div');
(0, _chai.expect)(wrapper.find('.bar')).to.have.length(1);
(0, _chai.expect)(wrapper.find('.qoo').text()).to.equal('qux');
});
});
describe('.contains(node)', function () {
it('should allow matches on the root node', function () {
var a = _react2.default.createElement('div', { className: 'foo' });
var b = _react2.default.createElement('div', { className: 'foo' });
var c = _react2.default.createElement('div', { className: 'bar' });
(0, _chai.expect)((0, _.shallow)(a).contains(b)).to.equal(true);
(0, _chai.expect)((0, _.shallow)(a).contains(c)).to.equal(false);
});
it('should allow matches on a nested node', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('div', { className: 'foo' })
));
var b = _react2.default.createElement('div', { className: 'foo' });
(0, _chai.expect)(wrapper.contains(b)).to.equal(true);
});
it('should match composite components', 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 wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement(Foo, null)
));
var b = _react2.default.createElement(Foo, null);
(0, _chai.expect)(wrapper.contains(b)).to.equal(true);
});
it('should work with strings', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
'foo'
));
(0, _chai.expect)(wrapper.contains('foo')).to.equal(true);
(0, _chai.expect)(wrapper.contains('bar')).to.equal(false);
});
it('should work with numbers', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
1
));
(0, _chai.expect)(wrapper.contains(1)).to.equal(true);
(0, _chai.expect)(wrapper.contains(2)).to.equal(false);
(0, _chai.expect)(wrapper.contains('1')).to.equal(false);
});
it('should work with nested strings & numbers', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement(
'div',
null,
_react2.default.createElement(
'div',
null,
5
)
),
_react2.default.createElement(
'div',
null,
'foo'
)
));
(0, _chai.expect)(wrapper.contains('foo')).to.equal(true);
(0, _chai.expect)(wrapper.contains(_react2.default.createElement(
'div',
null,
'foo'
))).to.equal(true);
(0, _chai.expect)(wrapper.contains(5)).to.equal(true);
(0, _chai.expect)(wrapper.contains(_react2.default.createElement(
'div',
null,
5
))).to.equal(true);
});
it('should do something with arrays of nodes', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement(
'span',
null,
'Hello'
),
_react2.default.createElement(
'div',
null,
'Goodbye'
),
_react2.default.createElement(
'span',
null,
'More'
)
));
var fails = [_react2.default.createElement(
'span',
null,
'wrong'
), _react2.default.createElement(
'div',
null,
'Goodbye'
)];
var passes = [_react2.default.createElement(
'span',
null,
'Hello'
), _react2.default.createElement(
'div',
null,
'Goodbye'
)];
(0, _chai.expect)(wrapper.contains(fails)).to.equal(false);
(0, _chai.expect)(wrapper.contains(passes)).to.equal(true);
});
});
describe('.equals(node)', function () {
it('should allow matches on the root node', function () {
var a = _react2.default.createElement('div', { className: 'foo' });
var b = _react2.default.createElement('div', { className: 'foo' });
var c = _react2.default.createElement('div', { className: 'bar' });
(0, _chai.expect)((0, _.shallow)(a).equals(b)).to.equal(true);
(0, _chai.expect)((0, _.shallow)(a).equals(c)).to.equal(false);
});
it('should NOT allow matches on a nested node', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('div', { className: 'foo' })
));
var b = _react2.default.createElement('div', { className: 'foo' });
(0, _chai.expect)(wrapper.equals(b)).to.equal(false);
});
it('should match composite components', 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);
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement(Foo, null)
));
var b = _react2.default.createElement(
'div',
null,
_react2.default.createElement(Foo, null)
);
(0, _chai.expect)(wrapper.equals(b)).to.equal(true);
});
it('should not expand `node` content', function () {
var Bar = function (_React$Component3) {
_inherits(Bar, _React$Component3);
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', null);
}
return render;
}()
}]);
return Bar;
}(_react2.default.Component);
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(Bar, null);
}
return render;
}()
}]);
return Foo;
}(_react2.default.Component);
(0, _chai.expect)((0, _.shallow)(_react2.default.createElement(Foo, null)).equals(_react2.default.createElement(Bar, null))).to.equal(true);
(0, _chai.expect)((0, _.shallow)(_react2.default.createElement(Foo, null)).equals(_react2.default.createElement(Foo, null))).to.equal(false);
});
});
describe('.find(selector)', function () {
it('should be able to match the root DOM element', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
{ id: 'ttt', className: 'ttt' },
'hello'
));
(0, _chai.expect)(wrapper.find('#ttt')).to.have.length(1);
(0, _chai.expect)(wrapper.find('.ttt')).to.have.length(1);
});
it('should find an element based on a class name', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('input', { className: 'foo' })
));
(0, _chai.expect)(wrapper.find('.foo').type()).to.equal('input');
});
it('should find an element based on a tag name', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('input', { className: 'foo' })
));
(0, _chai.expect)(wrapper.find('input').props().className).to.equal('foo');
});
it('should find a component based on a constructor', function () {
var Foo = function (_React$Component5) {
_inherits(Foo, _React$Component5);
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 wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement(Foo, { className: 'foo' })
));
(0, _chai.expect)(wrapper.find(Foo).type()).to.equal(Foo);
});
it('should find a component based on a display name', 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', null);
}
return render;
}()
}]);
return Foo;
}(_react2.default.Component);
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement(Foo, { className: 'foo' })
));
(0, _chai.expect)(wrapper.find('Foo').type()).to.equal(Foo);
});
it('should find multiple elements based on a class name', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('input', { className: 'foo' }),
_react2.default.createElement('button', { className: 'foo' })
));
(0, _chai.expect)(wrapper.find('.foo').length).to.equal(2);
});
it('should find multiple elements based on a tag name', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('input', { className: 'foo' }),
_react2.default.createElement('input', null),
_react2.default.createElement('button', null)
));
(0, _chai.expect)(wrapper.find('input').length).to.equal(2);
(0, _chai.expect)(wrapper.find('button').length).to.equal(1);
});
it('should find component based on a react prop', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('span', { title: 'foo' })
));
(0, _chai.expect)(wrapper.find('[title="foo"]')).to.have.length(1);
(0, _chai.expect)(wrapper.find('[title]')).to.have.length(1);
});
it('should error sensibly if prop selector without quotes', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('input', { type: 'text' }),
_react2.default.createElement('input', { type: 'hidden' })
));
(0, _chai.expect)(function () {
return wrapper.find('[type=text]');
}).to['throw']();
});
it('should compound tag and prop selector', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('span', { preserveAspectRatio: 'xMaxYMax' })
));
(0, _chai.expect)(wrapper.find('span[preserveAspectRatio="xMaxYMax"]')).to.have.length(1);
(0, _chai.expect)(wrapper.find('span[preserveAspectRatio]')).to.have.length(1);
});
it('should support data prop selectors', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('span', { 'data-foo': 'bar' })
));
(0, _chai.expect)(wrapper.find('[data-foo="bar"]')).to.have.length(1);
(0, _chai.expect)(wrapper.find('[data-foo]')).to.have.length(1);
});
it('should find components with multiple matching react props', function () {
function noop() {}
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('span', { htmlFor: 'foo', onChange: noop, preserveAspectRatio: 'xMaxYMax' })
));
(0, _chai.expect)(wrapper.find('span[htmlFor="foo"][onChange]')).to.have.length(1);
(0, _chai.expect)(wrapper.find('span[htmlFor="foo"][preserveAspectRatio="xMaxYMax"]')).to.have.length(1);
(0, _chai.expect)(wrapper.find('[htmlFor][preserveAspectRatio]')).to.have.length(1);
});
it('should support boolean and numeric values for matching props', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('span', { value: 1 }),
_react2.default.createElement('a', { value: false })
));
(0, _chai.expect)(wrapper.find('span[value=1]')).to.have.length(1);
(0, _chai.expect)(wrapper.find('span[value=2]')).to.have.length(0);
(0, _chai.expect)(wrapper.find('a[value=false]')).to.have.length(1);
(0, _chai.expect)(wrapper.find('a[value=true]')).to.have.length(0);
});
it('should not find key or ref via property selector', function () {
var arrayOfComponents = [_react2.default.createElement('div', { key: '1' }), _react2.default.createElement('div', { key: '2' })];
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('div', { ref: 'foo' }),
arrayOfComponents
));
(0, _chai.expect)(wrapper.find('div[ref="foo"]')).to.have.length(0);
(0, _chai.expect)(wrapper.find('div[key="1"]')).to.have.length(0);
(0, _chai.expect)(wrapper.find('[ref]')).to.have.length(0);
(0, _chai.expect)(wrapper.find('[key]')).to.have.length(0);
});
it('should find multiple elements based on a constructor', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('input', { className: 'foo' }),
_react2.default.createElement('input', null),
_react2.default.createElement('button', null)
));
(0, _chai.expect)(wrapper.find('input').length).to.equal(2);
(0, _chai.expect)(wrapper.find('button').length).to.equal(1);
});
it('should throw on a complex selector', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('input', { className: 'foo' }),
_react2.default.createElement('input', null),
_react2.default.createElement('button', null)
));
(0, _chai.expect)(function () {
return wrapper.find('.foo .foo');
}).to['throw'](Error);
});
it('should support object property selectors', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('input', { 'data-test': 'ref', className: 'foo', type: 'text' }),
_react2.default.createElement('input', { 'data-test': 'ref', type: 'text' }),
_react2.default.createElement('button', { 'data-test': 'ref', prop: undefined }),
_react2.default.createElement('span', { 'data-test': 'ref', prop: null }),
_react2.default.createElement('div', { 'data-test': 'ref', prop: 123 }),
_react2.default.createElement('input', { 'data-test': 'ref', prop: false }),
_react2.default.createElement('a', { 'data-test': 'ref', prop: true })
));
(0, _chai.expect)(wrapper.find({ a: 1 })).to.have.length(0);
(0, _chai.expect)(wrapper.find({ 'data-test': 'ref' })).to.have.length(7);
(0, _chai.expect)(wrapper.find({ className: 'foo' })).to.have.length(1);
(0, _chai.expect)(wrapper.find({ prop: undefined })).to.have.length(1);
(0, _chai.expect)(wrapper.find({ prop: null })).to.have.length(1);
(0, _chai.expect)(wrapper.find({ prop: 123 })).to.have.length(1);
(0, _chai.expect)(wrapper.find({ prop: false })).to.have.length(1);
(0, _chai.expect)(wrapper.find({ prop: true })).to.have.length(1);
});
it('should support complex and nested object property selectors', function () {
var testFunction = function testFunction() {
return {};
};
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('span', { more: [{ id: 1 }], 'data-test': 'ref', prop: true, onChange: testFunction }),
_react2.default.createElement('a', { more: [{ id: 1 }], 'data-test': 'ref' }),
_react2.default.createElement('div', { more: { item: { id: 1 } }, 'data-test': 'ref' }),
_react2.default.createElement('input', { style: { height: 20 }, 'data-test': 'ref' })
));
(0, _chai.expect)(wrapper.find({ 'data-test': 'ref' })).to.have.length(4);
(0, _chai.expect)(wrapper.find({ more: { a: 1 } })).to.have.length(0);
(0, _chai.expect)(wrapper.find({ more: [{ id: 1 }] })).to.have.length(2);
(0, _chai.expect)(wrapper.find({ more: { item: { id: 1 } } })).to.have.length(1);
(0, _chai.expect)(wrapper.find({ style: { height: 20 } })).to.have.length(1);
(0, _chai.expect)(wrapper.find({ more: [{ id: 1 }], 'data-test': 'ref', prop: true, onChange: testFunction })).to.have.length(1);
});
it('should throw when given empty object, null, or an array', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('input', { className: 'foo', type: 'text' })
));
(0, _chai.expect)(function () {
return wrapper.find({});
}).to['throw'](Error);
(0, _chai.expect)(function () {
return wrapper.find([]);
}).to['throw'](Error);
(0, _chai.expect)(function () {
return wrapper.find(null);
}).to['throw'](Error);
});
});
describe('.findWhere(predicate)', function () {
it('should return all elements for a truthy test', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('input', { className: 'foo' }),
_react2.default.createElement('input', null)
));
(0, _chai.expect)(wrapper.findWhere(function () {
return true;
}).length).to.equal(3);
});
it('should return no elements for a falsy test', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('input', { className: 'foo' }),
_react2.default.createElement('input', null)
));
(0, _chai.expect)(wrapper.findWhere(function () {
return false;
}).length).to.equal(0);
});
it('should call the predicate with the wrapped node as the first argument', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('div', { className: 'foo bar' }),
_react2.default.createElement('div', { className: 'foo baz' }),
_react2.default.createElement('div', { className: 'foo bux' })
));
var stub = _sinon2.default.stub();
stub.returns(true);
var spy = _sinon2.default.spy(stub);
wrapper.findWhere(spy);
(0, _chai.expect)(spy.callCount).to.equal(4);
(0, _chai.expect)(spy.args[0][0]).to.be.instanceOf(_.ShallowWrapper);
(0, _chai.expect)(spy.args[1][0]).to.be.instanceOf(_.ShallowWrapper);
(0, _chai.expect)(spy.args[2][0]).to.be.instanceOf(_.ShallowWrapper);
(0, _chai.expect)(spy.args[3][0]).to.be.instanceOf(_.ShallowWrapper);
(0, _chai.expect)(spy.args[1][0].hasClass('bar')).to.equal(true);
(0, _chai.expect)(spy.args[2][0].hasClass('baz')).to.equal(true);
(0, _chai.expect)(spy.args[3][0].hasClass('bux')).to.equal(true);
});
});
describe('.setProps(newProps)', function () {
it('should set props for a component multiple times', function () {
var Foo = function (_React$Component7) {
_inherits(Foo, _React$Component7);
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: this.props.id },
this.props.id
);
}
return render;
}()
}]);
return Foo;
}(_react2.default.Component);
var wrapper = (0, _.shallow)(_react2.default.createElement(Foo, { id: 'foo' }));
(0, _chai.expect)(wrapper.find('.foo').length).to.equal(1);
wrapper.setProps({ id: 'bar', foo: 'bla' });
(0, _chai.expect)(wrapper.find('.bar').length).to.equal(1);
});
it('should call componentWillReceiveProps for new renders', function () {
var spy = _sinon2.default.spy();
var Foo = function (_React$Component8) {
_inherits(Foo, _React$Component8);
function Foo(props) {
_classCallCheck(this, Foo);
var _this8 = _possibleConstructorReturn(this, Object.getPrototypeOf(Foo).call(this, props));
_this8.componentWillReceiveProps = spy;
return _this8;
}
_createClass(Foo, [{
key: 'render',
value: function () {
function render() {
return _react2.default.createElement(
'div',
{ className: this.props.id },
this.props.id
);
}
return render;
}()
}]);
return Foo;
}(_react2.default.Component);
var nextProps = { id: 'bar', foo: 'bla' };
var wrapper = (0, _.shallow)(_react2.default.createElement(Foo, { id: 'foo' }));
(0, _chai.expect)(spy.calledOnce).to.equal(false);
wrapper.setProps(nextProps);
(0, _chai.expect)(spy.calledOnce).to.equal(true);
(0, _chai.expect)(spy.calledWith(nextProps)).to.equal(true);
});
it('should merge newProps with oldProps', function () {
var Foo = function (_React$Component9) {
_inherits(Foo, _React$Component9);
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', this.props);
}
return render;
}()
}]);
return Foo;
}(_react2.default.Component);
var wrapper = (0, _.shallow)(_react2.default.createElement(Foo, { a: 'a', b: 'b' }));
(0, _chai.expect)(wrapper.props().a).to.equal('a');
(0, _chai.expect)(wrapper.props().b).to.equal('b');
wrapper.setProps({ b: 'c', d: 'e' });
(0, _chai.expect)(wrapper.props().a).to.equal('a');
(0, _chai.expect)(wrapper.props().b).to.equal('c');
(0, _chai.expect)(wrapper.props().d).to.equal('e');
});
it('should pass in old context', function () {
var Foo = function (_React$Component10) {
_inherits(Foo, _React$Component10);
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,
this.context.x
);
}
return render;
}()
}]);
return Foo;
}(_react2.default.Component);
Foo.contextTypes = { x: _react2.default.PropTypes.string };
var context = { x: 'yolo' };
var wrapper = (0, _.shallow)(_react2.default.createElement(Foo, { x: 5 }), { context: context });
(0, _chai.expect)(wrapper.first('div').text()).to.equal('yolo');
wrapper.setProps({ x: 5 }); // Just force a re-render
(0, _chai.expect)(wrapper.first('div').text()).to.equal('yolo');
});
});
describe('.setContext(newContext)', function () {
var SimpleComponent = _react2.default.createClass({
displayName: 'SimpleComponent',
contextTypes: {
name: _react2.default.PropTypes.string
},
render: function () {
function render() {
return _react2.default.createElement(
'div',
null,
this.context.name
);
}
return render;
}()
});
it('should set context for a component multiple times', function () {
var context = { name: 'foo' };
var wrapper = (0, _.shallow)(_react2.default.createElement(SimpleComponent, null), { context: context });
(0, _chai.expect)(wrapper.text()).to.equal('foo');
wrapper.setContext({ name: 'bar' });
(0, _chai.expect)(wrapper.text()).to.equal('bar');
wrapper.setContext({ name: 'baz' });
(0, _chai.expect)(wrapper.text()).to.equal('baz');
});
it('should throw if it is called when shallow didnt include context', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(SimpleComponent, null));
(0, _chai.expect)(function () {
return wrapper.setContext({ name: 'bar' });
}).to['throw'](Error);
});
});
describe('.simulate(eventName, data)', function () {
it('should simulate events', function () {
var Foo = function (_React$Component11) {
_inherits(Foo, _React$Component11);
function Foo(props) {
_classCallCheck(this, Foo);
var _this11 = _possibleConstructorReturn(this, Object.getPrototypeOf(Foo).call(this, props));
_this11.state = { count: 0 };
_this11.incrementCount = _this11.incrementCount.bind(_this11);
return _this11;
}
_createClass(Foo, [{
key: 'incrementCount',
value: function () {
function incrementCount() {
this.setState({ count: this.state.count + 1 });
}
return incrementCount;
}()
}, {
key: 'render',
value: function () {
function render() {
return _react2.default.createElement(
'a',
{
className: 'clicks-' + String(this.state.count),
onClick: this.incrementCount
},
'foo'
);
}
return render;
}()
}]);
return Foo;
}(_react2.default.Component);
var wrapper = (0, _.shallow)(_react2.default.createElement(Foo, null));
(0, _chai.expect)(wrapper.find('.clicks-0').length).to.equal(1);
wrapper.simulate('click');
(0, _chai.expect)(wrapper.find('.clicks-1').length).to.equal(1);
});
it('should pass in event data', function () {
var spy = _sinon2.default.spy();
var Foo = function (_React$Component12) {
_inherits(Foo, _React$Component12);
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(
'a',
{ onClick: spy },
'foo'
);
}
return render;
}()
}]);
return Foo;
}(_react2.default.Component);
var wrapper = (0, _.shallow)(_react2.default.createElement(Foo, null));
var a = {};
var b = {};
wrapper.simulate('click', a, b);
(0, _chai.expect)(spy.args[0][0]).to.equal(a);
(0, _chai.expect)(spy.args[0][1]).to.equal(b);
});
describe('Normalizing JS event names', function () {
it('should convert lowercase events to React camelcase', function () {
var spy = _sinon2.default.spy();
var Foo = function (_React$Component13) {
_inherits(Foo, _React$Component13);
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(
'a',
{ onDoubleClick: spy },
'foo'
);
}
return render;
}()
}]);
return Foo;
}(_react2.default.Component);
var wrapper = (0, _.shallow)(_react2.default.createElement(Foo, null));
wrapper.simulate('doubleclick');
(0, _chai.expect)(spy.calledOnce).to.equal(true);
});
(0, _helpers.describeIf)(!_version.REACT013, 'normalizing mouseenter', function () {
it('should convert lowercase events to React camelcase', function () {
var spy = _sinon2.default.spy();
var Foo = function (_React$Component14) {
_inherits(Foo, _React$Component14);
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(
'a',
{ onMouseEnter: spy },
'foo'
);
}
return render;
}()
}]);
return Foo;
}(_react2.default.Component);
var wrapper = (0, _.shallow)(_react2.default.createElement(Foo, null));
wrapper.simulate('mouseenter');
(0, _chai.expect)(spy.calledOnce).to.equal(true);
});
});
});
});
describe('.setState(newState)', function () {
it('should set the state of the root node', function () {
var Foo = function (_React$Component15) {
_inherits(Foo, _React$Component15);
function Foo(props) {
_classCallCheck(this, Foo);
var _this15 = _possibleConstructorReturn(this, Object.getPrototypeOf(Foo).call(this, props));
_this15.state = { id: 'foo' };
return _this15;
}
_createClass(Foo, [{
key: 'render',
value: function () {
function render() {
return _react2.default.createElement('div', { className: this.state.id });
}
return render;
}()
}]);
return Foo;
}(_react2.default.Component);
var wrapper = (0, _.shallow)(_react2.default.createElement(Foo, null));
(0, _chai.expect)(wrapper.find('.foo').length).to.equal(1);
wrapper.setState({ id: 'bar' });
(0, _chai.expect)(wrapper.find('.bar').length).to.equal(1);
});
});
describe('.is(selector)', function () {
it('should return true when selector matches current element', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement('div', { className: 'foo bar baz' }));
(0, _chai.expect)(wrapper.is('.foo')).to.equal(true);
});
it('should allow for compound selectors', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement('div', { className: 'foo bar baz' }));
(0, _chai.expect)(wrapper.is('.foo.bar')).to.equal(true);
});
it('should return false when selector does not match', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement('div', { className: 'bar baz' }));
(0, _chai.expect)(wrapper.is('.foo')).to.equal(false);
});
});
describe('.not(selector)', function () {
it('filters to things not matching a selector', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('div', { className: 'foo bar baz' }),
_react2.default.createElement('div', { className: 'foo' }),
_react2.default.createElement('div', { className: 'bar baz' }),
_react2.default.createElement('div', { className: 'baz' }),
_react2.default.createElement('div', { className: 'foo bar' })
));
(0, _chai.expect)(wrapper.find('.foo').not('.bar').length).to.equal(1);
(0, _chai.expect)(wrapper.find('.baz').not('.foo').length).to.equal(2);
(0, _chai.expect)(wrapper.find('.foo').not('div').length).to.equal(0);
});
});
describe('.filter(selector)', function () {
it('should return a new wrapper of just the nodes that matched the selector', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('div', { className: 'foo bar baz' }),
_react2.default.createElement('div', { className: 'foo' }),
_react2.default.createElement(
'div',
{ className: 'bar baz' },
_react2.default.createElement('div', { className: 'foo bar baz' }),
_react2.default.createElement('div', { className: 'foo' })
),
_react2.default.createElement('div', { className: 'baz' }),
_react2.default.createElement('div', { className: 'foo bar' })
));
(0, _chai.expect)(wrapper.find('.foo').filter('.bar').length).to.equal(3);
(0, _chai.expect)(wrapper.find('.bar').filter('.foo').length).to.equal(3);
(0, _chai.expect)(wrapper.find('.bar').filter('.bax').length).to.equal(0);
(0, _chai.expect)(wrapper.find('.foo').filter('.baz.bar').length).to.equal(2);
});
it('should only look in the current wrappers nodes, not their children', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement(
'div',
{ className: 'foo' },
_react2.default.createElement('div', { className: 'bar' })
),
_react2.default.createElement('div', { className: 'foo bar' })
));
(0, _chai.expect)(wrapper.find('.foo').filter('.bar').length).to.equal(1);
});
});
describe('.filterWhere(predicate)', function () {
it('should filter only the nodes of the wrapper', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('div', { className: 'foo bar' }),
_react2.default.createElement('div', { className: 'foo baz' }),
_react2.default.createElement('div', { className: 'foo bux' })
));
var stub = _sinon2.default.stub();
stub.onCall(0).returns(false);
stub.onCall(1).returns(true);
stub.onCall(2).returns(false);
var baz = wrapper.find('.foo').filterWhere(stub);
(0, _chai.expect)(baz.length).to.equal(1);
(0, _chai.expect)(baz.hasClass('baz')).to.equal(true);
});
it('should call the predicate with the wrapped node as the first argument', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement('div', { className: 'foo bar' }),
_react2.default.createElement('div', { className: 'foo baz' }),
_react2.default.createElement('div', { className: 'foo bux' })
));
var stub = _sinon2.default.stub();
stub.returns(true);
var spy = _sinon2.default.spy(stub);
wrapper.find('.foo').filterWhere(spy);
(0, _chai.expect)(spy.callCount).to.equal(3);
(0, _chai.expect)(spy.args[0][0]).to.be.instanceOf(_.ShallowWrapper);
(0, _chai.expect)(spy.args[1][0]).to.be.instanceOf(_.ShallowWrapper);
(0, _chai.expect)(spy.args[2][0]).to.be.instanceOf(_.ShallowWrapper);
(0, _chai.expect)(spy.args[0][0].hasClass('bar')).to.equal(true);
(0, _chai.expect)(spy.args[1][0].hasClass('baz')).to.equal(true);
(0, _chai.expect)(spy.args[2][0].hasClass('bux')).to.equal(true);
});
});
describe('.text()', function () {
var matchesRender = function () {
function matchesRender(node) {
var actual = (0, _.shallow)(node).text();
var expected = (0, _.render)(node).text();
(0, _chai.expect)(expected).to.equal(actual);
}
return matchesRender;
}();
it('should handle simple text nodes', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
'some text'
));
(0, _chai.expect)(wrapper.text()).to.equal('some text');
});
it('should handle nodes with mapped children', function () {
var Foo = function (_React$Component16) {
_inherits(Foo, _React$Component16);
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,
this.props.items.map(function (x) {
return x;
})
);
}
return render;
}()
}]);
return Foo;
}(_react2.default.Component);
matchesRender(_react2.default.createElement(Foo, { items: ['abc', 'def', 'hij'] }));
matchesRender(_react2.default.createElement(Foo, {
items: [_react2.default.createElement(
'i',
{ key: 1 },
'abc'
), _react2.default.createElement(
'i',
{ key: 2 },
'def'
), _react2.default.createElement(
'i',
{ key: 3 },
'hij'
)]
}));
});
it('should render composite components dumbly', function () {
var Foo = function (_React$Component17) {
_inherits(Foo, _React$Component17);
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 wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
null,
_react2.default.createElement(Foo, null),
_react2.default.createElement(
'div',
null,
'test'
)
));
(0, _chai.expect)(wrapper.text()).to.equal('<Foo />test');
});
it('should handle html entities', function () {
matchesRender(_react2.default.createElement(
'div',
null,
'>'
));
});
});
describe('.props()', function () {
it('should return the props object', function () {
var fn = function fn() {
return {};
};
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
{ id: 'fooId', className: 'bax', onClick: fn },
_react2.default.createElement('div', { className: 'baz' }),
_react2.default.createElement('div', { className: 'foo' })
));
(0, _chai.expect)(wrapper.props().className).to.equal('bax');
(0, _chai.expect)(wrapper.props().onClick).to.equal(fn);
(0, _chai.expect)(wrapper.props().id).to.equal('fooId');
});
it('should be allowed to be used on an inner node', function () {
var fn = function fn() {
return {};
};
var wrapper = (0, _.shallow)(_react2.default.createElement(
'div',
{ className: 'bax' },
_react2.default.createElement('div', { className: 'baz', onClick: fn }),
_react2.default.createElement('div', { className: 'foo', id: 'fooId' })
));
(0, _chai.expect)(wrapper.find('.baz').props().onClick).to.equal(fn);
(0, _chai.expect)(wrapper.find('.foo').props().id).to.equal('fooId');
});
});
describe('.state(name)', function () {
it('should return the state object', function () {
var Foo = function (_React$Component18) {
_inherits(Foo, _React$Component18);
function Foo(props) {
_classCallCheck(this, Foo);
var _this18 = _possibleConstructorReturn(this, Object.getPrototypeOf(Foo).call(this, props));
_this18.state = { foo: 'foo' };
return _this18;
}
_createClass(Foo, [{
key: 'render',
value: function () {
function render() {
return _react2.default.createElement('div', null);
}
return render;
}()
}]);
return Foo;
}(_react2.default.Component);
var wrapper = (0, _.shallow)(_react2.default.createElement(Foo, null));
(0, _chai.expect)(wrapper.state()).to.eql({ foo: 'foo' });
});
it('should return the current state after state transitions', function () {
var Foo = function (_React$Component19) {
_inherits(Foo, _React$Component19);
function Foo(props) {
_classCallCheck(this, Foo);
var _this19 = _possibleConstructorReturn(this, Object.getPrototypeOf(Foo).call(this, props));
_this19.state = { foo: 'foo' };
return _this19;
}
_createClass(Foo, [{
key: 'render',
value: function () {
function render() {
return _react2.default.createElement('div', null);
}
return render;
}()
}]);
return Foo;
}(_react2.default.Component);
var wrapper = (0, _.shallow)(_react2.default.createElement(Foo, null));
wrapper.setState({ foo: 'bar' });
(0, _chai.expect)(wrapper.state()).to.eql({ foo: 'bar' });
});
it('should allow a state property name be passed in as an argument', function () {
var Foo = function (_React$Component20) {
_inherits(Foo, _React$Component20);
function Foo(props) {
_classCallCheck(this, Foo);
var _this20 = _possibleConstructorReturn(this, Object.getPrototypeOf(Foo).call(this, props));
_this20.state = { foo: 'foo' };
return _this20;
}
_createClass(Foo, [{
key: 'render',
value: function () {
function render() {
return _react2.default.createElement('div', null);
}
return render;
}()
}]);
return Foo;
}(_react2.default.Component);
var wrapper = (0, _.shallow)(_react2.default.createElement(Foo, null));
(0, _chai.expect)(wrapper.state('foo')).to.equal('foo');
});
});
describe('.children([selector])', function () {
it('should return empty wrapper for node with no children', function () {
var wrapper = (0, _.shallow)(_react2.default.createElement('div', null));
(0, _chai.