feat: #9: Normalized whitespace using dom-testing-library (#56)

BREAKING CHANGE: normalizing whitespace is now the default, though users can opt out of it.

Author: smacpherson64

README.md

@@ -535,7 +535,7 @@ The usual rules of css precedence apply.
 ### `toHaveTextContent`
 
 ```typescript
-toHaveTextContent(text: string | RegExp)
+toHaveTextContent(text: string | RegExp, options?: {normalizeWhitespace: boolean})
 ```
 
 This API allows you to check whether the given element has a text content or not.

extend-expect.d.ts

@@ -13,7 +13,10 @@ declare namespace jest {
     toHaveAttribute(attr: string, value?: string): R
     toHaveClass(...classNames: string[]): R
     toHaveStyle(css: string): R
-    toHaveTextContent(text: string | RegExp): R
+    toHaveTextContent(
+      text: string | RegExp,
+      options?: {normalizeWhitespace: boolean},
+    ): R
     toHaveFocus(): R
   }
 }

package.json

@@ -34,6 +34,7 @@
   "dependencies": {
     "chalk": "^2.4.1",
     "css": "^2.2.3",
+    "dom-testing-library": "^3.5.0",
     "jest-diff": "^22.4.3",
     "jest-matcher-utils": "^22.4.3",
     "pretty-format": "^23.0.1",

src/__tests__/to-have-text-content.js

@@ -1,20 +1,48 @@
 import {render} from './helpers/test-utils'
 
-test('.toHaveTextContent', () => {
-  const {queryByTestId} = render(`<span data-testid="count-value">2</span>`)
-
-  expect(queryByTestId('count-value')).toHaveTextContent('2')
-  expect(queryByTestId('count-value')).toHaveTextContent(2)
-  expect(queryByTestId('count-value')).toHaveTextContent(/2/)
-  expect(queryByTestId('count-value')).not.toHaveTextContent('21')
-  expect(() =>
-    expect(queryByTestId('count-value2')).toHaveTextContent('2'),
-  ).toThrowError()
-
-  expect(() =>
-    expect(queryByTestId('count-value')).toHaveTextContent('3'),
-  ).toThrowError()
-  expect(() =>
-    expect(queryByTestId('count-value')).not.toHaveTextContent('2'),
-  ).toThrowError()
+describe('.toHaveTextContent', () => {
+  test('handles positive test cases', () => {
+    const {queryByTestId} = render(`<span data-testid="count-value">2</span>`)
+
+    expect(queryByTestId('count-value')).toHaveTextContent('2')
+    expect(queryByTestId('count-value')).toHaveTextContent(2)
+    expect(queryByTestId('count-value')).toHaveTextContent(/2/)
+    expect(queryByTestId('count-value')).not.toHaveTextContent('21')
+  })
+
+  test('handles negative test cases', () => {
+    const {queryByTestId} = render(`<span data-testid="count-value">2</span>`)
+
+    expect(() =>
+      expect(queryByTestId('count-value2')).toHaveTextContent('2'),
+    ).toThrowError()
+
+    expect(() =>
+      expect(queryByTestId('count-value')).toHaveTextContent('3'),
+    ).toThrowError()
+    expect(() =>
+      expect(queryByTestId('count-value')).not.toHaveTextContent('2'),
+    ).toThrowError()
+  })
+
+  test('normalizes whitespace by default', () => {
+    const {container} = render(`
+      <span>
+        Step
+          1
+            of
+              4
+      </span>
+    `)
+
+    expect(container.querySelector('span')).toHaveTextContent('Step 1 of 4')
+  })
+
+  test('allows whitespace normalization to be turned off', () => {
+    const {container} = render(`<span>&nbsp;&nbsp;Step 1 of 4</span>`)
+
+    expect(container.querySelector('span')).toHaveTextContent('  Step 1 of 4', {
+      normalizeWhitespace: false,
+    })
+  })
 })

src/to-have-text-content.js

@@ -1,11 +1,22 @@
 import {matcherHint} from 'jest-matcher-utils'
+import {getNodeText} from 'dom-testing-library'
 import {checkHtmlElement, getMessage, matches} from './utils'
 
-export function toHaveTextContent(htmlElement, checkWith) {
+export function toHaveTextContent(
+  htmlElement,
+  checkWith,
+  options = {normalizeWhitespace: true},
+) {
   checkHtmlElement(htmlElement, toHaveTextContent, this)
-  const textContent = htmlElement.textContent
+
+  const textContent = options.normalizeWhitespace
+    ? getNodeText(htmlElement)
+        .replace(/\s+/g, ' ')
+        .trim()
+    : getNodeText(htmlElement).replace(/\u00a0/g, ' ') // Replace   with normal spaces
+
   return {
-    pass: matches(textContent, htmlElement, checkWith),
+    pass: matches(textContent, checkWith),
     message: () => {
       const to = this.isNot ? 'not to' : 'to'
       return getMessage(

src/utils.js

@@ -125,7 +125,7 @@ function getMessage(
   ].join('\n')
 }
 
-function matches(textToMatch, node, matcher) {
+function matches(textToMatch, matcher) {
   if (matcher instanceof RegExp) {
     return matcher.test(textToMatch)
   } else {