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]