Merge pull request #1179 from FezVrasta/1174

feat: Added hostNodes method to ReactWrapper

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(<div><MyComponent className="foo" /><div className="foo" /></div>);
+expect(wrapper.find('.foo').hostNodes()).to.have.length(1);
+```

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(<div><MyComponent className="foo" /><div className="foo" /></div>);
+expect(wrapper.find('.foo').hostNodes()).to.have.length(1);
+```

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.
 

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.
 

package.json

@@ -104,6 +104,5 @@
     "sinon": "^2.4.1",
     "webpack": "^1.13.3"
   },
-  "dependencies": {
-  }
+  "dependencies": {}
 }

packages/enzyme-test-suite/package.json

@@ -40,4 +40,4 @@
     "react": "^15.5.0",
     "react-dom": "^15.5.0"
   }
-}
+}

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 <div {...this.props} />;
+        }
+      }
+      const wrapper = mount(
+        <div>
+          <Foo className="foo" />
+          <span className="foo" />
+        </div>,
+      );
+
+      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(

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 <div {...this.props} />;
+        }
+      }
+      const wrapper = shallow(
+        <div>
+          <Foo className="foo" />
+          <div className="foo" />
+        </div>,
+      );
+
+      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(<div id="ttt" className="ttt">hello</div>);

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');
+  }
 }
 
 

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) {