feat(toHaveValue): Asserting aria-valuenow (#479)

Co-authored-by: Wayne Van Son <waynevanson@gmail.com>

README.md

@@ -996,6 +996,9 @@ It accepts `<input>`, `<select>` and `<textarea>` 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.
 

src/__tests__/to-have-value.js

@@ -203,4 +203,18 @@ Received:
 <red> foo</>
 `)
  })
+
+ test('handles value of aria-valuenow', () => {
+ const valueToCheck = 70
+ const {queryByTestId} = render(`
+ <div role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${valueToCheck}" data-testid="meter"></div>
+ <div role="textbox" aria-valuenow="${valueToCheck}" data-testid="textbox"></div>
+ `)
+
+ 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)
+ })
 })

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)
+ }
  }
 }