fix(ByDisplayValue): improve warning message (#443)

Author: xgbuils

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."`,
   )
 })
 

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,
+    )
+  })
+})

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,