fix: use the first label for LabelText query suggestions (#672)

* test: add failing test

* fix: add quotes between selector

* refactor: get first id from aria-labelledby

Closes testing-library/testing-playground#214

Author: marcosvega91

src/__tests__/suggestions.js

@@ -485,3 +485,26 @@ test('getSuggestedQuery does not create suggestions for script and style element
   expect(getSuggestedQuery(script, 'get', 'TestId')).toBeUndefined()
   expect(getSuggestedQuery(style, 'get', 'TestId')).toBeUndefined()
 })
+
+// this is only a temporary fix. The problem is that at the moment @testing-library/dom
+// not support label concatenation
+// see https://github.com/testing-library/dom-testing-library/issues/545
+test('should get the first label with aria-labelledby contains multiple ids', () => {
+  const {container} = renderIntoDocument(`
+    <div id="one">One</div>
+    <div id="two">One</div>
+    <input
+      type="text"
+      aria-labelledby="one two"
+    />
+  `)
+
+  expect(
+    getSuggestedQuery(container.querySelector('input'), 'get', 'labelText'),
+  ).toMatchObject({
+    queryName: 'LabelText',
+    queryMethod: 'getByLabelText',
+    queryArgs: [/one/i],
+    variant: 'get',
+  })
+})

src/suggestions.js

@@ -15,9 +15,13 @@ function getLabelTextFor(element) {
   if (!label) {
     const ariaLabelledBy = element.getAttribute('aria-labelledby')
     if (ariaLabelledBy) {
+      // this is only a temporary fix. The problem is that at the moment @testing-library/dom
+      // not support label concatenation
+      // see https://github.com/testing-library/dom-testing-library/issues/545
+      const firstId = ariaLabelledBy.split(' ')[0]
       // we're using this notation because with the # selector we would have to escape special characters e.g. user.name
       // see https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#Escaping_special_characters
-      label = document.querySelector(`[id=${ariaLabelledBy}]`)
+      label = document.querySelector(`[id="${firstId}"]`)
     }
   }