diff --git a/README.md b/README.md index 11f2dd4..5c5acc2 100644 --- a/README.md +++ b/README.md @@ -996,6 +996,9 @@ It accepts ``, `` and `` elements with the exception of matched only using [`toBeChecked`](#tobechecked) or [`toHaveFormValues`](#tohaveformvalues). +It also accepts elements with roles `meter`, `progressbar`, `slider` or +`spinbutton` and checks their `aria-valuenow` attribute (as a number). + For all other form elements, the value is matched using the same algorithm as in [`toHaveFormValues`](#tohaveformvalues) does. diff --git a/src/__tests__/to-have-value.js b/src/__tests__/to-have-value.js index 80cc782..1b276fb 100644 --- a/src/__tests__/to-have-value.js +++ b/src/__tests__/to-have-value.js @@ -203,4 +203,18 @@ Received: foo> `) }) + + test('handles value of aria-valuenow', () => { + const valueToCheck = 70 + const {queryByTestId} = render(` + + + `) + + expect(queryByTestId('meter')).toHaveValue(valueToCheck) + expect(queryByTestId('meter')).not.toHaveValue(valueToCheck + 1) + + // Role that does not support aria-valuenow + expect(queryByTestId('textbox')).not.toHaveValue(70) + }) }) diff --git a/src/utils.js b/src/utils.js index ee8e484..2699d95 100644 --- a/src/utils.js +++ b/src/utils.js @@ -196,18 +196,28 @@ function getInputValue(inputElement) { } } +const rolesSupportingValues = ['meter', 'progressbar', 'slider', 'spinbutton'] +function getAccessibleValue(element) { + if (!rolesSupportingValues.includes(element.getAttribute('role'))) { + return undefined + } + return Number(element.getAttribute('aria-valuenow')) +} + function getSingleElementValue(element) { /* istanbul ignore if */ if (!element) { return undefined } + switch (element.tagName.toLowerCase()) { case 'input': return getInputValue(element) case 'select': return getSelectValue(element) - default: - return element.value + default: { + return element.value ?? getAccessibleValue(element) + } } }