Skip to content

Commit d0fccaf

Browse files
ljharbljharb
committed
[Refactor] shallow/mount: make tests and method ordering more consistent
1 parent 2ccacb4 commit d0fccaf

File tree

4 files changed

+460
-61
lines changed

4 files changed

+460
-61
lines changed

‎packages/enzyme-test-suite/test/ReactWrapper-spec.jsx‎

Lines changed: 273 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -629,6 +629,7 @@ describeWithDOM('mount', () => {
629629
const a = <div className="foo" />;
630630
const b = <div className="foo" />;
631631
const c = <div className="bar" />;
632+
632633
expect(mount(a).equals(b)).to.equal(true);
633634
expect(mount(a).equals(c)).to.equal(false);
634635
});
@@ -656,7 +657,7 @@ describeWithDOM('mount', () => {
656657
expect(wrapper.equals(b)).to.equal(true);
657658
});
658659

659-
it.skip('does not expand `node` content', () => {
660+
it('does not expand `node` content', () => {
660661
class Bar extends React.Component {
661662
render() { return <div />; }
662663
}
@@ -665,8 +666,9 @@ describeWithDOM('mount', () => {
665666
render() { return <Bar />; }
666667
}
667668

668-
expect(mount(<Foo />).equals(<Bar />)).to.equal(true);
669-
expect(mount(<Foo />).equals(<Foo />)).to.equal(false);
669+
const wrapper = mount(<Foo />).children();
670+
expect(wrapper.equals(<Bar />)).to.equal(true);
671+
expect(wrapper.equals(<Foo />)).to.equal(false);
670672
});
671673

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

687-
it.skip('does not expand `node` content', () => {
689+
it('does not expand `node` content', () => {
688690
const Bar = () => (
689691
<div />
690692
);
@@ -693,12 +695,13 @@ describeWithDOM('mount', () => {
693695
<Bar />
694696
);
695697

696-
expect(mount(<Foo />).equals(<Bar />)).to.equal(true);
697-
expect(mount(<Foo />).equals(<Foo />)).to.equal(false);
698+
const wrapper = mount(<Foo />).children();
699+
expect(wrapper.equals(<Bar />)).to.equal(true);
700+
expect(wrapper.equals(<Foo />)).to.equal(false);
698701
});
699702
});
700703

701-
it.skip('flattens arrays of children to compare', () => {
704+
it('flattens arrays of children to compare', () => {
702705
class TwoChildren extends React.Component {
703706
render() {
704707
return (
@@ -720,8 +723,8 @@ describeWithDOM('mount', () => {
720723
);
721724
}
722725
}
723-
const twoChildren = mount(<TwoChildren />);
724-
const twoChildrenOneArrayed = mount(<TwoChildrenOneArrayed />);
726+
const twoChildren = mount(<TwoChildren />).children();
727+
const twoChildrenOneArrayed = mount(<TwoChildrenOneArrayed />).children();
725728

726729
expect(twoChildren.equals(twoChildrenOneArrayed.getElement())).to.equal(true);
727730
expect(twoChildrenOneArrayed.equals(twoChildren.getElement())).to.equal(true);
@@ -752,6 +755,100 @@ describeWithDOM('mount', () => {
752755
expect(hostNodes.filter('div')).to.have.lengthOf(1);
753756
expect(hostNodes.filter('span')).to.have.lengthOf(1);
754757
});
758+
759+
it('does NOT allow matches on a nested node', () => {
760+
const wrapper = mount((
761+
<div>
762+
<div className="foo" />
763+
</div>
764+
));
765+
const b = <div className="foo" />;
766+
expect(wrapper.equals(b)).to.equal(false);
767+
});
768+
769+
it('matches composite components', () => {
770+
class Foo extends React.Component {
771+
render() { return <div />; }
772+
}
773+
const wrapper = mount((
774+
<div>
775+
<Foo />
776+
</div>
777+
));
778+
const b = <div><Foo /></div>;
779+
expect(wrapper.equals(b)).to.equal(true);
780+
});
781+
782+
it.skip('does not expand `node` content', () => {
783+
class Bar extends React.Component {
784+
render() { return <div />; }
785+
}
786+
787+
class Foo extends React.Component {
788+
render() { return <Bar />; }
789+
}
790+
791+
expect(mount(<Foo />).equals(<Bar />)).to.equal(true);
792+
expect(mount(<Foo />).equals(<Foo />)).to.equal(false);
793+
});
794+
795+
describeIf(is('> 0.13'), 'stateless function components (SFCs)', () => {
796+
it('matches composite SFCs', () => {
797+
const Foo = () => (
798+
<div />
799+
);
800+
801+
const wrapper = mount((
802+
<div>
803+
<Foo />
804+
</div>
805+
));
806+
const b = <div><Foo /></div>;
807+
expect(wrapper.equals(b)).to.equal(true);
808+
});
809+
810+
it.skip('does not expand `node` content', () => {
811+
const Bar = () => (
812+
<div />
813+
);
814+
815+
const Foo = () => (
816+
<Bar />
817+
);
818+
819+
expect(mount(<Foo />).equals(<Bar />)).to.equal(true);
820+
expect(mount(<Foo />).equals(<Foo />)).to.equal(false);
821+
});
822+
});
823+
824+
it.skip('flattens arrays of children to compare', () => {
825+
class TwoChildren extends React.Component {
826+
render() {
827+
return (
828+
<div className="parent-component-class">
829+
<div key="a" className="asd" />
830+
<div key="b" className="fgh" />
831+
</div>
832+
);
833+
}
834+
}
835+
836+
class TwoChildrenOneArrayed extends React.Component {
837+
render() {
838+
return (
839+
<div className="parent-component-class">
840+
<div key="a" className="asd" />
841+
{[<div key="b" className="fgh" />]}
842+
</div>
843+
);
844+
}
845+
}
846+
const twoChildren = mount(<TwoChildren />);
847+
const twoChildrenOneArrayed = mount(<TwoChildrenOneArrayed />);
848+
849+
expect(twoChildren.equals(twoChildrenOneArrayed.getElement())).to.equal(true);
850+
expect(twoChildrenOneArrayed.equals(twoChildren.getElement())).to.equal(true);
851+
});
755852
});
756853

757854
wrap()
@@ -1729,7 +1826,7 @@ describeWithDOM('mount', () => {
17291826
render() {
17301827
return (
17311828
<div className={this.props.id}>
1732-
{this.props.id}
1829+
{this.props.foo}
17331830
</div>
17341831
);
17351832
}
@@ -1740,6 +1837,144 @@ describeWithDOM('mount', () => {
17401837
expect(wrapper.find('.bar')).to.have.lengthOf(1);
17411838
});
17421839

1840+
describe('merging props', () => {
1841+
it('merges, not replaces, props when rerendering', () => {
1842+
class Foo extends React.Component {
1843+
render() {
1844+
return (
1845+
<div className={this.props.id}>
1846+
{this.props.foo}
1847+
</div>
1848+
);
1849+
}
1850+
}
1851+
1852+
const wrapper = mount(<Foo id="foo" foo="bar" />);
1853+
1854+
expect(wrapper.children().debug()).to.equal(`
1855+
<div className="foo">
1856+
bar
1857+
</div>
1858+
`.trim());
1859+
expect(wrapper.children().props()).to.eql({
1860+
className: 'foo',
1861+
children: 'bar',
1862+
});
1863+
expect(wrapper.instance().props).to.eql({
1864+
id: 'foo',
1865+
foo: 'bar',
1866+
});
1867+
1868+
wrapper.setProps({ id: 'bar' });
1869+
1870+
expect(wrapper.children().debug()).to.equal(`
1871+
<div className="bar">
1872+
bar
1873+
</div>
1874+
`.trim());
1875+
expect(wrapper.children().props()).to.eql({
1876+
className: 'bar',
1877+
children: 'bar',
1878+
});
1879+
expect(wrapper.instance().props).to.eql({
1880+
id: 'bar',
1881+
foo: 'bar',
1882+
});
1883+
});
1884+
1885+
itIf(is('> 0.13'), 'merges, not replaces, props on SFCs', () => {
1886+
function Foo({ id, foo }) {
1887+
return (
1888+
<div className={id}>
1889+
{foo}
1890+
</div>
1891+
);
1892+
}
1893+
const wrapper = mount(<Foo id="foo" foo="bar" />);
1894+
1895+
expect(wrapper.children().debug()).to.equal(`
1896+
<div className="foo">
1897+
bar
1898+
</div>
1899+
`.trim());
1900+
expect(wrapper.children().props()).to.eql({
1901+
className: 'foo',
1902+
children: 'bar',
1903+
});
1904+
if (is('< 16')) {
1905+
expect(wrapper.instance().props).to.eql({
1906+
id: 'foo',
1907+
foo: 'bar',
1908+
});
1909+
}
1910+
1911+
wrapper.setProps({ id: 'bar' });
1912+
1913+
expect(wrapper.children().debug()).to.equal(`
1914+
<div className="bar">
1915+
bar
1916+
</div>
1917+
`.trim());
1918+
expect(wrapper.children().props()).to.eql({
1919+
className: 'bar',
1920+
children: 'bar',
1921+
});
1922+
if (is('< 16')) {
1923+
expect(wrapper.instance().props).to.eql({
1924+
id: 'bar',
1925+
foo: 'bar',
1926+
});
1927+
}
1928+
});
1929+
1930+
it('merges, not replaces, props when no rerender is needed', () => {
1931+
class Foo extends React.Component {
1932+
shouldComponentUpdate() {
1933+
return false;
1934+
}
1935+
1936+
render() {
1937+
return (
1938+
<div className={this.props.id}>
1939+
{this.props.foo}
1940+
</div>
1941+
);
1942+
}
1943+
}
1944+
const wrapper = mount(<Foo id="foo" foo="bar" />);
1945+
1946+
expect(wrapper.children().debug()).to.equal(`
1947+
<div className="foo">
1948+
bar
1949+
</div>
1950+
`.trim());
1951+
expect(wrapper.children().props()).to.eql({
1952+
className: 'foo',
1953+
children: 'bar',
1954+
});
1955+
expect(wrapper.instance().props).to.eql({
1956+
id: 'foo',
1957+
foo: 'bar',
1958+
});
1959+
1960+
wrapper.setProps({ id: 'foo' });
1961+
1962+
expect(wrapper.children().debug()).to.equal(`
1963+
<div className="foo">
1964+
bar
1965+
</div>
1966+
`.trim());
1967+
expect(wrapper.children().props()).to.eql({
1968+
className: 'foo',
1969+
children: 'bar',
1970+
});
1971+
expect(wrapper.instance().props).to.eql({
1972+
id: 'foo',
1973+
foo: 'bar',
1974+
});
1975+
});
1976+
});
1977+
17431978
it('calls componentWillReceiveProps for new renders', () => {
17441979
const stateValue = {};
17451980

@@ -1798,7 +2033,9 @@ describeWithDOM('mount', () => {
17982033
}
17992034
class Bar extends React.Component {
18002035
render() {
1801-
return <div />;
2036+
return (
2037+
<div />
2038+
);
18022039
}
18032040
}
18042041

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

2052+
it('passes in old context', () => {
2053+
class Foo extends React.Component {
2054+
render() {
2055+
return (
2056+
<div>{this.context.x}</div>
2057+
);
2058+
}
2059+
}
2060+
2061+
Foo.contextTypes = { x: PropTypes.string };
2062+
2063+
const context = { x: 'yolo' };
2064+
const wrapper = mount(<Foo x={5} />, { context });
2065+
expect(wrapper.first('div').text()).to.equal('yolo');
2066+
2067+
wrapper.setProps({ x: 5 }); // Just force a re-render
2068+
expect(wrapper.first('div').text()).to.equal('yolo');
2069+
});
2070+
18152071
it('uses defaultProps if new props includes undefined values', () => {
18162072
const initialState = { a: 42 };
18172073
const context = { b: 7 };
@@ -4289,6 +4545,12 @@ describeWithDOM('mount', () => {
42894545
});
42904546
});
42914547

4548+
describe('.debug()', () => {
4549+
it('passes through to the debugNodes function', () => {
4550+
expect(mount(<div />).debug()).to.equal('<div />');
4551+
});
4552+
});
4553+
42924554
describe('.html()', () => {
42934555
it('returns html of straight DOM elements', () => {
42944556
const wrapper = mount((

0 commit comments

Comments
 (0)