feat: accept multiple classname arguments in toHaveClass (#31)

* Accept array of classnames in toHaveClass

* Switch to variable argument list

Author: jgoz

README.md

@@ -219,6 +219,7 @@ import 'jest-dom/extend-expect'
 // </button>
 expect(getByTestId(container, 'delete-button')).toHaveClass('extra')
 expect(getByTestId(container, 'delete-button')).toHaveClass('btn-danger btn')
+expect(getByTestId(container, 'delete-button')).toHaveClass('btn-danger', 'btn')
 expect(getByTestId(container, 'delete-button')).not.toHaveClass('btn-link')
 // ...
 ```

extend-expect.d.ts

@@ -5,7 +5,7 @@ declare namespace jest {
     toBeEmpty(): R
     toContainElement(element: HTMLElement): R
     toHaveAttribute(attr: string, value?: string): R
-    toHaveClass(className: string): R
+    toHaveClass(...classNames: string[]): R
     toHaveStyle(css: string): R
     toHaveTextContent(text: string | RegExp): R
     toHaveFocus(): R

src/__tests__/index.js

@@ -224,17 +224,29 @@ test('.toHaveClass', () => {
     </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')
   expect(queryByTestId('delete-button')).not.toHaveClass('xtra')
+  expect(queryByTestId('delete-button')).not.toHaveClass('btn xtra')
+  expect(queryByTestId('delete-button')).not.toHaveClass('btn', 'xtra')
+  expect(queryByTestId('delete-button')).not.toHaveClass('btn', 'extra xtra')
   expect(queryByTestId('delete-button')).toHaveClass('btn btn-danger')
+  expect(queryByTestId('delete-button')).toHaveClass('btn', 'btn-danger')
+  expect(queryByTestId('delete-button')).toHaveClass(
+    'btn extra',
+    'btn-danger extra',
+  )
   expect(queryByTestId('delete-button')).not.toHaveClass('btn-link')
   expect(queryByTestId('cancel-button')).not.toHaveClass('btn-danger')
   expect(queryByTestId('svg-spinner')).toHaveClass('spinner')
   expect(queryByTestId('svg-spinner')).toHaveClass('clockwise')
   expect(queryByTestId('svg-spinner')).not.toHaveClass('wise')
 
+  expect(() =>
+    expect(queryByTestId('delete-button')).not.toHaveClass(),
+  ).toThrowError()
   expect(() =>
     expect(queryByTestId('delete-button')).not.toHaveClass('btn'),
   ).toThrowError()
@@ -247,9 +259,18 @@ test('.toHaveClass', () => {
   expect(() =>
     expect(queryByTestId('delete-button')).toHaveClass('xtra'),
   ).toThrowError()
+  expect(() =>
+    expect(queryByTestId('delete-button')).toHaveClass('xtra'),
+  ).toThrowError()
+  expect(() =>
+    expect(queryByTestId('delete-button')).toHaveClass('btn', 'extra xtra'),
+  ).toThrowError()
   expect(() =>
     expect(queryByTestId('delete-button')).not.toHaveClass('btn btn-danger'),
   ).toThrowError()
+  expect(() =>
+    expect(queryByTestId('delete-button')).not.toHaveClass('btn', 'btn-danger'),
+  ).toThrowError()
   expect(() =>
     expect(queryByTestId('delete-button')).toHaveClass('btn-link'),
   ).toThrowError()

src/to-have-class.js

@@ -12,10 +12,13 @@ function isSubset(subset, superset) {
   return subset.every(item => superset.includes(item))
 }
 
-export function toHaveClass(htmlElement, expectedClassNames) {
+export function toHaveClass(htmlElement, ...expectedClassNames) {
   checkHtmlElement(htmlElement, toHaveClass, this)
   const received = splitClassNames(htmlElement.getAttribute('class'))
-  const expected = splitClassNames(expectedClassNames)
+  const expected = expectedClassNames.reduce(
+    (acc, className) => acc.concat(splitClassNames(className)),
+    [],
+  )
   return {
     pass: isSubset(expected, received),
     message: () => {