Implement verbose debug output

switch to inspect

[Docs] setting jsx highlighting on certain blocks

[Docs] Make clearer the docs for .mount()

[Docs] fix doc linting errors

docs/api/ReactWrapper/mount.md

@@ -1,6 +1,6 @@
 # `.mount() => Self`
 
-A method that re-mounts the component. This can be used to simulate a component going through
+A method that re-mounts the component, if it is not currently mounted. This can be used to simulate a component going through
 an unmount/mount lifecycle.
 
 #### Returns

docs/guides/migration-from-2-to-3.md

@@ -437,8 +437,8 @@ return 3 and not 1 as in previous versions. A closer look using
 [`debug`](../api/ReactWrapper/debug.md) reveals:
 
 <!-- eslint react/prop-types: 0, react/prefer-stateless-function: 0 -->
-
-```
+<!-- eslint-skip -->
+```jsx
 // console.log(wrapper.find('[aria-expanded="true"]').debug());
 
 <HelpLinkContainer aria-expanded={true} text="foo">
@@ -465,9 +465,9 @@ To return only the html nodes use the
 
 `wrapper.find("[aria-expanded=true]").hostNodes().debug()` will now return:
 
-<!-- eslint react/prop-types: 0, react/prefer-stateless-function: 0 -->
+<!-- eslint react/prop-types: 0, react/prefer-stateless-function: 0, no-unused-expressions: 0, jsx-a11y/anchor-is-valid: 0 -->
 
-```
+```jsx
 <a aria-expanded="true">foo</a>;
 ```
 

package.json

@@ -77,7 +77,7 @@
     "eslint-config-airbnb": "^16.1.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-markdown": "^1.0.0-beta.6",
+    "eslint-plugin-markdown": "^1.0.0-beta.7",
     "eslint-plugin-react": "^7.6.1",
     "gitbook-cli": "^1.0.1",
     "gitbook-plugin-anchors": "^0.7.1",

packages/enzyme-test-suite/test/Debug-spec.jsx

@@ -626,6 +626,36 @@ describe('debug', () => {
   <span>
     span text
   </span>
+</div>`
+      ));
+    });
+
+    it('options.verbose causes arrays and objects to be verbosely printed', () => {
+      class Foo extends React.Component {
+        render() {
+          const nestedData = {
+            a: [1, 3, { true: true }],
+            b: false,
+            c: { d: 'f' },
+          };
+          nestedData.d = nestedData.a;
+          const arry = [1, 2, { f: nestedData.c }];
+          return (
+            <div data-json={nestedData} data-arry={arry}>Test Component</div>
+          );
+        }
+      }
+
+      const wrapper = shallow(<Foo />);
+      expect(wrapper.debug({ verbose: true })).to.equal((
+        `<div data-json={{ a: [ 1, 3, { true: true } ], b: false, c: { d: 'f' }, d: [ 1, 3, { true: true } ] }} data-arry={[ 1, 2, { f: { d: 'f' } } ]}>
+  Test Component
+</div>`
+      ));
+
+      expect(wrapper.debug({ verbose: false })).to.equal((
+        `<div data-json={{...}} data-arry={{...}}>
+  Test Component
 </div>`
       ));
     });
@@ -684,5 +714,39 @@ describe('debug', () => {
 </Bar>`
       ));
     });
+
+    it('options.verbose causes arrays and objects to be verbosely printed', () => {
+      class Foo extends React.Component {
+        render() {
+          const nestedData = {
+            a: [1, 3, { true: true }],
+            b: false,
+            c: { d: 'f' },
+          };
+          nestedData.d = nestedData.a;
+          const arry = [1, 2, { f: nestedData.c }];
+          return (
+            <div data-json={nestedData} data-arry={arry}>Test Component</div>
+          );
+        }
+      }
+
+      const wrapper = mount(<Foo />);
+      expect(wrapper.debug({ verbose: true })).to.equal((
+        `<Foo>
+  <div data-json={{ a: [ 1, 3, { true: true } ], b: false, c: { d: 'f' }, d: [ 1, 3, { true: true } ] }} data-arry={[ 1, 2, { f: { d: 'f' } } ]}>
+    Test Component
+  </div>
+</Foo>`
+      ));
+
+      expect(wrapper.debug({ verbose: false })).to.equal((
+        `<Foo>
+  <div data-json={{...}} data-arry={{...}}>
+    Test Component
+  </div>
+</Foo>`
+      ));
+    });
   });
 });

packages/enzyme/src/Debug.js

@@ -29,7 +29,7 @@ export function indent(depth, string) {
   return string.split('\n').map(x => `${spaces(depth)}${x}`).join('\n');
 }
 
-function propString(prop) {
+function propString(prop, options) {
   if (isString(prop)) {
     return inspect(String(prop), { quoteStyle: 'double' });
   }
@@ -43,15 +43,19 @@ function propString(prop) {
     return `{${inspect(prop)}}`;
   }
   if (typeof prop === 'object') {
+    if (options.verbose) {
+      return `{${inspect(prop)}}`;
+    }
+
     return '{{...}}';
   }
   return `{[${typeof prop}]}`;
 }
 
-function propsString(node) {
+function propsString(node, options) {
   const props = propsOfNode(node);
   const keys = without(Object.keys(props), 'children');
-  return keys.map(key => `${key}=${propString(props[key])}`).join(' ');
+  return keys.map(key => `${key}=${propString(props[key], options)}`).join(' ');
 }
 
 function indentChildren(childrenStrs, indentLength) {
@@ -67,7 +71,7 @@ export function debugNode(node, indentLength = 2, options = {}) {
   const childrenStrs = compact(childrenOfNode(node).map(n => debugNode(n, indentLength, options)));
   const type = typeName(node);
 
-  const props = options.ignoreProps ? '' : propsString(node);
+  const props = options.ignoreProps ? '' : propsString(node, options);
   const beforeProps = props ? ' ' : '';
   const afterProps = childrenStrs.length
     ? '>'

packages/enzyme/src/ReactWrapper.js

@@ -244,7 +244,8 @@ class ReactWrapper {
   }
 
   /**
-   * A method that re-mounts the component. This can be used to simulate a component going through
+   * A method that re-mounts the component, if it is not currently mounted.
+   * This can be used to simulate a component going through
    * an unmount/mount lifecycle.
    *
    * @returns {ReactWrapper}
@@ -988,8 +989,9 @@ class ReactWrapper {
   /**
    * Returns an HTML-like string of the shallow render for debugging purposes.
    *
-   * @param {Object} options - (Optional) Property bag of additional options.
-   * options.ignoreProps - if true, props are omitted from the string.
+   * @param {Object} [options] - Property bag of additional options.
+   * @param {boolean} [options.ignoreProps] - if true, props are omitted from the string.
+   * @param {boolean} [options.verbose] - if true, arrays and objects to be verbosely printed.
    * @returns {String}
    */
   debug(options = {}) {

packages/enzyme/src/ShallowWrapper.js

@@ -1132,8 +1132,9 @@ class ShallowWrapper {
   /**
    * Returns an HTML-like string of the shallow render for debugging purposes.
    *
-   * @param {Object} options - (Optional) Property bag of additional options.
-   * options.ignoreProps - if true, props are omitted from the string.
+   * @param {Object} [options] - Property bag of additional options.
+   * @param {boolean} [options.ignoreProps] - if true, props are omitted from the string.
+   * @param {boolean} [options.verbose] - if true, arrays and objects to be verbosely printed.
    * @returns {String}
    */
   debug(options = {}) {