From dcfe27d358a906eabbb919dfda65363f8303dbab Mon Sep 17 00:00:00 2001
From: Xavier Garcia Buils <xgbuils@gmail.com>
Date: Sat, 1 Feb 2020 17:06:40 +0100
Subject: [PATCH] fix(ByDisplayValue): improve warning message

---
 src/__tests__/element-queries.js |  4 ++--
 src/__tests__/get-by-errors.js   | 27 +++++++++++++++++++--------
 src/queries/display-value.js     |  4 ++--
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js
index 257d586d..f673b918 100644
--- a/src/__tests__/element-queries.js
+++ b/src/__tests__/element-queries.js
@@ -79,7 +79,7 @@ test('get throws a useful error message', () => {
 `)
   expect(() => getByDisplayValue('LucyRicardo'))
     .toThrowErrorMatchingInlineSnapshot(`
-"Unable to find an element with the value: LucyRicardo.
+"Unable to find an element with the display value: LucyRicardo.
 
 <div>
   <div />
@@ -745,7 +745,7 @@ test('get throws a useful error message without DOM in Cypress', () => {
   expect(() =>
     getByDisplayValue('LucyRicardo'),
   ).toThrowErrorMatchingInlineSnapshot(
-    `"Unable to find an element with the value: LucyRicardo."`,
+    `"Unable to find an element with the display value: LucyRicardo."`,
   )
 })
 
diff --git a/src/__tests__/get-by-errors.js b/src/__tests__/get-by-errors.js
index 335ccef5..6069caec 100644
--- a/src/__tests__/get-by-errors.js
+++ b/src/__tests__/get-by-errors.js
@@ -28,10 +28,6 @@ cases(
       query: /his/,
       html: `<div title="his"></div><div title="history"></div>`,
     },
-    getByDisplayValue: {
-      query: /his/,
-      html: `<input value="his" /><select><option value="history">history</option></select>`,
-    },
     getByRole: {
       query: /his/,
       html: `<div role="his"></div><div role="history"></div>`,
@@ -70,10 +66,6 @@ cases(
       query: /his/,
       html: `<div title="his"></div><div title="history"></div>`,
     },
-    queryByDisplayValue: {
-      query: /his/,
-      html: `<input value="his" /><select><option value="history">history</option></select>`,
-    },
     queryByRole: {
       query: /his/,
       html: `<div role="his"></div><div role="history"></div>`,
@@ -84,3 +76,22 @@ cases(
     },
   },
 )
+
+describe('*ByDisplayValue queries throw an error when there are multiple elements returned', () => {
+  test('getByDisplayValue', () => {
+    const {getByDisplayValue} = render(
+      `<input value="his" /><select><option value="history">history</option></select>`,
+    )
+    expect(() => getByDisplayValue(/his/)).toThrow(
+      /multiple elements with the display value:/i,
+    )
+  })
+  test('queryByDisplayValue', () => {
+    const {queryByDisplayValue} = render(
+      `<input value="his" /><select><option value="history">history</option></select>`,
+    )
+    expect(() => queryByDisplayValue(/his/)).toThrow(
+      /multiple elements with the display value:/i,
+    )
+  })
+})
diff --git a/src/queries/display-value.js b/src/queries/display-value.js
index 01a95a96..d53df31a 100644
--- a/src/queries/display-value.js
+++ b/src/queries/display-value.js
@@ -30,9 +30,9 @@ function queryAllByDisplayValue(
 }
 
 const getMultipleError = (c, value) =>
-  `Found multiple elements with the value: ${value}.`
+  `Found multiple elements with the display value: ${value}.`
 const getMissingError = (c, value) =>
-  `Unable to find an element with the value: ${value}.`
+  `Unable to find an element with the display value: ${value}.`
 const [
   queryByDisplayValue,
   getAllByDisplayValue,