fix: remove deprecated queries (#228)

Closes #223

BREAKING CHANGE: This removes the deprecated queries `ByValue` and `BySelectText`. Use `ByDisplayValue` instead.

Author: Kent C. Dodds

src/__tests__/element-queries.js

@@ -8,15 +8,15 @@ beforeEach(() => {
 test('query can return null', () => {
   const {
     queryByLabelText,
-    queryBySelectText,
+    queryByDisplayValue,
     queryByPlaceholderText,
     queryByText,
     queryByTestId,
     queryByAltText,
   } = render('<div />')
   expect(queryByTestId('LucyRicardo')).toBeNull()
   expect(queryByLabelText('LucyRicardo')).toBeNull()
-  expect(queryBySelectText('LucyRicardo')).toBeNull()
+  expect(queryByDisplayValue('LucyRicardo')).toBeNull()
   expect(queryByPlaceholderText('LucyRicardo')).toBeNull()
   expect(queryByText('LucyRicardo')).toBeNull()
   expect(queryByAltText('LucyRicardo')).toBeNull()
@@ -25,27 +25,18 @@ test('query can return null', () => {
 test('get throws a useful error message', () => {
   const {
     getByLabelText,
-    getBySelectText,
+    getByDisplayValue,
     getByPlaceholderText,
     getByText,
     getByTestId,
     getByAltText,
     getByTitle,
-    getByValue,
     getByRole,
   } = render('<div />')
   expect(() => getByLabelText('LucyRicardo'))
     .toThrowErrorMatchingInlineSnapshot(`
 "Unable to find a label with the text of: LucyRicardo
 
-<div>
-  <div />
-</div>"
-`)
-  expect(() => getBySelectText('LucyRicardo'))
-    .toThrowErrorMatchingInlineSnapshot(`
-"Unable to find a <select> element with the selected option's text: LucyRicardo
-
 <div>
   <div />
 </div>"
@@ -86,7 +77,8 @@ test('get throws a useful error message', () => {
   <div />
 </div>"
 `)
-  expect(() => getByValue('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`
+  expect(() => getByDisplayValue('LucyRicardo'))
+    .toThrowErrorMatchingInlineSnapshot(`
 "Unable to find an element with the value: LucyRicardo.
 
 <div>
@@ -285,20 +277,20 @@ test('query/get title element of SVG', () => {
 })
 
 test('query/get element by its value', () => {
-  const {getByValue, queryByValue} = render(`
+  const {getByDisplayValue, queryByDisplayValue} = render(`
   <div>
     <input placeholder="name" type="text"/>
     <input placeholder="lastname" type="text" value="Norris"/>
     <input placeholder="email" type="text"/>
   </div>
   `)
 
-  expect(getByValue('Norris').placeholder).toEqual('lastname')
-  expect(queryByValue('Norris').placeholder).toEqual('lastname')
+  expect(getByDisplayValue('Norris').placeholder).toEqual('lastname')
+  expect(queryByDisplayValue('Norris').placeholder).toEqual('lastname')
 })
 
 test('query/get select by text with the default option selected', () => {
-  const {getBySelectText, queryBySelectText} = render(`
+  const {getByDisplayValue, queryByDisplayValue} = render(`
   <select id="state-select">
     <option value="">State</option>
     <option value="AL">Alabama</option>
@@ -307,12 +299,12 @@ test('query/get select by text with the default option selected', () => {
   </select>
   `)
 
-  expect(getBySelectText('State').id).toEqual('state-select')
-  expect(queryBySelectText('State').id).toEqual('state-select')
+  expect(getByDisplayValue('State').id).toEqual('state-select')
+  expect(queryByDisplayValue('State').id).toEqual('state-select')
 })
 
 test('query/get select by text with one option selected', () => {
-  const {getBySelectText, queryBySelectText} = render(`
+  const {getByDisplayValue, queryByDisplayValue} = render(`
   <select id="state-select">
     <option value="">State</option>
     <option value="AL">Alabama</option>
@@ -321,12 +313,12 @@ test('query/get select by text with one option selected', () => {
   </select>
   `)
 
-  expect(getBySelectText('Alaska').id).toEqual('state-select')
-  expect(queryBySelectText('Alaska').id).toEqual('state-select')
+  expect(getByDisplayValue('Alaska').id).toEqual('state-select')
+  expect(queryByDisplayValue('Alaska').id).toEqual('state-select')
 })
 
 test('query/get select by text with multiple options selected', () => {
-  const {getBySelectText, queryBySelectText} = render(`
+  const {getByDisplayValue, queryByDisplayValue} = render(`
   <select multiple id="state-select">
     <option value="">State</option>
     <option selected value="AL">Alabama</option>
@@ -335,8 +327,8 @@ test('query/get select by text with multiple options selected', () => {
   </select>
   `)
 
-  expect(getBySelectText('Alabama').id).toEqual('state-select')
-  expect(queryBySelectText('Alaska').id).toEqual('state-select')
+  expect(getByDisplayValue('Alabama').id).toEqual('state-select')
+  expect(queryByDisplayValue('Alaska').id).toEqual('state-select')
 })
 
 describe('query by test id', () => {
@@ -374,7 +366,7 @@ test('getAll* matchers return an array', () => {
     getAllByAltText,
     getAllByTestId,
     getAllByLabelText,
-    getAllBySelectText,
+    getAllByDisplayValue,
     getAllByPlaceholderText,
     getAllByText,
     getAllByRole,
@@ -412,8 +404,8 @@ test('getAll* matchers return an array', () => {
   expect(getAllByTestId('poster')).toHaveLength(3)
   expect(getAllByPlaceholderText(/The Rock/)).toHaveLength(1)
   expect(getAllByLabelText('User Name')).toHaveLength(1)
-  expect(getAllBySelectText('Japanese cars')).toHaveLength(1)
-  expect(getAllBySelectText(/cars$/)).toHaveLength(2)
+  expect(getAllByDisplayValue('Japanese cars')).toHaveLength(1)
+  expect(getAllByDisplayValue(/cars$/)).toHaveLength(2)
   expect(getAllByText(/^where/i)).toHaveLength(1)
   expect(getAllByRole(/container/i)).toHaveLength(1)
 })
@@ -423,11 +415,10 @@ test('getAll* matchers throw for 0 matches', () => {
     getAllByAltText,
     getAllByTestId,
     getAllByLabelText,
-    getAllBySelectText,
+    getAllByDisplayValue,
     getAllByPlaceholderText,
     getAllByText,
     getAllByRole,
-    getAllByDisplayValue,
   } = render(`
     <div role="container">
       <label>No Matches Please</label>
@@ -438,7 +429,7 @@ test('getAll* matchers throw for 0 matches', () => {
   expect(() => getAllByAltText('nope')).toThrow()
   expect(() => getAllByLabelText('nope')).toThrow()
   expect(() => getAllByLabelText('no matches please')).toThrow()
-  expect(() => getAllBySelectText('nope')).toThrow()
+  expect(() => getAllByDisplayValue('nope')).toThrow()
   expect(() => getAllByPlaceholderText('nope')).toThrow()
   expect(() => getAllByText('nope')).toThrow()
   expect(() => getAllByRole('nope')).toThrow()
@@ -450,7 +441,7 @@ test('queryAll* matchers return an array for 0 matches', () => {
     queryAllByAltText,
     queryAllByTestId,
     queryAllByLabelText,
-    queryAllBySelectText,
+    queryAllByDisplayValue,
     queryAllByPlaceholderText,
     queryAllByText,
     queryAllByRole,
@@ -461,7 +452,7 @@ test('queryAll* matchers return an array for 0 matches', () => {
   expect(queryAllByTestId('nope')).toHaveLength(0)
   expect(queryAllByAltText('nope')).toHaveLength(0)
   expect(queryAllByLabelText('nope')).toHaveLength(0)
-  expect(queryAllBySelectText('nope')).toHaveLength(0)
+  expect(queryAllByDisplayValue('nope')).toHaveLength(0)
   expect(queryAllByPlaceholderText('nope')).toHaveLength(0)
   expect(queryAllByText('nope')).toHaveLength(0)
   expect(queryAllByRole('nope')).toHaveLength(0)
@@ -629,24 +620,18 @@ test('get throws a useful error message without DOM in Cypress', () => {
   document.defaultView.Cypress = {}
   const {
     getByLabelText,
-    getBySelectText,
     getByPlaceholderText,
     getByText,
     getByTestId,
     getByAltText,
     getByTitle,
-    getByValue,
+    getByDisplayValue,
   } = render('<div />')
   expect(() =>
     getByLabelText('LucyRicardo'),
   ).toThrowErrorMatchingInlineSnapshot(
     `"Unable to find a label with the text of: LucyRicardo"`,
   )
-  expect(() =>
-    getBySelectText('LucyRicardo'),
-  ).toThrowErrorMatchingInlineSnapshot(
-    `"Unable to find a <select> element with the selected option's text: LucyRicardo"`,
-  )
   expect(() =>
     getByPlaceholderText('LucyRicardo'),
   ).toThrowErrorMatchingInlineSnapshot(
@@ -664,7 +649,9 @@ test('get throws a useful error message without DOM in Cypress', () => {
   expect(() => getByTitle('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(
     `"Unable to find an element with the title: LucyRicardo."`,
   )
-  expect(() => getByValue('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(
+  expect(() =>
+    getByDisplayValue('LucyRicardo'),
+  ).toThrowErrorMatchingInlineSnapshot(
     `"Unable to find an element with the value: LucyRicardo."`,
   )
 })

src/__tests__/text-matchers.js

@@ -39,14 +39,14 @@ cases(
       query: `Dwayne 'The Rock' Johnson`,
       queryFn: `queryAllByPlaceholderText`,
     },
-    queryAllBySelectText: {
+    'queryAllByDisplayValue (for select)': {
       dom: `
       <select>
         <option>Option 1</option>
         <option>Option 2</option>
       </select>`,
       query: `Option 1`,
-      queryFn: `queryAllBySelectText`,
+      queryFn: `queryAllByDisplayValue`,
     },
     queryAllByText: {
       dom: `<p>Some content</p>`,
@@ -99,14 +99,14 @@ cases(
       query: /^Dwayne/,
       queryFn: `queryAllByPlaceholderText`,
     },
-    queryAllBySelectText: {
+    'queryAllByDisplayValue (for select)': {
       dom: `
       <select>
         <option>  Option 1  </option>
         <option>Option 2</option>
       </select>`,
       query: `Option 1`,
-      queryFn: `queryAllBySelectText`,
+      queryFn: `queryAllByDisplayValue`,
     },
     queryAllByText: {
       dom: `
@@ -161,14 +161,14 @@ cases(
       query: `Dwayne 'The Rock' Johnson`,
       queryFn: `queryAllByPlaceholderText`,
     },
-    queryAllBySelectText: {
+    'queryAllByDisplayValue (for select)': {
       dom: `
       <select>
         <option>Option 1</option>
         <option>Option 2</option>
       </select>`,
       query: `Option 1`,
-      queryFn: `queryAllBySelectText`,
+      queryFn: `queryAllByDisplayValue`,
     },
     queryAllByLabelText: {
       dom: `
@@ -235,9 +235,9 @@ cases(
       dom: `<input placeholder="User ${LRM}name" />`,
       queryFn: 'queryAllByPlaceholderText',
     },
-    queryAllBySelectText: {
+    'queryAllByDisplayValue (for select)': {
       dom: `<select><option>User ${LRM}name</option></select>`,
-      queryFn: 'queryAllBySelectText',
+      queryFn: 'queryAllByDisplayValue',
     },
     queryAllByText: {
       dom: `<div>User ${LRM}name</div>`,
@@ -251,10 +251,6 @@ cases(
       dom: `<div title="User ${LRM}name" />`,
       queryFn: 'queryAllByTitle',
     },
-    queryAllByValue: {
-      dom: `<input value="User ${LRM}name" />`,
-      queryFn: 'queryAllByValue',
-    },
     queryAllByDisplayValue: {
       dom: `<input value="User ${LRM}name" />`,
       queryFn: 'queryAllByDisplayValue',

src/queries.js

@@ -137,27 +137,6 @@ function queryByTitle(...args) {
   return firstResultOrNull(queryAllByTitle, ...args)
 }
 
-function queryAllBySelectText(
-  container,
-  text,
-  {exact = true, collapseWhitespace, trim, normalizer} = {},
-) {
-  const matcher = exact ? matches : fuzzyMatches
-  const matchNormalizer = makeNormalizer({collapseWhitespace, trim, normalizer})
-  return Array.from(container.querySelectorAll('select')).filter(selectNode => {
-    const selectedOptions = Array.from(selectNode.options).filter(
-      option => option.selected,
-    )
-    return selectedOptions.some(optionNode =>
-      matcher(getNodeText(optionNode), optionNode, text, matchNormalizer),
-    )
-  })
-}
-
-function queryBySelectText(...args) {
-  return firstResultOrNull(queryAllBySelectText, ...args)
-}
-
 function getTestIdAttribute() {
   return getConfig().testIdAttribute
 }
@@ -168,8 +147,6 @@ const queryByTestId = (...args) =>
   queryByAttribute(getTestIdAttribute(), ...args)
 const queryAllByTestId = (...args) =>
   queryAllByAttribute(getTestIdAttribute(), ...args)
-const queryByValue = queryByAttribute.bind(null, 'value')
-const queryAllByValue = queryAllByAttribute.bind(null, 'value')
 const queryByRole = queryByAttribute.bind(null, 'role')
 const queryAllByRole = queryAllByAttribute.bind(null, 'role')
 
@@ -251,21 +228,6 @@ function getByTitle(...args) {
   return firstResultOrNull(getAllByTitle, ...args)
 }
 
-function getAllByValue(container, value, ...rest) {
-  const els = queryAllByValue(container, value, ...rest)
-  if (!els.length) {
-    throw getElementError(
-      `Unable to find an element with the value: ${value}.`,
-      container,
-    )
-  }
-  return els
-}
-
-function getByValue(...args) {
-  return firstResultOrNull(getAllByValue, ...args)
-}
-
 function getAllByPlaceholderText(container, text, ...rest) {
   const els = queryAllByPlaceholderText(container, text, ...rest)
   if (!els.length) {
@@ -346,21 +308,6 @@ function getByRole(...args) {
   return firstResultOrNull(getAllByRole, ...args)
 }
 
-function getAllBySelectText(container, text, ...rest) {
-  const els = queryAllBySelectText(container, text, ...rest)
-  if (!els.length) {
-    throw getElementError(
-      `Unable to find a <select> element with the selected option's text: ${text}`,
-      container,
-    )
-  }
-  return els
-}
-
-function getBySelectText(...args) {
-  return firstResultOrNull(getAllBySelectText, ...args)
-}
-
 function getAllByDisplayValue(container, value, ...rest) {
   const els = queryAllByDisplayValue(container, value, ...rest)
   if (!els.length) {
@@ -425,10 +372,6 @@ export {
   queryAllByAltText,
   getByAltText,
   getAllByAltText,
-  queryBySelectText,
-  queryAllBySelectText,
-  getBySelectText,
-  getAllBySelectText,
   queryByTestId,
   queryAllByTestId,
   getByTestId,
@@ -437,10 +380,6 @@ export {
   queryAllByTitle,
   getByTitle,
   getAllByTitle,
-  queryByValue,
-  queryAllByValue,
-  getByValue,
-  getAllByValue,
   queryByDisplayValue,
   queryAllByDisplayValue,
   getByDisplayValue,