fix(label): support aria-label (#42)

Author: Kent C. Dodds

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 <input aria-label="username" /> 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]):
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-
 <!-- prettier-ignore -->
 | [<img src="https://avatars.githubusercontent.com/u/1500684?v=3" width="100px;"/><br /><sub><b>Kent C. Dodds</b></sub>](https://kentcdodds.com)<br />[💻](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") | [<img src="https://avatars1.githubusercontent.com/u/2430381?v=4" width="100px;"/><br /><sub><b>Ryan Castner</b></sub>](http://audiolion.github.io)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=audiolion "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/8008023?v=4" width="100px;"/><br /><sub><b>Daniel Sandiego</b></sub>](https://www.dnlsandiego.com)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=dnlsandiego "Code") | [<img src="https://avatars2.githubusercontent.com/u/12592677?v=4" width="100px;"/><br /><sub><b>Paweł Mikołajczyk</b></sub>](https://github.com/Miklet)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=Miklet "Code") | [<img src="https://avatars3.githubusercontent.com/u/464978?v=4" width="100px;"/><br /><sub><b>Alejandro Ñáñez Ortiz</b></sub>](http://co.linkedin.com/in/alejandronanez/)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=alejandronanez "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/1402095?v=4" width="100px;"/><br /><sub><b>Matt Parrish</b></sub>](https://github.com/pbomb)<br />[🐛](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") | [<img src="https://avatars1.githubusercontent.com/u/1288694?v=4" width="100px;"/><br /><sub><b>Justin Hall</b></sub>](https://github.com/wKovacs64)<br />[📦](#platform-wKovacs64 "Packaging/porting to new platform") |
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<img src="https://avatars1.githubusercontent.com/u/1241511?s=460&v=4" width="100px;"/><br /><sub><b>Anto Aravinth</b></sub>](https://github.com/antoaravinth)<br />[💻](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") | [<img src="https://avatars2.githubusercontent.com/u/3462296?v=4" width="100px;"/><br /><sub><b>Jonah Moses</b></sub>](https://github.com/JonahMoses)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=JonahMoses "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/4002543?v=4" width="100px;"/><br /><sub><b>Łukasz Gandecki</b></sub>](http://team.thebrain.pro)<br />[💻](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") | [<img src="https://avatars2.githubusercontent.com/u/498274?v=4" width="100px;"/><br /><sub><b>Ivan Babak</b></sub>](https://sompylasar.github.io)<br />[🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Asompylasar "Bug reports") [🤔](#ideas-sompylasar "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/4439618?v=4" width="100px;"/><br /><sub><b>Jesse Day</b></sub>](https://github.com/jday3)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=jday3 "Code") |
-
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification.

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(<input aria-label="batman" />)
+  expect(queryByLabelText('bat')).toBeInTheDOM()
+})
+
 test('get element by its alt text', () => {
   const {getByAltText} = render(
     <div>

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
 }