From 8b84b7afa9aa1e756d2fdc626c95aa87a9480ec5 Mon Sep 17 00:00:00 2001
From: okazari <plouzennec.benjamin@gmail.com>
Date: Wed, 12 May 2021 10:52:03 +0200
Subject: [PATCH] fix: .toHaveValue()/.toHaveFormValues() on input type range
 now expect a number

---
 README.md                            |  7 +++++--
 src/__tests__/to-have-form-values.js | 15 +++++++++++++++
 src/__tests__/to-have-value.js       | 23 +++++++++++++++++++++++
 src/utils.js                         |  1 +
 4 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 94b8a5af..b3c0fce9 100644
--- a/README.md
+++ b/README.md
@@ -636,8 +636,8 @@ is obtained depending on the type of form control. For instance, `<input>`
 elements have a `value` attribute, but `<select>` elements do not. Here's a list
 of all cases covered:
 
-- `<input type="number">` elements return the value as a **number**, instead of
-  a string.
+- `<input type="number">` and `<input type="range">` elements return the value
+  as a **number**, instead of a string.
 - `<input type="checkbox">` elements:
   - if there's a single one with the given `name` attribute, it is treated as a
     **boolean**, returning `true` if the checkbox is checked, `false` if
@@ -796,6 +796,7 @@ For all other form elements, the value is matched using the same algorithm as in
 ```html
 <input type="text" value="text" data-testid="input-text" />
 <input type="number" value="5" data-testid="input-number" />
+<input type="range" value="5" data-testid="input-range" />
 <input type="text" data-testid="input-empty" />
 <select multiple data-testid="select-number">
   <option value="first">First Value</option>
@@ -809,11 +810,13 @@ For all other form elements, the value is matched using the same algorithm as in
 ```javascript
 const textInput = getByTestId('input-text')
 const numberInput = getByTestId('input-number')
+const rangeInput = getByTestId('input-range')
 const emptyInput = getByTestId('input-empty')
 const selectInput = getByTestId('select-number')
 
 expect(textInput).toHaveValue('text')
 expect(numberInput).toHaveValue(5)
+expect(rangeInput).toHaveValue(5)
 expect(emptyInput).not.toHaveValue()
 expect(selectInput).not.toHaveValue(['second', 'third'])
 ```
diff --git a/src/__tests__/to-have-form-values.js b/src/__tests__/to-have-form-values.js
index 18b99d98..4c9f5ed5 100644
--- a/src/__tests__/to-have-form-values.js
+++ b/src/__tests__/to-have-form-values.js
@@ -174,6 +174,21 @@ describe('.toHaveFormValues', () => {
     })
   })
 
+  it('handles <input type="range"> values correctly', () => {
+    const renderInputRange = value => {
+      const {container} = render(`
+        <form>
+          <input type="range" name="volume" value="${value}">
+        </form>
+      `)
+      return container.querySelector('form')
+    }
+
+    expect(renderInputRange('10')).toHaveFormValues({
+      volume: 10,
+    })
+  })
+
   describe('edge cases', () => {
     // This is also to ensure 100% code coverage for edge cases
     it('detects multiple elements with the same name but different type', () => {
diff --git a/src/__tests__/to-have-value.js b/src/__tests__/to-have-value.js
index d0159361..f4c71720 100644
--- a/src/__tests__/to-have-value.js
+++ b/src/__tests__/to-have-value.js
@@ -47,6 +47,29 @@ describe('.toHaveValue', () => {
     expect(queryByTestId('without')).toHaveValue(10)
   })
 
+  test('handles value of range input', () => {
+    const {queryByTestId} = render(`
+        <input type="range" value="5" data-testid="range" />
+        <input type="range" value="" data-testid="empty" />
+        <input type="range" data-testid="without" />
+    `)
+
+    expect(queryByTestId('range')).toHaveValue(5)
+    expect(queryByTestId('range')).toHaveValue()
+    expect(queryByTestId('range')).not.toHaveValue(4)
+    expect(queryByTestId('range')).not.toHaveValue('5')
+
+    // Input type range value default to 50
+    expect(queryByTestId('empty')).toHaveValue(50)
+    expect(queryByTestId('empty')).not.toHaveValue('5')
+
+    // Input type range value default to 50
+    expect(queryByTestId('without')).toHaveValue(50)
+    expect(queryByTestId('without')).not.toHaveValue('10')
+    queryByTestId('without').value = 10
+    expect(queryByTestId('without')).toHaveValue(10)
+  })
+
   test('handles value of select element', () => {
     const {queryByTestId} = render(`
       <select data-testid="single">
diff --git a/src/utils.js b/src/utils.js
index ba38629e..5109ef30 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -189,6 +189,7 @@ function getSelectValue({multiple, options}) {
 function getInputValue(inputElement) {
   switch (inputElement.type) {
     case 'number':
+    case 'range':
       return inputElement.value === '' ? null : Number(inputElement.value)
     case 'checkbox':
       return inputElement.checked