From 170b5ed9d0593c588615a54be84062a1b44f9731 Mon Sep 17 00:00:00 2001 From: Jean Chung Date: Sun, 18 Aug 2019 20:34:42 -0700 Subject: [PATCH] fix: recognize changed value of select (#126) --- .all-contributorsrc | 10 ++++++++++ README.md | 17 +++++++++++------ src/__tests__/to-have-form-values.js | 20 ++++++++++++++++++++ src/utils.js | 4 +++- 4 files changed, 44 insertions(+), 7 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index b02bbb07..81138191 100644 --- a/.all-contributorsrc +++ b/.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" + ] } ] } diff --git a/README.md b/README.md index 982b6ba5..5523a2f5 100644 --- a/README.md +++ b/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]): - + + @@ -1039,9 +1040,13 @@ Thanks goes to these people ([emoji key][emojis]): +
Kent C. Dodds
Kent C. Dodds
💻 📖 🚇 ⚠️		Revath S Kumar
Revath S Kumar
💻		 hiwelo.
hiwelo.
💻 🤔 ⚠️		 Łukasz Fiszer
Łukasz Fiszer
💻		Jean Chung
Jean Chung
💻 ⚠️
+ + + This project follows the [all-contributors][all-contributors] specification. diff --git a/src/__tests__/to-have-form-values.js b/src/__tests__/to-have-form-values.js index 37cf74d7..e6fc96a8 100644 --- a/src/__tests__/to-have-form-values.js +++ b/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(` +
+ ${renderSelectSingle('category', 'Category', categories, oldValue)} +
+ `) + + 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 */ diff --git a/src/utils.js b/src/utils.js index 2ef8a0d5..99c37907 100644 --- a/src/utils.js +++ b/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) }