support serializing DocumentFragment

jestjs · Jul 17, 2018 · fa16957 · fa16957
1 parent ee0f92e
commit fa16957
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 ## master
 
+### Features
+
+- `[pretty-format]` Support serializing `DocumentFragment` ([#6705](https://github.com/facebook/jest/pull/6705))
+
 ### Fixes
 
 - `[babel-jest]` Make `getCacheKey()` take into account `createTransformer` options ([#6699](https://github.com/facebook/jest/pull/6699))

diff --git 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(
+      [
+        '<Fragment>',
+        '  <li>',
+        '    Firefox',
+        '  </li>',
+        '  <li>',
+        '    Chrome',
+        '  </li>',
+        '  <li>',
+        '    Opera',
+        '  </li>',
+        '  <li>',
+        '    Safari',
+        '  </li>',
+        '  <li>',
+        '    Internet Explorer',
+        '  </li>',
+        '</Fragment>',
+      ].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
@@ -37,17 +37,23 @@ type Comment = {
   data: string,
   nodeType: 8,
 };
+type DocumentFragment = {
+  children: Array<Element>,
+  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,24 +84,31 @@ export const serialize = (
     return printComment(node.data, config);
   }
 
-  const type = node.tagName.toLowerCase();
+  let type;
+
+  if (node.nodeType === FRAGMENT_NODE) {
+    type = `Fragment`;
+  } else {
+    type = node.tagName.toLowerCase();
+  }
+
   if (++depth > config.maxDepth) {
     return printElementAsLeaf(type, config);
   }
 
   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,
       refs,
       printer,
     ),
     printChildren(
-      Array.prototype.slice.call(node.childNodes),
+      Array.prototype.slice.call(node.childNodes || node.children),
       config,
       indentation + config.indent,
       depth,