feat: extend toBeChecked to support any role that's compatible (#267)

* Get supported roles for toBeChecked via aria-query

Instead of hard coding a list of roles, use information provided by
the `aria-query` package to determine whether an element with a given
role supports the `aria-checked` attribute.

Dynamically generate an error message listing all supported
roles. Make error message expectations more fuzzy to prevent test
failures if the list of supported roles should ever change.

Author: tf

package.json

@@ -33,6 +33,7 @@
   "dependencies": {
     "@babel/runtime": "^7.9.2",
     "@types/testing-library__jest-dom": "^5.9.1",
+    "aria-query": "^4.2.2",
     "chalk": "^3.0.0",
     "css": "^2.2.4",
     "css.escape": "^1.5.1",
@@ -55,7 +56,9 @@
     },
     "overrides": [
       {
-        "files": ["src/__tests__/*.js"],
+        "files": [
+          "src/__tests__/*.js"
+        ],
         "rules": {
           "max-lines-per-function": "off"
         }

src/__tests__/to-be-checked.js

@@ -51,6 +51,16 @@ describe('.toBeChecked', () => {
     expect(queryByTestId('aria-switch-unchecked')).not.toBeChecked()
   })
 
+  test('handles element with role="menuitemcheckbox"', () => {
+    const {queryByTestId} = render(`
+        <div role="menuitemcheckbox" aria-checked="true" data-testid="aria-menuitemcheckbox-checked" />
+        <div role="menuitemcheckbox" aria-checked="false" data-testid="aria-menuitemcheckbox-unchecked" />
+    `)
+
+    expect(queryByTestId('aria-menuitemcheckbox-checked')).toBeChecked()
+    expect(queryByTestId('aria-menuitemcheckbox-unchecked')).not.toBeChecked()
+  })
+
   test('throws when checkbox input is checked but expected not to be', () => {
     const {queryByTestId} = render(
       `<input type="checkbox" checked data-testid="input-checked" />`,
@@ -159,7 +169,7 @@ describe('.toBeChecked', () => {
     expect(() =>
       expect(queryByTestId('aria-checkbox-invalid')).toBeChecked(),
     ).toThrowError(
-      'only inputs with type="checkbox" or type="radio" or elements with role="checkbox", role="radio" or role="switch" and a valid aria-checked attribute can be used with .toBeChecked(). Use .toHaveValue() instead',
+      /only inputs with .* a valid aria-checked attribute can be used/,
     )
   })
 
@@ -171,7 +181,7 @@ describe('.toBeChecked', () => {
     expect(() =>
       expect(queryByTestId('aria-radio-invalid')).toBeChecked(),
     ).toThrowError(
-      'only inputs with type="checkbox" or type="radio" or elements with role="checkbox", role="radio" or role="switch" and a valid aria-checked attribute can be used with .toBeChecked(). Use .toHaveValue() instead',
+      /only inputs with .* a valid aria-checked attribute can be used/,
     )
   })
 
@@ -183,14 +193,14 @@ describe('.toBeChecked', () => {
     expect(() =>
       expect(queryByTestId('aria-switch-invalid')).toBeChecked(),
     ).toThrowError(
-      'only inputs with type="checkbox" or type="radio" or elements with role="checkbox", role="radio" or role="switch" and a valid aria-checked attribute can be used with .toBeChecked(). Use .toHaveValue() instead',
+      /only inputs with .* a valid aria-checked attribute can be used/,
     )
   })
 
   test('throws when the element is not an input', () => {
     const {queryByTestId} = render(`<select data-testid="select"></select>`)
     expect(() => expect(queryByTestId('select')).toBeChecked()).toThrowError(
-      'only inputs with type="checkbox" or type="radio" or elements with role="checkbox", role="radio" or role="switch" and a valid aria-checked attribute can be used with .toBeChecked(). Use .toHaveValue() instead',
+      /only inputs with type="checkbox" or type="radio" or elements with.* role="checkbox".* role="menuitemcheckbox".* role="radio".* role="switch" .* can be used/,
     )
   })
 })

src/__tests__/utils.js

@@ -3,6 +3,7 @@ import {
   checkHtmlElement,
   HtmlElementTypeError,
   parseJStoCSS,
+  toSentence,
 } from '../utils'
 import document from './helpers/document'
 
@@ -116,3 +117,29 @@ describe('parseJStoCSS', () => {
     })
   })
 })
+
+describe('toSentence', () => {
+  it('turns array into string of comma separated list with default last word connector', () => {
+    expect(toSentence(['one', 'two', 'three'])).toBe('one, two and three')
+  })
+
+  it('supports custom word connector', () => {
+    expect(toSentence(['one', 'two', 'three'], {wordConnector: '; '})).toBe(
+      'one; two and three',
+    )
+  })
+
+  it('supports custom last word connector', () => {
+    expect(
+      toSentence(['one', 'two', 'three'], {lastWordConnector: ' or '}),
+    ).toBe('one, two or three')
+  })
+
+  it('turns one element array into string containing first element', () => {
+    expect(toSentence(['one'])).toBe('one')
+  })
+
+  it('turns empty array into empty string', () => {
+    expect(toSentence([])).toBe('')
+  })
+})

src/to-be-checked.js

@@ -1,5 +1,6 @@
+import {roles} from 'aria-query'
 import {matcherHint, printReceived} from 'jest-matcher-utils'
-import {checkHtmlElement} from './utils'
+import {checkHtmlElement, toSentence} from './utils'
 
 export function toBeChecked(element) {
   checkHtmlElement(element, toBeChecked, this)
@@ -13,7 +14,7 @@ export function toBeChecked(element) {
 
   const isValidAriaElement = () => {
     return (
-      ['checkbox', 'radio', 'switch'].includes(element.getAttribute('role')) &&
+      roleSupportsChecked(element.getAttribute('role')) &&
       ['true', 'false'].includes(element.getAttribute('aria-checked'))
     )
   }
@@ -22,7 +23,7 @@ export function toBeChecked(element) {
     return {
       pass: false,
       message: () =>
-        'only inputs with type="checkbox" or type="radio" or elements with role="checkbox", role="radio" or role="switch" and a valid aria-checked attribute can be used with .toBeChecked(). Use .toHaveValue() instead',
+        `only inputs with type="checkbox" or type="radio" or elements with ${supportedRolesSentence()} and a valid aria-checked attribute can be used with .toBeChecked(). Use .toHaveValue() instead`,
     }
   }
 
@@ -44,3 +45,18 @@ export function toBeChecked(element) {
     },
   }
 }
+
+function supportedRolesSentence() {
+  return toSentence(
+    supportedRoles().map(role => `role="${role}"`),
+    {lastWordConnector: ' or '},
+  )
+}
+
+function supportedRoles() {
+  return Array.from(roles.keys()).filter(roleSupportsChecked)
+}
+
+function roleSupportsChecked(role) {
+  return roles.get(role)?.props['aria-checked'] !== undefined
+}

src/utils.js

@@ -198,6 +198,15 @@ function parseJStoCSS(document, css) {
   return sandboxElement.style.cssText
 }
 
+function toSentence(
+  array,
+  {wordConnector = ', ', lastWordConnector = ' and '} = {},
+) {
+  return [array.slice(0, -1).join(wordConnector), array[array.length - 1]].join(
+    array.length > 1 ? lastWordConnector : '',
+  )
+}
+
 export {
   HtmlElementTypeError,
   checkHtmlElement,
@@ -210,4 +219,5 @@ export {
   getSingleElementValue,
   compareArraysAsSet,
   parseJStoCSS,
+  toSentence,
 }