fix: toHaveClass behaviour for empty class list (#39)

* Require at least one class in toHaveClass

* .not.toHaveClass() asserts there are no received classes

* Update readme

Author: jgoz

README.md

@@ -249,6 +249,17 @@ expect(getByTestId(container, 'delete-button')).not.toHaveClass('btn-link')
 // ...
 ```
 
+You must provide at least one class, unless you are asserting that an element
+does not have any classes.
+
+```javascript
+// ...
+// <button data-testid="no-classes">
+//   Delete item
+// </button>
+expect(getByTestId(container, 'no-classes')).not.toHaveClass()
+```
+
 ### `toHaveStyle`
 
 ```typescript

src/__tests__/to-have-class.js

@@ -1,3 +1,5 @@
+/* eslint max-statements:off */
+
 import {render} from './helpers/test-utils'
 
 test('.toHaveClass', () => {
@@ -12,10 +14,10 @@ test('.toHaveClass', () => {
       <svg data-testid="svg-spinner" class="spinner clockwise">
         <path />
       </svg>
+      <div data-testid="no-classes"></div>
     </div>
   `)
 
-  expect(queryByTestId('delete-button')).toHaveClass()
   expect(queryByTestId('delete-button')).toHaveClass('btn')
   expect(queryByTestId('delete-button')).toHaveClass('btn-danger')
   expect(queryByTestId('delete-button')).toHaveClass('extra')
@@ -34,10 +36,9 @@ test('.toHaveClass', () => {
   expect(queryByTestId('svg-spinner')).toHaveClass('spinner')
   expect(queryByTestId('svg-spinner')).toHaveClass('clockwise')
   expect(queryByTestId('svg-spinner')).not.toHaveClass('wise')
+  expect(queryByTestId('no-classes')).not.toHaveClass()
+  expect(queryByTestId('no-classes')).not.toHaveClass(' ')
 
-  expect(() =>
-    expect(queryByTestId('delete-button')).not.toHaveClass(),
-  ).toThrowError()
   expect(() =>
     expect(queryByTestId('delete-button')).not.toHaveClass('btn'),
   ).toThrowError()
@@ -74,4 +75,19 @@ test('.toHaveClass', () => {
   expect(() =>
     expect(queryByTestId('svg-spinner')).toHaveClass('wise'),
   ).toThrowError()
+  expect(() =>
+    expect(queryByTestId('delete-button')).toHaveClass(),
+  ).toThrowError(/At least one expected class must be provided/)
+  expect(() =>
+    expect(queryByTestId('delete-button')).toHaveClass(''),
+  ).toThrowError(/At least one expected class must be provided/)
+  expect(() => expect(queryByTestId('no-classes')).toHaveClass()).toThrowError(
+    /At least one expected class must be provided/,
+  )
+  expect(() =>
+    expect(queryByTestId('delete-button')).not.toHaveClass(),
+  ).toThrowError(/(none)/)
+  expect(() =>
+    expect(queryByTestId('delete-button')).not.toHaveClass('  '),
+  ).toThrowError(/(none)/)
 })

src/to-have-class.js

@@ -19,21 +19,38 @@ export function toHaveClass(htmlElement, ...expectedClassNames) {
     (acc, className) => acc.concat(splitClassNames(className)),
     [],
   )
-  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(' '),
-      )
-    },
-  }
+  return expected.length > 0
+    ? {
+        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(' '),
+          )
+        },
+      }
+    : {
+        pass: this.isNot ? received.length > 0 : false,
+        message: () =>
+          this.isNot
+            ? getMessage(
+                matcherHint('.not.toHaveClass', 'element', ''),
+                'Expected the element to have classes',
+                '(none)',
+                'Received',
+                received.join(' '),
+              )
+            : [
+                matcherHint(`.toHaveClass`, 'element'),
+                'At least one expected class must be provided.',
+              ].join('\n'),
+      }
 }