fix: recognize changed value of select (#126)

.all-contributorsrc

@@ -267,6 +267,16 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "jeanchung",
+      "name": "Jean Chung",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/10778036?v=4",
+      "profile": "https://github.com/jeanchung",
+      "contributions": [
+        "code",
+        "test"
+      ]
     }
   ]
 }

README.md

@@ -21,7 +21,7 @@
 [![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends]
 [![MIT License][license-badge]][license]
 
-[![All Contributors](https://img.shields.io/badge/all_contributors-26-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-27-orange.svg?style=flat-square)](#contributors-)
 [![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc]
 
 [![Watch on GitHub][github-watch-badge]][github-watch]
@@ -115,8 +115,8 @@ expect.extend({toBeInTheDocument, toHaveClass})
 `@testing-library/jest-dom` can work with any library or framework that returns
 DOM elements from queries. The custom matcher examples below demonstrate using
 `document.querySelector` and
-[DOM Testing Library](https://github.com/testing-library/dom-testing-library) for
-querying DOM elements.
+[DOM Testing Library](https://github.com/testing-library/dom-testing-library)
+for querying DOM elements.
 
 ### `toBeDisabled`
 
@@ -989,8 +989,8 @@ here!
 > [The more your tests resemble the way your software is used, the more
 > confidence they can give you.][guiding-principle]
 
-This library follows the same guiding principles as its mother library
-[DOM Testing Library][]. Go [check them out][guiding-principle] for more details.
+This library follows the same guiding principles as its mother library [DOM
+Testing Library][]. Go [check them out][guiding-principle] for more details.
 
 Additionally, with respect to custom DOM matchers, this library aims to maintain
 a minimal but useful set of them, while avoiding bloating itself with merely
@@ -1004,7 +1004,8 @@ more verbose, less clear in its intent, and/or harder to read.
 Thanks goes to these people ([emoji key][emojis]):
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
 <table>
   <tr>
     <td align="center"><a href="https://kentcdodds.com"><img src="https://avatars.githubusercontent.com/u/1500684?v=3" width="100px;" alt="Kent C. Dodds"/><br /><sub><b>Kent C. Dodds</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=kentcdodds" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=kentcdodds" title="Documentation">📖</a> <a href="#infra-kentcdodds" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/testing-library/jest-dom/commits?author=kentcdodds" title="Tests">⚠️</a></td>
@@ -1039,9 +1040,13 @@ Thanks goes to these people ([emoji key][emojis]):
     <td align="center"><a href="https://blog.revathskumar.com"><img src="https://avatars3.githubusercontent.com/u/463904?v=4" width="100px;" alt="Revath S Kumar"/><br /><sub><b>Revath S Kumar</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=revathskumar" title="Code">💻</a></td>
     <td align="center"><a href="https://raccoon.studio"><img src="https://avatars0.githubusercontent.com/u/4989733?v=4" width="100px;" alt="hiwelo."/><br /><sub><b>hiwelo.</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=hiwelo" title="Code">💻</a> <a href="#ideas-hiwelo" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/testing-library/jest-dom/commits?author=hiwelo" title="Tests">⚠️</a></td>
     <td align="center"><a href="https://github.com/lukaszfiszer"><img src="https://avatars3.githubusercontent.com/u/1201711?v=4" width="100px;" alt="Łukasz Fiszer"/><br /><sub><b>Łukasz Fiszer</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=lukaszfiszer" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/jeanchung"><img src="https://avatars0.githubusercontent.com/u/10778036?v=4" width="100px;" alt="Jean Chung"/><br /><sub><b>Jean Chung</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=jeanchung" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=jeanchung" title="Tests">⚠️</a></td>
   </tr>
 </table>
 
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification.

src/__tests__/to-have-form-values.js

@@ -229,6 +229,24 @@ describe('.toHaveFormValues', () => {
         expect(form).toHaveFormValues(expectedValues)
       }).not.toThrowError()
     })
+
+    it('matches change in selected value of select', () => {
+      const oldValue = ''
+      const newValue = 'design'
+
+      const {container} = render(`
+        <form>
+          ${renderSelectSingle('category', 'Category', categories, oldValue)}
+        </form>
+      `)
+
+      const form = container.querySelector('form')
+      const select = container.querySelector('select')
+      expect(form).toHaveFormValues({category: oldValue})
+
+      select.value = newValue
+      expect(form).toHaveFormValues({category: newValue})
+    })
   })
 
   describe('failed assertions', () => {
@@ -331,3 +349,5 @@ function renderSelectMultiple(name, label, options, value = []) {
 function renderList(items, mapper) {
   return items.map(mapper).join('')
 }
+
+/* eslint max-lines-per-function:0 */

src/utils.js

@@ -138,7 +138,9 @@ function getTag(element) {
   return element.tagName && element.tagName.toLowerCase()
 }
 
-function getSelectValue({multiple, selectedOptions}) {
+function getSelectValue({multiple, options}) {
+  const selectedOptions = [...options].filter(option => option.selected)
+
   if (multiple) {
     return [...selectedOptions].map(opt => opt.value)
   }