From b1ae0bc9dd8dfac8fa6256a5224403f77ad748d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Gandecki?= Date: Sun, 6 May 2018 10:04:14 +0400 Subject: [PATCH 1/2] get/query by value --- README.md | 21 ++++++++++++++++++ .../__snapshots__/element-queries.js.snap | 8 +++++++ src/__tests__/element-queries.js | 17 ++++++++++++++ src/queries.js | 22 +++++++++++++++++++ 4 files changed, 68 insertions(+) diff --git a/README.md b/README.md index 59650138..ca84035d 100644 --- a/README.md +++ b/README.md @@ -77,6 +77,7 @@ when a real user uses it. * [`getByText`](#getbytext) * [`getByAltText`](#getbyalttext) * [`getByTitle`](#getbytitle) + * [`getByValue`](#getbyvalue) * [`getByTestId`](#getbytestid) * [`wait`](#wait) * [`waitForElement`](#waitforelement) @@ -320,6 +321,26 @@ Returns the element that has the matching `title` attribute. const deleteElement = getByTitle(container, 'Delete') ``` +### `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') +``` + ### `getByTestId` ```typescript diff --git a/src/__tests__/__snapshots__/element-queries.js.snap b/src/__tests__/__snapshots__/element-queries.js.snap index 825e4813..d2953868 100644 --- a/src/__tests__/__snapshots__/element-queries.js.snap +++ b/src/__tests__/__snapshots__/element-queries.js.snap @@ -48,6 +48,14 @@ exports[`get throws a useful error message 6`] = ` " `; +exports[`get throws a useful error message 7`] = ` +"Unable to find an element with the value: LucyRicardo. + +
 + 
 +
" +`; + exports[`label with no form control 1`] = ` "Found a label with the text of: /alone/, however no form control was found associated to that label. Make sure you're using the \\"for\\" attribute or \\"aria-labelledby\\" attribute correctly. diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js index 9d30029d..eae34f15 100644 --- a/src/__tests__/element-queries.js +++ b/src/__tests__/element-queries.js @@ -24,6 +24,7 @@ test('get throws a useful error message', () => { getByTestId, getByAltText, getByTitle, + getByValue, } = render('
') expect(() => getByLabelText('LucyRicardo')).toThrowErrorMatchingSnapshot() expect(() => @@ -33,6 +34,7 @@ test('get throws a useful error message', () => { expect(() => getByTestId('LucyRicardo')).toThrowErrorMatchingSnapshot() expect(() => getByAltText('LucyRicardo')).toThrowErrorMatchingSnapshot() expect(() => getByTitle('LucyRicardo')).toThrowErrorMatchingSnapshot() + expect(() => getByValue('LucyRicardo')).toThrowErrorMatchingSnapshot() }) test('can get elements by matching their text content', () => { @@ -132,6 +134,21 @@ test('query/get element by its title', () => { expect(queryByTitle('Delete').id).toEqual('2') }) +test('query/get element by its value', () => { + const {getByValue, queryByValue, getByPlaceholderText} = render(` +
+ + + +
+ `) + + getByPlaceholderText('lastname').setAttribute('value', 'Norris') + + expect(queryByValue('Norris').id).toEqual('lastname') + expect(getByValue('Norris').id).toEqual('lastname') +}) + test('can get elements by data-testid attribute', () => { const {queryByTestId} = render(`
`) expect(queryByTestId('firstName')).toBeInTheDOM() diff --git a/src/queries.js b/src/queries.js index f7b8e806..9f648b73 100644 --- a/src/queries.js +++ b/src/queries.js @@ -112,6 +112,8 @@ const queryByTestId = queryByAttribute.bind(null, 'data-testid') const queryAllByTestId = queryAllByAttribute.bind(null, 'data-testid') const queryByTitle = queryByAttribute.bind(null, 'title') const queryAllByTitle = queryAllByAttribute.bind(null, 'title') +const queryByValue = queryByAttribute.bind(null, 'value') +const queryAllByValue = queryAllByAttribute.bind(null, 'value') function queryAllByAltText( container, @@ -166,6 +168,22 @@ function getByTitle(...args) { return firstResultOrNull(getAllByTitle, ...args) } +function getAllByValue(container, value, ...rest) { + const els = queryAllByValue(container, value, ...rest) + if (!els.length) { + throw new Error( + `Unable to find an element with the value: ${value}. \n\n${debugDOM( + container, + )}`, + ) + } + return els +} + +function getByValue(...args) { + return firstResultOrNull(getAllByValue, ...args) +} + function getAllByPlaceholderText(container, text, ...rest) { const els = queryAllByPlaceholderText(container, text, ...rest) if (!els.length) { @@ -264,6 +282,10 @@ export { queryAllByTitle, getByTitle, getAllByTitle, + queryByValue, + queryAllByValue, + getByValue, + getAllByValue, } /* eslint complexity:["error", 14] */ From e211b1451a0cb6f424f2a7523ea46d4bf37ceb38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Gandecki?= Date: Sun, 6 May 2018 10:39:00 +0400 Subject: [PATCH 2/2] updated test --- src/__tests__/element-queries.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js index eae34f15..d2fea09d 100644 --- a/src/__tests__/element-queries.js +++ b/src/__tests__/element-queries.js @@ -135,18 +135,16 @@ test('query/get element by its title', () => { }) test('query/get element by its value', () => { - const {getByValue, queryByValue, getByPlaceholderText} = render(` + const {getByValue, queryByValue} = render(`
- - - + + +
`) - getByPlaceholderText('lastname').setAttribute('value', 'Norris') - - expect(queryByValue('Norris').id).toEqual('lastname') - expect(getByValue('Norris').id).toEqual('lastname') + expect(queryByValue('Norris').placeholder).toEqual('lastname') + expect(getByValue('Norris').placeholder).toEqual('lastname') }) test('can get elements by data-testid attribute', () => {