Skip to content

Commit

Permalink
feat: add within API #53 (#54)
Browse files Browse the repository at this point in the history
* Add within API and document it

* improve the `within` API example

* Update README.md
  • Loading branch information
Justice Mba authored and Kent C. Dodds committed Jun 12, 2018
1 parent 353ccef commit b5bd755
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 7 deletions.
11 changes: 11 additions & 0 deletions .all-contributorsrc
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,17 @@
"contributions": [
"example"
]
},
{
"login": "Dajust",
"name": "Justice Mba ",
"avatar_url": "https://avatars3.githubusercontent.com/u/8015514?v=4",
"profile": "https://github.com/Dajust",
"contributions": [
"code",
"doc",
"ideas"
]
}
]
}
18 changes: 14 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
[![downloads][downloads-badge]][npmtrends]
[![MIT License][license-badge]][license]

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

Expand Down Expand Up @@ -88,6 +88,7 @@ when a real user uses it.
- [TextMatch Examples](#textmatch-examples)
- [`query` APIs](#query-apis)
- [`queryAll` and `getAll` APIs](#queryall-and-getall-apis)
- [`within` API](#within-api)
- [`getQueriesForElement`](#getqueriesforelement)
- [Debugging](#debugging)
- [`prettyDOM`](#prettydom)
Expand Down Expand Up @@ -642,12 +643,21 @@ expect(submitButtons).toHaveLength(3) // expect 3 elements
expect(submitButtons[0]).toBeInTheDOM()
```

## `getQueriesForElement`
## `within` and `getQueriesForElement` APIs

`getQueriesForElement` takes a DOM element and binds it to the raw query functions, allowing them
`within` (an alias to `getQueriesForElement`) takes a DOM element and binds it to the raw query functions, allowing them
to be used without specifying a container. It is the recommended approach for libraries built on this API
and is in use in `react-testing-library` and `vue-testing-library`.

Example: To get the text 'hello' only within a section called 'messages', you could do:

```javascript
import {within} from 'dom-testing-library'
const {getByText} = within(document.body.getElementById('messages'))
const helloMessage = getByText('hello')
```

## Debugging

When you use any `get` calls in your test cases, the current state of the `container`
Expand Down Expand Up @@ -864,7 +874,7 @@ Thanks goes to these people ([emoji key][emojis]):
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| [<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/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") | [<img src="https://avatars2.githubusercontent.com/u/2224291?v=4" width="100px;"/><br /><sub><b>Maddi Joyce</b></sub>](http://www.maddijoyce.com)<br />[馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=maddijoyce "Code") | [<img src="https://avatars1.githubusercontent.com/u/25429764?v=4" width="100px;"/><br /><sub><b>Peter Kamps</b></sub>](https://github.com/npeterkamps)<br />[馃悰](https://github.com/kentcdodds/dom-testing-library/issues?q=author%3Anpeterkamps "Bug reports") [馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=npeterkamps "Code") [鈿狅笍](https://github.com/kentcdodds/dom-testing-library/commits?author=npeterkamps "Tests") |
| [<img src="https://avatars2.githubusercontent.com/u/21689428?v=4" width="100px;"/><br /><sub><b>Jonathan Stoye</b></sub>](http://jonathanstoye.de)<br />[馃摉](https://github.com/kentcdodds/dom-testing-library/commits?author=JonathanStoye "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/4126644?v=4" width="100px;"/><br /><sub><b>Sanghyeon Lee</b></sub>](https://github.com/yongdamsh)<br />[馃挕](#example-yongdamsh "Examples") |
| [<img src="https://avatars2.githubusercontent.com/u/21689428?v=4" width="100px;"/><br /><sub><b>Jonathan Stoye</b></sub>](http://jonathanstoye.de)<br />[馃摉](https://github.com/kentcdodds/dom-testing-library/commits?author=JonathanStoye "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/4126644?v=4" width="100px;"/><br /><sub><b>Sanghyeon Lee</b></sub>](https://github.com/yongdamsh)<br />[馃挕](#example-yongdamsh "Examples") | [<img src="https://avatars3.githubusercontent.com/u/8015514?v=4" width="100px;"/><br /><sub><b>Justice Mba </b></sub>](https://github.com/Dajust)<br />[馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=Dajust "Code") [馃摉](https://github.com/kentcdodds/dom-testing-library/commits?author=Dajust "Documentation") [馃](#ideas-Dajust "Ideas, Planning, & Feedback") |

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

Expand Down
9 changes: 6 additions & 3 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ export * from './events'
export * from './get-queries-for-element'
export * from './pretty-dom'

// The original name of bindElementToQueries was weird
// The new name is better. Remove this in the next major version bump.
export {getQueriesForElement as bindElementToQueries}
export {
// The original name of bindElementToQueries was weird
// The new name is better. Remove this in the next major version bump.
getQueriesForElement as bindElementToQueries,
getQueriesForElement as within,
}

0 comments on commit b5bd755

Please sign in to comment.