Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: .toHaveValue() / .toHaveFormValues() on input type range now expect a number #365

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -842,8 +842,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
Expand Down Expand Up @@ -1004,6 +1004,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>
Expand All @@ -1017,11 +1018,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).toHaveValue(['second', 'third'])
```
Expand Down
15 changes: 15 additions & 0 deletions src/__tests__/to-have-form-values.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
23 changes: 23 additions & 0 deletions src/__tests__/to-have-value.js
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
1 change: 1 addition & 0 deletions src/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,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
Expand Down