diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx index 51760b9de..d902bd494 100644 --- a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx +++ b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx @@ -436,508 +436,528 @@ describeWithDOM('mount', () => { }); }); - describe('.find(selector)', () => { - it('should find an element based on a class name', () => { - const wrapper = mount(( -
- -
- )); - expect(wrapper.find('.foo').type()).to.equal('input'); - }); - - it('should find an SVG element based on a class name', () => { - const wrapper = mount(( -
- -
- )); - expect(wrapper.find('.foo').type()).to.equal('svg'); - }); - - it('should find an element based on a tag name', () => { - const wrapper = mount(( -
- -
- )); - expect(wrapper.find('input').props().className).to.equal('foo'); - }); - - it('should find an element based on a tag name and class name', () => { - const wrapper = mount(( -
- -
-
- )); - expect(wrapper.find('input.foo')).to.have.lengthOf(1); - }); - - it('should work on non-single nodes', () => { - const wrapper = mount(( -
-
-
Text
-
Text
-
Text
-
-
-
Text
-
Text
-
Text
+ wrap() + .withOverride(() => getAdapter(), 'isValidElementType', () => undefined) + .describe('.find(selector)', () => { + it('should find an element based on a class name', () => { + const wrapper = mount(( +
+
-
- )); - expect(wrapper.find('.a')).to.have.lengthOf(1); - expect(wrapper.find('.b')).to.have.lengthOf(2); - expect(wrapper.find('.b').find('.c')).to.have.lengthOf(6); - }); + )); + expect(wrapper.find('.foo').type()).to.equal('input'); + }); + it('should find an SVG element based on a class name', () => { + const wrapper = mount(( +
+ +
+ )); + expect(wrapper.find('.foo').type()).to.equal('svg'); + }); - it('should find an element based on a tag name and id', () => { - const wrapper = mount(( -
- -
- )); - expect(wrapper.find('input#foo')).to.have.lengthOf(1); - }); + it('should find an element based on a tag name', () => { + const wrapper = mount(( +
+ +
+ )); + expect(wrapper.find('input').props().className).to.equal('foo'); + }); - it('should find an element based on a tag name, id, and class name', () => { - const wrapper = mount(( -
- -
- )); - expect(wrapper.find('input#foo.bar')).to.have.lengthOf(1); - }); + it('should find an element based on a tag name and class name', () => { + const wrapper = mount(( +
+ +
+
+ )); + expect(wrapper.find('input.foo')).to.have.lengthOf(1); + }); - it('should find a component based on a constructor', () => { - class Foo extends React.Component { - render() { return
; } - } - const wrapper = mount(( -
- -
- )); - expect(wrapper.find(Foo).type()).to.equal(Foo); - }); + it('should work on non-single nodes', () => { + const wrapper = mount(( +
+
+
Text
+
Text
+
Text
+
+
+
Text
+
Text
+
Text
+
+
+ )); + expect(wrapper.find('.a')).to.have.lengthOf(1); + expect(wrapper.find('.b')).to.have.lengthOf(2); + expect(wrapper.find('.b').find('.c')).to.have.lengthOf(6); + }); - it('should find a component based on a component displayName', () => { - class Foo extends React.Component { - render() { return
; } - } - const wrapper = mount(( -
- -
- )); - expect(wrapper.find('Foo').type()).to.equal(Foo); - }); - describeIf(is('> 0.13'), 'stateless components', () => { - it('should find a stateless component based on a component displayName', () => { - const Foo = () =>
; + it('should find an element based on a tag name and id', () => { const wrapper = mount((
- +
)); - expect(wrapper.find('Foo').type()).to.equal(Foo); + expect(wrapper.find('input#foo')).to.have.lengthOf(1); }); - it('should find a stateless component based on a component displayName if rendered by function', () => { - const Foo = () =>
; - const renderStatelessComponent = () => ; + it('should find an element based on a tag name, id, and class name', () => { const wrapper = mount((
- {renderStatelessComponent()} +
)); - expect(wrapper.find('Foo').type()).to.equal(Foo); + expect(wrapper.find('input#foo.bar')).to.have.lengthOf(1); }); - }); - - it('should find component based on a react prop', () => { - const wrapper = mount(( -
- -
-
- )); - expect(wrapper.find('[htmlFor="foo"]')).to.have.lengthOf(1); - expect(wrapper.find('[htmlFor]')).to.have.lengthOf(2); - }); - - it('should error sensibly if any of the search props are undefined', () => { - const wrapper = mount(( -
- -
- )); - - expect(() => wrapper.find({ type: undefined })).to.throw( - TypeError, - 'Enzyme::Props can’t have `undefined` values. Try using ‘findWhere()’ instead.', - ); - }); + it('should find a component based on a constructor', () => { + class Foo extends React.Component { + render() { return
; } + } + const wrapper = mount(( +
+ +
+ )); + expect(wrapper.find(Foo).type()).to.equal(Foo); + }); - it('should compound tag and prop selector', () => { - const wrapper = mount(( -
- -
- )); + wrap() + .withOverride(() => getAdapter(), 'isValidElementType', () => () => false) + .it('throws when an adapter’s `isValidElementType` lies', () => { + class Foo extends React.Component { + render() { return
; } + } + const wrapper = mount(( +
+ +
+ )); - expect(wrapper.find('span[htmlFor="foo"]')).to.have.lengthOf(1); - expect(wrapper.find('span[htmlFor]')).to.have.lengthOf(1); - }); + expect(() => wrapper.find(Foo)).to.throw( + TypeError, + 'Enzyme::Selector expects a string, object, or valid element type (Component Constructor)', + ); + }); - it('works with an adjacent sibling selector', () => { - const a = 'some'; - const b = 'text'; - const wrapper = mount(( -
-
- {a} - {b} -
-
- {a} - {b} + it('should find a component based on a component displayName', () => { + class Foo extends React.Component { + render() { return
; } + } + const wrapper = mount(( +
+
-
- )); - expect(wrapper.find('.row')).to.have.lengthOf(2); - expect(wrapper.find('.row + .row')).to.have.lengthOf(1); - }); - - it('should throw for non-numeric attribute values without quotes', () => { - const wrapper = mount(( -
- - - -
- )); - expect(() => wrapper.find('[type=text]')).to.throw( - Error, - 'Failed to parse selector: [type=text]', - ); - expect(() => wrapper.find('[type=hidden]')).to.throw( - Error, - 'Failed to parse selector: [type=hidden]', - ); - expect(() => wrapper.find('[type="text"]')).to.not.throw( - Error, - 'Failed to parse selector: [type="text"]', - ); - }); + )); + expect(wrapper.find('Foo').type()).to.equal(Foo); + }); - it('should support data prop selectors', () => { - const wrapper = mount(( -
- - - - -
- )); + describeIf(is('> 0.13'), 'stateless components', () => { + it('should find a stateless component based on a component displayName', () => { + const Foo = () =>
; + const wrapper = mount(( +
+ +
+ )); + expect(wrapper.find('Foo').type()).to.equal(Foo); + }); - expect(wrapper.find('[data-foo="bar"]')).to.have.lengthOf(1); - expect(wrapper.find('[data-foo]')).to.have.lengthOf(1); + it('should find a stateless component based on a component displayName if rendered by function', () => { + const Foo = () =>
; + const renderStatelessComponent = () => ; + const wrapper = mount(( +
+ {renderStatelessComponent()} +
+ )); + expect(wrapper.find('Foo').type()).to.equal(Foo); + }); + }); - expect(wrapper.find('[data-foo-123]')).to.have.lengthOf(1); - expect(wrapper.find('[data-foo-123="bar2"]')).to.have.lengthOf(1); + it('should find component based on a react prop', () => { + const wrapper = mount(( +
+ +
+
+ )); - expect(wrapper.find('[data-123-foo]')).to.have.lengthOf(1); - expect(wrapper.find('[data-123-foo="bar3"]')).to.have.lengthOf(1); + expect(wrapper.find('[htmlFor="foo"]')).to.have.lengthOf(1); + expect(wrapper.find('[htmlFor]')).to.have.lengthOf(2); + }); - expect(wrapper.find('[data-foo_bar]')).to.have.lengthOf(1); - expect(wrapper.find('[data-foo_bar="bar4"]')).to.have.lengthOf(1); - }); + it('should error sensibly if any of the search props are undefined', () => { + const wrapper = mount(( +
+ +
+ )); - it('should find components with multiple matching props', () => { - const onChange = () => ({}); - const wrapper = mount(( -
- -
- )); + expect(() => wrapper.find({ type: undefined })).to.throw( + TypeError, + 'Enzyme::Props can’t have `undefined` values. Try using ‘findWhere()’ instead.', + ); + }); - expect(wrapper.find('span[htmlFor="foo"][onChange]')).to.have.lengthOf(1); - expect(wrapper.find('span[htmlFor="foo"][preserveAspectRatio="xMaxYMax"]')).to.have.lengthOf(1); - }); + it('should compound tag and prop selector', () => { + const wrapper = mount(( +
+ +
+ )); - it('should not find property when undefined', () => { - const wrapper = mount(( -
- -
- )); + expect(wrapper.find('span[htmlFor="foo"]')).to.have.lengthOf(1); + expect(wrapper.find('span[htmlFor]')).to.have.lengthOf(1); + }); - expect(wrapper.find('[data-foo]')).to.have.lengthOf(0); - }); + it('works with an adjacent sibling selector', () => { + const a = 'some'; + const b = 'text'; + const wrapper = mount(( +
+
+ {a} + {b} +
+
+ {a} + {b} +
+
+ )); + expect(wrapper.find('.row')).to.have.lengthOf(2); + expect(wrapper.find('.row + .row')).to.have.lengthOf(1); + }); - it('should support boolean and numeric values for matching props', () => { - const wrapper = mount(( - - )); + it('should throw for non-numeric attribute values without quotes', () => { + const wrapper = mount(( +
+ + + +
+ )); + expect(() => wrapper.find('[type=text]')).to.throw( + Error, + 'Failed to parse selector: [type=text]', + ); + expect(() => wrapper.find('[type=hidden]')).to.throw( + Error, + 'Failed to parse selector: [type=hidden]', + ); + expect(() => wrapper.find('[type="text"]')).to.not.throw( + Error, + 'Failed to parse selector: [type="text"]', + ); + }); - expect(wrapper.find('span[value=1]')).to.have.lengthOf(1); - expect(wrapper.find('span[value=2]')).to.have.lengthOf(0); - expect(wrapper.find('a[value=false]')).to.have.lengthOf(1); - expect(wrapper.find('a[value=true]')).to.have.lengthOf(0); - }); + it('should support data prop selectors', () => { + const wrapper = mount(( +
+ + + + +
+ )); - it('should not find key or ref via property selector', () => { - class Foo extends React.Component { - render() { - const arrayOfComponents = [
,
]; + expect(wrapper.find('[data-foo="bar"]')).to.have.lengthOf(1); + expect(wrapper.find('[data-foo]')).to.have.lengthOf(1); - return ( -
-
- {arrayOfComponents} -
- ); - } - } + expect(wrapper.find('[data-foo-123]')).to.have.lengthOf(1); + expect(wrapper.find('[data-foo-123="bar2"]')).to.have.lengthOf(1); - const wrapper = mount(); + expect(wrapper.find('[data-123-foo]')).to.have.lengthOf(1); + expect(wrapper.find('[data-123-foo="bar3"]')).to.have.lengthOf(1); - expect(wrapper.find('div[ref="foo"]')).to.have.lengthOf(0); - expect(wrapper.find('div[key="1"]')).to.have.lengthOf(0); - expect(wrapper.find('[ref]')).to.have.lengthOf(0); - expect(wrapper.find('[key]')).to.have.lengthOf(0); - }); + expect(wrapper.find('[data-foo_bar]')).to.have.lengthOf(1); + expect(wrapper.find('[data-foo_bar="bar4"]')).to.have.lengthOf(1); + }); - it('should find multiple elements based on a class name', () => { - const wrapper = mount(( -
- -
- )); - expect(wrapper.find('.foo')).to.have.lengthOf(2); - }); + it('should find components with multiple matching props', () => { + const onChange = () => ({}); + const wrapper = mount(( +
+ +
+ )); - it('should find multiple elements based on a tag name', () => { - const wrapper = mount(( -
- - -
- )); - expect(wrapper.find('input')).to.have.lengthOf(2); - expect(wrapper.find('button')).to.have.lengthOf(1); - }); + expect(wrapper.find('span[htmlFor="foo"][onChange]')).to.have.lengthOf(1); + expect(wrapper.find('span[htmlFor="foo"][preserveAspectRatio="xMaxYMax"]')).to.have.lengthOf(1); + }); - it('should find multiple elements based on a constructor', () => { - const wrapper = mount(( -
- - -
- )); - expect(wrapper.find('input')).to.have.lengthOf(2); - expect(wrapper.find('button')).to.have.lengthOf(1); - }); + it('should not find property when undefined', () => { + const wrapper = mount(( +
+ +
+ )); - it('should support object property selectors', () => { - const wrapper = mount(( -
- - -
)); - expect(wrapper.find(Foo).type()).to.equal(Foo); + expect(wrapper.find('.foo')).to.have.lengthOf(2); }); - it('should find a component based on a component displayName', () => { - const Foo = () =>
; + it('should find multiple elements based on a tag name', () => { const wrapper = mount((
- + + +
)); - expect(wrapper.find('Foo').type()).to.equal(Foo); + expect(wrapper.find('input')).to.have.lengthOf(2); + expect(wrapper.find('button')).to.have.lengthOf(1); }); - it('should not find key via property selector', () => { - const Foo = () => { - const arrayOfComponents = [
,
]; - return ( -
- {arrayOfComponents} -
- ); - }; + it('should find multiple elements based on a constructor', () => { + const wrapper = mount(( +
+ + +
+ )); + expect(wrapper.find('input')).to.have.lengthOf(2); + expect(wrapper.find('button')).to.have.lengthOf(1); + }); - const wrapper = mount(); + it('should support object property selectors', () => { + const wrapper = mount(( +
+ + + -