From fa169577c176ed88380e9535e3c4824363eea3df Mon Sep 17 00:00:00 2001
From: Simen Bekkhus <sbekkhus91@gmail.com>
Date: Tue, 17 Jul 2018 15:31:39 +0200
Subject: [PATCH 1/2] support serializing `DocumentFragment`

---
 CHANGELOG.md                                  |  4 ++
 .../src/__tests__/dom_element.test.js         | 39 +++++++++++++++++++
 .../pretty-format/src/plugins/dom_element.js  | 25 +++++++++---
 3 files changed, 62 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2d46d0420fdc..6dbcb873e6bf 100644
--- 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
index 2e863e0fd715..cdd7c3b0cb94 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(
+      [
+        '<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
index 8f2de09642ac..26f0801f6924 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<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,7 +84,14 @@ 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);
   }
@@ -86,8 +99,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 +108,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,

From 592e40269186d73a52930dd370a1c66186d77f88 Mon Sep 17 00:00:00 2001
From: Simen Bekkhus <sbekkhus91@gmail.com>
Date: Tue, 17 Jul 2018 23:30:40 +0200
Subject: [PATCH 2/2] rename to DocumentFragment

---
 .../pretty-format/src/__tests__/dom_element.test.js   |  4 ++--
 packages/pretty-format/src/plugins/dom_element.js     | 11 ++++-------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/pretty-format/src/__tests__/dom_element.test.js b/packages/pretty-format/src/__tests__/dom_element.test.js
index cdd7c3b0cb94..9b06b105766c 100644
--- a/packages/pretty-format/src/__tests__/dom_element.test.js
+++ b/packages/pretty-format/src/__tests__/dom_element.test.js
@@ -326,7 +326,7 @@ Testing.`;
 
     expect(fragment).toPrettyPrintTo(
       [
-        '<Fragment>',
+        '<DocumentFragment>',
         '  <li>',
         '    Firefox',
         '  </li>',
@@ -342,7 +342,7 @@ Testing.`;
         '  <li>',
         '    Internet Explorer',
         '  </li>',
-        '</Fragment>',
+        '</DocumentFragment>',
       ].join('\n'),
     );
   });
diff --git a/packages/pretty-format/src/plugins/dom_element.js b/packages/pretty-format/src/plugins/dom_element.js
index 26f0801f6924..b09cbeb1d409 100644
--- a/packages/pretty-format/src/plugins/dom_element.js
+++ b/packages/pretty-format/src/plugins/dom_element.js
@@ -84,13 +84,10 @@ export const serialize = (
     return printComment(node.data, config);
   }
 
-  let type;
-
-  if (node.nodeType === FRAGMENT_NODE) {
-    type = `Fragment`;
-  } else {
-    type = node.tagName.toLowerCase();
-  }
+  const type =
+    node.nodeType === FRAGMENT_NODE
+      ? `DocumentFragment`
+      : node.tagName.toLowerCase();
 
   if (++depth > config.maxDepth) {
     return printElementAsLeaf(type, config);