Add .debug() method to ReactWrapper

Author: lelandrichardson

docs/README.md

@@ -80,6 +80,7 @@
     * [unmount()](/docs/api/ReactWrapper/unmount.md)
     * [mount()](/docs/api/ReactWrapper/mount.md)
     * [update()](/docs/api/ReactWrapper/update.md)
+    * [debug()](/docs/api/ReactWrapper/debug.md)
     * [type()](/docs/api/ReactWrapper/type.md)
     * [forEach(fn)](/docs/api/ReactWrapper/forEach.md)
     * [map(fn)](/docs/api/ReactWrapper/map.md)

docs/api/ReactWrapper/debug.md

@@ -0,0 +1,76 @@
+# `.debug() => String`
+
+Returns an HTML-like string of the wrapper for debugging purposes. Useful to print out to the 
+console when tests are not passing when you expect them to.
+
+
+#### Returns
+
+`String`: The resulting string.
+
+
+
+#### Examples
+
+Say we have the following components:
+```jsx
+class Foo extends React.Component {
+  render() {
+    return (
+      <div className="foo">
+        <span>Foo</span>
+      </div>
+    );
+  }
+}
+
+class Bar extends React.Component {
+  render() {
+    return (
+      <div className="bar">
+        <span>Non-Foo</span>
+        <Foo baz="bax" />
+      </div>
+    );
+  }
+}
+```
+
+In this case, running:
+```jsx
+console.log(mount(<Bar id="2" />).debug());
+```
+
+Would output the following to the console:
+```jsx
+<Bar id="2">
+  <div className="bar">
+    <span>
+      Non-Foo
+    </span>
+    <Foo baz="bax">
+      <div className="foo">
+        <span>
+          Foo
+        </span>
+      </div>
+    </Foo>
+  </div>
+</Bar>
+```
+
+Likewise, running:
+
+```jsx
+console.log(mount(<Bar id="2" />).find(Foo).debug();
+```
+Would output the following to the console:
+```jsx
+<Foo baz="bax">
+  <div className="foo">
+    <span>
+      Foo
+    </span>
+  </div>
+</Foo>
+```

docs/api/ShallowWrapper/debug.md

@@ -1,6 +1,6 @@
 # `.debug() => String`
 
-Returns an html-like string of the wrapper for debugging purposes. Useful to print out to the 
+Returns an HTML-like string of the wrapper for debugging purposes. Useful to print out to the 
 console when tests are not passing when you expect them to.
 
 

docs/api/mount.md

@@ -145,6 +145,9 @@ A method that re-mounts the component.
 #### [`.update() => ReactWrapper`](ReactWrapper/update.md)
 Calls `.forceUpdate()` on the root component instance.
 
+#### [`.debug() => String`](ReactWrapper/debug.md)
+Returns a string representation of the current render tree for debugging purposes.
+
 #### [`.type() => String|Function`](ReactWrapper/type.md)
 Returns the type of the current node of the wrapper.
 

src/Debug.js

@@ -1,10 +1,20 @@
 import {
   childrenOfNode,
 } from './ShallowTraversal';
+import {
+  internalInstance,
+  renderedChildrenOfInst,
+} from './MountedTraversal';
+import {
+  isDOMComponent,
+  isCompositeComponent,
+  isElement,
+} from './react-compat';
 import {
   propsOfNode,
 } from './Utils';
 import { without, escape, compact } from 'underscore';
+import { REACT013, REACT014 } from './version';
 
 export function typeName(node) {
   return typeof node.type === 'function'
@@ -63,3 +73,61 @@ export function debugNode(node, indentLength = 2) {
 export function debugNodes(nodes) {
   return nodes.map(debugNode).join('\n\n\n');
 }
+
+export function debugInst(inst, indentLength = 2) {
+  if (typeof inst === 'string' || typeof inst === 'number') return escape(inst);
+  if (!inst) return '';
+
+  if (!inst.getPublicInstance) {
+    const internal = internalInstance(inst);
+    return debugInst(internal, indentLength);
+  }
+
+  const publicInst = inst.getPublicInstance();
+
+  if (typeof publicInst === 'string' || typeof publicInst === 'number') return escape(publicInst);
+  if (!publicInst) return '';
+
+  // do stuff with publicInst
+  const currentElement = inst._currentElement;
+  const type = typeName(currentElement);
+  const props = propsString(currentElement);
+  const children = [];
+  if (isDOMComponent(publicInst)) {
+    const renderedChildren = renderedChildrenOfInst(inst) || childrenOfNode(currentElement);
+    let key;
+    for (key in renderedChildren) {
+      if (!renderedChildren.hasOwnProperty(key)) {
+        continue;
+      }
+      children.push(renderedChildren[key]);
+    }
+  } else if (
+    REACT014 &&
+    isElement(currentElement) &&
+    typeof currentElement.type === 'function'
+  ) {
+    children.push(inst._renderedComponent);
+  } else if (
+    REACT013 &&
+    isCompositeComponent(publicInst)
+  ) {
+    children.push(inst._renderedComponent);
+  }
+
+  const childrenStrs = compact(children.map(n => debugInst(n, indentLength)));
+
+  const beforeProps = props ? ' ' : '';
+  const nodeClose = childrenStrs.length ? `</${type}>` : '/>';
+  const afterProps = childrenStrs.length
+    ? '>'
+    : ' ';
+  const childrenIndented = childrenStrs.length
+    ? '\n' + childrenStrs.map(x => indent(indentLength + 2, x)).join('\n') + '\n'
+    : '';
+  return `<${type}${beforeProps}${props}${afterProps}${childrenIndented}${nodeClose}`;
+}
+
+export function debugInsts(insts) {
+  return insts.map(debugInst).join('\n\n\n');
+}

src/ReactWrapper.js

@@ -20,6 +20,9 @@ import {
   mapNativeEventNames,
   containsChildrenSubArray,
 } from './Utils';
+import {
+  debugInsts,
+} from './Debug';
 
 /**
  * Finds all nodes in the current wrapper nodes' render trees that match the provided predicate
@@ -699,4 +702,13 @@ export default class ReactWrapper {
     }
     return new ReactWrapper(node, this.root);
   }
+
+  /**
+   * Returns an html-like string of the shallow render for debugging purposes.
+   *
+   * @returns {String}
+   */
+  debug() {
+    return debugInsts(this.nodes);
+  }
 }

src/Utils.js

@@ -14,6 +14,9 @@ export function propsOfNode(node) {
   if (REACT013 && node && node._store) {
     return (node._store.props) || {};
   }
+  if (node && node._reactInternalComponent && node._reactInternalComponent._currentElement) {
+    return (node._reactInternalComponent._currentElement.props) || {};
+  }
   return (node && node.props) || {};
 }
 

src/__tests__/Debug-spec.js

@@ -5,7 +5,8 @@ import {
   indent,
   debugNode,
 } from '../Debug';
-import { itIf } from './_helpers';
+import { mount } from '../';
+import { describeWithDOM, itIf } from './_helpers';
 import { REACT013 } from '../version';
 
 describe('debug', () => {
@@ -188,4 +189,92 @@ describe('debug', () => {
 
   });
 
+  describeWithDOM('debugInst(inst)', () => {
+    it('renders basic debug of mounted components', () => {
+      class Foo extends React.Component {
+        render() {
+          return (
+            <div className="foo">
+              <span>Foo</span>
+            </div>
+          );
+        }
+      }
+      expect(mount(<Foo id="2" />).debug()).to.eql(
+`<Foo id="2">
+  <div className="foo">
+    <span>
+      Foo
+    </span>
+  </div>
+</Foo>`);
+    });
+
+    it('renders debug of compositional components', () => {
+      class Foo extends React.Component {
+        render() {
+          return (
+            <div className="foo">
+              <span>Foo</span>
+            </div>
+          );
+        }
+      }
+      class Bar extends React.Component {
+        render() {
+          return (
+            <div className="bar">
+              <span>Non-Foo</span>
+              <Foo baz="bax" />
+            </div>
+          );
+        }
+      }
+      expect(mount(<Bar id="2" />).debug()).to.eql(
+        `<Bar id="2">
+  <div className="bar">
+    <span>
+      Non-Foo
+    </span>
+    <Foo baz="bax">
+      <div className="foo">
+        <span>
+          Foo
+        </span>
+      </div>
+    </Foo>
+  </div>
+</Bar>`);
+    });
+
+    it('renders a subtree of a mounted tree', () => {
+      class Foo extends React.Component {
+        render() {
+          return (
+            <div className="foo">
+              <span>Foo</span>
+            </div>
+          );
+        }
+      }
+      class Bar extends React.Component {
+        render() {
+          return (
+            <div className="bar">
+              <span>Non-Foo</span>
+              <Foo baz="bax" />
+            </div>
+          );
+        }
+      }
+      expect(mount(<Bar id="2" />).find(Foo).debug()).to.eql(
+        `<Foo baz="bax">
+  <div className="foo">
+    <span>
+      Foo
+    </span>
+  </div>
+</Foo>`);
+    });
+  });
 });