diff --git a/packages/pretty-format/src/__tests__/html_element.test.js b/packages/pretty-format/src/__tests__/html_element.test.js index f03c44eaa95d..099423d2a658 100644 --- 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(''); }); + test('escapes double quote in attribute value', () => { + const parent = document.createElement('div'); + parent.setAttribute('title', '"escape"'); + + expect(parent).toPrettyPrintTo(''); + }); + 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 index d840effdc668..2f092fa58ded 100644 --- a/packages/pretty-format/src/plugins/html_element.js +++ b/packages/pretty-format/src/plugins/html_element.js @@ -61,7 +61,13 @@ function printChildren(flatChildren, print, indent, colors, opts) { .join(opts.edgeSpacing); } -function printAttributes(attributes: Array, indent, colors, opts) { +function printAttributes( + attributes: Array, + print, + indent, + colors, + opts, +) { return attributes .sort() .map(attribute => { @@ -69,7 +75,7 @@ function printAttributes(attributes: Array, 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);