fix: Adds expected text for toContainHTML checks that fail (#299) (#318)

Co-authored-by: Ernesto García <[email protected]>
testing-library · Dec 30, 2020 · 0bd1ed9 · 0bd1ed9
1 parent 4179117
commit 0bd1ed9
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 66 deletions.
diff --git a/src/__tests__/to-contain-html.js b/src/__tests__/to-contain-html.js
@@ -1,8 +1,9 @@
 import {render} from './helpers/test-utils'
 
 /* eslint-disable max-statements */
-test('.toContainHTML', () => {
-  const {queryByTestId} = render(`
+describe('.toContainHTML', () => {
+  test('handles positive and negative cases', () => {
+    const {queryByTestId} = render(`
     <span data-testid="grandparent">
       <span data-testid="parent">
         <span data-testid="child"></span>
@@ -11,69 +12,97 @@ test('.toContainHTML', () => {
     </span>
     `)
 
-  const grandparent = queryByTestId('grandparent')
-  const parent = queryByTestId('parent')
-  const child = queryByTestId('child')
-  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 nonExistantString = '<span> Does not exists </span>'
-  const svgElement = queryByTestId('svg-element')
+    const grandparent = queryByTestId('grandparent')
+    const parent = queryByTestId('parent')
+    const child = queryByTestId('child')
+    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 nonExistantString = '<span> Does not exists </span>'
+    const svgElement = queryByTestId('svg-element')
 
-  expect(grandparent).toContainHTML(stringChildElement)
-  expect(parent).toContainHTML(stringChildElement)
-  expect(child).toContainHTML(stringChildElement)
-  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)
+    expect(grandparent).toContainHTML(stringChildElement)
+    expect(parent).toContainHTML(stringChildElement)
+    expect(child).toContainHTML(stringChildElement)
+    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(() =>
-    expect(nonExistantElement).not.toContainHTML(stringChildElement),
-  ).toThrowError()
-  expect(() =>
-    expect(nonExistantElement).not.toContainHTML(nonExistantElement),
-  ).toThrowError()
-  expect(() =>
-    expect(stringChildElement).not.toContainHTML(fakeElement),
-  ).toThrowError()
-  expect(() =>
-    expect(svgElement).toContainHTML(stringChildElement),
-  ).toThrowError()
-  expect(() =>
-    expect(grandparent).not.toContainHTML(stringChildElement),
-  ).toThrowError()
-  expect(() =>
-    expect(parent).not.toContainHTML(stringChildElement),
-  ).toThrowError()
-  expect(() =>
-    expect(child).not.toContainHTML(stringChildElement),
-  ).toThrowError()
-  expect(() =>
-    expect(child).not.toContainHTML(stringChildElement),
-  ).toThrowError()
-  expect(() => expect(child).toContainHTML(nonExistantString)).toThrowError()
-  expect(() => expect(parent).toContainHTML(nonExistantString)).toThrowError()
-  expect(() =>
-    expect(grandparent).toContainHTML(nonExistantString),
-  ).toThrowError()
-  expect(() => expect(child).toContainHTML(nonExistantElement)).toThrowError()
-  expect(() => expect(parent).toContainHTML(nonExistantElement)).toThrowError()
-  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()
+    // negative test cases wrapped in throwError assertions for coverage.
+    expect(() =>
+      expect(nonExistantElement).not.toContainHTML(stringChildElement),
+    ).toThrowError()
+    expect(() =>
+      expect(nonExistantElement).not.toContainHTML(nonExistantElement),
+    ).toThrowError()
+    expect(() =>
+      expect(stringChildElement).not.toContainHTML(fakeElement),
+    ).toThrowError()
+    expect(() =>
+      expect(svgElement).toContainHTML(stringChildElement),
+    ).toThrowError()
+    expect(() =>
+      expect(grandparent).not.toContainHTML(stringChildElement),
+    ).toThrowError()
+    expect(() =>
+      expect(parent).not.toContainHTML(stringChildElement),
+    ).toThrowError()
+    expect(() =>
+      expect(child).not.toContainHTML(stringChildElement),
+    ).toThrowError()
+    expect(() =>
+      expect(child).not.toContainHTML(stringChildElement),
+    ).toThrowError()
+    expect(() => expect(child).toContainHTML(nonExistantString)).toThrowError()
+    expect(() => expect(parent).toContainHTML(nonExistantString)).toThrowError()
+    expect(() =>
+      expect(grandparent).toContainHTML(nonExistantString),
+    ).toThrowError()
+    expect(() => expect(child).toContainHTML(nonExistantElement)).toThrowError()
+    expect(() =>
+      expect(parent).toContainHTML(nonExistantElement),
+    ).toThrowError()
+    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', () => {
+    const {queryByTestId} = render('<span data-testid="child"></span>')
+    const htmlElement = queryByTestId('child')
+    const nonExistantString = '<div> non-existant element </div>'
+
+    let errorMessage
+    try {
+      expect(htmlElement).toContainHTML(nonExistantString)
+    } catch (error) {
+      errorMessage = error.message
+    }
+
+    expect(errorMessage).toMatchInlineSnapshot(`
+      "<dim>expect(</><red>element</><dim>).toContainHTML()</>
+      Expected:
+        <green><div> non-existant element </div></>
+      Received:
+        <red><span data-testid=\\"child\\" /></>"
+    `)
+  })
 })
diff --git a/src/to-contain-html.js b/src/to-contain-html.js
@@ -12,7 +12,9 @@ export function toContainHTML(container, htmlText) {
           'element',
           '',
         ),
-        '',
+        'Expected:',
+        // eslint-disable-next-line babel/new-cap
+        `  ${this.utils.EXPECTED_COLOR(htmlText)}`,
         'Received:',
         `  ${this.utils.printReceived(container.cloneNode(true))}`,
       ].join('\n')