fix: getByLabelText for output (#789)

Author: marcosvega91

src/__tests__/element-queries.js

@@ -293,7 +293,7 @@ test('returns the labelable element control inside a label', () => {
       <output />
       <progress />
       <select />
-      <textarea />
+      <textarea ></textarea>
     </label>
   `)
 
@@ -558,7 +558,7 @@ test('query/get element by its title', () => {
   expect(getByTitle('Delete').id).toEqual('2')
   expect(queryByTitle('Delete').id).toEqual('2')
   expect(queryByTitle('Del', {exact: false}).id).toEqual('2')
-  expect(queryByTitle("HelloWorld")).toBeNull()
+  expect(queryByTitle('HelloWorld')).toBeNull()
 })
 
 test('query/get title element of SVG', () => {
@@ -1200,3 +1200,32 @@ it('gets form controls by label text on IE and other legacy browsers', () => {
   `)
   expect(getByLabelText('Label text').id).toBe('input-id')
 })
+
+// https://github.com/testing-library/dom-testing-library/issues/787
+it(`get the output element by it's label`, () => {
+  const {getByLabelText, rerender} = renderIntoDocument(`
+    <label>foo
+      <output>bar</output>
+    </label>
+  `)
+  expect(getByLabelText('foo')).toBeInTheDocument()
+
+  rerender(`
+    <label>
+      <small>foo</small>
+      <output>bar</output>
+    </label>
+  `)
+
+  expect(getByLabelText('foo')).toBeInTheDocument()
+})
+
+// https://github.com/testing-library/dom-testing-library/issues/343#issuecomment-555385756
+it(`should get element by it's label when there are elements with same text`, () => {
+  const {getByLabelText} = renderIntoDocument(`
+    <label>test 1
+      <textarea>test</textarea>
+    </label>
+  `)
+  expect(getByLabelText('test 1')).toBeInTheDocument()
+})

src/get-node-text.js

@@ -1,6 +1,4 @@
-// Constant node.nodeType for text nodes, see:
-// https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType#Node_type_constants
-const TEXT_NODE = 3
+const {TEXT_NODE} = require('./helpers')
 
 function getNodeText(node) {
   if (node.matches('input[type=submit], input[type=button]')) {

src/helpers.js

@@ -1,4 +1,7 @@
 const globalObj = typeof window === 'undefined' ? global : window
+// Constant node.nodeType for text nodes, see:
+// https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType#Node_type_constants
+const TEXT_NODE = 3
 
 // Currently this fn only supports jest timers, but it could support other test runners in the future.
 function runWithRealTimers(callback) {
@@ -127,4 +130,5 @@ export {
   runWithRealTimers,
   checkContainerType,
   jestFakeTimersAreEnabled,
+  TEXT_NODE,
 }

src/queries/label-text.js

@@ -1,5 +1,5 @@
 import {getConfig} from '../config'
-import {checkContainerType} from '../helpers'
+import {checkContainerType, TEXT_NODE} from '../helpers'
 import {
   fuzzyMatches,
   matches,
@@ -11,25 +11,20 @@ import {
   wrapSingleQueryWithSuggestion,
 } from './all-utils'
 
+const labelledNodeNames = [
+  'button',
+  'meter',
+  'output',
+  'progress',
+  'select',
+  'textarea',
+  'input',
+]
+
 function queryAllLabels(container) {
   return Array.from(container.querySelectorAll('label,input'))
     .map(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(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(node.querySelectorAll('select')).forEach(select => {
-        textToMatch = textToMatch.replace(select.textContent, '')
-      })
-      return {node, textToMatch}
+      return {node, textToMatch: getLabelContent(node)}
     })
     .filter(({textToMatch}) => textToMatch !== null)
 }
@@ -51,15 +46,26 @@ function queryAllLabelsByText(
     .map(({node}) => node)
 }
 
-function getLabelContent(label) {
-  let labelContent = label.getAttribute('value') || label.textContent
-  Array.from(label.querySelectorAll('textarea')).forEach(textarea => {
-    labelContent = labelContent.replace(textarea.value, '')
-  })
-  Array.from(label.querySelectorAll('select')).forEach(select => {
-    labelContent = labelContent.replace(select.textContent, '')
-  })
-  return labelContent
+function getTextContent(node) {
+  if (labelledNodeNames.includes(node.nodeName.toLowerCase())) {
+    return ''
+  }
+
+  if (node.nodeType === TEXT_NODE) return node.textContent
+
+  return Array.from(node.childNodes)
+    .map(childNode => getTextContent(childNode))
+    .join('')
+}
+
+function getLabelContent(node) {
+  let textContent
+  if (node.tagName.toLowerCase() === 'label') {
+    textContent = getTextContent(node)
+  } else {
+    textContent = node.value || node.textContent
+  }
+  return textContent
 }
 
 function queryAllByLabelText(
@@ -88,8 +94,7 @@ function queryAllByLabelText(
           })
         : Array.from(getLabels(labelledElement)).map(label => {
             const textToMatch = getLabelContent(label)
-            const formControlSelector =
-              'button, input, meter, output, progress, select, textarea'
+            const formControlSelector = labelledNodeNames.join(',')
             const labelledFormControl = Array.from(
               label.querySelectorAll(formControlSelector),
             ).filter(element => element.matches(selector))[0]