From acbf416871cf43525d569703be0e50f00a294e9b Mon Sep 17 00:00:00 2001
From: Idan Entin <idanen@gmail.com>
Date: Fri, 23 Aug 2024 22:43:25 +0300
Subject: [PATCH] feat(toHaveValue): Asserting aria-valuenow (#479)

Co-authored-by: Wayne Van Son <waynevanson@gmail.com>
---
 README.md                      |  3 +++
 src/__tests__/to-have-value.js | 14 ++++++++++++++
 src/utils.js                   | 14 ++++++++++++--
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 11f2dd4c..5c5acc20 100644
--- a/README.md
+++ b/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.
 
diff --git a/src/__tests__/to-have-value.js b/src/__tests__/to-have-value.js
index 80cc7828..1b276fb5 100644
--- a/src/__tests__/to-have-value.js
+++ b/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)
+  })
 })
diff --git a/src/utils.js b/src/utils.js
index ee8e484b..2699d954 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)
+    }
   }
 }