From 715b11198467cf3a66267326a57eb66239ebb883 Mon Sep 17 00:00:00 2001
From: marcosvega91 <marcomoretti0103@gmail.com>
Date: Thu, 25 Jun 2020 08:05:10 +0200
Subject: [PATCH 1/3] test: add failing test

---
 src/__tests__/suggestions.js | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/__tests__/suggestions.js b/src/__tests__/suggestions.js
index 75c9ae56..24262423 100644
--- a/src/__tests__/suggestions.js
+++ b/src/__tests__/suggestions.js
@@ -485,3 +485,29 @@ test('getSuggestedQuery does not create suggestions for script and style element
   expect(getSuggestedQuery(script, 'get', 'TestId')).toBeUndefined()
   expect(getSuggestedQuery(style, 'get', 'TestId')).toBeUndefined()
 })
+
+test('should not thrown when getting query byLabelText if ID has special chars or spaces', () => {
+  const {container, rerender} = renderIntoDocument(`
+    <div id="not usual id">One</div>
+    <input
+      type="text"
+      aria-labelledby="not usual id"
+    />
+  `)
+
+  expect(() =>
+    getSuggestedQuery(container.querySelector('input'), 'get', 'labelText'),
+  ).not.toThrow()
+
+  rerender(`
+    <div id="why you need to use \\/|"£$ ?">One</div>
+    <input
+      type="text"
+      aria-labelledby="why you need to use \\/|"£$ ?"
+    />
+  `)
+
+  expect(() =>
+    getSuggestedQuery(container.querySelector('input'), 'get', 'labelText'),
+  ).not.toThrow()
+})

From ddca9c23749391d0ed87ba8c6aab6f1c4e3bcd15 Mon Sep 17 00:00:00 2001
From: marcosvega91 <marcomoretti0103@gmail.com>
Date: Thu, 25 Jun 2020 08:07:25 +0200
Subject: [PATCH 2/3] fix: add quotes between selector

---
 src/suggestions.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/suggestions.js b/src/suggestions.js
index 3e93fa5a..c2cba27b 100644
--- a/src/suggestions.js
+++ b/src/suggestions.js
@@ -17,7 +17,7 @@ function getLabelTextFor(element) {
     if (ariaLabelledBy) {
       // 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="${ariaLabelledBy}"]`)
     }
   }
 

From 70a3048baf220b6e1727696aec5661630d12e2b9 Mon Sep 17 00:00:00 2001
From: marcosvega91 <marcomoretti0103@gmail.com>
Date: Thu, 25 Jun 2020 12:26:29 +0200
Subject: [PATCH 3/3] refactor: get first id from aria-labelledby

---
 src/__tests__/suggestions.js | 33 +++++++++++++++------------------
 src/suggestions.js           |  6 +++++-
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/__tests__/suggestions.js b/src/__tests__/suggestions.js
index 24262423..fc871ce8 100644
--- a/src/__tests__/suggestions.js
+++ b/src/__tests__/suggestions.js
@@ -486,28 +486,25 @@ test('getSuggestedQuery does not create suggestions for script and style element
   expect(getSuggestedQuery(style, 'get', 'TestId')).toBeUndefined()
 })
 
-test('should not thrown when getting query byLabelText if ID has special chars or spaces', () => {
-  const {container, rerender} = renderIntoDocument(`
-    <div id="not usual id">One</div>
+// 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="not usual id"
+      aria-labelledby="one two"
     />
   `)
 
-  expect(() =>
+  expect(
     getSuggestedQuery(container.querySelector('input'), 'get', 'labelText'),
-  ).not.toThrow()
-
-  rerender(`
-    <div id="why you need to use \\/|"£$ ?">One</div>
-    <input
-      type="text"
-      aria-labelledby="why you need to use \\/|"£$ ?"
-    />
-  `)
-
-  expect(() =>
-    getSuggestedQuery(container.querySelector('input'), 'get', 'labelText'),
-  ).not.toThrow()
+  ).toMatchObject({
+    queryName: 'LabelText',
+    queryMethod: 'getByLabelText',
+    queryArgs: [/one/i],
+    variant: 'get',
+  })
 })
diff --git a/src/suggestions.js b/src/suggestions.js
index c2cba27b..730cb9e0 100644
--- a/src/suggestions.js
+++ b/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}"]`)
     }
   }