diff --git a/docs/dom-testing-library/api-async.md b/docs/dom-testing-library/api-async.md index 7c7fe39b0..0eeb57e09 100644 --- a/docs/dom-testing-library/api-async.md +++ b/docs/dom-testing-library/api-async.md @@ -23,8 +23,8 @@ function waitFor( ): Promise ``` -When in need to wait for any period of time you can use `waitFor`, to wait for your -expectations to pass. Here's a simple example: +When in need to wait for any period of time you can use `waitFor`, to wait for +your expectations to pass. Here's a simple example: ```javascript // ... @@ -63,24 +63,24 @@ function waitForElementToBeRemoved( interval?: number mutationObserverOptions?: MutationObserverInit } -): Promise +): Promise ``` To wait for the removal of element(s) from the DOM you can use `waitForElementToBeRemoved`. The `waitForElementToBeRemoved` function is a small -wrapper around the `wait` utility. +wrapper around the `waitFor` utility. -The first argument must be an element, array of elements, or a callback which returns -an element or array of elements. +The first argument must be an element, array of elements, or a callback which +returns an element or array of elements. -Here is an example where the promise resolves with `true` because the element is -removed: +Here is an example where the promise resolves because the element is removed: ```javascript const el = document.querySelector('div.getOuttaHere') -waitForElementToBeRemoved(document.querySelector('div.getOuttaHere')) - .then(() => console.log('Element no longer in DOM')) +waitForElementToBeRemoved(document.querySelector('div.getOuttaHere')).then(() => + console.log('Element no longer in DOM') +) el.setAttribute('data-neat', true) // other mutations are ignored... @@ -94,9 +94,15 @@ or an empty array: ```javascript waitForElementToBeRemoved(null).catch(err => console.log(err)) -waitForElementToBeRemoved(queryByText(/not here/i)).catch(err => console.log(err)) -waitForElementToBeRemoved(queryAllByText(/not here/i)).catch(err => console.log(err)) -waitForElementToBeRemoved(() => getByText(/not here/i)).catch(err => console.log(err)) +waitForElementToBeRemoved(queryByText(/not here/i)).catch(err => + console.log(err) +) +waitForElementToBeRemoved(queryAllByText(/not here/i)).catch(err => + console.log(err) +) +waitForElementToBeRemoved(() => getByText(/not here/i)).catch(err => + console.log(err) +) // Error: The element(s) given to waitForElementToBeRemoved are already removed. waitForElementToBeRemoved requires that the element(s) exist(s) before waiting for removal. ``` @@ -116,9 +122,14 @@ function wait( } ): Promise ``` -Previously, wait was a wrapper around wait-for-expect and used polling instead of a MutationObserver to look for changes. It is now an alias to waitFor and will be removed in a future release. -Unlike wait, the callback parameter is mandatory in waitFor. Although you can migrate an existing `wait()` call to `waitFor( () => {} )`, it is considered bad practice to use an empty callback because it will make the tests more fragile. +Previously, wait was a wrapper around wait-for-expect and used polling instead +of a MutationObserver to look for changes. It is now an alias to waitFor and +will be removed in a future release. + +Unlike wait, the callback parameter is mandatory in waitFor. Although you can +migrate an existing `wait()` call to `waitFor( () => {} )`, it is considered bad +practice to use an empty callback because it will make the tests more fragile. ## `waitForDomChange` (DEPRECATED, use waitFor instead) @@ -158,9 +169,7 @@ container.setAttribute('data-cool', 'true') waitForDomChange({ container }).then(mutationsList => { const mutation = mutationsList[0] console.log( - `was cool: ${mutation.oldValue}\ncurrently cool: ${ - mutation.target.dataset.cool - }` + `was cool: ${mutation.oldValue}\ncurrently cool: ${mutation.target.dataset.cool}` ) }) container.setAttribute('data-cool', 'false') @@ -183,7 +192,6 @@ 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. - ## `waitForElement` (DEPRECATED, use `find*` queries or `waitFor`) ```typescript