feat(matchers): add toHaveClass custom matcher (closes testing-library#2) (testing-library#4)

* Add toHaveClass custom matcher

* Add documentation in the README

* Handle the case where an element has no class

Author: gnapse

README.md

@@ -81,6 +81,7 @@ when a real user uses it.
   * [`toBeInTheDOM`](#tobeinthedom)
   * [`toHaveTextContent`](#tohavetextcontent)
   * [`toHaveAttribute`](#tohaveattribute)
+  * [`toHaveClass`](#tohaveclass)
   * [Custom Jest Matchers - Typescript](#custom-jest-matchers---typescript)
 * [`TextMatch`](#textmatch)
 * [`query` APIs](#query-apis)
@@ -364,6 +365,25 @@ expect(getByTestId(container, 'ok-button')).not.toHaveAttribute(
 // ...
 ```
 
+### `toHaveClass`
+
+This allows you to check wether the given element has certain classes within its
+`class` attribute.
+
+```javascript
+// add the custom expect matchers
+import 'dom-testing-library/extend-expect'
+
+// ...
+// <button data-testid="delete-button" class="btn extra btn-danger">
+//   Delete item
+// </button>
+expect(getByTestId(container, 'delete-button')).toHaveClass('extra')
+expect(getByTestId(container, 'delete-button')).toHaveClass('btn-danger btn')
+expect(getByTestId(container, 'delete-button')).not.toHaveClass('btn-link')
+// ...
+```
+
 ### Custom Jest Matchers - Typescript
 
 When you use custom Jest Matchers with Typescript, you will need to extend the

src/__tests__/element-queries.js

@@ -150,4 +150,47 @@ test('using jest helpers to check element attributes', () => {
   ).toThrowError()
 })
 
+test('using jest helpers to check element class names', () => {
+  const {getByTestId} = render(`
+    <div>
+      <button data-testid="delete-button" class="btn extra btn-danger">
+        Delete item
+      </button>
+      <button data-testid="cancel-button">
+        Cancel
+      </button>
+    </div>
+  `)
+
+  expect(getByTestId('delete-button')).toHaveClass('btn')
+  expect(getByTestId('delete-button')).toHaveClass('btn-danger')
+  expect(getByTestId('delete-button')).toHaveClass('extra')
+  expect(getByTestId('delete-button')).not.toHaveClass('xtra')
+  expect(getByTestId('delete-button')).toHaveClass('btn btn-danger')
+  expect(getByTestId('delete-button')).not.toHaveClass('btn-link')
+  expect(getByTestId('cancel-button')).not.toHaveClass('btn-danger')
+
+  expect(() =>
+    expect(getByTestId('delete-button')).not.toHaveClass('btn'),
+  ).toThrowError()
+  expect(() =>
+    expect(getByTestId('delete-button')).not.toHaveClass('btn-danger'),
+  ).toThrowError()
+  expect(() =>
+    expect(getByTestId('delete-button')).not.toHaveClass('extra'),
+  ).toThrowError()
+  expect(() =>
+    expect(getByTestId('delete-button')).toHaveClass('xtra'),
+  ).toThrowError()
+  expect(() =>
+    expect(getByTestId('delete-button')).not.toHaveClass('btn btn-danger'),
+  ).toThrowError()
+  expect(() =>
+    expect(getByTestId('delete-button')).toHaveClass('btn-link'),
+  ).toThrowError()
+  expect(() =>
+    expect(getByTestId('cancel-button')).toHaveClass('btn-danger'),
+  ).toThrowError()
+})
+
 /* eslint jsx-a11y/label-has-for:0 */

src/extend-expect.js

@@ -1,4 +1,9 @@
 import extensions from './jest-extensions'
 
-const {toBeInTheDOM, toHaveTextContent, toHaveAttribute} = extensions
-expect.extend({toBeInTheDOM, toHaveTextContent, toHaveAttribute})
+const {
+  toBeInTheDOM,
+  toHaveTextContent,
+  toHaveAttribute,
+  toHaveClass,
+} = extensions
+expect.extend({toBeInTheDOM, toHaveTextContent, toHaveAttribute, toHaveClass})

src/jest-extensions.js

@@ -49,6 +49,17 @@ function getAttributeComment(name, value) {
     : `element.getAttribute(${stringify(name)}) === ${stringify(value)}`
 }
 
+function splitClassNames(str) {
+  if (!str) {
+    return []
+  }
+  return str.split(/\s+/).filter(s => s.length > 0)
+}
+
+function isSubset(subset, superset) {
+  return subset.every(item => superset.includes(item))
+}
+
 const extensions = {
   toBeInTheDOM(received) {
     if (received) {
@@ -130,6 +141,29 @@ const extensions = {
       },
     }
   },
+
+  toHaveClass(htmlElement, expectedClassNames) {
+    checkHtmlElement(htmlElement)
+    const received = splitClassNames(htmlElement.getAttribute('class'))
+    const expected = splitClassNames(expectedClassNames)
+    return {
+      pass: isSubset(expected, received),
+      message: () => {
+        const to = this.isNot ? 'not to' : 'to'
+        return getMessage(
+          matcherHint(
+            `${this.isNot ? '.not' : ''}.toHaveClass`,
+            'element',
+            printExpected(expected.join(' ')),
+          ),
+          `Expected the element ${to} have class`,
+          expected.join(' '),
+          'Received',
+          received.join(' '),
+        )
+      },
+    }
+  },
 }
 
 export default extensions