Merge pull request #16 from airbnb/lmr/shallow-method

Added .shallow() method to ShallowWrapper
enzymejs · Nov 16, 2015 · 2c65f0d · 2c65f0d
2 parents f894be8 + 7f93d39
commit 2c65f0d
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 0 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -19,6 +19,7 @@
     * [parents()](/docs/api/ShallowWrapper/parents.md)
     * [parent()](/docs/api/ShallowWrapper/parent.md)
     * [closest(selector)](/docs/api/ShallowWrapper/closest.md)
+    * [shallow()](/docs/api/ShallowWrapper/shallow.md)
     * [text()](/docs/api/ShallowWrapper/text.md)
     * [get(index)](/docs/api/ShallowWrapper/get.md)
     * [first()](/docs/api/ShallowWrapper/first.md)

diff --git a/docs/api/ShallowWrapper/shallow.md b/docs/api/ShallowWrapper/shallow.md
@@ -0,0 +1,47 @@
+# `.shallow() => ShallowWrapper`
+
+Shallow renders the current node and returns a shallow wrapper around it.
+
+NOTE: can only be called on wrapper of a single node.
+
+
+
+
+#### Returns
+
+`ShallowWrapper`: A new wrapper that wraps the current node after it's been shallow rendered.
+
+
+
+#### Examples
+
+```jsx
+class Bar extends React.Component {
+  render() {
+    return (
+      <div>
+        <div className="in-bar" />
+      </div>
+    );
+  }
+}
+```
+
+```jsx
+class Foo extends React.Component {
+  render() {
+    return (
+      <div>
+        <Bar />
+      </div>
+    );
+  }
+}
+```
+
+```jsx
+const wrapper = shallow(<Foo />);
+expect(wrapper.find('.in-bar')).to.have.length(0);
+expect(wrapper.find(Bar)).to.have.length(1);
+expect(wrapper.find(Bar).shallow().find('.in-bar')).to.have.length(1);
+```
diff --git a/docs/api/shallow.md b/docs/api/shallow.md
@@ -79,6 +79,9 @@ Get a wrapper with the direct parent of the current node.
 #### [`.closest(selector) => ShallowWrapper`](ShallowWrapper/closest.md)
 Get a wrapper with the first ancestor of the current node to match the provided selector.
 
+#### [`.shallow() => ShallowWrapper`](ShallowWrapper/shallow.md)
+Shallow renders the current node and returns a shallow wrapper around it.
+
 #### [`.text() => String`](ShallowWrapper/text.md)
 Returns a string representation of the text nodes in the current render tree.
 

diff --git a/src/ShallowWrapper.js b/src/ShallowWrapper.js
@@ -318,6 +318,17 @@ export default class ShallowWrapper {
     return this.parents().filter(selector).first();
   }
 
+  /**
+   * Shallow renders the current node and returns a shallow wrapper around it.
+   *
+   * NOTE: can only be called on wrapper of a single node.
+   *
+   * @returns {ShallowWrapper}
+   */
+  shallow() {
+    return this.single((n) => new ShallowWrapper(n));
+  }
+
   /**
    * Returns the value of  prop with the given name of the root node.
    *

diff --git a/src/__tests__/ShallowWrapper-spec.js b/src/__tests__/ShallowWrapper-spec.js
@@ -762,6 +762,35 @@ describe('shallow', () => {
     });
   });
 
+  describe('.shallow()', () => {
+
+    it('should return a shallow rendered instance of the current node', () => {
+      class Bar extends React.Component {
+        render() {
+          return (
+            <div>
+              <div className="in-bar" />
+            </div>
+          );
+        }
+      }
+      class Foo extends React.Component {
+        render() {
+          return (
+            <div>
+              <Bar />
+            </div>
+          );
+        }
+      }
+      const wrapper = shallow(<Foo />);
+      expect(wrapper.find('.in-bar')).to.have.length(0);
+      expect(wrapper.find(Bar)).to.have.length(1);
+      expect(wrapper.find(Bar).shallow().find('.in-bar')).to.have.length(1);
+    });
+
+  });
+
   describe('.first()', () => {
     it('should return the first node in the current set', () => {
       const wrapper = shallow(