Skip to content

Commit

Permalink
[Refactor] shallow/mount: make tests and method ordering more con…
Browse files Browse the repository at this point in the history 
…sistent
  • Loading branch information
@ljharb
ljharb committed Sep 1, 2018
1 parent 2ccacb4 commit d0fccaf
Show file tree
Hide file tree
Showing 4 changed files with 460 additions and 61 deletions.
284 changes: 273 additions & 11 deletions packages/enzyme-test-suite/test/ReactWrapper-spec.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -629,6 +629,7 @@ describeWithDOM('mount', () => {
const a = <div className="foo" />;
const b = <div className="foo" />;
const c = <div className="bar" />;

expect(mount(a).equals(b)).to.equal(true);
expect(mount(a).equals(c)).to.equal(false);
});
Expand Down Expand Up @@ -656,7 +657,7 @@ describeWithDOM('mount', () => {
expect(wrapper.equals(b)).to.equal(true);
});

it.skip('does not expand `node` content', () => {
it('does not expand `node` content', () => {
class Bar extends React.Component {
render() { return <div />; }
}
Expand All @@ -665,8 +666,9 @@ describeWithDOM('mount', () => {
render() { return <Bar />; }
}

expect(mount(<Foo />).equals(<Bar />)).to.equal(true);
expect(mount(<Foo />).equals(<Foo />)).to.equal(false);
const wrapper = mount(<Foo />).children();
expect(wrapper.equals(<Bar />)).to.equal(true);
expect(wrapper.equals(<Foo />)).to.equal(false);
});

describeIf(is('> 0.13'), 'stateless function components (SFCs)', () => {
Expand All @@ -684,7 +686,7 @@ describeWithDOM('mount', () => {
expect(wrapper.equals(b)).to.equal(true);
});

it.skip('does not expand `node` content', () => {
it('does not expand `node` content', () => {
const Bar = () => (
<div />
);
Expand All @@ -693,12 +695,13 @@ describeWithDOM('mount', () => {
<Bar />
);

expect(mount(<Foo />).equals(<Bar />)).to.equal(true);
expect(mount(<Foo />).equals(<Foo />)).to.equal(false);
const wrapper = mount(<Foo />).children();
expect(wrapper.equals(<Bar />)).to.equal(true);
expect(wrapper.equals(<Foo />)).to.equal(false);
});
});

it.skip('flattens arrays of children to compare', () => {
it('flattens arrays of children to compare', () => {
class TwoChildren extends React.Component {
render() {
return (
Expand All @@ -720,8 +723,8 @@ describeWithDOM('mount', () => {
);
}
}
const twoChildren = mount(<TwoChildren />);
const twoChildrenOneArrayed = mount(<TwoChildrenOneArrayed />);
const twoChildren = mount(<TwoChildren />).children();
const twoChildrenOneArrayed = mount(<TwoChildrenOneArrayed />).children();

expect(twoChildren.equals(twoChildrenOneArrayed.getElement())).to.equal(true);
expect(twoChildrenOneArrayed.equals(twoChildren.getElement())).to.equal(true);
Expand Down Expand Up @@ -752,6 +755,100 @@ describeWithDOM('mount', () => {
expect(hostNodes.filter('div')).to.have.lengthOf(1);
expect(hostNodes.filter('span')).to.have.lengthOf(1);
});

it('does NOT allow matches on a nested node', () => {
const wrapper = mount((
<div>
<div className="foo" />
</div>
));
const b = <div className="foo" />;
expect(wrapper.equals(b)).to.equal(false);
});

it('matches composite components', () => {
class Foo extends React.Component {
render() { return <div />; }
}
const wrapper = mount((
<div>
<Foo />
</div>
));
const b = <div><Foo /></div>;
expect(wrapper.equals(b)).to.equal(true);
});

it.skip('does not expand `node` content', () => {
class Bar extends React.Component {
render() { return <div />; }
}

class Foo extends React.Component {
render() { return <Bar />; }
}

expect(mount(<Foo />).equals(<Bar />)).to.equal(true);
expect(mount(<Foo />).equals(<Foo />)).to.equal(false);
});

describeIf(is('> 0.13'), 'stateless function components (SFCs)', () => {
it('matches composite SFCs', () => {
const Foo = () => (
<div />
);

const wrapper = mount((
<div>
<Foo />
</div>
));
const b = <div><Foo /></div>;
expect(wrapper.equals(b)).to.equal(true);
});

it.skip('does not expand `node` content', () => {
const Bar = () => (
<div />
);

const Foo = () => (
<Bar />
);

expect(mount(<Foo />).equals(<Bar />)).to.equal(true);
expect(mount(<Foo />).equals(<Foo />)).to.equal(false);
});
});

it.skip('flattens arrays of children to compare', () => {
class TwoChildren extends React.Component {
render() {
return (
<div className="parent-component-class">
<div key="a" className="asd" />
<div key="b" className="fgh" />
</div>
);
}
}

class TwoChildrenOneArrayed extends React.Component {
render() {
return (
<div className="parent-component-class">
<div key="a" className="asd" />
{[<div key="b" className="fgh" />]}
</div>
);
}
}
const twoChildren = mount(<TwoChildren />);
const twoChildrenOneArrayed = mount(<TwoChildrenOneArrayed />);

expect(twoChildren.equals(twoChildrenOneArrayed.getElement())).to.equal(true);
expect(twoChildrenOneArrayed.equals(twoChildren.getElement())).to.equal(true);
});
});

wrap()
Expand Down Expand Up @@ -1729,7 +1826,7 @@ describeWithDOM('mount', () => {
render() {
return (
<div className={this.props.id}>
{this.props.id}
{this.props.foo}
</div>
);
}
Expand All @@ -1740,6 +1837,144 @@ describeWithDOM('mount', () => {
expect(wrapper.find('.bar')).to.have.lengthOf(1);
});

describe('merging props', () => {
it('merges, not replaces, props when rerendering', () => {
class Foo extends React.Component {
render() {
return (
<div className={this.props.id}>
{this.props.foo}
</div>
);
}
}

const wrapper = mount(<Foo id="foo" foo="bar" />);

expect(wrapper.children().debug()).to.equal(`
<div className="foo">
bar
</div>
`.trim());
expect(wrapper.children().props()).to.eql({
className: 'foo',
children: 'bar',
});
expect(wrapper.instance().props).to.eql({
id: 'foo',
foo: 'bar',
});

wrapper.setProps({ id: 'bar' });

expect(wrapper.children().debug()).to.equal(`
<div className="bar">
bar
</div>
`.trim());
expect(wrapper.children().props()).to.eql({
className: 'bar',
children: 'bar',
});
expect(wrapper.instance().props).to.eql({
id: 'bar',
foo: 'bar',
});
});

itIf(is('> 0.13'), 'merges, not replaces, props on SFCs', () => {
function Foo({ id, foo }) {
return (
<div className={id}>
{foo}
</div>
);
}
const wrapper = mount(<Foo id="foo" foo="bar" />);

expect(wrapper.children().debug()).to.equal(`
<div className="foo">
bar
</div>
`.trim());
expect(wrapper.children().props()).to.eql({
className: 'foo',
children: 'bar',
});
if (is('< 16')) {
expect(wrapper.instance().props).to.eql({
id: 'foo',
foo: 'bar',
});
}

wrapper.setProps({ id: 'bar' });

expect(wrapper.children().debug()).to.equal(`
<div className="bar">
bar
</div>
`.trim());
expect(wrapper.children().props()).to.eql({
className: 'bar',
children: 'bar',
});
if (is('< 16')) {
expect(wrapper.instance().props).to.eql({
id: 'bar',
foo: 'bar',
});
}
});

it('merges, not replaces, props when no rerender is needed', () => {
class Foo extends React.Component {
shouldComponentUpdate() {
return false;
}

render() {
return (
<div className={this.props.id}>
{this.props.foo}
</div>
);
}
}
const wrapper = mount(<Foo id="foo" foo="bar" />);

expect(wrapper.children().debug()).to.equal(`
<div className="foo">
bar
</div>
`.trim());
expect(wrapper.children().props()).to.eql({
className: 'foo',
children: 'bar',
});
expect(wrapper.instance().props).to.eql({
id: 'foo',
foo: 'bar',
});

wrapper.setProps({ id: 'foo' });

expect(wrapper.children().debug()).to.equal(`
<div className="foo">
bar
</div>
`.trim());
expect(wrapper.children().props()).to.eql({
className: 'foo',
children: 'bar',
});
expect(wrapper.instance().props).to.eql({
id: 'foo',
foo: 'bar',
});
});
});

it('calls componentWillReceiveProps for new renders', () => {
const stateValue = {};

Expand Down Expand Up @@ -1798,7 +2033,9 @@ describeWithDOM('mount', () => {
}
class Bar extends React.Component {
render() {
return <div />;
return (
<div />
);
}
}

Expand All @@ -1812,6 +2049,25 @@ describeWithDOM('mount', () => {
expect(wrapper.props().d).to.equal('e');
});

it('passes in old context', () => {
class Foo extends React.Component {
render() {
return (
<div>{this.context.x}</div>
);
}
}

Foo.contextTypes = { x: PropTypes.string };

const context = { x: 'yolo' };
const wrapper = mount(<Foo x={5} />, { context });
expect(wrapper.first('div').text()).to.equal('yolo');

wrapper.setProps({ x: 5 }); // Just force a re-render
expect(wrapper.first('div').text()).to.equal('yolo');
});

it('uses defaultProps if new props includes undefined values', () => {
const initialState = { a: 42 };
const context = { b: 7 };
Expand Down Expand Up @@ -4289,6 +4545,12 @@ describeWithDOM('mount', () => {
});
});

describe('.debug()', () => {
it('passes through to the debugNodes function', () => {
expect(mount(<div />).debug()).to.equal('<div />');
});
});

describe('.html()', () => {
it('returns html of straight DOM elements', () => {
const wrapper = mount((
Expand Down

0 comments on commit d0fccaf

Please sign in to comment.