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 1/5] 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
+    }
   }
 }
 

From 34d6978357f81f6245c6eecc56ecb8f784ac48ca Mon Sep 17 00:00:00 2001
From: Idan Entin <idanen@gmail.com>
Date: Tue, 20 Sep 2022 20:55:51 +0300
Subject: [PATCH 2/5] docs(to-have-value): Update the docs

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

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.
 

From 706a94ba6c455d71c97dfb5377ac764b21a00de6 Mon Sep 17 00:00:00 2001
From: Idan Entin <idanen@gmail.com>
Date: Wed, 21 Sep 2022 16:24:40 +0300
Subject: [PATCH 3/5] refactor: lazy call to get accessible value

Co-authored-by: Wayne Van Son <waynevanson@gmail.com>
---
 src/utils.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/utils.js b/src/utils.js
index c46ef25c..80bfc7f5 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -218,8 +218,7 @@ function getSingleElementValue(element) {
     case 'select':
       return getSelectValue(element)
     default: {
-      const accessibleValue = getAccessibleValue(element)
-      return element.value ?? accessibleValue
+      return element.value ?? getAccessibleValue(element)
     }
   }
 }

From 5f23d04ea7ad1d84a885ad68976f5039b5944933 Mon Sep 17 00:00:00 2001
From: Idan Entin <idanen@gmail.com>
Date: Tue, 6 Aug 2024 09:13:51 +0300
Subject: [PATCH 4/5] chore(utils): Fix eslint error

---
 src/utils.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/utils.js b/src/utils.js
index 80bfc7f5..2699d954 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -199,10 +199,8 @@ function getInputValue(inputElement) {
 const rolesSupportingValues = ['meter', 'progressbar', 'slider', 'spinbutton']
 function getAccessibleValue(element) {
   if (!rolesSupportingValues.includes(element.getAttribute('role'))) {
-    return
+    return undefined
   }
-  // We want same behavior as accessing the `value` property
-  // eslint-disable-next-line consistent-return
   return Number(element.getAttribute('aria-valuenow'))
 }
 

From 4022dcd6963d832164607a83913ebca5ff9764f0 Mon Sep 17 00:00:00 2001
From: Idan Entin <idanen@gmail.com>
Date: Sun, 18 Aug 2024 12:35:55 +0300
Subject: [PATCH 5/5] test: add case of element not in the expected role

---
 src/__tests__/to-have-value.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/__tests__/to-have-value.js b/src/__tests__/to-have-value.js
index bc8e6493..1b276fb5 100644
--- a/src/__tests__/to-have-value.js
+++ b/src/__tests__/to-have-value.js
@@ -208,9 +208,13 @@ Received:
     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)
   })
 })