feat(add getAllByTestId & queryAllByTestId functions)

**What**: Add new query capabilities for improved tests

- getAllByTestId
- queryAllByTestId

**Why**: These will include querying for multiple elements rendered in the dom
It will improve usability of the module.

add tests for queryAllByTestId functions
add tests for getAllByTestId function

**How**:

- Added the respective functions in the `queries.js` file
- Added tests for functions in the `__tests__/element-queries.js` file

**Checklist**:

* [ ] Documentation
* [x] Tests
* [x] Ready to be merged
* [x] Added myself to contributors table

Author: bahdcoder

.all-contributorsrc

@@ -76,6 +76,16 @@
       "contributions": [
         "platform"
       ]
+    },
+    {
+      "login": "bahdcoder",
+      "name": "Kati Frantz",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/19477966?v=4",
+      "profile": "https://github.com/bahdcoder",
+      "contributions": [
+        "code",
+        "test"
+      ]
     }
   ]
 }

README.md

@@ -16,7 +16,7 @@
 [![downloads][downloads-badge]][npmtrends]
 [![MIT License][license-badge]][license]
 
-[![All Contributors](https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-8-orange.svg?style=flat-square)](#contributors)
 [![PRs Welcome][prs-badge]][prs]
 [![Code of Conduct][coc-badge]][coc]
 
@@ -564,6 +564,7 @@ Thanks goes to these people ([emoji key][emojis]):
 <!-- prettier-ignore -->
 | [<img src="https://avatars.githubusercontent.com/u/1500684?v=3" width="100px;"/><br /><sub><b>Kent C. Dodds</b></sub>](https://kentcdodds.com)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Documentation") [🚇](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Tests") | [<img src="https://avatars1.githubusercontent.com/u/2430381?v=4" width="100px;"/><br /><sub><b>Ryan Castner</b></sub>](http://audiolion.github.io)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=audiolion "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/8008023?v=4" width="100px;"/><br /><sub><b>Daniel Sandiego</b></sub>](https://www.dnlsandiego.com)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=dnlsandiego "Code") | [<img src="https://avatars2.githubusercontent.com/u/12592677?v=4" width="100px;"/><br /><sub><b>Paweł Mikołajczyk</b></sub>](https://github.com/Miklet)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=Miklet "Code") | [<img src="https://avatars3.githubusercontent.com/u/464978?v=4" width="100px;"/><br /><sub><b>Alejandro Ñáñez Ortiz</b></sub>](http://co.linkedin.com/in/alejandronanez/)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=alejandronanez "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/1402095?v=4" width="100px;"/><br /><sub><b>Matt Parrish</b></sub>](https://github.com/pbomb)<br />[🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Apbomb "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Documentation") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Tests") | [<img src="https://avatars1.githubusercontent.com/u/1288694?v=4" width="100px;"/><br /><sub><b>Justin Hall</b></sub>](https://github.com/wKovacs64)<br />[📦](#platform-wKovacs64 "Packaging/porting to new platform") |
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
+| [<img src="https://avatars2.githubusercontent.com/u/19477966?v=4" width="100px;"/><br /><sub><b>Kati Frantz</b></sub>](https://github.com/bahdcoder)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=bahdcoder "Code") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=bahdcoder "Tests") |
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 

src/__tests__/__snapshots__/element-queries.js.snap

@@ -8,6 +8,8 @@ exports[`get throws a useful error message 3`] = `"Unable to find an element wit
 
 exports[`get throws a useful error message 4`] = `"Unable to find an element by: [data-testid=\\"LucyRicardo\\"]"`;
 
+exports[`getAllByTestId throws a useful error message if no matching elements are found 1`] = `"Unable to find any elements by: [data-testid=\\"LucyRicardo\\"]"`;
+
 exports[`label with no form control 1`] = `"Found a label with the text of: alone, however no form control was found associated to that label. Make sure you're using the \\"for\\" attribute or \\"aria-labelledby\\" attribute correctly."`;
 
 exports[`totally empty label 1`] = `"Found a label with the text of: , however no form control was found associated to that label. Make sure you're using the \\"for\\" attribute or \\"aria-labelledby\\" attribute correctly."`;

src/__tests__/element-queries.js

@@ -14,6 +14,33 @@ test('query can return null', () => {
   expect(queryByText('LucyRicardo')).toBeNull()
 })
 
+test('queryAllByTestId returns an empty node list', () => {
+  const {queryAllByTestId} = render(<div />)
+  const results = queryAllByTestId('LucyRicardo')
+  expect(results).toBeInstanceOf(NodeList)
+  expect(results.length).toBe(0)
+})
+
+test('getAllByTestId throws a useful error message if no matching elements are found', () => {
+  const {getAllByTestId} = render(<div />)
+  expect(() => getAllByTestId('LucyRicardo')).toThrowErrorMatchingSnapshot()
+})
+
+test('getAllByTestId returns a node list of elements if they are found', () => {
+  const {getAllByTestId} = render(
+    <div>
+      <ul>
+        <li data-testid="LucyRicardo" />
+        <li data-testid="LucyRicardo" />
+      </ul>
+    </div>,
+  )
+
+  const results = getAllByTestId('LucyRicardo')
+  expect(results).toBeInstanceOf(NodeList)
+  expect(results.length).toBe(2)
+})
+
 test('get throws a useful error message', () => {
   const {getByLabelText, getByPlaceholderText, getByText, getByTestId} = render(
     <div />,

src/queries.js

@@ -56,6 +56,10 @@ function queryByTestId(container, id) {
   return container.querySelector(getDataTestIdSelector(id))
 }
 
+function queryAllByTestId(container, id) {
+  return container.querySelectorAll(getDataTestIdSelector(id))
+}
+
 function getDataTestIdSelector(id) {
   return `[data-testid="${id}"]`
 }
@@ -94,6 +98,18 @@ function getByTestId(container, id, ...rest) {
   return el
 }
 
+function getAllByTestId(container, id, ...rest) {
+  const elements = queryAllByTestId(container, id, ...rest)
+
+  if (elements.length === 0) {
+    throw new Error(
+      `Unable to find any elements by: ${getDataTestIdSelector(id)}`,
+    )
+  }
+
+  return elements
+}
+
 function getByPlaceholderText(container, text, ...rest) {
   const el = queryByPlaceholderText(container, text, ...rest)
   if (!el) {
@@ -138,6 +154,8 @@ export {
   getByLabelText,
   queryByTestId,
   getByTestId,
+  queryAllByTestId,
+  getAllByTestId,
 }
 
 /* eslint complexity:["error", 14] */