Skip to content
Permalink
Browse files

fix(waitForElement): ensure waitForElement responds to attribute and …

…textNode changes (#74)

* ensure waitForElement responds to attribute and textNode changes by default

* Add rbrtsmith as a contributor

* Update README with change mutationObserverOptions

* Add missing new line in test
  • Loading branch information...
rbrtsmith authored and kentcdodds committed Jul 17, 2018
1 parent 3ba2600 commit 6e9d7c5497bd3350a68e56c5f6a2ee7340059a02
Showing with 75 additions and 8 deletions.
  1. +11 βˆ’0 .all-contributorsrc
  2. +4 βˆ’5 README.md
  3. +16 βˆ’0 src/__tests__/__snapshots__/wait-for-element.js.snap
  4. +38 βˆ’2 src/__tests__/wait-for-element.js
  5. +6 βˆ’1 src/wait-for-element.js
@@ -276,6 +276,17 @@
"contributions": [
"code"
]
},
{
"login": "rbrtsmith",
"name": "Robert Smith",
"avatar_url": "https://avatars2.githubusercontent.com/u/4982001?v=4",
"profile": "http://rbrtsmith.com/",
"contributions": [
"bug",
"ideas",
"doc"
]
}
]
}
@@ -16,7 +16,7 @@
[![downloads][downloads-badge]][npmtrends]
[![MIT License][license-badge]][license]

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

@@ -469,9 +469,8 @@ The default `container` is the global `document`. Make sure the elements you wai
The default `timeout` is `4500ms` which will keep you under
[Jest's default timeout of `5000ms`](https://facebook.github.io/jest/docs/en/jest-object.html#jestsettimeouttimeout).
<a name="mutationobserveroptions"></a>The default `mutationObserverOptions` is `{subtree: true, childList: true}` which will detect
additions and removals of child elements (including text nodes) in the `container` and any of its descendants.
It won't detect attribute changes unless you add `attributes: true` to the options.
<a name="mutationobserveroptions"></a>The default `mutationObserverOptions` is `{subtree: true, childList: true, attributes: true, characterData: true}` which will detect
additions and removals of child elements (including text nodes) in the `container` and any of its descendants. It will also detect attribute changes.
### `fireEvent`
@@ -874,7 +873,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://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") | [<img src="https://avatars3.githubusercontent.com/u/340761?v=4" width="100px;"/><br /><sub><b>Wayne Crouch</b></sub>](https://github.com/wgcrouch)<br />[πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=wgcrouch "Code") | [<img src="https://avatars1.githubusercontent.com/u/4996462?v=4" width="100px;"/><br /><sub><b>Ben Elliott</b></sub>](http://benjaminelliott.co.uk)<br />[πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=benelliott "Code") | [<img src="https://avatars3.githubusercontent.com/u/577921?v=4" width="100px;"/><br /><sub><b>Ruben Costa</b></sub>](http://nuances.co)<br />[πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=rubencosta "Code") |
| [<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") | [<img src="https://avatars3.githubusercontent.com/u/340761?v=4" width="100px;"/><br /><sub><b>Wayne Crouch</b></sub>](https://github.com/wgcrouch)<br />[πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=wgcrouch "Code") | [<img src="https://avatars1.githubusercontent.com/u/4996462?v=4" width="100px;"/><br /><sub><b>Ben Elliott</b></sub>](http://benjaminelliott.co.uk)<br />[πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=benelliott "Code") | [<img src="https://avatars3.githubusercontent.com/u/577921?v=4" width="100px;"/><br /><sub><b>Ruben Costa</b></sub>](http://nuances.co)<br />[πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=rubencosta "Code") | [<img src="https://avatars2.githubusercontent.com/u/4982001?v=4" width="100px;"/><br /><sub><b>Robert Smith</b></sub>](http://rbrtsmith.com/)<br />[πŸ›](https://github.com/kentcdodds/dom-testing-library/issues?q=author%3Arbrtsmith "Bug reports") [πŸ€”](#ideas-rbrtsmith "Ideas, Planning, & Feedback") [πŸ“–](https://github.com/kentcdodds/dom-testing-library/commits?author=rbrtsmith "Documentation") |
<!-- ALL-CONTRIBUTORS-LIST:END -->
@@ -38,6 +38,22 @@ exports[`it throws the same error that the callback has thrown if timeout is exc
/>
`;

exports[`it waits characterData mutation 1`] = `
<div>
<div>
initial text
</div>
</div>
`;

exports[`it waits characterData mutation 2`] = `
<div>
<div>
new text
</div>
</div>
`;

exports[`it waits for the callback to return a value and only reacts to DOM mutations 1`] = `
<div>
<div
@@ -129,7 +129,44 @@ test('it waits for the next DOM mutation with default callback', async () => {
return promise
})

test('it waits for the attributes mutation if configured', async () => {
test('it waits characterData mutation', async () => {
const {container} = render(`<div>initial text</div>`)

const callback = jest
.fn(() => container.textContent === 'new text')
.mockName('callback')
const successHandler = jest.fn().mockName('successHandler')
const errorHandler = jest.fn().mockName('errorHandler')

const promise = waitForElement(callback, {container}).then(
successHandler,
errorHandler,
)

// Promise callbacks are always asynchronous.
expect(successHandler).toHaveBeenCalledTimes(0)
expect(errorHandler).toHaveBeenCalledTimes(0)
expect(callback).toHaveBeenCalledTimes(1)
expect(container).toMatchSnapshot()

await skipSomeTimeForMutationObserver()

expect(callback).toHaveBeenCalledTimes(1)
expect(successHandler).toHaveBeenCalledTimes(0)
expect(errorHandler).toHaveBeenCalledTimes(0)

container.querySelector('div').innerHTML = 'new text'
await skipSomeTimeForMutationObserver()

expect(successHandler).toHaveBeenCalledTimes(1)
expect(errorHandler).toHaveBeenCalledTimes(0)
expect(callback).toHaveBeenCalledTimes(2)
expect(container).toMatchSnapshot()

return promise
})

test('it waits for the attributes mutation', async () => {
const {container} = render(``)

const callback = jest
@@ -140,7 +177,6 @@ test('it waits for the attributes mutation if configured', async () => {

const promise = waitForElement(callback, {
container,
mutationObserverOptions: {attributes: true},
}).then(successHandler, errorHandler)

expect(callback).toHaveBeenCalledTimes(1)
@@ -5,7 +5,12 @@ function waitForElement(
{
container = document,
timeout = 4500,
mutationObserverOptions = {subtree: true, childList: true},
mutationObserverOptions = {
subtree: true,
childList: true,
attributes: true,
characterData: true,
},
} = {},
) {
return new Promise((resolve, reject) => {

0 comments on commit 6e9d7c5

Please sign in to comment.
You can’t perform that action at this time.