diff --git a/README.md b/README.md index e1a9b127..d05e4f4b 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,6 @@ clear to read and to maintain. - - [Installation](#installation) - [Usage](#usage) - [Custom matchers](#custom-matchers) @@ -776,8 +775,9 @@ toBeChecked() ``` This allows you to check whether the given element is checked. It accepts an -`input` of type `checkbox` or `radio` and elements with a `role` of `checkbox` -or `radio` with a valid `aria-checked` attribute of `"true"` or `"false"`. +`input` of type `checkbox` or `radio` and elements with a `role` of `checkbox`, +`radio` or `switch` with a valid `aria-checked` attribute of `"true"` or +`"false"`. #### Examples @@ -795,6 +795,8 @@ or `radio` with a valid `aria-checked` attribute of `"true"` or `"false"`.
+
+
``` ```javascript @@ -815,6 +817,11 @@ expect(inputRadioChecked).toBeChecked() expect(inputRadioUnchecked).not.toBeChecked() expect(ariaRadioChecked).toBeChecked() expect(ariaRadioUnchecked).not.toBeChecked() + +const ariaSwitchChecked = getByTestId('aria-switch-checked') +const ariaSwitchUnchecked = getByTestId('aria-switch-unchecked') +expect(ariaSwitchChecked).toBeChecked() +expect(ariaSwitchUnchecked).not.toBeChecked() ``` ## Deprecated matchers @@ -867,8 +874,8 @@ I'm not aware of any, if you are please [make a pull request][prs] and add it here! If you would like to further test the accessibility and validity of the DOM -consider [`jest-axe`](https://github.com/nickcolley/jest-axe). It doesn't -overlap with `jest-dom` but can complement it for more in-depth accessibility +consider [`jest-axe`](https://github.com/nickcolley/jest-axe). It doesn't +overlap with `jest-dom` but can complement it for more in-depth accessibility checking (eg: validating `aria` attributes or ensuring unique id attributes). ## Guiding Principles @@ -951,6 +958,7 @@ Thanks goes to these people ([emoji key][emojis]): + This project follows the [all-contributors][all-contributors] specification. diff --git a/src/__tests__/to-be-checked.js b/src/__tests__/to-be-checked.js index 81e03554..a7137dba 100644 --- a/src/__tests__/to-be-checked.js +++ b/src/__tests__/to-be-checked.js @@ -41,6 +41,16 @@ describe('.toBeChecked', () => { expect(queryByTestId('aria-radio-unchecked')).not.toBeChecked() }) + test('handles element with role="switch"', () => { + const {queryByTestId} = render(` +
+
+ `) + + expect(queryByTestId('aria-switch-checked')).toBeChecked() + expect(queryByTestId('aria-switch-unchecked')).not.toBeChecked() + }) + test('throws when checkbox input is checked but expected not to be', () => { const {queryByTestId} = render( ``, @@ -121,6 +131,26 @@ describe('.toBeChecked', () => { ).toThrowError() }) + test('throws when element with role="switch" is checked but expected not to be', () => { + const {queryByTestId} = render( + `
`, + ) + + expect(() => + expect(queryByTestId('aria-switch-checked')).not.toBeChecked(), + ).toThrowError() + }) + + test('throws when element with role="switch" is not checked but expected to be', () => { + const {queryByTestId} = render( + `
`, + ) + + expect(() => + expect(queryByTestId('aria-switch-unchecked')).toBeChecked(), + ).toThrowError() + }) + test('throws when element with role="checkbox" has an invalid aria-checked attribute', () => { const {queryByTestId} = render( `
`, @@ -129,7 +159,7 @@ describe('.toBeChecked', () => { expect(() => expect(queryByTestId('aria-checkbox-invalid')).toBeChecked(), ).toThrowError( - 'only inputs with type="checkbox" or type="radio" or elements with role="checkbox" or role="radio" 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="radio" or role="switch" and a valid aria-checked attribute can be used with .toBeChecked(). Use .toHaveValue() instead', ) }) @@ -141,14 +171,26 @@ describe('.toBeChecked', () => { expect(() => expect(queryByTestId('aria-radio-invalid')).toBeChecked(), ).toThrowError( - 'only inputs with type="checkbox" or type="radio" or elements with role="checkbox" or role="radio" 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="radio" or role="switch" and a valid aria-checked attribute can be used with .toBeChecked(). Use .toHaveValue() instead', + ) + }) + + test('throws when element with role="switch" has an invalid aria-checked attribute', () => { + const {queryByTestId} = render( + `
`, + ) + + 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', ) }) test('throws when the element is not an input', () => { const {queryByTestId} = render(``) expect(() => expect(queryByTestId('select')).toBeChecked()).toThrowError( - 'only inputs with type="checkbox" or type="radio" or elements with role="checkbox" or role="radio" 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="radio" or role="switch" and a valid aria-checked attribute can be used with .toBeChecked(). Use .toHaveValue() instead', ) }) }) diff --git a/src/to-be-checked.js b/src/to-be-checked.js index 0335d710..f7bafff8 100644 --- a/src/to-be-checked.js +++ b/src/to-be-checked.js @@ -13,7 +13,7 @@ export function toBeChecked(element) { const isValidAriaElement = () => { return ( - ['checkbox', 'radio'].includes(element.getAttribute('role')) && + ['checkbox', 'radio', 'switch'].includes(element.getAttribute('role')) && ['true', 'false'].includes(element.getAttribute('aria-checked')) ) } @@ -22,7 +22,7 @@ export function toBeChecked(element) { return { pass: false, message: () => - 'only inputs with type="checkbox" or type="radio" or elements with role="checkbox" or role="radio" 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="radio" or role="switch" and a valid aria-checked attribute can be used with .toBeChecked(). Use .toHaveValue() instead', } }