fix: getByLabelText does not get multiple concatenated labels(#545)

Author: Bianca Del Carretto

src/__tests__/element-queries.js

@@ -185,6 +185,9 @@ test('can get form controls by label text', () => {
   expect(getByLabelText('6th one').id).toBe('sixth-id')
   expect(getByLabelText('6th two').id).toBe('sixth-id')
   expect(getByLabelText('6th three').id).toBe('sixth-id')
+  expect(getByLabelText('6th one 6th two 6th three', {concat: true}).id).toBe(
+    'sixth-id',
+  )
 })
 
 test('can get elements labelled with aria-labelledby attribute', () => {

src/matches.js

@@ -13,14 +13,16 @@ function fuzzyMatches(textToMatch, node, matcher, normalizer) {
   }
 }
 
-function matches(textToMatch, node, matcher, normalizer) {
+function matches(textToMatch, node, matcher, normalizer, concat = false) {
   if (typeof textToMatch !== 'string') {
     return false
   }
 
   const normalizedText = normalizer(textToMatch)
   if (typeof matcher === 'string') {
-    return normalizedText === matcher
+    return concat
+      ? matcher.toLowerCase().includes(normalizedText.toLowerCase())
+      : normalizedText === matcher
   } else if (typeof matcher === 'function') {
     return matcher(normalizedText, node)
   } else {

src/queries/label-text.js

@@ -14,7 +14,7 @@ import {queryAllByText} from './text'
 function queryAllLabelsByText(
   container,
   text,
-  {exact = true, trim, collapseWhitespace, normalizer} = {},
+  {exact = true, trim, collapseWhitespace, normalizer, concat = false} = {},
 ) {
   const matcher = exact ? matches : fuzzyMatches
   const matchNormalizer = makeNormalizer({collapseWhitespace, trim, normalizer})
@@ -36,20 +36,39 @@ function queryAllLabelsByText(
       textToMatch = textToMatch.replace(select.textContent, '')
     })
 
-    return matcher(textToMatch, node, text, matchNormalizer)
+    return matcher(textToMatch, node, text, matchNormalizer, concat)
   })
 }
 
 function queryAllByLabelText(
   container,
   text,
-  {selector = '*', exact = true, collapseWhitespace, trim, normalizer} = {},
+  {
+    selector = '*',
+    exact = true,
+    collapseWhitespace,
+    trim,
+    normalizer,
+    concat = false,
+  } = {},
 ) {
   const matchNormalizer = makeNormalizer({collapseWhitespace, trim, normalizer})
   const labels = queryAllLabelsByText(container, text, {
     exact,
     normalizer: matchNormalizer,
+    concat,
   })
+  if (concat) {
+    const labelsValues = labels.map(label => label.textContent || label.value)
+    if (
+      labelsValues.reduce(
+        (agg, label) => agg.replace(`${label} `, ''),
+        `${text} `,
+      ) !== ''
+    ) {
+      return []
+    }
+  }
   const labelledElements = labels
     .reduce((matchedElements, label) => {
       const elementsForLabel = []