Skip to content

Commit

Permalink
Implement verbose debug output
Browse files Browse the repository at this point in the history
switch to inspect

[Docs] setting jsx highlighting on certain blocks

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

[Docs] fix doc linting errors
  • Loading branch information
blainekasten committed Mar 2, 2018
1 parent 3211a0e commit c9761f9
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 8 deletions.
64 changes: 64 additions & 0 deletions packages/enzyme-test-suite/test/Debug-spec.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>`
));
});
Expand Down Expand Up @@ -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>`
));
});
});
});
12 changes: 8 additions & 4 deletions packages/enzyme/src/Debug.js
Original file line number Diff line number Diff line change
Expand Up @@ -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' });
}
Expand All @@ -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) {
Expand All @@ -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
? '>'
Expand Down
5 changes: 3 additions & 2 deletions packages/enzyme/src/ReactWrapper.js
Original file line number Diff line number Diff line change
Expand Up @@ -989,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 = {}) {
Expand Down
5 changes: 3 additions & 2 deletions packages/enzyme/src/ShallowWrapper.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {}) {
Expand Down

0 comments on commit c9761f9

Please sign in to comment.