Add matchesElement on the ReactWrapper

docs/README.md

@@ -91,6 +91,7 @@
     * [key()](/docs/api/ReactWrapper/key.md)
     * [last()](/docs/api/ReactWrapper/last.md)
     * [map(fn)](/docs/api/ReactWrapper/map.md)
+    * [matchesElement(node)](/docs/api/ReactWrapper/matchesElement.md)
     * [mount()](/docs/api/ReactWrapper/mount.md)
     * [not(selector)](/docs/api/ReactWrapper/not.md)
     * [parent()](/docs/api/ReactWrapper/parent.md)

docs/api/ReactWrapper/matchesElement.md

@@ -0,0 +1,50 @@
+# `.matchesElement(node) => Boolean`
+
+Returns whether or not a given react element matches the current render tree.
+It will determine if the the wrapper root node __looks like__ the expected element by checking if all props of the expected element are present on the wrapper root node and equals to each other.
+
+
+#### Arguments
+
+1. `node` (`ReactElement`): The node whose presence you are detecting in the current instance's
+render tree.
+
+
+
+#### Returns
+
+`Boolean`: whether or not the current wrapper match the one passed in.
+
+
+
+#### Example
+
+
+```jsx
+onst MyComponent = React.createClass({
+  handleClick() {
+    ...
+  },
+  render() {
+    return (
+      <div onClick={this.handleClick} className="foo bar">Hello</div>
+    );
+  }
+});
+
+const wrapper = mount(<MyComponent />);
+expect(wrapper.matchesElement(
+  <div>Hello</div>
+)).to.equal(true);
+expect(wrapper.matchesElement(
+  <div className="foo bar">Hello</div>
+)).to.equal(true);
+```
+
+
+#### Common Gotchas
+
+- `.matchesElement()` expects a ReactElement, not a selector (like many other methods). Make sure that
+when you are calling it you are calling it with a ReactElement or a JSX expression.
+- Keep in mind that this method determines matching based on the matching of the node's children as
+well.

docs/api/mount.md

@@ -177,6 +177,9 @@ Iterates through each node of the current wrapper and executes the provided func
 #### [`.map(fn) => Array`](ReactWrapper/map.md)
 Maps the current array of nodes to another array.
 
+#### [`.matchesElement(node) => Boolean`](ReactWrapper/matchesElement.md)
+Returns whether or not a given react element matches the current render tree.
+
 #### [`.reduce(fn[, initialValue]) => Any`](/docs/api/ReactWrapper/reduce.md)
 Reduces the current array of nodes to a value
 

src/ReactWrapper.js

@@ -251,6 +251,26 @@ export default class ReactWrapper {
     return this;
   }
 
+  /**
+   * Whether or not a given react element matches the current render tree.
+   * It will determine if the wrapper root node "looks like" the expected
+   * element by checking if all props of the expected element are present
+   * on the wrapper root node and equals to each other.
+   *
+   * Example:
+   * ```
+   * // MyComponent outputs <div class="foo">Hello</div>
+   * const wrapper = mount(<MyComponent />);
+   * expect(wrapper.matchesElement(<div>Hello</div>)).to.equal(true);
+   * ```
+   *
+   * @param {ReactElement} node
+   * @returns {Boolean}
+   */
+  matchesElement(node) {
+    return this.single(() => instEqual(node, this.node, (a, b) => a <= b));
+  }
+
   /**
    * Whether or not a given react element exists in the mount render tree.
    *
@@ -271,7 +291,7 @@ export default class ReactWrapper {
   }
 
   /**
-   * Whether or not a given react element exists in the shallow render tree.
+   * Whether or not a given react element exists in the current render tree.
    * It will determine if one of the wrappers element "looks like" the expected
    * element by checking if all props of the expected element are present
    * on the wrappers element and equals to each other.
@@ -280,7 +300,7 @@ export default class ReactWrapper {
    * ```
    * // MyComponent outputs <div><div class="foo">Hello</div></div>
    * const wrapper = mount(<MyComponent />);
-   * expect(wrapper.containsMatchingElement(<div>Hello</div>)).to.equal(true);
+   * expect(wrapper.atchingElement(<div>Hello</div>)).to.equal(true);
    * ```
    *
    * @param {ReactElement} node
@@ -292,7 +312,7 @@ export default class ReactWrapper {
   }
 
   /**
-   * Whether or not all the given react elements exists in the shallow render tree.
+   * Whether or not all the given react elements exists in the current render tree.
    * It will determine if one of the wrappers element "looks like" the expected
    * element by checking if all props of the expected element are present
    * on the wrappers element and equals to each other.
@@ -316,7 +336,7 @@ export default class ReactWrapper {
   }
 
   /**
-   * Whether or not one of the given react elements exists in the shallow render tree.
+   * Whether or not one of the given react elements exists in the current render tree.
    * It will determine if one of the wrappers element "looks like" the expected
    * element by checking if all props of the expected element are present
    * on the wrappers element and equals to each other.

test/ReactWrapper-spec.js

@@ -1910,6 +1910,61 @@ describeWithDOM('mount', () => {
     });
   });
 
+  describe('.matchesElement(node)', () => {
+    it('should match on a root node that looks like the rendered one', () => {
+      const spy = sinon.spy();
+      const wrapper = mount(
+        <div>
+          <div onClick={spy} style={{ fontSize: 12, color: 'red' }}>Hello World</div>
+        </div>
+      ).first();
+      expect(wrapper.matchesElement(<div><div>Hello World</div></div>)).to.equal(true);
+      expect(wrapper.matchesElement(
+        <div>
+          <div onClick={spy} style={{ fontSize: 12, color: 'red' }}>Hello World</div>
+        </div>
+      )).to.equal(true);
+      expect(wrapper.matchesElement(
+        <div>
+          <div onClick={spy}>Hello World</div>
+        </div>
+      )).to.equal(true);
+      expect(wrapper.matchesElement(
+        <div>
+          <div style={{ fontSize: 12, color: 'red' }}>Hello World</div>
+        </div>
+      )).to.equal(true);
+      expect(spy.callCount).to.equal(0);
+    });
+    it('should not match on a root node that doesn\'t looks like the rendered one', () => {
+      const spy = sinon.spy();
+      const spy2 = sinon.spy();
+      const wrapper = mount(
+        <div>
+          <div onClick={spy} style={{ fontSize: 12, color: 'red' }}>Hello World</div>
+        </div>
+      ).first();
+      expect(wrapper.matchesElement(<div><div>Bonjour le monde</div></div>)).to.equal(false);
+      expect(wrapper.matchesElement(
+        <div>
+          <div onClick={spy} style={{ fontSize: 12, color: 'blue' }}>Hello World</div>
+        </div>
+      )).to.equal(false);
+      expect(wrapper.matchesElement(
+        <div>
+          <div onClick={spy2}>Hello World</div>
+        </div>
+      )).to.equal(false);
+      expect(wrapper.matchesElement(
+        <div>
+          <div style={{ fontSize: 13, color: 'red' }}>Hello World</div>
+        </div>
+      )).to.equal(false);
+      expect(spy.callCount).to.equal(0);
+      expect(spy2.callCount).to.equal(0);
+    });
+  });
+
   describe('.containsMatchingElement(node)', () => {
     it('should match a root node that looks like the rendered one', () => {
       const spy1 = sinon.spy();