fix: getByLabelText ignores input labels (#545)

Author: Bianca Del Carretto

src/__tests__/element-queries.js

@@ -168,6 +168,12 @@ test('can get form controls by label text', () => {
         <label id="fifth-label-two">5th two</label>
         <input aria-labelledby="fifth-label-one fifth-label-two" id="fifth-id" />
       </div>
+      <div>
+        <label id="sixth-label-one">6th one</label>
+        <label id="sixth-label-two">6th two</label>
+        <input id="sixth-label-three" type="text" value="6th three"/>
+        <input aria-labelledby="sixth-label-one sixth-label-two sixth-label-three" id="sixth-id" />
+      </div>
     </div>
   `)
   expect(getByLabelText('1st').id).toBe('first-id')
@@ -176,6 +182,9 @@ test('can get form controls by label text', () => {
   expect(getByLabelText('4th').id).toBe('fourth.id')
   expect(getByLabelText('5th one').id).toBe('fifth-id')
   expect(getByLabelText('5th two').id).toBe('fifth-id')
+  expect(getByLabelText('6th one').id).toBe('sixth-id')
+  expect(getByLabelText('6th two').id).toBe('sixth-id')
+  expect(getByLabelText('6th three').id).toBe('sixth-id')
 })
 
 test('can get elements labelled with aria-labelledby attribute', () => {

src/queries/label-text.js

@@ -18,22 +18,25 @@ function queryAllLabelsByText(
 ) {
   const matcher = exact ? matches : fuzzyMatches
   const matchNormalizer = makeNormalizer({collapseWhitespace, trim, normalizer})
-  return Array.from(container.querySelectorAll('label')).filter(label => {
-    let textToMatch = label.textContent
+  return Array.from(container.querySelectorAll('label,input')).filter(node => {
+    let textToMatch =
+      node.tagName.toLowerCase() === 'label'
+        ? node.textContent
+        : node.value || null
 
     // The children of a textarea are part of `textContent` as well. We
     // need to remove them from the string so we can match it afterwards.
-    Array.from(label.querySelectorAll('textarea')).forEach(textarea => {
+    Array.from(node.querySelectorAll('textarea')).forEach(textarea => {
       textToMatch = textToMatch.replace(textarea.value, '')
     })
 
     // The children of a select are also part of `textContent`, so we
     // need also to remove their text.
-    Array.from(label.querySelectorAll('select')).forEach(select => {
+    Array.from(node.querySelectorAll('select')).forEach(select => {
       textToMatch = textToMatch.replace(select.textContent, '')
     })
 
-    return matcher(textToMatch, label, text, matchNormalizer)
+    return matcher(textToMatch, node, text, matchNormalizer)
   })
 }