Skip to content

Commit

Permalink
Refactor shallow to separate root and rendered
Browse files Browse the repository at this point in the history
  • Loading branch information
@lelandrichardson
lelandrichardson committed Sep 15, 2017
1 parent 27d05a0 commit 9eff036
Show file tree
Hide file tree
Showing 5 changed files with 124 additions and 87 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Expand Up @@ -17,7 +17,7 @@
"check": "lerna run lint && npm run test:all",
"prebuild": "npm run clean",
"build": "lerna run build",
"build:watch": "lerna run watch",
"build:watch": "lerna run --parallel watch",
"pretest": "lerna run lint",
"test": "npm run test:only",
"pretest:only": "npm run build",
Expand Down
60 changes: 34 additions & 26 deletions packages/enzyme-test-suite/test/Debug-spec.jsx
View file
Expand Up @@ -487,13 +487,15 @@ describe('debug', () => {
}

expect(shallow(<Bar id="2" />).debug()).to.eql(
`<div className="bar">
<Foo baz="bax">
<span>
From Bar
</span>
</Foo>
</div>`,
`<Bar id="2">
<div className="bar">
<Foo baz="bax">
<span>
From Bar
</span>
</Foo>
</div>
</Bar>`,
);
});
});
Expand All @@ -511,11 +513,13 @@ describe('debug', () => {
}

expect(debugNodes(shallow(<Foo />).getNodesInternal())).to.eql(
`<div className="foo">
<span>
inside Foo
</span>
</div>`,
`<Foo>
<div className="foo">
<span>
inside Foo
</span>
</div>
</Foo>`,
);
});

Expand All @@ -542,7 +546,7 @@ describe('debug', () => {
}
}

expect(debugNodes(shallow(<Bar />).children().getElements())).to.eql(
expect(debugNodes(shallow(<Bar />).rendered().children().getElements())).to.eql(
`<Foo />
Expand All @@ -566,7 +570,7 @@ describe('debug', () => {
}
}

expect(debugNodes(shallow(<Foo />).children().getNodesInternal())).to.eql(
expect(debugNodes(shallow(<Foo />).rendered().children().getNodesInternal())).to.eql(
`<span>
span1 text
</span>
Expand Down Expand Up @@ -608,21 +612,25 @@ describe('debug', () => {
}

expect(shallow(<Bar />).debug({ ignoreProps: false })).to.eql(
`<div className="class1">
<Foo fooVal="baz" />
<span className="class2">
span text
</span>
</div>`,
`<Bar>
<div className="class1">
<Foo fooVal="baz" />
<span className="class2">
span text
</span>
</div>
</Bar>`,
);

expect(shallow(<Bar />).debug({ ignoreProps: true })).to.eql(
`<div>
<Foo />
<span>
span text
</span>
</div>`,
`<Bar>
<div>
<Foo />
<span>
span text
</span>
</div>
</Bar>`,
);
});
});
Expand Down
94 changes: 53 additions & 41 deletions packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
View file
Expand Up @@ -37,15 +37,15 @@ describe('shallow', () => {

const wrapper = shallow(<Foo bar />);

expect(wrapper.type()).to.equal(Box);
expect(wrapper.props().bam).to.equal(true);
expect(wrapper.type()).to.equal(Foo);
expect(wrapper.rendered().type()).to.equal(Box);
expect(wrapper.props().bam).to.equal(undefined);
expect(wrapper.rendered().props().bam).to.equal(true);
expect(wrapper.instance()).to.be.instanceOf(Foo);
expect(wrapper.children().at(0).type()).to.equal('div');
expect(wrapper.rendered().children().type()).to.equal('div');
expect(wrapper.find(Box).children().props().className).to.equal('div');
expect(wrapper.find(Box).children().at(0).props().className).to.equal('div');
expect(wrapper.find(Box).children().props().className).to.equal('div');
expect(wrapper.children().type()).to.equal('div');
expect(wrapper.children().props().bam).to.equal(undefined);
});
});

Expand Down Expand Up @@ -155,7 +155,7 @@ describe('shallow', () => {
</div>
);
const wrapper = shallow(<Foo foo="qux" />);
expect(wrapper.type()).to.equal('div');
expect(wrapper.rendered().type()).to.equal('div');
expect(wrapper.find('.bar')).to.have.length(1);
expect(wrapper.find('.qoo').text()).to.equal('qux');
});
Expand Down Expand Up @@ -955,10 +955,10 @@ describe('shallow', () => {

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

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

it('should call componentWillReceiveProps, shouldComponentUpdate and componentWillUpdate with merged newProps', () => {
Expand Down Expand Up @@ -1045,10 +1045,10 @@ describe('shallow', () => {

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

wrapper.setProps({ x: 5 }); // Just force a re-render
expect(wrapper.first('div').text()).to.equal('yolo');
expect(wrapper.text()).to.equal('yolo');
});
});
});
Expand Down Expand Up @@ -1633,7 +1633,8 @@ describe('shallow', () => {

const wrapper = shallow(<Foo foo="hi" bar="bye" />);

expect(wrapper.props()).to.eql({ className: 'bye', id: 'hi' });
expect(wrapper.props()).to.eql({ foo: 'hi', bar: 'bye' });
expect(wrapper.rendered().props()).to.eql({ className: 'bye', id: 'hi' });
});

describeIf(!REACT013, 'stateless function components', () => {
Expand All @@ -1644,7 +1645,8 @@ describe('shallow', () => {

const wrapper = shallow(<Foo foo="hi" bar="bye" />);

expect(wrapper.props()).to.eql({ className: 'bye', id: 'hi' });
expect(wrapper.props()).to.eql({ foo: 'hi', bar: 'bye' });
expect(wrapper.rendered().props()).to.eql({ className: 'bye', id: 'hi' });
});
});
});
Expand Down Expand Up @@ -1689,10 +1691,15 @@ describe('shallow', () => {

const wrapper = shallow(<Foo foo="hi" bar="bye" />);

expect(wrapper.prop('className')).to.equal('bye');
expect(wrapper.prop('id')).to.equal('hi');
expect(wrapper.prop('foo')).to.equal(undefined);
expect(wrapper.prop('bar')).to.equal(undefined);
expect(wrapper.prop('className')).to.equal(undefined);
expect(wrapper.prop('id')).to.equal(undefined);
expect(wrapper.prop('foo')).to.equal('hi');
expect(wrapper.prop('bar')).to.equal('bye');

expect(wrapper.rendered().prop('className')).to.equal('bye');
expect(wrapper.rendered().prop('id')).to.equal('hi');
expect(wrapper.rendered().prop('foo')).to.equal(undefined);
expect(wrapper.rendered().prop('bar')).to.equal(undefined);
});

describeIf(!REACT013, 'stateless function components', () => {
Expand All @@ -1703,10 +1710,15 @@ describe('shallow', () => {

const wrapper = shallow(<Foo foo="hi" bar="bye" />);

expect(wrapper.prop('className')).to.equal('bye');
expect(wrapper.prop('id')).to.equal('hi');
expect(wrapper.prop('foo')).to.equal(undefined);
expect(wrapper.prop('bar')).to.equal(undefined);
expect(wrapper.prop('className')).to.equal(undefined);
expect(wrapper.prop('id')).to.equal(undefined);
expect(wrapper.prop('foo')).to.equal('hi');
expect(wrapper.prop('bar')).to.equal('bye');

expect(wrapper.rendered().prop('className')).to.equal('bye');
expect(wrapper.rendered().prop('id')).to.equal('hi');
expect(wrapper.rendered().prop('foo')).to.equal(undefined);
expect(wrapper.rendered().prop('bar')).to.equal(undefined);
});
});
});
Expand Down Expand Up @@ -1829,10 +1841,10 @@ describe('shallow', () => {
]}
/>,
);
expect(wrapper.children().length).to.equal(3);
expect(wrapper.children().at(0).hasClass('foo')).to.equal(true);
expect(wrapper.children().at(1).hasClass('bar')).to.equal(true);
expect(wrapper.children().at(2).hasClass('baz')).to.equal(true);
expect(wrapper.rendered().children().length).to.equal(3);
expect(wrapper.rendered().children().at(0).hasClass('foo')).to.equal(true);
expect(wrapper.rendered().children().at(1).hasClass('bar')).to.equal(true);
expect(wrapper.rendered().children().at(2).hasClass('baz')).to.equal(true);
});

it('should optionally allow a selector to filter by', () => {
Expand Down Expand Up @@ -1866,10 +1878,10 @@ describe('shallow', () => {
]}
/>,
);
expect(wrapper.children().length).to.equal(3);
expect(wrapper.children().at(0).hasClass('foo')).to.equal(true);
expect(wrapper.children().at(1).hasClass('bar')).to.equal(true);
expect(wrapper.children().at(2).hasClass('baz')).to.equal(true);
expect(wrapper.rendered().children().length).to.equal(3);
expect(wrapper.rendered().children().at(0).hasClass('foo')).to.equal(true);
expect(wrapper.rendered().children().at(1).hasClass('bar')).to.equal(true);
expect(wrapper.rendered().children().at(2).hasClass('baz')).to.equal(true);
});
});

Expand Down Expand Up @@ -2474,7 +2486,7 @@ describe('shallow', () => {
const context = { name: 'foo' };
const wrapper = shallow(<Foo />);
expect(wrapper.find(Bar)).to.have.length(1);
expect(wrapper.find(Bar).shallow({ context }).text()).to.equal('foo');
expect(wrapper.find(Bar).shallow({ context }).rendered().text()).to.equal('foo');
});

it('should not throw if context is passed in but contextTypes is missing', () => {
Expand Down Expand Up @@ -2558,7 +2570,7 @@ describe('shallow', () => {

const context = { name: 'foo' };
const wrapper = shallow(<Foo />);
expect(wrapper.find(Bar).shallow({ context }).text()).to.equal('foo');
expect(wrapper.find(Bar).shallow({ context }).rendered().text()).to.equal('foo');
});

it('should not throw if context is passed in but contextTypes is missing', () => {
Expand Down Expand Up @@ -3780,7 +3792,7 @@ describe('shallow', () => {
const wrapper = shallow(<Foo />);
expect(wrapper).to.have.length(1);
expect(wrapper.html()).to.equal(null);
expect(wrapper.type()).to.equal(null);
expect(wrapper.rendered().length).to.equal(0);
const rendered = wrapper.render();
expect(rendered.length).to.equal(0);
expect(rendered.html()).to.equal(null);
Expand All @@ -3792,7 +3804,7 @@ describe('shallow', () => {
const wrapper = shallow(<Foo />);
expect(wrapper).to.have.length(1);
expect(wrapper.html()).to.equal(null);
expect(wrapper.type()).to.equal(null);
expect(wrapper.rendered().length).to.equal(0);
const rendered = wrapper.render();
expect(rendered.length).to.equal(0);
expect(rendered.html()).to.equal(null);
Expand Down Expand Up @@ -4178,7 +4190,7 @@ describe('shallow', () => {
Foo.displayName = 'CustomWrapper';

const wrapper = shallow(<Wrapper />);
expect(wrapper.name()).to.equal('CustomWrapper');
expect(wrapper.rendered().name()).to.equal('CustomWrapper');
});

describeIf(!REACT013, 'stateless function components', () => {
Expand All @@ -4191,7 +4203,7 @@ describe('shallow', () => {
SFC.displayName = 'CustomWrapper';

const wrapper = shallow(<Wrapper />);
expect(wrapper.name()).to.equal('CustomWrapper');
expect(wrapper.rendered().name()).to.equal('CustomWrapper');
});
});

Expand All @@ -4210,7 +4222,7 @@ describe('shallow', () => {
});

const wrapper = shallow(<Wrapper />);
expect(wrapper.name()).to.equal('CustomWrapper');
expect(wrapper.rendered().name()).to.equal('CustomWrapper');
});
});
});
Expand All @@ -4226,7 +4238,7 @@ describe('shallow', () => {
}

const wrapper = shallow(<Wrapper />);
expect(wrapper.name()).to.equal('Foo');
expect(wrapper.rendered().name()).to.equal('Foo');
});

describeIf(!REACT013, 'stateless function components', () => {
Expand All @@ -4237,7 +4249,7 @@ describe('shallow', () => {
const Wrapper = () => <SFC />;

const wrapper = shallow(<Wrapper />);
expect(wrapper.name()).to.equal('SFC');
expect(wrapper.rendered().name()).to.equal('SFC');
});
});
});
Expand Down Expand Up @@ -4291,7 +4303,7 @@ describe('shallow', () => {

it('throws on a DOM node', () => {
const wrapper = shallow(<RendersDOM />);
expect(wrapper.is('div')).to.equal(true);
expect(wrapper.rendered().is('div')).to.equal(true);

expect(() => { wrapper.dive(); }).to.throw(
TypeError,
Expand All @@ -4301,7 +4313,7 @@ describe('shallow', () => {

it('throws on a non-component', () => {
const wrapper = shallow(<RendersNull />);
expect(wrapper.type()).to.equal(null);
expect(wrapper.rendered().length).to.equal(0);

expect(() => { wrapper.dive(); }).to.throw(
TypeError,
Expand All @@ -4319,10 +4331,10 @@ describe('shallow', () => {

it('dives + shallow-renders when there is one component child', () => {
const wrapper = shallow(<DoubleWrapsRendersDOM />);
expect(wrapper.is(WrapsRendersDOM)).to.equal(true);
expect(wrapper.rendered().is(WrapsRendersDOM)).to.equal(true);

const underwater = wrapper.dive();
expect(underwater.is(RendersDOM)).to.equal(true);
expect(underwater.rendered().is(RendersDOM)).to.equal(true);
});

it('should merge and pass options through', () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/enzyme-test-suite/test/_helpers/index.jsx
View file
Expand Up @@ -96,7 +96,7 @@ export function generateEmptyRenderData() {
{ message: 'false', value: false, expectResponse: true },
{ message: 'null', value: null, expectResponse: true },

// Returns false for empty, valid returns
// // Returns false for empty, valid returns
{ message: 'React component', value: <TestHelper />, expectResponse: false },
{ message: 'React element', value: <span />, expectResponse: false },
{ message: 'React element', value: <noscript />, expectResponse: false },
Expand Down

0 comments on commit 9eff036

Please sign in to comment.