diff --git a/CHANGELOG.md b/CHANGELOG.md index aa2b96e0404e..960996411d70 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - `[jest-runner]` print stack trace when `process.exit` is called from user code ([#6714](https://github.com/facebook/jest/pull/6714)) - `[jest-each]` introduces `%#` option to add index of the test to its title ([#6414](https://github.com/facebook/jest/pull/6414)) +- `[pretty-format]` Support serializing `DocumentFragment` ([#6705](https://github.com/facebook/jest/pull/6705)) ### Fixes diff --git a/packages/pretty-format/src/__tests__/dom_element.test.js b/packages/pretty-format/src/__tests__/dom_element.test.js index 2e863e0fd715..9b06b105766c 100644 --- a/packages/pretty-format/src/__tests__/dom_element.test.js +++ b/packages/pretty-format/src/__tests__/dom_element.test.js @@ -308,6 +308,45 @@ Testing.`; ); }); + it('supports fragment node', () => { + const fragment = document.createDocumentFragment(); + const browsers = [ + 'Firefox', + 'Chrome', + 'Opera', + 'Safari', + 'Internet Explorer', + ]; + + browsers.forEach(browser => { + const li = document.createElement('li'); + li.textContent = browser; + fragment.appendChild(li); + }); + + expect(fragment).toPrettyPrintTo( + [ + '', + '
  • ', + ' Firefox', + '
  • ', + '
  • ', + ' Chrome', + '
  • ', + '
  • ', + ' Opera', + '
  • ', + '
  • ', + ' Safari', + '
  • ', + '
  • ', + ' Internet Explorer', + '
  • ', + '
    ', + ].join('\n'), + ); + }); + describe('matches constructor name of SVG elements', () => { // Too bad, so sad, element.constructor.name of SVG elements // is HTMLUnknownElement in jsdom v9 and v10 diff --git a/packages/pretty-format/src/plugins/dom_element.js b/packages/pretty-format/src/plugins/dom_element.js index 8f2de09642ac..b09cbeb1d409 100644 --- a/packages/pretty-format/src/plugins/dom_element.js +++ b/packages/pretty-format/src/plugins/dom_element.js @@ -37,17 +37,23 @@ type Comment = { data: string, nodeType: 8, }; +type DocumentFragment = { + children: Array, + nodeType: 11, +}; const ELEMENT_NODE = 1; const TEXT_NODE = 3; const COMMENT_NODE = 8; +const FRAGMENT_NODE = 11; const ELEMENT_REGEXP = /^((HTML|SVG)\w*)?Element$/; const testNode = (nodeType: any, name: any) => (nodeType === ELEMENT_NODE && ELEMENT_REGEXP.test(name)) || (nodeType === TEXT_NODE && name === 'Text') || - (nodeType === COMMENT_NODE && name === 'Comment'); + (nodeType === COMMENT_NODE && name === 'Comment') || + (nodeType === FRAGMENT_NODE && name === 'DocumentFragment'); export const test = (val: any) => val && @@ -63,7 +69,7 @@ const propsReducer = (props, attribute) => { }; export const serialize = ( - node: Element | Text | Comment, + node: Element | Text | Comment | DocumentFragment, config: Config, indentation: string, depth: number, @@ -78,7 +84,11 @@ export const serialize = ( return printComment(node.data, config); } - const type = node.tagName.toLowerCase(); + const type = + node.nodeType === FRAGMENT_NODE + ? `DocumentFragment` + : node.tagName.toLowerCase(); + if (++depth > config.maxDepth) { return printElementAsLeaf(type, config); } @@ -86,8 +96,8 @@ export const serialize = ( return printElement( type, printProps( - Array.prototype.map.call(node.attributes, keysMapper).sort(), - Array.prototype.reduce.call(node.attributes, propsReducer, {}), + Array.prototype.map.call(node.attributes || [], keysMapper).sort(), + Array.prototype.reduce.call(node.attributes || [], propsReducer, {}), config, indentation + config.indent, depth, @@ -95,7 +105,7 @@ export const serialize = ( printer, ), printChildren( - Array.prototype.slice.call(node.childNodes), + Array.prototype.slice.call(node.childNodes || node.children), config, indentation + config.indent, depth,