From 69dc00efe4222613f59555e6c25317efe30bb272 Mon Sep 17 00:00:00 2001
From: Mark Pedrotti <pedrottimark@gmail.com>
Date: Mon, 12 Jun 2017 11:30:45 -0400
Subject: [PATCH] Escape double quotes in attribute values in HTMLElement
 plugin

---
 .../pretty-format/src/__tests__/HTMLElement-test.js  |  7 +++++++
 packages/pretty-format/src/plugins/HTMLElement.js    | 12 +++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/pretty-format/src/__tests__/HTMLElement-test.js b/packages/pretty-format/src/__tests__/HTMLElement-test.js
index 359b63fe9b34..22c6873fe8ab 100644
--- a/packages/pretty-format/src/__tests__/HTMLElement-test.js
+++ b/packages/pretty-format/src/__tests__/HTMLElement-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/HTMLElement.js b/packages/pretty-format/src/plugins/HTMLElement.js
index a30fb88f4c35..ec62ef2d743a 100644
--- a/packages/pretty-format/src/plugins/HTMLElement.js
+++ b/packages/pretty-format/src/plugins/HTMLElement.js
@@ -61,7 +61,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()
     .map(attribute => {
@@ -69,7 +75,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
       );
     })
@@ -106,7 +112,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);