Support text nodes in html pretty printing

jestjs · Apr 23, 2017 · 28228f6 · 28228f6
1 parent a9288e4
commit 28228f6
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 53 deletions.
diff --git a/packages/pretty-format/src/__tests__/HTMLElementPlugin-test.js b/packages/pretty-format/src/__tests__/HTMLElementPlugin-test.js
@@ -4,7 +4,7 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
- * 
+ *
  * @jest-environment jsdom
  */
 /* eslint-disable max-len */
@@ -93,4 +93,34 @@ describe('HTMLElement Plugin', () => {
       '<div>\n  <span>\n    texty texty\n  </span>\n</div>',
     );
   });
+
+  it('supports siblings', () => {
+    const parent = document.createElement('div');
+    parent.innerHTML = '<span>some </span><span>text</span>';
+
+    expect(parent).toPrettyPrintTo([
+      '<div>',
+      '  <span>',
+      '    some ',
+      '  </span>',
+      '  <span>',
+      '    text',
+      '  </span>',
+      '</div>',
+    ].join('\n'));
+  });
+
+  it('supports text siblings', () => {
+    const parent = document.createElement('div');
+    parent.innerHTML = 'some <span>text</span>';
+
+    expect(parent).toPrettyPrintTo([
+      '<div>',
+      '  some ',
+      '  <span>',
+      '    text',
+      '  </span>',
+      '</div>',
+    ].join('\n'));
+  });
 });
diff --git a/packages/pretty-format/src/__tests__/expect-util.js b/packages/pretty-format/src/__tests__/expect-util.js
@@ -4,7 +4,7 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
- * 
+ *
  */
 
 'use strict';
@@ -13,41 +13,42 @@ const diff = require('jest-diff');
 const prettyFormat = require('../');
 
 module.exports = {
-  getPrettyPrint: plugins => (received, expected, opts) => {
-    const prettyFormatted = prettyFormat(
-      received,
-      Object.assign(
-        {
-          plugins,
-        },
-        opts,
-      ),
-    );
-    const pass = prettyFormatted === expected;
+  getPrettyPrint: plugins =>
+    function(received, expected, opts) {
+      const prettyFormatted = prettyFormat(
+        received,
+        Object.assign(
+          {
+            plugins,
+          },
+          opts,
+        ),
+      );
+      const pass = prettyFormatted === expected;
 
-    const message = pass
-      ? () =>
-          this.utils.matcherHint('.not.toBe') +
-          '\n\n' +
-          `Expected value to not be:\n` +
-          `  ${this.utils.printExpected(expected)}\n` +
-          `Received:\n` +
-          `  ${this.utils.printReceived(prettyFormatted)}`
-      : () => {
-          const diffString = diff(expected, prettyFormatted, {
-            expand: this.expand,
-          });
-          return (
-            this.utils.matcherHint('.toBe') +
+      const message = pass
+        ? () =>
+            this.utils.matcherHint('.not.toBe') +
             '\n\n' +
-            `Expected value to be:\n` +
+            `Expected value to not be:\n` +
             `  ${this.utils.printExpected(expected)}\n` +
             `Received:\n` +
-            `  ${this.utils.printReceived(prettyFormatted)}` +
-            (diffString ? `\n\nDifference:\n\n${diffString}` : '')
-          );
-        };
+            `  ${this.utils.printReceived(prettyFormatted)}`
+        : () => {
+            const diffString = diff(expected, prettyFormatted, {
+              expand: this.expand,
+            });
+            return (
+              this.utils.matcherHint('.toBe') +
+              '\n\n' +
+              `Expected value to be:\n` +
+              `  ${this.utils.printExpected(expected)}\n` +
+              `Received:\n` +
+              `  ${this.utils.printReceived(prettyFormatted)}` +
+              (diffString ? `\n\nDifference:\n\n${diffString}` : '')
+            );
+          };
 
-    return {actual: prettyFormatted, message, pass};
-  },
+      return {actual: prettyFormatted, message, pass};
+    },
 };
diff --git a/packages/pretty-format/src/plugins/HTMLElement.js b/packages/pretty-format/src/plugins/HTMLElement.js
@@ -13,14 +13,14 @@
 import type {Colors, Indent, Options, Print, Plugin} from '../types.js';
 
 const escapeHTML = require('./lib/escapeHTML');
-const HTML_ELEMENT_REGEXP = /(HTML\w*?Element)/;
+const HTML_ELEMENT_REGEXP = /(HTML\w*?Element)|Text/;
 const test = isHTMLElement;
 
 function isHTMLElement(value: any) {
   return (
     value !== undefined &&
     value !== null &&
-    value.nodeType === 1 &&
+    (value.nodeType === 1 || value.nodeType === 3) &&
     value.constructor !== undefined &&
     value.constructor.name !== undefined &&
     HTML_ELEMENT_REGEXP.test(value.constructor.name)
@@ -63,37 +63,46 @@ const print = (
   opts: Options,
   colors: Colors,
 ) => {
-  let result = colors.tag.open + '<';
-  const elementName = element.tagName.toLowerCase();
-  result += elementName + colors.tag.close;
+  let result = '';
+  let elementName = '';
+  const isText = element.nodeType === 3;
+  if (!isText) {
+    result = colors.tag.open + '<';
+    elementName = element.tagName.toLowerCase();
+    result += elementName + colors.tag.close;
+  }
 
   const hasAttributes = element.attributes && element.attributes.length;
   if (hasAttributes) {
     const attributes = Array.prototype.slice.call(element.attributes);
     result += printAttributes(attributes, print, indent, colors, opts);
   }
 
-  const flatChildren = Array.prototype.slice.call(element.children);
+  const flatChildren = Array.prototype.slice.call(element.childNodes);
   if (!flatChildren.length && element.textContent) {
     flatChildren.push(element.textContent);
   }
 
   const closeInNewLine = hasAttributes && !opts.min;
   if (flatChildren.length) {
     const children = printChildren(flatChildren, print, indent, colors, opts);
-    result +=
-      colors.tag.open +
-      (closeInNewLine ? '\n' : '') +
-      '>' +
-      colors.tag.close +
-      opts.edgeSpacing +
-      indent(children) +
-      opts.edgeSpacing +
-      colors.tag.open +
-      '</' +
-      elementName +
-      '>' +
-      colors.tag.close;
+    if (isText) {
+      result += children;
+    } else {
+      result +=
+        colors.tag.open +
+        (closeInNewLine ? '\n' : '') +
+        '>' +
+        colors.tag.close +
+        opts.edgeSpacing +
+        indent(children) +
+        opts.edgeSpacing +
+        colors.tag.open +
+        '</' +
+        elementName +
+        '>' +
+        colors.tag.close;
+      }
   } else {
     result +=
       colors.tag.open + (closeInNewLine ? '\n' : ' ') + '/>' + colors.tag.close;