From 5917b92456f3f80e92a1e6daee4ddf1428f71842 Mon Sep 17 00:00:00 2001 From: Justice Mba Date: Tue, 12 Jun 2018 10:47:45 +0100 Subject: [PATCH 1/2] add within API and document it --- .all-contributorsrc | 11 +++++++++++ README.md | 21 +++++++++++++++++++-- src/index.js | 8 +++++++- 3 files changed, 37 insertions(+), 3 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index c913500b..8d881eb8 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -323,6 +323,17 @@ "bug", "code" ] + }, + { + "login": "Dajust", + "name": "Justice Mba ", + "avatar_url": "https://avatars3.githubusercontent.com/u/8015514?v=4", + "profile": "https://twitter.com/Daajust", + "contributions": [ + "code", + "doc", + "ideas" + ] } ] } diff --git a/README.md b/README.md index 53d32477..10950e7a 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ [![downloads][downloads-badge]][npmtrends] [![MIT License][license-badge]][license] -[![All Contributors](https://img.shields.io/badge/all_contributors-32-orange.svg?style=flat-square)](#contributors) +[![All Contributors](https://img.shields.io/badge/all_contributors-33-orange.svg?style=flat-square)](#contributors) [![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc] [![Join the community on Spectrum][spectrum-badge]][spectrum] @@ -91,6 +91,7 @@ facilitate testing implementation details). Read more about this in - [`TextMatch`](#textmatch) - [`query` APIs](#query-apis) - [`queryAll` and `getAll` APIs](#queryall-and-getall-apis) +- [`within` API](#within-api) - [Examples](#examples) - [Learning Material](#learning-material) - [FAQ](#faq) @@ -620,6 +621,22 @@ expect(submitButtons).toHaveLength(3) // expect 3 elements expect(submitButtons[0]).toBeInTheDOM() ``` +## `within` API + +Sometimes, there is no garauntee that the text, placeholder, or label you want to query is unique on the page. So you might want to explicity tell react-render-dom to get an element **only within** a particular section of the page. `within` is a helper function for this case. + +Example: To get the text 'hello' only within a section called 'messages', you could do: + +```javascript +import {render, within} from 'react-testing-library' + +// ... + +const {getByTestId} = render(/* stuff */) +const messagesSection = getByTestId('messages') +const hello = within(messagesSection).getByText('hello') +``` + ## Examples You'll find examples of testing with different libraries in @@ -914,7 +931,7 @@ Thanks goes to these people ([emoji key][emojis]): | [
Anto Aravinth](https://github.com/antoaravinth)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Code") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Tests") [πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Documentation") | [
Jonah Moses](https://github.com/JonahMoses)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=JonahMoses "Documentation") | [
Łukasz Gandecki](http://team.thebrain.pro)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Code") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Tests") [πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Documentation") | [
Ivan Babak](https://sompylasar.github.io)
[πŸ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Asompylasar "Bug reports") [πŸ€”](#ideas-sompylasar "Ideas, Planning, & Feedback") | [
Jesse Day](https://github.com/jday3)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=jday3 "Code") | [
Ernesto GarcΓ­a](http://gnapse.github.io)
[πŸ’¬](#question-gnapse "Answering Questions") [πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=gnapse "Code") [πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=gnapse "Documentation") | [
Josef Maxx Blake](http://jomaxx.com)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=jomaxx "Code") [πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=jomaxx "Documentation") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=jomaxx "Tests") | | [
Michal Baranowski](https://twitter.com/baranovskim)
[πŸ“](#blog-mbaranovski "Blogposts") [βœ…](#tutorial-mbaranovski "Tutorials") | [
Arthur Puthin](https://github.com/aputhin)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=aputhin "Documentation") | [
Thomas Chia](https://github.com/thchia)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=thchia "Code") [πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=thchia "Documentation") | [
Thiago Galvani](http://ilegra.com/)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=thiagopaiva99 "Documentation") | [
Christian](http://Chriswcs.github.io)
[⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=ChrisWcs "Tests") | [
Alex Krolick](https://alexkrolick.com)
[πŸ’¬](#question-alexkrolick "Answering Questions") [πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=alexkrolick "Documentation") [πŸ’‘](#example-alexkrolick "Examples") [πŸ€”](#ideas-alexkrolick "Ideas, Planning, & Feedback") | [
Johann Hubert Sonntagbauer](https://github.com/johann-sonntagbauer)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=johann-sonntagbauer "Code") [πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=johann-sonntagbauer "Documentation") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=johann-sonntagbauer "Tests") | | [
Maddi Joyce](http://www.maddijoyce.com)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=maddijoyce "Code") | [
Ryan Vice](http://www.vicesoftware.com)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=RyanAtViceSoftware "Documentation") | [
Ian Wilson](https://ianwilson.io)
[πŸ“](#blog-iwilsonq "Blogposts") [βœ…](#tutorial-iwilsonq "Tutorials") | [
Daniel](https://github.com/InExtremaRes)
[πŸ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3AInExtremaRes "Bug reports") [πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=InExtremaRes "Code") | [
Giorgio Polvara](https://twitter.com/Gpx)
[πŸ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3AGpx "Bug reports") [πŸ€”](#ideas-Gpx "Ideas, Planning, & Feedback") | [
John Gozde](https://github.com/jgoz)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=jgoz "Code") | [
Sam Horton](https://twitter.com/SavePointSam)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=SavePointSam "Documentation") [πŸ’‘](#example-SavePointSam "Examples") [πŸ€”](#ideas-SavePointSam "Ideas, Planning, & Feedback") | -| [
Richard Kotze (mobile)](http://www.richardkotze.com)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=rkotze "Documentation") | [
Brahian E. Soto Mercedes](https://github.com/sotobuild)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=sotobuild "Documentation") | [
Benoit de La Forest](https://github.com/bdelaforest)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=bdelaforest "Documentation") | [
Adam Gordon](http://gordonizer.com)
[πŸ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Aicfantv "Bug reports") [πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=icfantv "Code") | +| [
Richard Kotze (mobile)](http://www.richardkotze.com)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=rkotze "Documentation") | [
Brahian E. Soto Mercedes](https://github.com/sotobuild)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=sotobuild "Documentation") | [
Benoit de La Forest](https://github.com/bdelaforest)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=bdelaforest "Documentation") | [
Adam Gordon](http://gordonizer.com)
[πŸ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Aicfantv "Bug reports") [πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=icfantv "Code") | [
Justice Mba ](https://twitter.com/Daajust)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=Dajust "Code") [πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=Dajust "Documentation") [πŸ€”](#ideas-Dajust "Ideas, Planning, & Feedback") | diff --git a/src/index.js b/src/index.js index c23b88bb..4a8b238a 100644 --- a/src/index.js +++ b/src/index.js @@ -44,4 +44,10 @@ syntheticEvents.forEach(eventName => { // just re-export everything from dom-testing-library export * from 'dom-testing-library' -export {render, Simulate, renderIntoDocument, cleanup} +export { + render, + Simulate, + renderIntoDocument, + cleanup, + getQueriesForElement as within, +} From 76093b40a5172c5203f05ffbf0c9161ea964a28b Mon Sep 17 00:00:00 2001 From: Justice Mba Date: Tue, 12 Jun 2018 18:23:49 +0100 Subject: [PATCH 2/2] remove within export as this will be automatically exported from dom-testing-library --- src/index.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/index.js b/src/index.js index 4a8b238a..c23b88bb 100644 --- a/src/index.js +++ b/src/index.js @@ -44,10 +44,4 @@ syntheticEvents.forEach(eventName => { // just re-export everything from dom-testing-library export * from 'dom-testing-library' -export { - render, - Simulate, - renderIntoDocument, - cleanup, - getQueriesForElement as within, -} +export {render, Simulate, renderIntoDocument, cleanup}