Merge pull request #71 from nfpiche/add-html-to-render

Add method, tests, and docs for html method in ReactWrapper

Author: lelandrichardson

docs/README.md

@@ -60,6 +60,7 @@
     * [parent()](/docs/api/ReactWrapper/parent.md)
     * [closest(selector)](/docs/api/ReactWrapper/closest.md)
     * [text()](/docs/api/ReactWrapper/text.md)
+    * [html()](/docs/api/ReactWrapper/html.md)
     * [get(index)](/docs/api/ReactWrapper/get.md)
     * [at(index)](/docs/api/ReactWrapper/at.md)
     * [first()](/docs/api/ReactWrapper/first.md)

docs/api/ReactWrapper/html.md

@@ -0,0 +1,54 @@
+# `.html() => String`
+
+Returns a string of the rendered HTML markup of the current render tree.
+
+Note: can only be called on a wrapper of a single node.
+
+
+#### Returns
+
+`String`: The resulting HTML string
+
+
+
+#### Examples
+
+```jsx
+class Foo extends React.Component {
+  render() {
+    return (<div className="in-foo" />);
+  }
+}
+```
+
+```jsx
+class Bar extends React.Component {
+  render() {
+    return (
+      <div className="in-bar">
+        <Foo />
+      </div>
+    );
+  }
+}
+```
+
+```jsx
+const wrapper = mount(<Bar />);
+expect(wrapper.html()).to.equal(
+  `<div class="in-bar"><div class="in-foo"></div></div>`
+);
+expect(wrapper.find(Foo).html()).to.equal(
+  `<div class="in-foo"></div>`
+);
+```
+
+```jsx
+const wrapper = mount(<div><b>important</b></div>);
+expect(wrapper.html()).to.equal('<div><b>important</b></div>');
+```
+
+
+#### Related Methods
+
+[`.text() => String`](text.md)

docs/api/mount.md

@@ -91,6 +91,9 @@ Get a wrapper with the first ancestor of the current node to match the provided
 #### [`.text() => String`](ReactWrapper/text.md)
 Returns a string representation of the text nodes in the current render tree.
 
+#### [`.html() => String`](ReactWrapper/html.md)
+Returns a static HTML rendering of the current node.
+
 #### [`.get(index) => ReactWrapper`](ReactWrapper/get.md)
 Returns the node at the provided index of the current wrapper.
 

src/ReactWrapper.js

@@ -285,6 +285,17 @@ export default class ReactWrapper {
     return this.single(n => findDOMNode(n).textContent);
   }
 
+  /**
+   * Returns the HTML of the node.
+   *
+   * NOTE: can only be called on a wrapper of a single node.
+   *
+   * @returns {String}
+   */
+  html() {
+    return this.single(n => findDOMNode(n).outerHTML.replace(/\sdata-reactid+="[^"]+"/g, ''));
+  }
+
   /**
    * Used to simulate events. Pass an eventname and (optionally) event arguments. This method of
    * testing events should be met with some skepticism.

src/__tests__/ReactWrapper-spec.js

@@ -1300,4 +1300,42 @@ describeWithDOM('mount', () => {
       expect(wrapper.ref('secondRef').text()).to.equal('Second');
     });
   });
+
+  describe('.html()', () => {
+    it('should return html of straight DOM elements', () => {
+      const wrapper = mount(
+        <div className="test">
+          <span>Hello World!</span>
+        </div>
+      );
+      expect(wrapper.html()).to.equal(
+        `<div class="test"><span>Hello World!</span></div>`
+      );
+    });
+
+    it('should render out nested composite components', () => {
+      class Foo extends React.Component {
+        render() {
+          return (<div className="in-foo" />);
+        }
+      }
+      class Bar extends React.Component {
+        render() {
+          return (
+            <div className="in-bar">
+              <Foo />
+            </div>
+          );
+        }
+      }
+      const wrapper = mount(<Bar />);
+      expect(wrapper.html()).to.equal(
+        `<div class="in-bar"><div class="in-foo"></div></div>`
+      );
+      expect(wrapper.find(Foo).html()).to.equal(
+        `<div class="in-foo"></div>`
+      );
+    });
+  });
+
 });