fix: normalize expected value in toContainHTML

resolves #347
testing-library · Mar 19, 2021 · a6a7a6f · a6a7a6f
1 parent 84fe8e0
commit a6a7a6f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 18 deletions.
diff --git a/src/__tests__/to-contain-html.js b/src/__tests__/to-contain-html.js
@@ -18,21 +18,18 @@ describe('.toContainHTML', () => {
     const nonExistantElement = queryByTestId('not-exists')
     const fakeElement = {thisIsNot: 'an html element'}
     const stringChildElement = '<span data-testid="child"></span>'
-    const incorrectStringHtml = '<span data-testid="child"></div>'
+    const stringChildElementSelfClosing = '<span data-testid="child" />'
     const nonExistantString = '<span> Does not exists </span>'
     const svgElement = queryByTestId('svg-element')
 
     expect(grandparent).toContainHTML(stringChildElement)
     expect(parent).toContainHTML(stringChildElement)
     expect(child).toContainHTML(stringChildElement)
+    expect(child).toContainHTML(stringChildElementSelfClosing)
     expect(grandparent).not.toContainHTML(nonExistantString)
     expect(parent).not.toContainHTML(nonExistantString)
     expect(child).not.toContainHTML(nonExistantString)
     expect(child).not.toContainHTML(nonExistantString)
-    expect(grandparent).not.toContainHTML(incorrectStringHtml)
-    expect(parent).not.toContainHTML(incorrectStringHtml)
-    expect(child).not.toContainHTML(incorrectStringHtml)
-    expect(child).not.toContainHTML(incorrectStringHtml)
 
     // negative test cases wrapped in throwError assertions for coverage.
     expect(() =>
@@ -59,6 +56,9 @@ describe('.toContainHTML', () => {
     expect(() =>
       expect(child).not.toContainHTML(stringChildElement),
     ).toThrowError()
+    expect(() =>
+      expect(child).not.toContainHTML(stringChildElementSelfClosing),
+    ).toThrowError()
     expect(() => expect(child).toContainHTML(nonExistantString)).toThrowError()
     expect(() => expect(parent).toContainHTML(nonExistantString)).toThrowError()
     expect(() =>
@@ -71,18 +71,6 @@ describe('.toContainHTML', () => {
     expect(() =>
       expect(grandparent).toContainHTML(nonExistantElement),
     ).toThrowError()
-    expect(() =>
-      expect(nonExistantElement).toContainHTML(incorrectStringHtml),
-    ).toThrowError()
-    expect(() =>
-      expect(grandparent).toContainHTML(incorrectStringHtml),
-    ).toThrowError()
-    expect(() =>
-      expect(child).toContainHTML(incorrectStringHtml),
-    ).toThrowError()
-    expect(() =>
-      expect(parent).toContainHTML(incorrectStringHtml),
-    ).toThrowError()
   })
 
   test('throws with an expected text', () => {

diff --git a/src/to-contain-html.js b/src/to-contain-html.js
@@ -1,10 +1,20 @@
 import {checkHtmlElement} from './utils'
 
+function getNormalizedHtml(container, htmlText) {
+  const div = container.ownerDocument.createElement('div')
+  div.innerHTML = htmlText
+  return div.innerHTML
+}
+
 export function toContainHTML(container, htmlText) {
   checkHtmlElement(container, toContainHTML, this)
 
+  if (typeof htmlText !== 'string') {
+    throw new Error(`.toContainHTML() expects a string value, got ${htmlText}`)
+  }
+
   return {
-    pass: container.outerHTML.includes(htmlText),
+    pass: container.outerHTML.includes(getNormalizedHtml(container, htmlText)),
     message: () => {
       return [
         this.utils.matcherHint(