From 102d631581713ab18e6d91a15911f96566726404 Mon Sep 17 00:00:00 2001 From: Mathieu Date: Wed, 4 May 2016 11:05:07 +0200 Subject: [PATCH] Add matchesElement on the ReactWrapper --- docs/README.md | 1 + docs/api/ReactWrapper/matchesElement.md | 50 ++++++++++++++++++++++ docs/api/mount.md | 3 ++ src/ReactWrapper.js | 28 +++++++++++-- test/ReactWrapper-spec.js | 55 +++++++++++++++++++++++++ 5 files changed, 133 insertions(+), 4 deletions(-) create mode 100644 docs/api/ReactWrapper/matchesElement.md diff --git a/docs/README.md b/docs/README.md index 307fb174e..d32799eda 100644 --- a/docs/README.md +++ b/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) diff --git a/docs/api/ReactWrapper/matchesElement.md b/docs/api/ReactWrapper/matchesElement.md new file mode 100644 index 000000000..f7fb21132 --- /dev/null +++ b/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 ( +
Hello
+ ); + } +}); + +const wrapper = mount(); +expect(wrapper.matchesElement( +
Hello
+)).to.equal(true); +expect(wrapper.matchesElement( +
Hello
+)).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. diff --git a/docs/api/mount.md b/docs/api/mount.md index 892c64959..0c9b9e7f7 100644 --- a/docs/api/mount.md +++ b/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 diff --git a/src/ReactWrapper.js b/src/ReactWrapper.js index f61ec145d..1db05fda9 100644 --- a/src/ReactWrapper.js +++ b/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
Hello
+ * const wrapper = mount(); + * expect(wrapper.matchesElement(
Hello
)).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
Hello
* const wrapper = mount(); - * expect(wrapper.containsMatchingElement(
Hello
)).to.equal(true); + * expect(wrapper.atchingElement(
Hello
)).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. diff --git a/test/ReactWrapper-spec.js b/test/ReactWrapper-spec.js index 3a9e8c35c..d40fe1275 100644 --- a/test/ReactWrapper-spec.js +++ b/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( +
+
Hello World
+
+ ).first(); + expect(wrapper.matchesElement(
Hello World
)).to.equal(true); + expect(wrapper.matchesElement( +
+
Hello World
+
+ )).to.equal(true); + expect(wrapper.matchesElement( +
+
Hello World
+
+ )).to.equal(true); + expect(wrapper.matchesElement( +
+
Hello World
+
+ )).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( +
+
Hello World
+
+ ).first(); + expect(wrapper.matchesElement(
Bonjour le monde
)).to.equal(false); + expect(wrapper.matchesElement( +
+
Hello World
+
+ )).to.equal(false); + expect(wrapper.matchesElement( +
+
Hello World
+
+ )).to.equal(false); + expect(wrapper.matchesElement( +
+
Hello World
+
+ )).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();