From 90d80701b2a228dd812ebc88a5c2b06c0d29f41e Mon Sep 17 00:00:00 2001
From: Idan Entin <idanen@gmail.com>
Date: Tue, 20 Sep 2022 20:46:07 +0300
Subject: [PATCH] feat(toHaveValue): Asserting aria-valuenow

Resolves #478
---
 src/__tests__/to-have-value.js | 10 ++++++++++
 src/utils.js                   | 17 +++++++++++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/__tests__/to-have-value.js b/src/__tests__/to-have-value.js
index 80cc7828..bc8e6493 100644
--- a/src/__tests__/to-have-value.js
+++ b/src/__tests__/to-have-value.js
@@ -203,4 +203,14 @@ 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>
+    `)
+
+    expect(queryByTestId('meter')).toHaveValue(valueToCheck)
+    expect(queryByTestId('meter')).not.toHaveValue(valueToCheck + 1)
+  })
 })
diff --git a/src/utils.js b/src/utils.js
index ee8e484b..c46ef25c 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -196,18 +196,31 @@ function getInputValue(inputElement) {
   }
 }
 
+const rolesSupportingValues = ['meter', 'progressbar', 'slider', 'spinbutton']
+function getAccessibleValue(element) {
+  if (!rolesSupportingValues.includes(element.getAttribute('role'))) {
+    return
+  }
+  // We want same behavior as accessing the `value` property
+  // eslint-disable-next-line consistent-return
+  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: {
+      const accessibleValue = getAccessibleValue(element)
+      return element.value ?? accessibleValue
+    }
   }
 }