Support text and comment nodes in html pretty printing (jestjs#3355)

* Make sure pretty-format expect util has correct context * Support comment nodes in html pretty printing * Support text nodes in html pretty printing * Add comment key to pretty-format theme * Add type to element in html pretty printer * Remove unused arg from html pretty printer * Cleanup
tushardhole · Apr 28, 2017 · cc92f5e · cc92f5e
1 parent 345f0ed
commit cc92f5e
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 50 deletions.
diff --git a/packages/pretty-format/src/__tests__/HTMLElementPlugin-test.js b/packages/pretty-format/src/__tests__/HTMLElementPlugin-test.js
@@ -4,10 +4,9 @@
  * 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 */
 /* eslint-env browser*/
 
 'use strict';
@@ -50,10 +49,7 @@ describe('HTMLElement Plugin', () => {
     parent.setAttribute('id', 123);
     parent.setAttribute('class', 'classy');
 
-    expect(parent).toPrettyPrintTo(
-      '<div\n  id="123"\n  class="classy"\n/>',
-      {},
-    );
+    expect(parent).toPrettyPrintTo('<div\n  id="123"\n  class="classy"\n/>');
   });
 
   it('supports an element with text content', () => {
@@ -93,4 +89,50 @@ 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 node', () => {
+    const parent = document.createElement('div');
+    parent.innerHTML = 'some <span>text</span>';
+
+    // prettier-ignore
+    expect(parent).toPrettyPrintTo([
+      '<div>',
+      '  some ',
+      '  <span>',
+      '    text',
+      '  </span>',
+      '</div>',
+    ].join('\n'));
+  });
+
+  it('supports comment node', () => {
+    const parent = document.createElement('div');
+    parent.innerHTML = 'some <!-- comments -->';
+
+    // prettier-ignore
+    expect(parent).toPrettyPrintTo([
+      '<div>',
+      '  some ',
+      '  <!-- comments -->',
+      '</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/index.js b/packages/pretty-format/src/index.js
@@ -22,6 +22,7 @@ import type {
 const style = require('ansi-styles');
 
 type Theme = {|
+  comment?: string,
   content?: string,
   prop?: string,
   tag?: string,
@@ -799,6 +800,7 @@ const DEFAULTS: Options = {
   printFunctionName: true,
   spacing: '\n',
   theme: {
+    comment: 'gray',
     content: 'reset',
     prop: 'yellow',
     tag: 'cyan',
@@ -873,7 +875,13 @@ function prettyFormat(val: any, initialOptions?: InitialOptions): string {
     opts = normalizeOptions(initialOptions);
   }
 
-  const colors: Colors = {};
+  const colors: Colors = {
+    comment: {close: '', open: ''},
+    content: {close: '', open: ''},
+    prop: {close: '', open: ''},
+    tag: {close: '', open: ''},
+    value: {close: '', open: ''},
+  };
   Object.keys(opts.theme).forEach(key => {
     if (opts.highlight) {
       const color = (colors[key] = style[opts.theme[key]]);
@@ -886,8 +894,6 @@ function prettyFormat(val: any, initialOptions?: InitialOptions): string {
           `pretty-format: Option "theme" has a key "${key}" whose value "${opts.theme[key]}" is undefined in ansi-styles.`,
         );
       }
-    } else {
-      colors[key] = {close: '', open: ''};
     }
   });
 

diff --git a/packages/pretty-format/src/plugins/HTMLElement.js b/packages/pretty-format/src/plugins/HTMLElement.js
@@ -13,14 +13,36 @@
 import type {Colors, Indent, Options, Print, Plugin} from 'types/PrettyFormat';
 
 const escapeHTML = require('./lib/escapeHTML');
-const HTML_ELEMENT_REGEXP = /(HTML\w*?Element)/;
+
+type Attribute = {
+  name: string,
+  value: string,
+};
+
+type HTMLElement = {
+  attributes: Array<Attribute>,
+  childNodes: Array<HTMLElement | HTMLText | HTMLComment>,
+  nodeType: 1,
+  tagName: string,
+};
+type HTMLText = {
+  data: string,
+  nodeType: 3,
+};
+
+type HTMLComment = {
+  data: string,
+  nodeType: 8,
+};
+
+const HTML_ELEMENT_REGEXP = /(HTML\w*?Element)|Text|Comment/;
 const test = isHTMLElement;
 
 function isHTMLElement(value: any) {
   return (
     value !== undefined &&
     value !== null &&
-    value.nodeType === 1 &&
+    (value.nodeType === 1 || value.nodeType === 3 || value.nodeType === 8) &&
     value.constructor !== undefined &&
     value.constructor.name !== undefined &&
     HTML_ELEMENT_REGEXP.test(value.constructor.name)
@@ -41,7 +63,7 @@ function printChildren(flatChildren, print, indent, colors, opts) {
     .join(opts.edgeSpacing);
 }
 
-function printAttributes(attributes, print, indent, colors, opts) {
+function printAttributes(attributes: Array<Attribute>, indent, colors, opts) {
   return attributes
     .sort()
     .map(attribute => {
@@ -57,23 +79,31 @@ function printAttributes(attributes, print, indent, colors, opts) {
 }
 
 const print = (
-  element: any,
+  element: HTMLElement | HTMLText | HTMLComment,
   print: Print,
   indent: Indent,
   opts: Options,
   colors: Colors,
-) => {
+): string => {
+  if (element.nodeType === 3) {
+    return element.data;
+  } else if (element.nodeType === 8) {
+    return (
+      colors.comment.open + '<!--' + element.data + '-->' + colors.comment.close
+    );
+  }
+
   let result = colors.tag.open + '<';
   const 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);
+    result += printAttributes(attributes, 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);
   }

diff --git a/types/PrettyFormat.js b/types/PrettyFormat.js
@@ -9,7 +9,13 @@
  */
 'use strict';
 
-export type Colors = Object;
+export type Colors = {
+  comment: {close: string, open: string},
+  content: {close: string, open: string},
+  prop: {close: string, open: string},
+  tag: {close: string, open: string},
+  value: {close: string, open: string},
+};
 export type Indent = string => string;
 export type Refs = Array<any>;
 export type Print = any => string;
@@ -27,6 +33,7 @@ export type Options = {|
   printFunctionName: boolean,
   spacing: string,
   theme: {|
+    comment: string,
     content: string,
     prop: string,
     tag: string,