fix(getByLabelText): Support aria-labelledby attr containing multiple ids (#59)

Author: Ruben Costa

.all-contributorsrc

@@ -267,6 +267,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "rubencosta",
+      "name": "Ruben Costa",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/577921?v=4",
+      "profile": "http://nuances.co",
+      "contributions": [
+        "code"
+      ]
     }
   ]
 }

README.md

@@ -16,7 +16,7 @@
 [![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]
 
@@ -873,7 +873,8 @@ Thanks goes to these people ([emoji key][emojis]):
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<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/dom-testing-library/commits?author=antoaravinth "Code") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=antoaravinth "Tests") [📖](https://github.com/kentcdodds/dom-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/dom-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/dom-testing-library/commits?author=lgandecki "Code") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=lgandecki "Tests") [📖](https://github.com/kentcdodds/dom-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/dom-testing-library/issues?q=author%3Asompylasar "Bug reports") [🤔](#ideas-sompylasar "Ideas, Planning, & Feedback") [💻](https://github.com/kentcdodds/dom-testing-library/commits?author=sompylasar "Code") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=sompylasar "Documentation") | [<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/dom-testing-library/commits?author=jday3 "Code") | [<img src="https://avatars0.githubusercontent.com/u/15199?v=4" width="100px;"/><br /><sub><b>Ernesto García</b></sub>](http://gnapse.github.io)<br />[💬](#question-gnapse "Answering Questions") [💻](https://github.com/kentcdodds/dom-testing-library/commits?author=gnapse "Code") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=gnapse "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/2747424?v=4" width="100px;"/><br /><sub><b>Josef Maxx Blake</b></sub>](http://jomaxx.com)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=jomaxx "Code") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=jomaxx "Documentation") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=jomaxx "Tests") |
 | [<img src="https://avatars3.githubusercontent.com/u/725236?v=4" width="100px;"/><br /><sub><b>Alex Cook</b></sub>](https://github.com/alecook)<br />[📖](https://github.com/kentcdodds/dom-testing-library/commits?author=alecook "Documentation") [💡](#example-alecook "Examples") | [<img src="https://avatars3.githubusercontent.com/u/10348212?v=4" width="100px;"/><br /><sub><b>Daniel Cook</b></sub>](https://github.com/dfcook)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=dfcook "Code") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=dfcook "Documentation") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=dfcook "Tests") | [<img src="https://avatars2.githubusercontent.com/u/21194045?s=400&v=4" width="100px;"/><br /><sub><b>Thomas Chia</b></sub>](https://github.com/thchia)<br />[🐛](https://github.com/kentcdodds/dom-testing-library/issues?q=author%3Athchia "Bug reports") [💻](https://github.com/kentcdodds/dom-testing-library/commits?author=thchia "Code") | [<img src="https://avatars1.githubusercontent.com/u/28659384?v=4" width="100px;"/><br /><sub><b>Tim Deschryver</b></sub>](https://github.com/tdeschryver)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=tdeschryver "Code") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=tdeschryver "Tests") | [<img src="https://avatars3.githubusercontent.com/u/1571667?v=4" width="100px;"/><br /><sub><b>Alex Krolick</b></sub>](https://alexkrolick.com)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=alexkrolick "Code") | [<img src="https://avatars2.githubusercontent.com/u/2224291?v=4" width="100px;"/><br /><sub><b>Maddi Joyce</b></sub>](http://www.maddijoyce.com)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=maddijoyce "Code") | [<img src="https://avatars1.githubusercontent.com/u/25429764?v=4" width="100px;"/><br /><sub><b>Peter Kamps</b></sub>](https://github.com/npeterkamps)<br />[🐛](https://github.com/kentcdodds/dom-testing-library/issues?q=author%3Anpeterkamps "Bug reports") [💻](https://github.com/kentcdodds/dom-testing-library/commits?author=npeterkamps "Code") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=npeterkamps "Tests") |
-| [<img src="https://avatars2.githubusercontent.com/u/21689428?v=4" width="100px;"/><br /><sub><b>Jonathan Stoye</b></sub>](http://jonathanstoye.de)<br />[📖](https://github.com/kentcdodds/dom-testing-library/commits?author=JonathanStoye "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/4126644?v=4" width="100px;"/><br /><sub><b>Sanghyeon Lee</b></sub>](https://github.com/yongdamsh)<br />[💡](#example-yongdamsh "Examples") | [<img src="https://avatars3.githubusercontent.com/u/8015514?v=4" width="100px;"/><br /><sub><b>Justice Mba </b></sub>](https://github.com/Dajust)<br />[💻](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") | [<img src="https://avatars3.githubusercontent.com/u/340761?v=4" width="100px;"/><br /><sub><b>Wayne Crouch</b></sub>](https://github.com/wgcrouch)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=wgcrouch "Code") | [<img src="https://avatars1.githubusercontent.com/u/4996462?v=4" width="100px;"/><br /><sub><b>Ben Elliott</b></sub>](http://benjaminelliott.co.uk)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=benelliott "Code") |
+| [<img src="https://avatars2.githubusercontent.com/u/21689428?v=4" width="100px;"/><br /><sub><b>Jonathan Stoye</b></sub>](http://jonathanstoye.de)<br />[📖](https://github.com/kentcdodds/dom-testing-library/commits?author=JonathanStoye "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/4126644?v=4" width="100px;"/><br /><sub><b>Sanghyeon Lee</b></sub>](https://github.com/yongdamsh)<br />[💡](#example-yongdamsh "Examples") | [<img src="https://avatars3.githubusercontent.com/u/8015514?v=4" width="100px;"/><br /><sub><b>Justice Mba </b></sub>](https://github.com/Dajust)<br />[💻](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") | [<img src="https://avatars3.githubusercontent.com/u/340761?v=4" width="100px;"/><br /><sub><b>Wayne Crouch</b></sub>](https://github.com/wgcrouch)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=wgcrouch "Code") | [<img src="https://avatars1.githubusercontent.com/u/4996462?v=4" width="100px;"/><br /><sub><b>Ben Elliott</b></sub>](http://benjaminelliott.co.uk)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=benelliott "Code") | [<img src="https://avatars3.githubusercontent.com/u/577921?v=4" width="100px;"/><br /><sub><b>Ruben Costa</b></sub>](http://nuances.co)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=rubencosta "Code") |
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification.

src/__tests__/element-queries.js

@@ -2,8 +2,8 @@ import 'jest-dom/extend-expect'
 import {render} from './helpers/test-utils'
 
 beforeEach(() => {
-  window.Cypress = null;
-});
+  window.Cypress = null
+})
 
 test('query can return null', () => {
   const {
@@ -82,12 +82,20 @@ test('get can get form controls by label text', () => {
         <label for="fourth.id">4th</label>
         <input id="fourth.id" />
       </div>
+      <div>
+      <div>
+        <label id="fifth-label-one">5th one</label>
+        <label id="fifth-label-two">5th two</label>
+        <input aria-labelledby="fifth-label-one fifth-label-two" id="fifth-id" />
+      </div>
     </div>
   `)
   expect(getByLabelText('1st').id).toBe('first-id')
   expect(getByLabelText('2nd').id).toBe('second-id')
   expect(getByLabelText('3rd').id).toBe('third-id')
   expect(getByLabelText('4th').id).toBe('fourth.id')
+  expect(getByLabelText('5th one').id).toBe('fifth-id')
+  expect(getByLabelText('5th two').id).toBe('fifth-id')
 })
 
 test('get can get form controls by placeholder', () => {
@@ -174,15 +182,15 @@ test('getAll* matchers return an array', () => {
     <div>
       <img
         data-testid="poster"
-        alt="finding nemo poster" 
+        alt="finding nemo poster"
         src="/finding-nemo.png" />
       <img
         data-testid="poster"
-        alt="finding dory poster" 
+        alt="finding dory poster"
         src="/finding-dory.png" />
       <img
         data-testid="poster"
-        alt="jumanji poster" 
+        alt="jumanji poster"
         src="/jumanji.png" />
       <p>Where to next?</p>
       <label for="username">User Name</label>

src/queries.js

@@ -3,9 +3,9 @@ import {getNodeText} from './get-node-text'
 import {prettyDOM} from './pretty-dom'
 
 function debugDOM(htmlElement) {
-  const limit =  process.env.DEBUG_PRINT_LIMIT || 7000
-  const inNode = (typeof module !== 'undefined' && module.exports)
-  const inCypress = (typeof window !== 'undefined' && window.Cypress)
+  const limit = process.env.DEBUG_PRINT_LIMIT || 7000
+  const inNode = typeof module !== 'undefined' && module.exports
+  const inCypress = typeof window !== 'undefined' && window.Cypress
   /* istanbul ignore else */
   if (inCypress) {
     return ''
@@ -66,7 +66,7 @@ function queryAllByLabelText(
       if (label.getAttribute('id')) {
         // <label id="someId">text</label><input aria-labelledby="someId" />
         return container.querySelector(
-          `[aria-labelledby="${label.getAttribute('id')}"]`,
+          `[aria-labelledby~="${label.getAttribute('id')}"]`,
         )
       }
       if (label.childNodes.length) {
@@ -155,7 +155,10 @@ function queryByAltText(...args) {
 function getAllByTestId(container, id, ...rest) {
   const els = queryAllByTestId(container, id, ...rest)
   if (!els.length) {
-    throw getElementError(`Unable to find an element by: [data-testid="${id}"]`, container)
+    throw getElementError(
+      `Unable to find an element by: [data-testid="${id}"]`,
+      container,
+    )
   }
   return els
 }
@@ -167,7 +170,10 @@ function getByTestId(...args) {
 function getAllByTitle(container, title, ...rest) {
   const els = queryAllByTitle(container, title, ...rest)
   if (!els.length) {
-    throw getElementError(`Unable to find an element with the title: ${title}.`, container)
+    throw getElementError(
+      `Unable to find an element with the title: ${title}.`,
+      container,
+    )
   }
   return els
 }
@@ -179,7 +185,10 @@ function getByTitle(...args) {
 function getAllByValue(container, value, ...rest) {
   const els = queryAllByValue(container, value, ...rest)
   if (!els.length) {
-    throw getElementError(`Unable to find an element with the value: ${value}.`, container)
+    throw getElementError(
+      `Unable to find an element with the value: ${value}.`,
+      container,
+    )
   }
   return els
 }
@@ -191,7 +200,10 @@ function getByValue(...args) {
 function getAllByPlaceholderText(container, text, ...rest) {
   const els = queryAllByPlaceholderText(container, text, ...rest)
   if (!els.length) {
-    throw getElementError(`Unable to find an element with the placeholder text of: ${text}`, container)
+    throw getElementError(
+      `Unable to find an element with the placeholder text of: ${text}`,
+      container,
+    )
   }
   return els
 }
@@ -205,9 +217,15 @@ function getAllByLabelText(container, text, ...rest) {
   if (!els.length) {
     const labels = queryAllLabelsByText(container, text, ...rest)
     if (labels.length) {
-      throw getElementError(`Found a label with the text of: ${text}, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.`, container)
+      throw getElementError(
+        `Found a label with the text of: ${text}, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.`,
+        container,
+      )
     } else {
-      throw getElementError(`Unable to find a label with the text of: ${text}`, container)
+      throw getElementError(
+        `Unable to find a label with the text of: ${text}`,
+        container,
+      )
     }
   }
   return els
@@ -220,7 +238,10 @@ function getByLabelText(...args) {
 function getAllByText(container, text, ...rest) {
   const els = queryAllByText(container, text, ...rest)
   if (!els.length) {
-    throw getElementError(`Unable to find an element with the text: ${text}. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.`, container)
+    throw getElementError(
+      `Unable to find an element with the text: ${text}. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.`,
+      container,
+    )
   }
   return els
 }
@@ -232,7 +253,10 @@ function getByText(...args) {
 function getAllByAltText(container, alt, ...rest) {
   const els = queryAllByAltText(container, alt, ...rest)
   if (!els.length) {
-    throw getElementError(`Unable to find an element with the alt text: ${alt}`, container)
+    throw getElementError(
+      `Unable to find an element with the alt text: ${alt}`,
+      container,
+    )
   }
   return els
 }