Skip to content

Commit

Permalink
feat(queries): add queryAll/getAll methods (#28)
Browse files Browse the repository at this point in the history
* Add queryAll/getAll methods

Adds "all" methods for:
- byAltText
- byTestId

* Add tests for empty matches that return []

* Add contrib

* Add rest of getAll queries

* Document queryAll and getAll

* Make getAll throw when nothing matches

* Update docs on queryAll/getAll

* Refactor get* to use getAll*
  • Loading branch information
alexkrolick authored and Kent C. Dodds committed Apr 24, 2018
1 parent cfafd9a commit 6e0c752
Show file tree
Hide file tree
Showing 4 changed files with 217 additions and 71 deletions.
9 changes: 9 additions & 0 deletions .all-contributorsrc
Expand Up @@ -191,6 +191,15 @@
"code",
"test"
]
},
{
"login": "alexkrolick",
"name": "Alex Krolick",
"avatar_url": "https://avatars3.githubusercontent.com/u/1571667?v=4",
"profile": "https://alexkrolick.com",
"contributions": [
"code"
]
}
]
}
17 changes: 15 additions & 2 deletions README.md
Expand Up @@ -16,7 +16,7 @@
[![downloads][downloads-badge]][npmtrends]
[![MIT License][license-badge]][license]

[![All Contributors](https://img.shields.io/badge/all_contributors-18-orange.svg?style=flat-square)](#contributors)
[![All Contributors](https://img.shields.io/badge/all_contributors-19-orange.svg?style=flat-square)](#contributors)
[![PRs Welcome][prs-badge]][prs]
[![Code of Conduct][coc-badge]][coc]

Expand Down Expand Up @@ -83,6 +83,7 @@ when a real user uses it.
* [Using other assertion libraries](#using-other-assertion-libraries)
* [`TextMatch`](#textmatch)
* [`query` APIs](#query-apis)
* [`queryAll` and `getAll` APIs](#queryall-and-getall-apis)
* [`bindElementToQueries`](#bindelementtoqueries)
* [Debugging](#debugging)
* [`prettyDOM`](#prettydom)
Expand All @@ -106,6 +107,8 @@ npm install --save-dev dom-testing-library

## Usage

Note: each of the `get` APIs below have a matching [`getAll`](#queryall-and-getall-apis) API that returns all elements instead of just the first one, and [`query`](#query-apis)/[`getAll`](#queryall-and-getall-apis) that return `null`/`[]` instead of throwing an error.

```javascript
// src/__tests__/example.js
// query utilities:
Expand Down Expand Up @@ -489,6 +492,16 @@ expect(submitButton).toBeNull() // it doesn't exist
expect(submitButton).not.toBeInTheDOM()
```

## `queryAll` and `getAll` APIs

Each of the `query` APIs have a corresponsing `queryAll` version that always returns an Array of matching nodes. `getAll` is the same but throws when the array has a length of 0.

```javascript
const submitButtons = queryAllByText(container, 'submit')
expect(submitButtons).toHaveLength(3) // expect 3 elements
expect(submitButtons[0]).toBeInTheDOM()
```

## `bindElementToQueries`

`bindElementToQueries` takes a DOM element and binds it to the raw query functions, allowing them
Expand Down Expand Up @@ -711,7 +724,7 @@ Thanks goes to these people ([emoji key][emojis]):
| [<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/dom-testing-library/commits?author=kentcdodds "Code") [馃摉](https://github.com/kentcdodds/dom-testing-library/commits?author=kentcdodds "Documentation") [馃殗](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [鈿狅笍](https://github.com/kentcdodds/dom-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/dom-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/dom-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/dom-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/dom-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/dom-testing-library/issues?q=author%3Apbomb "Bug reports") [馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=pbomb "Code") [馃摉](https://github.com/kentcdodds/dom-testing-library/commits?author=pbomb "Documentation") [鈿狅笍](https://github.com/kentcdodds/dom-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://avatars1.githubusercontent.com/u/1241511?s=460&v=4" width="100px;"/><br /><sub><b>Anto Aravinth</b></sub>](https://github.com/antoaravinth)<br />[馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=antoaravinth "Code") [鈿狅笍](https://github.com/kentcdodds/dom-testing-library/commits?author=antoaravinth "Tests") [馃摉](https://github.com/kentcdodds/dom-testing-library/commits?author=antoaravinth "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/3462296?v=4" width="100px;"/><br /><sub><b>Jonah Moses</b></sub>](https://github.com/JonahMoses)<br />[馃摉](https://github.com/kentcdodds/dom-testing-library/commits?author=JonahMoses "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/4002543?v=4" width="100px;"/><br /><sub><b>艁ukasz Gandecki</b></sub>](http://team.thebrain.pro)<br />[馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=lgandecki "Code") [鈿狅笍](https://github.com/kentcdodds/dom-testing-library/commits?author=lgandecki "Tests") [馃摉](https://github.com/kentcdodds/dom-testing-library/commits?author=lgandecki "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/498274?v=4" width="100px;"/><br /><sub><b>Ivan Babak</b></sub>](https://sompylasar.github.io)<br />[馃悰](https://github.com/kentcdodds/dom-testing-library/issues?q=author%3Asompylasar "Bug reports") [馃](#ideas-sompylasar "Ideas, Planning, & Feedback") [馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=sompylasar "Code") [馃摉](https://github.com/kentcdodds/dom-testing-library/commits?author=sompylasar "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/4439618?v=4" width="100px;"/><br /><sub><b>Jesse Day</b></sub>](https://github.com/jday3)<br />[馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=jday3 "Code") | [<img src="https://avatars0.githubusercontent.com/u/15199?v=4" width="100px;"/><br /><sub><b>Ernesto Garc铆a</b></sub>](http://gnapse.github.io)<br />[馃挰](#question-gnapse "Answering Questions") [馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=gnapse "Code") [馃摉](https://github.com/kentcdodds/dom-testing-library/commits?author=gnapse "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/2747424?v=4" width="100px;"/><br /><sub><b>Josef Maxx Blake</b></sub>](http://jomaxx.com)<br />[馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=jomaxx "Code") [馃摉](https://github.com/kentcdodds/dom-testing-library/commits?author=jomaxx "Documentation") [鈿狅笍](https://github.com/kentcdodds/dom-testing-library/commits?author=jomaxx "Tests") |
| [<img src="https://avatars3.githubusercontent.com/u/725236?v=4" width="100px;"/><br /><sub><b>Alex Cook</b></sub>](https://github.com/alecook)<br />[馃摉](https://github.com/kentcdodds/dom-testing-library/commits?author=alecook "Documentation") [馃挕](#example-alecook "Examples") | [<img src="https://avatars3.githubusercontent.com/u/10348212?v=4" width="100px;"/><br /><sub><b>Daniel Cook</b></sub>](https://github.com/dfcook)<br />[馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=dfcook "Code") [馃摉](https://github.com/kentcdodds/dom-testing-library/commits?author=dfcook "Documentation") [鈿狅笍](https://github.com/kentcdodds/dom-testing-library/commits?author=dfcook "Tests") | [<img src="https://avatars2.githubusercontent.com/u/21194045?s=400&v=4" width="100px;"/><br /><sub><b>Thomas Chia</b></sub>](https://github.com/thchia)<br />[馃悰](https://github.com/kentcdodds/dom-testing-library/issues?q=author%3Athchia "Bug reports") [馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=thchia "Code") | [<img src="https://avatars1.githubusercontent.com/u/28659384?v=4" width="100px;"/><br /><sub><b>Tim Deschryver</b></sub>](https://github.com/tdeschryver)<br />[馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=tdeschryver "Code") [鈿狅笍](https://github.com/kentcdodds/dom-testing-library/commits?author=tdeschryver "Tests") |
| [<img src="https://avatars3.githubusercontent.com/u/725236?v=4" width="100px;"/><br /><sub><b>Alex Cook</b></sub>](https://github.com/alecook)<br />[馃摉](https://github.com/kentcdodds/dom-testing-library/commits?author=alecook "Documentation") [馃挕](#example-alecook "Examples") | [<img src="https://avatars3.githubusercontent.com/u/10348212?v=4" width="100px;"/><br /><sub><b>Daniel Cook</b></sub>](https://github.com/dfcook)<br />[馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=dfcook "Code") [馃摉](https://github.com/kentcdodds/dom-testing-library/commits?author=dfcook "Documentation") [鈿狅笍](https://github.com/kentcdodds/dom-testing-library/commits?author=dfcook "Tests") | [<img src="https://avatars2.githubusercontent.com/u/21194045?s=400&v=4" width="100px;"/><br /><sub><b>Thomas Chia</b></sub>](https://github.com/thchia)<br />[馃悰](https://github.com/kentcdodds/dom-testing-library/issues?q=author%3Athchia "Bug reports") [馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=thchia "Code") | [<img src="https://avatars1.githubusercontent.com/u/28659384?v=4" width="100px;"/><br /><sub><b>Tim Deschryver</b></sub>](https://github.com/tdeschryver)<br />[馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=tdeschryver "Code") [鈿狅笍](https://github.com/kentcdodds/dom-testing-library/commits?author=tdeschryver "Tests") | [<img src="https://avatars3.githubusercontent.com/u/1571667?v=4" width="100px;"/><br /><sub><b>Alex Krolick</b></sub>](https://alexkrolick.com)<br />[馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=alexkrolick "Code") |

<!-- ALL-CONTRIBUTORS-LIST:END -->

Expand Down
72 changes: 72 additions & 0 deletions src/__tests__/element-queries.js
Expand Up @@ -117,6 +117,78 @@ test('get element by its alt text', () => {
expect(getByAltText(/fin.*nem.*poster$/i).src).toBe('/finding-nemo.png')
})

test('getAll* matchers return an array', () => {
const {
getAllByAltText,
getAllByTestId,
getAllByLabelText,
getAllByPlaceholderText,
getAllByText,
} = render(`
<div>
<img
data-testid="poster"
alt="finding nemo poster"
src="/finding-nemo.png" />
<img
data-testid="poster"
alt="finding dory poster"
src="/finding-dory.png" />
<img
data-testid="poster"
alt="jumanji poster"
src="/jumanji.png" />
<p>Where to next?</p>
<label for="username">User Name</label>
<input id="username" placeholder="Dwayne 'The Rock' Johnson" />
</div>,
`)
expect(getAllByAltText(/finding.*poster$/i)).toHaveLength(2)
expect(getAllByAltText('jumanji')).toHaveLength(1)
expect(getAllByTestId('poster')).toHaveLength(3)
expect(getAllByPlaceholderText(/The Rock/)).toHaveLength(1)
expect(getAllByLabelText('User Name')).toHaveLength(1)
expect(getAllByText('where')).toHaveLength(1)
})

test('getAll* matchers throw for 0 matches', () => {
const {
getAllByAltText,
getAllByTestId,
getAllByLabelText,
getAllByPlaceholderText,
getAllByText,
} = render(`
<div>
<label>No Matches Please</label>
</div>,
`)
expect(() => getAllByTestId('nope')).toThrow()
expect(() => getAllByAltText('nope')).toThrow()
expect(() => getAllByLabelText('nope')).toThrow()
expect(() => getAllByLabelText('no matches please')).toThrow()
expect(() => getAllByPlaceholderText('nope')).toThrow()
expect(() => getAllByText('nope')).toThrow()
})

test('queryAll* matchers return an array for 0 matches', () => {
const {
queryAllByAltText,
queryAllByTestId,
queryAllByLabelText,
queryAllByPlaceholderText,
queryAllByText,
} = render(`
<div>
</div>,
`)
expect(queryAllByTestId('nope')).toHaveLength(0)
expect(queryAllByAltText('nope')).toHaveLength(0)
expect(queryAllByLabelText('nope')).toHaveLength(0)
expect(queryAllByPlaceholderText('nope')).toHaveLength(0)
expect(queryAllByText('nope')).toHaveLength(0)
})

test('using jest helpers to assert element states', () => {
const {queryByTestId} = render(`<span data-testid="count-value">2</span>`)

Expand Down

0 comments on commit 6e0c752

Please sign in to comment.