Escape double quotes in attribute values in HTMLElement plugin (jestj…

…s#3797)
tushardhole · Jun 27, 2017 · aa48deb · aa48deb
1 parent dbf301e
commit aa48deb
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/packages/pretty-format/src/__tests__/html_element.test.js b/packages/pretty-format/src/__tests__/html_element.test.js
@@ -37,6 +37,13 @@ describe('HTMLElement Plugin', () => {
     expect(parent).toPrettyPrintTo('<div\n  title="title text"\n/>');
   });
 
+  test('escapes double quote in attribute value', () => {
+    const parent = document.createElement('div');
+    parent.setAttribute('title', '"escape"');
+
+    expect(parent).toPrettyPrintTo('<div\n  title="\\"escape\\""\n/>');
+  });
+
   it('supports an HTML element with a single attribute', () => {
     const parent = document.createElement('div');
     parent.setAttribute('class', 'classy');

diff --git a/packages/pretty-format/src/plugins/html_element.js b/packages/pretty-format/src/plugins/html_element.js
@@ -67,7 +67,13 @@ function printChildren(flatChildren, print, indent, colors, opts) {
     .join(opts.edgeSpacing);
 }
 
-function printAttributes(attributes: Array<Attribute>, indent, colors, opts) {
+function printAttributes(
+  attributes: Array<Attribute>,
+  print,
+  indent,
+  colors,
+  opts,
+) {
   return attributes
     .sort(
       (attributeA, attributeB) =>
@@ -80,7 +86,7 @@ function printAttributes(attributes: Array<Attribute>, indent, colors, opts) {
         opts.spacing +
         indent(colors.prop.open + attribute.name + colors.prop.close + '=') +
         colors.value.open +
-        `"${attribute.value}"` +
+        print(attribute.value) +
         colors.value.close
       );
     })
@@ -117,7 +123,7 @@ const print = (
   const hasAttributes = element.attributes && element.attributes.length;
   if (hasAttributes) {
     const attributes = Array.prototype.slice.call(element.attributes);
-    result += printAttributes(attributes, indent, colors, opts);
+    result += printAttributes(attributes, print, indent, colors, opts);
   }
 
   const flatChildren = Array.prototype.slice.call(element.childNodes);