fix indentation for debug() on shallow wrapper

enzymejs · May 16, 2017 · f72cae6 · f72cae6
1 parent 32735b6
commit f72cae6
Show file tree

Hide file tree

Showing 2 changed files with 134 additions and 13 deletions.
diff --git a/src/Debug.js b/src/Debug.js
@@ -57,26 +57,30 @@ function propsString(node) {
   return keys.map(key => `${key}=${propString(props[key])}`).join(' ');
 }
 
+function indentChildren(childrenStrs, indentLength) {
+  return childrenStrs.length
+    ? `\n${childrenStrs.map(x => indent(indentLength, x)).join('\n')}\n`
+    : '';
+}
+
 export function debugNode(node, indentLength = 2) {
   if (typeof node === 'string' || typeof node === 'number') return escape(node);
   if (!node) return '';
 
-  const children = compact(childrenOfNode(node).map(n => debugNode(n, indentLength)));
+  const childrenStrs = compact(childrenOfNode(node).map(n => debugNode(n, indentLength)));
   const type = typeName(node);
   const props = propsString(node);
   const beforeProps = props ? ' ' : '';
-  const nodeClose = children.length ? `</${type}>` : '/>';
-  const afterProps = children.length
+  const nodeClose = childrenStrs.length ? `</${type}>` : '/>';
+  const afterProps = childrenStrs.length
     ? '>'
     : ' ';
-  const childrenIndented = children.length
-    ? `\n${children.map(x => indent(indentLength, x)).join('\n')}\n`
-    : '';
+  const childrenIndented = indentChildren(childrenStrs, indentLength);
   return `<${type}${beforeProps}${props}${afterProps}${childrenIndented}${nodeClose}`;
 }
 
 export function debugNodes(nodes) {
-  return nodes.map(debugNode).join('\n\n\n');
+  return nodes.map(node => debugNode(node)).join('\n\n\n');
 }
 
 export function debugInst(inst, indentLength = 2) {
@@ -128,12 +132,10 @@ export function debugInst(inst, indentLength = 2) {
   const afterProps = childrenStrs.length
     ? '>'
     : ' ';
-  const childrenIndented = childrenStrs.length
-    ? `\n${childrenStrs.map(x => indent(indentLength + 2, x)).join('\n')}\n`
-    : '';
+  const childrenIndented = indentChildren(childrenStrs, indentLength);
   return `<${type}${beforeProps}${props}${afterProps}${childrenIndented}${nodeClose}`;
 }
 
 export function debugInsts(insts) {
-  return insts.map(debugInst).join('\n\n\n');
+  return insts.map(inst => debugInst(inst)).join('\n\n\n');
 }
diff --git a/test/Debug-spec.jsx b/test/Debug-spec.jsx
@@ -4,8 +4,9 @@ import {
   spaces,
   indent,
   debugNode,
+  debugNodes,
 } from '../src/Debug';
-import { mount } from '../src/';
+import { mount, shallow } from '../src/';
 import {
   describeWithDOM,
   describeIf,
@@ -447,9 +448,127 @@ describe('debug', () => {
     </Foo>
   </div>
 </Bar>`);
-
       });
 
     });
+
+  });
+
+  describe('shallow', () => {
+    it('renders shallow wrapper properly', () => {
+      class Foo extends React.Component {
+        render() {
+          return (
+            <div className="foo">
+              <span>From Foo</span>
+              {this.props.children}
+            </div>
+          );
+        }
+      }
+      class Bar extends React.Component {
+        render() {
+          return (
+            <div className="bar">
+              <Foo baz="bax">
+                <span>From Bar</span>
+              </Foo>
+            </div>
+          );
+        }
+      }
+
+      expect(shallow(<Bar id="2" />).debug()).to.eql(
+`<div className="bar">
+  <Foo baz="bax">
+    <span>
+      From Bar
+    </span>
+  </Foo>
+</div>`);
+    });
+  });
+
+  describe('debugNodes', () => {
+    it('can render a single node', () => {
+      class Foo extends React.Component {
+        render() {
+          return (
+            <div className="foo">
+              <span>inside Foo</span>
+            </div>
+          );
+        }
+      }
+
+      expect(debugNodes(shallow(<Foo />).getNodes())).to.eql(
+`<div className="foo">
+  <span>
+    inside Foo
+  </span>
+</div>`);
+    });
+
+    it('can render multiple nodes', () => {
+      class Foo extends React.Component {
+        render() {
+          return (
+            <div className="foo">
+              <span>inside Foo</span>
+            </div>
+          );
+        }
+      }
+
+      class Bar extends React.Component {
+        render() {
+          return (
+            <div className="bar">
+              <Foo key="foo1" />
+              <Foo key="foo2" />
+              <Foo key="foo3" />
+            </div>
+          );
+        }
+      }
+
+      expect(debugNodes(shallow(<Bar />).children().getNodes())).to.eql(
+`<Foo />
+
+
+<Foo />
+
+
+<Foo />`);
+    });
+
+    it('can render multiple nodes with indent', () => {
+      class Foo extends React.Component {
+        render() {
+          return (
+            <div className="bar">
+              <span>span1 text</span>
+              <span>span2 text</span>
+              <span>span3 text</span>
+            </div>
+          );
+        }
+      }
+
+      expect(debugNodes(shallow(<Foo />).children().getNodes())).to.eql(
+`<span>
+  span1 text
+</span>
+
+
+<span>
+  span2 text
+</span>
+
+
+<span>
+  span3 text
+</span>`);
+    });
   });
 });