Merge branch 'master' into only-contains-comments

testing-library · Jan 12, 2021 · 559bc43 · 559bc43
2 parents f352858 + f930668
commit 559bc43
Show file tree

Hide file tree

Showing 6 changed files with 216 additions and 136 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -562,6 +562,26 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "nickmccurdy",
+      "name": "Nick McCurdy",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/927220?v=4",
+      "profile": "https://nickmccurdy.com/",
+      "contributions": [
+        "doc",
+        "bug",
+        "code"
+      ]
+    },
+    {
+      "login": "obedparla",
+      "name": "Obed Marquez Parlapiano",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/10674462?v=4",
+      "profile": "https://obedparla.com/",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "repoHost": "https://github.com",

diff --git a/README.md b/README.md
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/__tests__/to-have-display-value.js b/src/__tests__/to-have-display-value.js
@@ -11,6 +11,7 @@ test('it should work as expected', () => {
   `)
 
   expect(queryByTestId('select')).toHaveDisplayValue('Select a fruit...')
+  expect(queryByTestId('select')).not.toHaveDisplayValue('Select')
   expect(queryByTestId('select')).not.toHaveDisplayValue('Banana')
   expect(() =>
     expect(queryByTestId('select')).not.toHaveDisplayValue('Select a fruit...'),
@@ -151,3 +152,13 @@ test('it should throw if element is not valid', () => {
     `".toHaveDisplayValue() currently does not support input[type=\\"checkbox\\"], try with another matcher instead."`,
   )
 })
+
+test('it should work with numbers', () => {
+  const {queryByTestId} = render(`
+    <select data-testid="select">
+      <option value="">1</option>
+    </select>
+  `)
+
+  expect(queryByTestId('select')).toHaveDisplayValue(1)
+})
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')

diff --git a/src/to-have-display-value.js b/src/to-have-display-value.js
@@ -1,4 +1,4 @@
-import {matches, checkHtmlElement, getMessage} from './utils'
+import {checkHtmlElement, getMessage} from './utils'
 
 export function toHaveDisplayValue(htmlElement, expectedValue) {
   checkHtmlElement(htmlElement, toHaveDisplayValue, this)
@@ -18,10 +18,13 @@ export function toHaveDisplayValue(htmlElement, expectedValue) {
 
   const values = getValues(tagName, htmlElement)
   const expectedValues = getExpectedValues(expectedValue)
-  const numberOfMatchesWithValues = getNumberOfMatchesBetweenArrays(
-    values,
-    expectedValues,
-  )
+  const numberOfMatchesWithValues = expectedValues.filter(expected =>
+    values.some(value =>
+      expected instanceof RegExp
+        ? expected.test(value)
+        : this.equals(value, String(expected)),
+    ),
+  ).length
 
   const matchedWithAllValues = numberOfMatchesWithValues === values.length
   const matchedWithAllExpectedValues =
@@ -56,9 +59,3 @@ function getValues(tagName, htmlElement) {
 function getExpectedValues(expectedValue) {
   return expectedValue instanceof Array ? expectedValue : [expectedValue]
 }
-
-function getNumberOfMatchesBetweenArrays(arrayBase, array) {
-  return array.filter(
-    expected => arrayBase.filter(value => matches(value, expected)).length,
-  ).length
-}