diff --git a/README.md b/README.md index 8d67bcde..5d25e52b 100644 --- a/README.md +++ b/README.md @@ -197,6 +197,9 @@ const inputNode = getByLabelText('Username') // For this case, you can provide a `selector` in the options: const inputNode = getByLabelText('username', {selector: 'input'}) // and that would work +// Note that will also work, but take +// care because this is not a label that users can see on the page. So +// the purpose of your input should be obvious for those users. ``` > Note: This method will throw an error if it cannot find the node. If you don't @@ -712,12 +715,10 @@ light-weight, simple, and understandable. Thanks goes to these people ([emoji key][emojis]): - | [
Kent C. Dodds](https://kentcdodds.com)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Code") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Documentation") [๐Ÿš‡](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Tests") | [
Ryan Castner](http://audiolion.github.io)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=audiolion "Documentation") | [
Daniel Sandiego](https://www.dnlsandiego.com)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=dnlsandiego "Code") | [
Paweล‚ Mikoล‚ajczyk](https://github.com/Miklet)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=Miklet "Code") | [
Alejandro ร‘รกรฑez Ortiz](http://co.linkedin.com/in/alejandronanez/)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=alejandronanez "Documentation") | [
Matt Parrish](https://github.com/pbomb)
[๐Ÿ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Apbomb "Bug reports") [๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Code") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Documentation") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Tests") | [
Justin Hall](https://github.com/wKovacs64)
[๐Ÿ“ฆ](#platform-wKovacs64 "Packaging/porting to new platform") | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | | [
Anto Aravinth](https://github.com/antoaravinth)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Code") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Tests") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Documentation") | [
Jonah Moses](https://github.com/JonahMoses)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=JonahMoses "Documentation") | [
ลukasz Gandecki](http://team.thebrain.pro)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Code") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Tests") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Documentation") | [
Ivan Babak](https://sompylasar.github.io)
[๐Ÿ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Asompylasar "Bug reports") [๐Ÿค”](#ideas-sompylasar "Ideas, Planning, & Feedback") | [
Jesse Day](https://github.com/jday3)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=jday3 "Code") | - This project follows the [all-contributors][all-contributors] specification. diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js index 43326413..f8fd4830 100644 --- a/src/__tests__/element-queries.js +++ b/src/__tests__/element-queries.js @@ -74,6 +74,12 @@ test('totally empty label', () => { expect(() => getByLabelText('')).toThrowErrorMatchingSnapshot() }) +test('getByLabelText with aria-label', () => { + // not recommended normally, but supported for completeness + const {queryByLabelText} = render() + expect(queryByLabelText('bat')).toBeInTheDOM() +}) + test('get element by its alt text', () => { const {getByAltText} = render(
diff --git a/src/queries.js b/src/queries.js index 0f218add..237f39e9 100644 --- a/src/queries.js +++ b/src/queries.js @@ -15,7 +15,7 @@ function queryLabelByText(container, text) { function queryByLabelText(container, text, {selector = '*'} = {}) { const label = queryLabelByText(container, text) if (!label) { - return null + return queryByAttribute('aria-label', container, text) } /* istanbul ignore if */ if (label.control) { @@ -46,22 +46,21 @@ function queryByText(container, text, {selector = '*'} = {}) { ) } -function queryByPlaceholderText(container, text) { +// this is just a utility and not an exposed query. +// There are no plans to expose this. +function queryByAttribute(attribute, container, text) { return ( - Array.from(container.querySelectorAll('[placeholder]')).find(node => - matches(node.getAttribute('placeholder'), node, text), + Array.from(container.querySelectorAll(`[${attribute}]`)).find(node => + matches(node.getAttribute(attribute), node, text), ) || null ) } -function queryByTestId(container, id) { - return container.querySelector(getDataTestIdSelector(id)) -} - -function getDataTestIdSelector(id) { - return `[data-testid="${id}"]` -} +const queryByPlaceholderText = queryByAttribute.bind(null, 'placeholder') +const queryByTestId = queryByAttribute.bind(null, 'data-testid') +// this is just a utility and not an exposed query. +// There are no plans to expose this. function getText(node) { return Array.from(node.childNodes) .filter( @@ -79,9 +78,7 @@ function getText(node) { function getByTestId(container, id, ...rest) { const el = queryByTestId(container, id, ...rest) if (!el) { - throw new Error( - `Unable to find an element by: ${getDataTestIdSelector(id)}`, - ) + throw new Error(`Unable to find an element by: [data-testid="${id}"]`) } return el }