From 96039f20f0793bcb835f4e999da3fe3690a1c3aa Mon Sep 17 00:00:00 2001 From: Federico Zivolo Date: Wed, 27 Sep 2017 20:32:26 +0200 Subject: [PATCH] [New] `shallow`/`mount`: Add `hostNodes` method fixes #1174 --- docs/api/ReactWrapper/hostNodes.md | 18 +++++++++++++ docs/api/ShallowWrapper/hostNodes.md | 18 +++++++++++++ docs/api/mount.md | 3 +++ docs/api/shallow.md | 3 +++ package.json | 3 +-- packages/enzyme-test-suite/package.json | 2 +- .../test/ReactWrapper-spec.jsx | 26 +++++++++++++++++++ .../test/ShallowWrapper-spec.jsx | 25 ++++++++++++++++++ packages/enzyme/src/ReactWrapper.js | 10 +++++++ packages/enzyme/src/ShallowWrapper.js | 10 +++++++ 10 files changed, 115 insertions(+), 3 deletions(-) create mode 100644 docs/api/ReactWrapper/hostNodes.md create mode 100644 docs/api/ShallowWrapper/hostNodes.md diff --git a/docs/api/ReactWrapper/hostNodes.md b/docs/api/ReactWrapper/hostNodes.md new file mode 100644 index 000000000..508da5a12 --- /dev/null +++ b/docs/api/ReactWrapper/hostNodes.md @@ -0,0 +1,18 @@ +# `.hostNodes() => ReactWrapper` + +Returns a new wrapper with only host nodes. + + + +#### Returns + +`ReactWrapper`: A new wrapper that wraps the filtered nodes. + + + +#### Examples + +```jsx +const wrapper = mount(
); +expect(wrapper.find('.foo').hostNodes()).to.have.length(1); +``` diff --git a/docs/api/ShallowWrapper/hostNodes.md b/docs/api/ShallowWrapper/hostNodes.md new file mode 100644 index 000000000..c34204f2e --- /dev/null +++ b/docs/api/ShallowWrapper/hostNodes.md @@ -0,0 +1,18 @@ +# `.hostNodes() => ShallowWrapper` + +Returns a new wrapper with only host nodes. + + + +#### Returns + +`ShallowWrapper`: A new wrapper that wraps the filtered nodes. + + + +#### Examples + +```jsx +const wrapper = mount(
); +expect(wrapper.find('.foo').hostNodes()).to.have.length(1); +``` diff --git a/docs/api/mount.md b/docs/api/mount.md index 4b64873f0..29583c26a 100644 --- a/docs/api/mount.md +++ b/docs/api/mount.md @@ -71,6 +71,9 @@ Remove nodes in the current wrapper that do not match the provided selector. #### [`.filterWhere(predicate) => ReactWrapper`](ReactWrapper/filterWhere.md) Remove nodes in the current wrapper that do not return true for the provided predicate function. +#### [`.hostNodes() => ReactWrapper`](ReactWrapper/hostNodes.md) +Removes nodes that are not host nodes; e.g., this will only return HTML nodes. + #### [`.contains(nodeOrNodes) => Boolean`](ReactWrapper/contains.md) Returns whether or not a given node or array of nodes is somewhere in the render tree. diff --git a/docs/api/shallow.md b/docs/api/shallow.md index f6a5e1483..d4577c228 100644 --- a/docs/api/shallow.md +++ b/docs/api/shallow.md @@ -70,6 +70,9 @@ Remove nodes in the current wrapper that do not match the provided selector. #### [`.filterWhere(predicate) => ShallowWrapper`](ShallowWrapper/filterWhere.md) Remove nodes in the current wrapper that do not return true for the provided predicate function. +#### [`.hostNodes() => ShallowWrapper`](ShallowWrapper/hostNodes.md) +Removes nodes that are not host nodes; e.g., this will only return HTML nodes. + #### [`.contains(nodeOrNodes) => Boolean`](ShallowWrapper/contains.md) Returns whether or not a given node or array of nodes is somewhere in the render tree. diff --git a/package.json b/package.json index 5ec221b24..9348536dc 100644 --- a/package.json +++ b/package.json @@ -104,6 +104,5 @@ "sinon": "^2.4.1", "webpack": "^1.13.3" }, - "dependencies": { - } + "dependencies": {} } diff --git a/packages/enzyme-test-suite/package.json b/packages/enzyme-test-suite/package.json index 992035590..254df3f83 100644 --- a/packages/enzyme-test-suite/package.json +++ b/packages/enzyme-test-suite/package.json @@ -40,4 +40,4 @@ "react": "^15.5.0", "react-dom": "^15.5.0" } -} +} \ No newline at end of file diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx index 25f2a326c..7ec770ac9 100644 --- a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx +++ b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx @@ -356,6 +356,32 @@ describeWithDOM('mount', () => { }); }); + describe('.hostNodes()', () => { + it('should strip out any non-hostNode', () => { + class Foo extends React.Component { + render() { + return
; + } + } + const wrapper = mount( +
+ + +
, + ); + + const foos = wrapper.find('.foo'); + expect(foos).to.have.lengthOf(3); + + const hostNodes = foos.hostNodes(); + expect(hostNodes).to.have.lengthOf(2); + expect(hostNodes.filter('.foo')).to.have.lengthOf(2); + + expect(hostNodes.filter('div')).to.have.lengthOf(1); + expect(hostNodes.filter('span')).to.have.lengthOf(1); + }); + }); + describe('.find(selector)', () => { it('should find an element based on a class name', () => { const wrapper = mount( diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx index a724d8b6b..50ed60c91 100644 --- a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx +++ b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx @@ -383,6 +383,31 @@ describe('shallow', () => { }); }); + describe('.hostNodes()', () => { + it('should strip out any non-hostNode', () => { + class Foo extends React.Component { + render() { + return
; + } + } + const wrapper = shallow( +
+ +
+
, + ); + + const foos = wrapper.find('.foo'); + expect(foos).to.have.lengthOf(2); + + const hostNodes = foos.hostNodes(); + expect(hostNodes).to.have.lengthOf(1); + + expect(hostNodes.is('div')).to.equal(true); + expect(hostNodes.hasClass('foo')).to.equal(true); + }); + }); + describe('.find(selector)', () => { it('should be able to match the root DOM element', () => { const wrapper = shallow(
hello
); diff --git a/packages/enzyme/src/ReactWrapper.js b/packages/enzyme/src/ReactWrapper.js index b967b3cb8..5b97a5a0a 100644 --- a/packages/enzyme/src/ReactWrapper.js +++ b/packages/enzyme/src/ReactWrapper.js @@ -1044,6 +1044,16 @@ class ReactWrapper { } this[RENDERER].unmount(); } + + /** + * Strips out all the not host-nodes from the list of nodes + * + * This method is useful if you want to check for the presence of host nodes + * (actually rendered HTML elements) ignoring the React nodes. + */ + hostNodes() { + return this.filterWhere(n => typeof n.type() === 'string'); + } } diff --git a/packages/enzyme/src/ShallowWrapper.js b/packages/enzyme/src/ShallowWrapper.js index f1c207109..ffa2d8664 100644 --- a/packages/enzyme/src/ShallowWrapper.js +++ b/packages/enzyme/src/ShallowWrapper.js @@ -1196,6 +1196,16 @@ class ShallowWrapper { return this.wrap(el, null, { ...this[OPTIONS], ...options }); }); } + + /** + * Strips out all the not host-nodes from the list of nodes + * + * This method is useful if you want to check for the presence of host nodes + * (actually rendered HTML elements) ignoring the React nodes. + */ + hostNodes() { + return this.filterWhere(n => typeof n.type() === 'string'); + } } if (ITERATOR_SYMBOL) {