feat(queryByCurrentValue)

src/__tests__/element-queries.js

@@ -565,4 +565,63 @@ test('getByText ignores script tags by default', () => {
   expect(getAllByText(/hello/i, {ignore: false})).toHaveLength(3)
 })
 
+test('get/query input element by current value', () => {
+  const {
+    getByCurrentValue,
+    queryByCurrentValue,
+    getByTestId,
+  } = renderIntoDocument(`
+    <div>
+      <input placeholder="name" type="text" data-testid="name" value="Mercury" />
+    </div>
+  `)
+  expect(getByCurrentValue('Mercury').placeholder).toEqual('name')
+  expect(queryByCurrentValue('Mercury').placeholder).toEqual('name')
+
+  getByTestId('name').value = 'Norris'
+  expect(getByCurrentValue('Norris').placeholder).toEqual('name')
+  expect(queryByCurrentValue('Norris').placeholder).toEqual('name')
+})
+
+test('get/query select element by current value', () => {
+  const {
+    getByCurrentValue,
+    queryByCurrentValue,
+    getByTestId,
+  } = renderIntoDocument(`
+    <select id="state-select" data-testid="state">
+      <option value="">State</option>
+      <option value="AL">Alabama</option>
+      <option selected value="AK" >Alaska</option>
+      <option value="AZ">Arizona</option>
+    </select>
+  `)
+
+  expect(getByCurrentValue('Alaska').id).toEqual('state-select')
+  expect(queryByCurrentValue('Alaska').id).toEqual('state-select')
+
+  getByTestId('state').value = 'AL'
+  expect(getByCurrentValue('Alabama').id).toEqual('state-select')
+  expect(queryByCurrentValue('Alabama').id).toEqual('state-select')
+})
+
+test('get/query textarea element by current value', () => {
+  const {
+    getByCurrentValue,
+    queryByCurrentValue,
+    getByTestId,
+  } = renderIntoDocument(`
+    <textarea id="content-textarea" data-testid="content">
+      Hello
+    </textarea>
+  `)
+
+  expect(getByCurrentValue('Hello').id).toEqual('content-textarea')
+  expect(queryByCurrentValue('Hello').id).toEqual('content-textarea')
+
+  getByTestId('content').value = 'World'
+  expect(getByCurrentValue('World').id).toEqual('content-textarea')
+  expect(queryByCurrentValue('World').id).toEqual('content-textarea')
+})
+
 /* eslint jsx-a11y/label-has-for:0 */

src/queries.js

@@ -180,6 +180,33 @@ function queryByAltText(...args) {
   return firstResultOrNull(queryAllByAltText, ...args)
 }
 
+function queryAllByCurrentValue(
+  container,
+  value,
+  {exact = true, collapseWhitespace = true, trim = true} = {},
+) {
+  const matcher = exact ? matches : fuzzyMatches
+  const matchOpts = {collapseWhitespace, trim}
+  return Array.from(container.querySelectorAll(`input,textarea,select`)).filter(
+    node => {
+      if (node.tagName === 'SELECT') {
+        const selectedOptions = Array.from(node.options).filter(
+          option => option.selected,
+        )
+        return selectedOptions.some(optionNode =>
+          matcher(getNodeText(optionNode), optionNode, value, matchOpts),
+        )
+      } else {
+        return matcher(node.value, node, value, matchOpts)
+      }
+    },
+  )
+}
+
+function queryByCurrentValue(...args) {
+  return firstResultOrNull(queryAllByCurrentValue, ...args)
+}
+
 // getters
 // the reason we're not dynamically generating these functions that look so similar:
 // 1. The error messages are specific to each one and depend on arguments
@@ -325,6 +352,21 @@ function getBySelectText(...args) {
   return firstResultOrNull(getAllBySelectText, ...args)
 }
 
+function getAllByCurrentValue(container, value, ...rest) {
+  const els = queryAllByCurrentValue(container, value, ...rest)
+  if (!els.length) {
+    throw getElementError(
+      `Unable to find an element with the value: ${value}.`,
+      container,
+    )
+  }
+  return els
+}
+
+function getByCurrentValue(...args) {
+  return firstResultOrNull(getAllByCurrentValue, ...args)
+}
+
 export {
   queryByPlaceholderText,
   queryAllByPlaceholderText,
@@ -358,6 +400,10 @@ export {
   queryAllByValue,
   getByValue,
   getAllByValue,
+  queryByCurrentValue,
+  queryAllByCurrentValue,
+  getByCurrentValue,
+  getAllByCurrentValue,
   queryByRole,
   queryAllByRole,
   getAllByRole,