jest-dom icon indicating copy to clipboard operation
jest-dom copied to clipboard

Test for hidden value workarounds for checkbox inputs so they can sen…

Open winstonwolff opened this issue 1 year ago • 0 comments

What:

This PR adds a test and special case logic to handle the somewhat common case of checkboxes with hidden inputs. See the why section below for an example. We suspect this situation is not too common in React code since a lot of react code is reading checkboxes and submitting the data through XHR or some other method. But some react code will render a

tag with inside it and submit it through the normal browser mechanism. When one is doing that, checkboxes often need this special hidden field. So this PR allows this case to not raise an error when calling toHaveFormValues()

Why:

The bug is when I have a form with a checkbox input such as below, it is a common workaround to have a matching hidden input so that if the checkbox is NOT checked, a false false is still sent through the form. However toHaveFormValues flags this as an error "Multiple form elements with the same name must be of the same type"

      <form>
         <input type="hidden" name="sample-checkbox" value=0>
         <input type="checkbox" name="sample-checkbox" value=1>
       </form>

How:

We added a test case, and an if statement in the code for identifying this situation.

Checklist:

  • [x] Documentation
  • [X] Tests
  • [ ] ~Updated Type Definitions~ N/A
  • [x] Ready to be merged

winstonwolff avatar Jul 08 '24 17:07 winstonwolff