From 6f596d65dfe61c1bb83221d0681a2a683fa2954f Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Fri, 7 Dec 2018 10:34:43 +0900 Subject: [PATCH 01/16] feat(queryByCurrentValue): add get/query by current value --- src/__tests__/element-queries.js | 15 +++++++++++++++ src/queries.js | 33 ++++++++++++++++++++++++++++++++ 2 files changed, 48 insertions(+) diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js index af5e7a10..f4371626 100644 --- a/src/__tests__/element-queries.js +++ b/src/__tests__/element-queries.js @@ -565,4 +565,19 @@ test('getByText ignores script tags by default', () => { expect(getAllByText(/hello/i, {ignore: false})).toHaveLength(3) }) +test('get element by its dynamically assigned value', () => { + const { + getByCurrentValue, + queryByCurrentValue, + getByTestId, + } = renderIntoDocument(` +
+ +
+ `) + getByTestId('name').value = 'Norris' + expect(getByCurrentValue('Norris').placeholder).toEqual('name') + expect(queryByCurrentValue('Norris').placeholder).toEqual('name') +}) + /* eslint jsx-a11y/label-has-for:0 */ diff --git a/src/queries.js b/src/queries.js index c0d738a3..a9d52361 100644 --- a/src/queries.js +++ b/src/queries.js @@ -180,6 +180,22 @@ function queryByAltText(...args) { return firstResultOrNull(queryAllByAltText, ...args) } +function queryAllByCurrentValue( + container, + value, + {exact = true, collapseWhitespace = true, trim = true} = {}, +) { + const matcher = exact ? matches : fuzzyMatches + const matchOpts = {collapseWhitespace, trim} + return Array.from(container.querySelectorAll(`input,textarea,select`)).filter( + node => matcher(node.value, node, value, matchOpts), + ) +} + +function queryByCurrentValue(...args) { + return firstResultOrNull(queryAllByCurrentValue, ...args) +} + // getters // the reason we're not dynamically generating these functions that look so similar: // 1. The error messages are specific to each one and depend on arguments @@ -325,6 +341,21 @@ function getBySelectText(...args) { return firstResultOrNull(getAllBySelectText, ...args) } +function getAllByCurrentValue(container, value, ...rest) { + const els = queryAllByCurrentValue(container, value, ...rest) + if (!els.length) { + throw getElementError( + `Unable to find an element with the value: ${value}.`, + container, + ) + } + return els +} + +function getByCurrentValue(...args) { + return firstResultOrNull(getAllByCurrentValue, ...args) +} + export { queryByPlaceholderText, queryAllByPlaceholderText, @@ -356,8 +387,10 @@ export { getAllByTitle, queryByValue, queryAllByValue, + queryByCurrentValue, getByValue, getAllByValue, + getByCurrentValue, queryByRole, queryAllByRole, getAllByRole, From 4ae8c952359a571fa6fa4c9595b06654071fdfae Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Fri, 7 Dec 2018 10:45:47 +0900 Subject: [PATCH 02/16] feat(queryByCurrentValue): exports (query|get)AllByCurrentValue --- src/queries.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/queries.js b/src/queries.js index a9d52361..0a3471c5 100644 --- a/src/queries.js +++ b/src/queries.js @@ -388,9 +388,11 @@ export { queryByValue, queryAllByValue, queryByCurrentValue, + queryAllByCurrentValue, getByValue, getAllByValue, getByCurrentValue, + getAllByCurrentValue, queryByRole, queryAllByRole, getAllByRole, From 633028c63252fa06eb3a7eacb040bde0fb3c447e Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Mon, 10 Dec 2018 10:47:19 +0900 Subject: [PATCH 03/16] chore: change the order of exports --- src/queries.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/queries.js b/src/queries.js index 0a3471c5..c94aa208 100644 --- a/src/queries.js +++ b/src/queries.js @@ -387,10 +387,10 @@ export { getAllByTitle, queryByValue, queryAllByValue, - queryByCurrentValue, - queryAllByCurrentValue, getByValue, getAllByValue, + queryByCurrentValue, + queryAllByCurrentValue, getByCurrentValue, getAllByCurrentValue, queryByRole, From 74fcf1b2ac28fd97406796f59f13913f23a749a7 Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Mon, 10 Dec 2018 11:15:52 +0900 Subject: [PATCH 04/16] fix: add implementation for `select` element at `queryAllByCurrentValue` --- src/queries.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/queries.js b/src/queries.js index c94aa208..16120ddf 100644 --- a/src/queries.js +++ b/src/queries.js @@ -188,7 +188,18 @@ function queryAllByCurrentValue( const matcher = exact ? matches : fuzzyMatches const matchOpts = {collapseWhitespace, trim} return Array.from(container.querySelectorAll(`input,textarea,select`)).filter( - node => matcher(node.value, node, value, matchOpts), + node => { + if (node.tagName === 'SELECT') { + const selectedOptions = Array.from(node.options).filter( + option => option.selected, + ) + return selectedOptions.some(optionNode => + matcher(getNodeText(optionNode), optionNode, value, matchOpts), + ) + } else { + return matcher(node.value, node, value, matchOpts) + } + }, ) } From 82f1aa06542cf1acaaae1c8009c5b3c0d3e80e81 Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Mon, 10 Dec 2018 11:17:16 +0900 Subject: [PATCH 05/16] chore: add tests for get/queryByCurrentValue --- src/__tests__/element-queries.js | 48 ++++++++++++++++++++++++++++++-- 1 file changed, 46 insertions(+), 2 deletions(-) diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js index f4371626..aae81bc9 100644 --- a/src/__tests__/element-queries.js +++ b/src/__tests__/element-queries.js @@ -565,19 +565,63 @@ test('getByText ignores script tags by default', () => { expect(getAllByText(/hello/i, {ignore: false})).toHaveLength(3) }) -test('get element by its dynamically assigned value', () => { +test('get/query input element by current value', () => { const { getByCurrentValue, queryByCurrentValue, getByTestId, } = renderIntoDocument(`
- +
`) + expect(getByCurrentValue('Mercury').placeholder).toEqual('name') + expect(queryByCurrentValue('Mercury').placeholder).toEqual('name') + getByTestId('name').value = 'Norris' expect(getByCurrentValue('Norris').placeholder).toEqual('name') expect(queryByCurrentValue('Norris').placeholder).toEqual('name') }) +test('get/query select element by current value', () => { + const { + getByCurrentValue, + queryByCurrentValue, + getByTestId, + } = renderIntoDocument(` + + `) + + expect(getByCurrentValue('Alaska').id).toEqual('state-select') + expect(queryByCurrentValue('Alaska').id).toEqual('state-select') + + getByTestId('state').value = 'AL' + expect(getByCurrentValue('Alabama').id).toEqual('state-select') + expect(queryByCurrentValue('Alabama').id).toEqual('state-select') +}) + +test('get/query textarea element by current value', () => { + const { + getByCurrentValue, + queryByCurrentValue, + getByTestId, + } = renderIntoDocument(` + + `) + + expect(getByCurrentValue('Hello').id).toEqual('content-textarea') + expect(queryByCurrentValue('Hello').id).toEqual('content-textarea') + + getByTestId('content').value = 'World' + expect(getByCurrentValue('World').id).toEqual('content-textarea') + expect(queryByCurrentValue('World').id).toEqual('content-textarea') +}) + /* eslint jsx-a11y/label-has-for:0 */ From eb60b8fc6685cfb185319015e07c40db27277e17 Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Mon, 10 Dec 2018 15:08:17 +0900 Subject: [PATCH 06/16] chore: add test for getAllByCurrentValue to throw --- src/__tests__/element-queries.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js index aae81bc9..ba03c7ac 100644 --- a/src/__tests__/element-queries.js +++ b/src/__tests__/element-queries.js @@ -347,6 +347,7 @@ test('getAll* matchers throw for 0 matches', () => { getAllByPlaceholderText, getAllByText, getAllByRole, + getAllByCurrentValue, } = render(`
@@ -361,6 +362,7 @@ test('getAll* matchers throw for 0 matches', () => { expect(() => getAllByPlaceholderText('nope')).toThrow() expect(() => getAllByText('nope')).toThrow() expect(() => getAllByRole('nope')).toThrow() + expect(() => getAllByCurrentValue('nope')).toThrow() }) test('queryAll* matchers return an array for 0 matches', () => { From 4a883282aadff7aca8592e7eaddece99447ba3f0 Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Tue, 11 Dec 2018 10:48:16 +0900 Subject: [PATCH 07/16] chore: rename xxxByCurrentValue -> xxxByDisplayValue --- src/__tests__/element-queries.js | 40 ++++++++++++++++---------------- src/queries.js | 22 +++++++++--------- 2 files changed, 31 insertions(+), 31 deletions(-) diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js index ba03c7ac..aced8176 100644 --- a/src/__tests__/element-queries.js +++ b/src/__tests__/element-queries.js @@ -347,7 +347,7 @@ test('getAll* matchers throw for 0 matches', () => { getAllByPlaceholderText, getAllByText, getAllByRole, - getAllByCurrentValue, + getAllByDisplayValue, } = render(`
@@ -362,7 +362,7 @@ test('getAll* matchers throw for 0 matches', () => { expect(() => getAllByPlaceholderText('nope')).toThrow() expect(() => getAllByText('nope')).toThrow() expect(() => getAllByRole('nope')).toThrow() - expect(() => getAllByCurrentValue('nope')).toThrow() + expect(() => getAllByDisplayValue('nope')).toThrow() }) test('queryAll* matchers return an array for 0 matches', () => { @@ -569,26 +569,26 @@ test('getByText ignores script tags by default', () => { test('get/query input element by current value', () => { const { - getByCurrentValue, - queryByCurrentValue, + getByDisplayValue, + queryByDisplayValue, getByTestId, } = renderIntoDocument(`
`) - expect(getByCurrentValue('Mercury').placeholder).toEqual('name') - expect(queryByCurrentValue('Mercury').placeholder).toEqual('name') + expect(getByDisplayValue('Mercury').placeholder).toEqual('name') + expect(queryByDisplayValue('Mercury').placeholder).toEqual('name') getByTestId('name').value = 'Norris' - expect(getByCurrentValue('Norris').placeholder).toEqual('name') - expect(queryByCurrentValue('Norris').placeholder).toEqual('name') + expect(getByDisplayValue('Norris').placeholder).toEqual('name') + expect(queryByDisplayValue('Norris').placeholder).toEqual('name') }) test('get/query select element by current value', () => { const { - getByCurrentValue, - queryByCurrentValue, + getByDisplayValue, + queryByDisplayValue, getByTestId, } = renderIntoDocument(` `) - expect(getByCurrentValue('Alaska').id).toEqual('state-select') - expect(queryByCurrentValue('Alaska').id).toEqual('state-select') + expect(getByDisplayValue('Alaska').id).toEqual('state-select') + expect(queryByDisplayValue('Alaska').id).toEqual('state-select') getByTestId('state').value = 'AL' - expect(getByCurrentValue('Alabama').id).toEqual('state-select') - expect(queryByCurrentValue('Alabama').id).toEqual('state-select') + expect(getByDisplayValue('Alabama').id).toEqual('state-select') + expect(queryByDisplayValue('Alabama').id).toEqual('state-select') }) test('get/query textarea element by current value', () => { const { - getByCurrentValue, - queryByCurrentValue, + getByDisplayValue, + queryByDisplayValue, getByTestId, } = renderIntoDocument(` `) - expect(getByCurrentValue('Hello').id).toEqual('content-textarea') - expect(queryByCurrentValue('Hello').id).toEqual('content-textarea') + expect(getByDisplayValue('Hello').id).toEqual('content-textarea') + expect(queryByDisplayValue('Hello').id).toEqual('content-textarea') getByTestId('content').value = 'World' - expect(getByCurrentValue('World').id).toEqual('content-textarea') - expect(queryByCurrentValue('World').id).toEqual('content-textarea') + expect(getByDisplayValue('World').id).toEqual('content-textarea') + expect(queryByDisplayValue('World').id).toEqual('content-textarea') }) /* eslint jsx-a11y/label-has-for:0 */ diff --git a/src/queries.js b/src/queries.js index 16120ddf..d9bf7c7d 100644 --- a/src/queries.js +++ b/src/queries.js @@ -180,7 +180,7 @@ function queryByAltText(...args) { return firstResultOrNull(queryAllByAltText, ...args) } -function queryAllByCurrentValue( +function queryAllByDisplayValue( container, value, {exact = true, collapseWhitespace = true, trim = true} = {}, @@ -203,8 +203,8 @@ function queryAllByCurrentValue( ) } -function queryByCurrentValue(...args) { - return firstResultOrNull(queryAllByCurrentValue, ...args) +function queryByDisplayValue(...args) { + return firstResultOrNull(queryAllByDisplayValue, ...args) } // getters @@ -352,8 +352,8 @@ function getBySelectText(...args) { return firstResultOrNull(getAllBySelectText, ...args) } -function getAllByCurrentValue(container, value, ...rest) { - const els = queryAllByCurrentValue(container, value, ...rest) +function getAllByDisplayValue(container, value, ...rest) { + const els = queryAllByDisplayValue(container, value, ...rest) if (!els.length) { throw getElementError( `Unable to find an element with the value: ${value}.`, @@ -363,8 +363,8 @@ function getAllByCurrentValue(container, value, ...rest) { return els } -function getByCurrentValue(...args) { - return firstResultOrNull(getAllByCurrentValue, ...args) +function getByDisplayValue(...args) { + return firstResultOrNull(getAllByDisplayValue, ...args) } export { @@ -400,10 +400,10 @@ export { queryAllByValue, getByValue, getAllByValue, - queryByCurrentValue, - queryAllByCurrentValue, - getByCurrentValue, - getAllByCurrentValue, + queryByDisplayValue, + queryAllByDisplayValue, + getByDisplayValue, + getAllByDisplayValue, queryByRole, queryAllByRole, getAllByRole, From f9412253999e917b7ed09078bf171599669f87b3 Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Tue, 11 Dec 2018 11:25:07 +0900 Subject: [PATCH 08/16] docs: add `getByDisplayValue` --- README.md | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/README.md b/README.md index fd22e28a..c7814aa7 100644 --- a/README.md +++ b/README.md @@ -86,6 +86,7 @@ when a real user uses it. - [`getByAltText`](#getbyalttext) - [`getByTitle`](#getbytitle) - [`getByValue`](#getbyvalue) + - [`getByDisplayValue`](#getbydisplayvalue) - [`getByRole`](#getbyrole) - [`getByTestId`](#getbytestid) - [`wait`](#wait) @@ -409,6 +410,55 @@ Returns the element that has the matching value. const lastNameInput = getByValue('Norris') ``` +### `getByDisplayValue` + +```typescript +getByDisplayValue( + container: HTMLElement, + value: TextMatch, + options?: { + exact?: boolean = true, + collapseWhitespace?: boolean = false, + trim?: boolean = true, + }): HTMLElement +``` + +Returns the element that has the matching display value. + +#### `input` + +```javascript +// +// document.getElementById('lastName').value = 'Norris' + +const lastNameInput = getByDisplayValue('Norris') +``` + +#### `textarea` + +```javascript +// +// document.getElementById('messageTextArea').value = 'Hello World' + +const messageTextArea = getByDisplayValue('Hello World') +``` + +#### `select` + +```javascript +// + +const selectElement = getByDisplayName('Alaska') +console.log(selectElement.id) +``` + +In case of `select`, it gets an element by the display name of its selected option. + ### `getByRole` ```typescript From 0ef11c9cd03f71cfa1d7b3084b42bb0af3d14867 Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Tue, 11 Dec 2018 11:28:00 +0900 Subject: [PATCH 09/16] docs: add `eunjae-lee` as a contributor --- .all-contributorsrc | 9 +++++++++ README.md | 4 ++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 5e2bca49..11163e3b 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -440,6 +440,15 @@ "contributions": [ "code" ] + }, + { + "login": "eunjae-lee", + "name": "Eunjae Lee", + "avatar_url": "https://avatars3.githubusercontent.com/u/499898?v=4", + "profile": "https://twitter.com/eunjae_lee", + "contributions": [ + "code" + ] } ] } diff --git a/README.md b/README.md index c7814aa7..5d1498e3 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ [![downloads][downloads-badge]][npmtrends] [![MIT License][license-badge]][license] -[![All Contributors](https://img.shields.io/badge/all_contributors-44-orange.svg?style=flat-square)](#contributors) +[![All Contributors](https://img.shields.io/badge/all_contributors-45-orange.svg?style=flat-square)](#contributors) [![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc] @@ -1192,7 +1192,7 @@ Thanks goes to these people ([emoji key][emojis]): | [
Jonathan Stoye](http://jonathanstoye.de)
[📖](https://github.com/kentcdodds/dom-testing-library/commits?author=JonathanStoye "Documentation") | [
Sanghyeon Lee](https://github.com/yongdamsh)
[💡](#example-yongdamsh "Examples") | [
Justice Mba ](https://github.com/Dajust)
[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=Dajust "Code") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=Dajust "Documentation") [🤔](#ideas-Dajust "Ideas, Planning, & Feedback") | [
Wayne Crouch](https://github.com/wgcrouch)
[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=wgcrouch "Code") | [
Ben Elliott](http://benjaminelliott.co.uk)
[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=benelliott "Code") | [
Ruben Costa](http://nuances.co)
[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=rubencosta "Code") | [
Robert Smith](http://rbrtsmith.com/)
[🐛](https://github.com/kentcdodds/dom-testing-library/issues?q=author%3Arbrtsmith "Bug reports") [🤔](#ideas-rbrtsmith "Ideas, Planning, & Feedback") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=rbrtsmith "Documentation") | | [
dadamssg](https://github.com/dadamssg)
[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=dadamssg "Code") | [
Neil Kistner](https://neilkistner.com/)
[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=wyze "Code") | [
Ben Chauvette](http://bdchauvette.net/)
[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=bdchauvette "Code") | [
Jeff Baumgardt](https://github.com/JeffBaumgardt)
[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=JeffBaumgardt "Code") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=JeffBaumgardt "Documentation") | [
Matan Kushner](http://matchai.me)
[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=matchai "Code") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=matchai "Documentation") [🤔](#ideas-matchai "Ideas, Planning, & Feedback") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=matchai "Tests") | [
Alex Wendte](http://www.wendtedesigns.com/)
[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=themostcolm "Code") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=themostcolm "Documentation") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=themostcolm "Tests") | [
Tamas Fodor](https://github.com/ruffle1986)
[📖](https://github.com/kentcdodds/dom-testing-library/commits?author=ruffle1986 "Documentation") | | [
Benjamin Eckardt](https://github.com/BenjaminEckardt)
[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=BenjaminEckardt "Code") | [
Ryan Campbell](https://github.com/campbellr)
[📖](https://github.com/kentcdodds/dom-testing-library/commits?author=campbellr "Documentation") | [
Taylor Briggs](https://taylor-briggs.com)
[⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=TaylorBriggs "Tests") | [
John Gozde](https://github.com/jgoz)
[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=jgoz "Code") | [
C. T. Lin](https://github.com/chentsulin)
[📖](https://github.com/kentcdodds/dom-testing-library/commits?author=chentsulin "Documentation") | [
Terrence Wong](http://terrencewwong.com)
[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=terrencewwong "Code") | [
Soo Jae Hwang](https://www.ossfinder.com)
[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=misoguy "Code") | -| [
Royston Shufflebotham](https://github.com/RoystonS)
[🐛](https://github.com/kentcdodds/dom-testing-library/issues?q=author%3ARoystonS "Bug reports") [💻](https://github.com/kentcdodds/dom-testing-library/commits?author=RoystonS "Code") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=RoystonS "Documentation") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=RoystonS "Tests") | [
Vadim Brodsky](http://www.vadimbrodsky.com)
[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=VadimBrodsky "Code") | +| [
Royston Shufflebotham](https://github.com/RoystonS)
[🐛](https://github.com/kentcdodds/dom-testing-library/issues?q=author%3ARoystonS "Bug reports") [💻](https://github.com/kentcdodds/dom-testing-library/commits?author=RoystonS "Code") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=RoystonS "Documentation") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=RoystonS "Tests") | [
Vadim Brodsky](http://www.vadimbrodsky.com)
[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=VadimBrodsky "Code") | [
Eunjae Lee](https://twitter.com/eunjae_lee)
[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=eunjae-lee "Code") | From c960865af18f2ecc81a6770806eef95cc7dd89f7 Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Tue, 11 Dec 2018 15:00:00 +0900 Subject: [PATCH 10/16] docs: remove `getByAltText`, `getByTitle` and `getByValue` --- README.md | 75 ------------------------------------------------------- 1 file changed, 75 deletions(-) diff --git a/README.md b/README.md index 5d1498e3..ab94985c 100644 --- a/README.md +++ b/README.md @@ -83,9 +83,6 @@ when a real user uses it. - [`getByPlaceholderText`](#getbyplaceholdertext) - [`getBySelectText`](#getbyselecttext) - [`getByText`](#getbytext) - - [`getByAltText`](#getbyalttext) - - [`getByTitle`](#getbytitle) - - [`getByValue`](#getbyvalue) - [`getByDisplayValue`](#getbydisplayvalue) - [`getByRole`](#getbyrole) - [`getByTestId`](#getbytestid) @@ -338,78 +335,6 @@ content is in an inline script file, then the script tag could be returned. If you'd rather disable this behavior, set `ignore` to `false`. -### `getByAltText` - -```typescript -getByAltText( - container: HTMLElement, - text: TextMatch, - options?: { - exact?: boolean = true, - collapseWhitespace?: boolean = false, - trim?: boolean = true, - }): HTMLElement -``` - -This will return the element (normally an ``) that has the given `alt` -text. Note that it only supports elements which accept an `alt` attribute: -[``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), -[``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), -and [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area) -(intentionally excluding [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/applet) as it's deprecated). - -```javascript -// Incredibles 2 Poster -const incrediblesPosterImg = getByAltText(container, /incredibles.*poster$/i) -``` - -### `getByTitle` - -```typescript -getByTitle( - container: HTMLElement, - title: TextMatch, - options?: { - exact?: boolean = true, - collapseWhitespace?: boolean = false, - trim?: boolean = true, - }): HTMLElement -``` - -Returns the element that has the matching `title` attribute. - -```javascript -// -const deleteElement = getByTitle(container, 'Delete') -``` - -Will also find a `title` element within an SVG. - -```javascript -// Close -const closeElement = getByTitle(container, 'Close') -``` - -### `getByValue` - -```typescript -getByValue( - container: HTMLElement, - value: TextMatch, - options?: { - exact?: boolean = true, - collapseWhitespace?: boolean = false, - trim?: boolean = true, - }): HTMLElement -``` - -Returns the element that has the matching value. - -```javascript -// -const lastNameInput = getByValue('Norris') -``` - ### `getByDisplayValue` ```typescript From 4d3fe953a3a4d0dd665ec4aa397982b28d183198 Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Tue, 11 Dec 2018 15:00:41 +0900 Subject: [PATCH 11/16] docs: update `getByDisplayValue` --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index ab94985c..b60b9955 100644 --- a/README.md +++ b/README.md @@ -348,7 +348,7 @@ getByDisplayValue( }): HTMLElement ``` -Returns the element that has the matching display value. +Returns the `input`, `textarea`, or `select` element that has the matching display value. #### `input` @@ -356,7 +356,7 @@ Returns the element that has the matching display value. // // document.getElementById('lastName').value = 'Norris' -const lastNameInput = getByDisplayValue('Norris') +const lastNameInput = getByDisplayValue(container, 'Norris') ``` #### `textarea` @@ -365,7 +365,7 @@ const lastNameInput = getByDisplayValue('Norris') // // document.getElementById('messageTextArea').value = 'Hello World' -const messageTextArea = getByDisplayValue('Hello World') +const messageTextArea = getByDisplayValue(container, 'Hello World') ``` #### `select` @@ -378,7 +378,7 @@ const messageTextArea = getByDisplayValue('Hello World') // // -const selectElement = getByDisplayName('Alaska') +const selectElement = getByDisplayName(container, 'Alaska') console.log(selectElement.id) ``` From 661f194d2573203e012de59c9e34fd0a164d9857 Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Wed, 12 Dec 2018 10:46:13 +0900 Subject: [PATCH 12/16] chore: add test for 100% coverage --- src/__tests__/element-queries.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js index aced8176..0f9b2535 100644 --- a/src/__tests__/element-queries.js +++ b/src/__tests__/element-queries.js @@ -583,6 +583,8 @@ test('get/query input element by current value', () => { getByTestId('name').value = 'Norris' expect(getByDisplayValue('Norris').placeholder).toEqual('name') expect(queryByDisplayValue('Norris').placeholder).toEqual('name') + + expect(queryByDisplayValue('Nor', {exact: false}).placeholder).toEqual('name') }) test('get/query select element by current value', () => { From d93ff6a177f2c2267cf2b15f7004bee00b44f5c7 Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Wed, 12 Dec 2018 11:22:24 +0900 Subject: [PATCH 13/16] docs: remove unnecessary `console.log(...)` --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index b60b9955..885b88cb 100644 --- a/README.md +++ b/README.md @@ -379,7 +379,6 @@ const messageTextArea = getByDisplayValue(container, 'Hello World') // const selectElement = getByDisplayName(container, 'Alaska') -console.log(selectElement.id) ``` In case of `select`, it gets an element by the display name of its selected option. From 1d05d51de7920b78fc2746dda314c9b1e222e61d Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Wed, 12 Dec 2018 11:25:38 +0900 Subject: [PATCH 14/16] Revert "docs: remove `getByAltText`, `getByTitle` and `getByValue`" This reverts commit c960865af18f2ecc81a6770806eef95cc7dd89f7. --- README.md | 75 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) diff --git a/README.md b/README.md index 885b88cb..b82b9e38 100644 --- a/README.md +++ b/README.md @@ -83,6 +83,9 @@ when a real user uses it. - [`getByPlaceholderText`](#getbyplaceholdertext) - [`getBySelectText`](#getbyselecttext) - [`getByText`](#getbytext) + - [`getByAltText`](#getbyalttext) + - [`getByTitle`](#getbytitle) + - [`getByValue`](#getbyvalue) - [`getByDisplayValue`](#getbydisplayvalue) - [`getByRole`](#getbyrole) - [`getByTestId`](#getbytestid) @@ -335,6 +338,78 @@ content is in an inline script file, then the script tag could be returned. If you'd rather disable this behavior, set `ignore` to `false`. +### `getByAltText` + +```typescript +getByAltText( + container: HTMLElement, + text: TextMatch, + options?: { + exact?: boolean = true, + collapseWhitespace?: boolean = false, + trim?: boolean = true, + }): HTMLElement +``` + +This will return the element (normally an ``) that has the given `alt` +text. Note that it only supports elements which accept an `alt` attribute: +[``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), +[``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), +and [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area) +(intentionally excluding [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/applet) as it's deprecated). + +```javascript +// Incredibles 2 Poster +const incrediblesPosterImg = getByAltText(container, /incredibles.*poster$/i) +``` + +### `getByTitle` + +```typescript +getByTitle( + container: HTMLElement, + title: TextMatch, + options?: { + exact?: boolean = true, + collapseWhitespace?: boolean = false, + trim?: boolean = true, + }): HTMLElement +``` + +Returns the element that has the matching `title` attribute. + +```javascript +// +const deleteElement = getByTitle(container, 'Delete') +``` + +Will also find a `title` element within an SVG. + +```javascript +// Close +const closeElement = getByTitle(container, 'Close') +``` + +### `getByValue` + +```typescript +getByValue( + container: HTMLElement, + value: TextMatch, + options?: { + exact?: boolean = true, + collapseWhitespace?: boolean = false, + trim?: boolean = true, + }): HTMLElement +``` + +Returns the element that has the matching value. + +```javascript +// +const lastNameInput = getByValue('Norris') +``` + ### `getByDisplayValue` ```typescript From d86856dca4fbfda4a8c5072eea7e1f38ce7733f9 Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Wed, 12 Dec 2018 11:27:28 +0900 Subject: [PATCH 15/16] docs: remove `getBySelectText` and `getByValue` --- README.md | 51 --------------------------------------------------- 1 file changed, 51 deletions(-) diff --git a/README.md b/README.md index b82b9e38..bb0452c6 100644 --- a/README.md +++ b/README.md @@ -81,11 +81,9 @@ when a real user uses it. - [Usage](#usage) - [`getByLabelText`](#getbylabeltext) - [`getByPlaceholderText`](#getbyplaceholdertext) - - [`getBySelectText`](#getbyselecttext) - [`getByText`](#getbytext) - [`getByAltText`](#getbyalttext) - [`getByTitle`](#getbytitle) - - [`getByValue`](#getbyvalue) - [`getByDisplayValue`](#getbydisplayvalue) - [`getByRole`](#getbyrole) - [`getByTestId`](#getbytestid) @@ -276,35 +274,6 @@ const inputNode = getByPlaceholderText(container, 'Username') > NOTE: a placeholder is not a good substitute for a label so you should > generally use `getByLabelText` instead. -### `getBySelectText` - -```typescript -getBySelectText( - container: HTMLElement, - text: TextMatch, - options?: { - exact?: boolean = true, - collapseWhitespace?: boolean = true, - trim?: boolean = true, - }): HTMLElement -``` - -This will search for a `` node in a situation -where the first value acts as a sort of placeholder for the dropdown. - -```javascript -// -const selectNode = getBySelectText(container, 'Day of the Week') -``` - -> Note: It is highly preferred to use `getByLabelText` over this method. This -> method should only be used in the event where there is no label text available. - ### `getByText` ```typescript @@ -390,26 +359,6 @@ Will also find a `title` element within an SVG. const closeElement = getByTitle(container, 'Close') ``` -### `getByValue` - -```typescript -getByValue( - container: HTMLElement, - value: TextMatch, - options?: { - exact?: boolean = true, - collapseWhitespace?: boolean = false, - trim?: boolean = true, - }): HTMLElement -``` - -Returns the element that has the matching value. - -```javascript -// -const lastNameInput = getByValue('Norris') -``` - ### `getByDisplayValue` ```typescript From e5edb4684ce75c087fb339c9a6ed65796ea35608 Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Wed, 12 Dec 2018 11:30:30 +0900 Subject: [PATCH 16/16] docs: update description on `getByDisplayName` --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index bb0452c6..2bbb1b84 100644 --- a/README.md +++ b/README.md @@ -405,7 +405,7 @@ const messageTextArea = getByDisplayValue(container, 'Hello World') const selectElement = getByDisplayName(container, 'Alaska') ``` -In case of `select`, it gets an element by the display name of its selected option. +In case of `select`, this will search for a `