-
Notifications
You must be signed in to change notification settings - Fork 470
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Wait for element to be removed #218
Merged
kentcdodds
merged 29 commits into
testing-library:master
from
Tolsee:ts-wait-for-element-to-be-removed
Mar 9, 2019
Merged
Changes from 25 commits
Commits
Show all changes
29 commits
Select commit
Hold shift + click to select a range
f3eca1c
Add tests and snapshots
Tolsee c547962
Implement waitForElementToBeRemoved method
Tolsee cc21522
Export waitForElementToBeRemoved
Tolsee c75e492
Add as contributor
Tolsee a349725
Update README.md after rebase
Tolsee d1d303d
Throw error is the element is not present in the first place
Tolsee 39fea0e
Add test for full coverage
Tolsee 36c4e4c
User jest time faker
Tolsee f5b081d
Add typings
Tolsee 2dedb1f
Cleanup
Tolsee 54cbc89
Update snapshot
Tolsee 999ff5c
Get rid of iife
Tolsee e7a018e
Cleanup from review
Tolsee 0518e78
Check for empty array as well
Tolsee d6150af
Check for error, falsy and empty to check whether the element is removed
Tolsee 4e2f81c
error not defined error fix
Tolsee 20ada81
Change snapshot to inline snapshot
Tolsee 46a952f
Update snapshot
Tolsee 618c240
Merge branch 'ts-wait-for-element-to-be-removed' of https://github.co…
Tolsee af327d1
Merge branch 'master' into ts-wait-for-element-to-be-removed
Tolsee 505d783
Only observe mutations if synchronous test passes
Tolsee 6fcfc83
only observer if synchronous test passes fix
Tolsee 579c876
Await for the respective promise to resolve in test
Tolsee 2f7452d
Snapshot test to normal toHaveBeenCalledWith assertions
Tolsee 20cd110
Update comment
Tolsee bc2e3f2
Remove comment
Tolsee 9834de2
test: improve tests for wait-for-element-to-be-removed
17f136f
test: fix everything
6664f0a
test: do not test unstable node versions
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,334 @@ | ||
| import {waitForElementToBeRemoved} from '../' | ||
| // adds special assertions like toBeTruthy | ||
| import 'jest-dom/extend-expect' | ||
| import {render} from './helpers/test-utils' | ||
| import document from './helpers/document' | ||
|
|
||
| jest.useFakeTimers() | ||
|
|
||
| const skipSomeTimeForMutationObserver = (delayMs = 50) => { | ||
| jest.advanceTimersByTime(delayMs) | ||
| jest.runAllImmediates() | ||
| } | ||
|
|
||
| test('it waits for the callback to throw error, a falsy value or empty array and only reacts to DOM mutations', async () => { | ||
| const {container, getByTestId, queryAllByTestId} = render( | ||
| `<div data-testid="initial-element"> | ||
| </div>`, | ||
| ) | ||
|
|
||
| const testEle = render( | ||
| `<div data-testid="the-element-we-are-looking-for"></div>`, | ||
| ).container.firstChild | ||
| testEle.parentNode.removeChild(testEle) | ||
| container.appendChild(testEle) | ||
|
|
||
| let nextElIndex = 0 | ||
| const makeMutationFn = () => () => { | ||
| container.appendChild( | ||
| render( | ||
| `<div data-testid="another-element-that-causes-mutation-${++nextElIndex}"></div>`, | ||
| ).container.firstChild, | ||
| ) | ||
| } | ||
|
|
||
| const mutationsAndCallbacks = [ | ||
| [makeMutationFn(), () => true], | ||
| [makeMutationFn(), () => getByTestId('the-element-we-are-looking-for')], | ||
| [ | ||
| makeMutationFn(), | ||
| () => queryAllByTestId('the-element-we-are-looking-for'), | ||
| ], | ||
| [ | ||
| () => | ||
| container.removeChild(getByTestId('the-element-we-are-looking-for')), | ||
| () => getByTestId('the-element-we-are-looking-for'), | ||
| ], | ||
| ] | ||
|
|
||
| const callback = jest | ||
| .fn(() => { | ||
| throw new Error('No more calls are expected.') | ||
| }) | ||
| .mockName('callback') | ||
| .mockImplementation(() => true) | ||
|
|
||
| const successHandler = jest.fn().mockName('successHandler') | ||
| const errorHandler = jest.fn().mockName('errorHandler') | ||
|
|
||
| const promise = waitForElementToBeRemoved(callback, {container}).then( | ||
| successHandler, | ||
| errorHandler, | ||
| ) | ||
|
|
||
| // One synchronous `callback` call is expected. | ||
| expect(callback).toHaveBeenCalledTimes(1) | ||
| expect(successHandler).toHaveBeenCalledTimes(0) | ||
| expect(errorHandler).toHaveBeenCalledTimes(0) | ||
|
|
||
| skipSomeTimeForMutationObserver() | ||
|
|
||
| // No more expected calls without DOM mutations. | ||
| expect(callback).toHaveBeenCalledTimes(1) | ||
| expect(successHandler).toHaveBeenCalledTimes(0) | ||
| expect(errorHandler).toHaveBeenCalledTimes(0) | ||
|
|
||
| // Perform mutations one by one, waiting for each to trigger `MutationObserver`. | ||
| for (const [mutationImpl, callbackImpl] of mutationsAndCallbacks) { | ||
| callback.mockImplementation(callbackImpl) | ||
| mutationImpl() | ||
| skipSomeTimeForMutationObserver() | ||
| } | ||
|
|
||
| await promise | ||
|
|
||
| expect(callback).toHaveBeenCalledTimes(1 + mutationsAndCallbacks.length) | ||
| expect(successHandler).toHaveBeenCalledTimes(1) | ||
| expect(successHandler).toHaveBeenCalledWith(true) | ||
| expect(errorHandler).toHaveBeenCalledTimes(0) | ||
| }) | ||
|
|
||
| test('it waits characterData mutation', async () => { | ||
| const {container} = render(`<div>initial text</div>`) | ||
|
|
||
| const callback = jest | ||
| .fn(() => container.textContent === 'initial text') | ||
| .mockName('callback') | ||
| const successHandler = jest.fn().mockName('successHandler') | ||
| const errorHandler = jest.fn().mockName('errorHandler') | ||
|
|
||
| const promise = waitForElementToBeRemoved(callback, {container}).then( | ||
| successHandler, | ||
| errorHandler, | ||
| ) | ||
|
|
||
| expect(successHandler).toHaveBeenCalledTimes(0) | ||
| expect(errorHandler).toHaveBeenCalledTimes(0) | ||
| expect(callback).toHaveBeenCalledTimes(1) | ||
|
|
||
| skipSomeTimeForMutationObserver() | ||
|
|
||
| expect(callback).toHaveBeenCalledTimes(1) | ||
| expect(successHandler).toHaveBeenCalledTimes(0) | ||
| expect(errorHandler).toHaveBeenCalledTimes(0) | ||
|
|
||
| container.querySelector('div').innerHTML = 'new text' | ||
| skipSomeTimeForMutationObserver() | ||
| await promise | ||
|
|
||
| expect(successHandler).toHaveBeenCalledTimes(1) | ||
| expect(successHandler).toHaveBeenCalledWith(true) | ||
| expect(errorHandler).toHaveBeenCalledTimes(0) | ||
| expect(callback).toHaveBeenCalledTimes(2) | ||
| }) | ||
|
|
||
| test('it waits for the attributes mutation', async () => { | ||
| const {container} = render(``) | ||
| container.setAttribute('data-test-attribute', 'PASSED') | ||
|
|
||
| const callback = jest | ||
| .fn(() => container.getAttribute('data-test-attribute')) | ||
| .mockName('callback') | ||
| const successHandler = jest.fn().mockName('successHandler') | ||
| const errorHandler = jest.fn().mockName('errorHandler') | ||
|
|
||
| const promise = waitForElementToBeRemoved(callback, { | ||
| container, | ||
| }).then(successHandler, errorHandler) | ||
|
|
||
| expect(callback).toHaveBeenCalledTimes(1) | ||
| expect(successHandler).toHaveBeenCalledTimes(0) | ||
| expect(errorHandler).toHaveBeenCalledTimes(0) | ||
|
|
||
| skipSomeTimeForMutationObserver() | ||
|
|
||
| expect(callback).toHaveBeenCalledTimes(1) | ||
| expect(successHandler).toHaveBeenCalledTimes(0) | ||
| expect(errorHandler).toHaveBeenCalledTimes(0) | ||
|
|
||
| container.removeAttribute('data-test-attribute') | ||
| skipSomeTimeForMutationObserver() | ||
| await promise | ||
|
|
||
| expect(callback).toHaveBeenCalledTimes(2) | ||
| expect(successHandler).toHaveBeenCalledTimes(1) | ||
| expect(successHandler).toHaveBeenCalledWith(true) | ||
| expect(errorHandler).toHaveBeenCalledTimes(0) | ||
| }) | ||
|
|
||
| test('it throws if timeout is exceeded', async () => { | ||
| const {container} = render(``) | ||
|
|
||
| const callback = jest.fn(() => true).mockName('callback') | ||
| const successHandler = jest.fn().mockName('successHandler') | ||
| const errorHandler = jest.fn().mockName('errorHandler') | ||
|
|
||
| const promise = waitForElementToBeRemoved(callback, { | ||
| container, | ||
| timeout: 70, | ||
| mutationObserverOptions: {attributes: true}, | ||
| }).then(successHandler, errorHandler) | ||
|
|
||
| expect(callback).toHaveBeenCalledTimes(1) | ||
| expect(successHandler).toHaveBeenCalledTimes(0) | ||
| expect(errorHandler).toHaveBeenCalledTimes(0) | ||
|
|
||
| container.setAttribute('data-test-attribute', 'something changed once') | ||
| skipSomeTimeForMutationObserver(50) | ||
|
|
||
| expect(callback).toHaveBeenCalledTimes(2) | ||
| expect(successHandler).toHaveBeenCalledTimes(0) | ||
| expect(errorHandler).toHaveBeenCalledTimes(0) | ||
|
|
||
| container.setAttribute('data-test-attribute', 'something changed twice') | ||
| skipSomeTimeForMutationObserver(50) | ||
| await promise | ||
|
|
||
| expect(callback).toHaveBeenCalledTimes(3) | ||
| expect(successHandler).toHaveBeenCalledTimes(0) | ||
| expect(errorHandler).toHaveBeenCalledTimes(1) | ||
| expect(errorHandler).toHaveBeenCalledWith( | ||
| new Error('Timed out in waitForElementToBeRemoved.'), | ||
| ) | ||
| }) | ||
|
|
||
| test('it returns error immediately if there callback returns falsy value, empty array or error before any mutations', async () => { | ||
| const {container, getByTestId, queryByTestId, queryAllByTestId} = render(``) | ||
|
|
||
| const callbackForError = jest | ||
| .fn(() => getByTestId('initial-element')) | ||
| .mockName('callback') | ||
| const callbackForFalsy = jest | ||
| .fn(() => queryByTestId('initial-element')) | ||
| .mockName('callback') | ||
| const callbackForEmptyArray = jest | ||
| .fn(() => queryAllByTestId('initial-element')) | ||
| .mockName('callback') | ||
| const successHandler = jest.fn().mockName('successHandler') | ||
| const errorHandler = jest.fn().mockName('errorHandler') | ||
|
|
||
| const errorPromise = waitForElementToBeRemoved(callbackForError, { | ||
| container, | ||
| timeout: 70, | ||
| mutationObserverOptions: {attributes: true}, | ||
| }).then(successHandler, errorHandler) | ||
| const falsyPromise = waitForElementToBeRemoved(callbackForFalsy, { | ||
| container, | ||
| timeout: 70, | ||
| mutationObserverOptions: {attributes: true}, | ||
| }).then(successHandler, errorHandler) | ||
| const emptyArrayPromise = waitForElementToBeRemoved(callbackForEmptyArray, { | ||
| container, | ||
| timeout: 70, | ||
| mutationObserverOptions: {attributes: true}, | ||
| }).then(successHandler, errorHandler) | ||
|
|
||
| expect(callbackForError).toHaveBeenCalledTimes(1) | ||
| expect(callbackForFalsy).toHaveBeenCalledTimes(1) | ||
| expect(callbackForEmptyArray).toHaveBeenCalledTimes(1) | ||
|
|
||
| expect(successHandler).toHaveBeenCalledTimes(0) | ||
| expect(errorHandler).toHaveBeenCalledTimes(0) | ||
|
|
||
| await errorPromise | ||
| await falsyPromise | ||
| await emptyArrayPromise | ||
|
|
||
| expect(successHandler).toHaveBeenCalledTimes(0) | ||
| expect(errorHandler).toHaveBeenCalledTimes(3) | ||
|
|
||
| container.setAttribute('data-test-attribute', 'something changed once') | ||
| skipSomeTimeForMutationObserver(50) | ||
|
|
||
| expect(callbackForError).toHaveBeenCalledTimes(1) | ||
| expect(callbackForFalsy).toHaveBeenCalledTimes(1) | ||
| expect(successHandler).toHaveBeenCalledTimes(0) | ||
| expect(errorHandler).toHaveBeenCalledTimes(3) | ||
| expect(errorHandler.mock.calls[0]).toMatchInlineSnapshot(` | ||
| Array [ | ||
| [Error: Unable to find an element by: [data-testid="initial-element"] | ||
|
|
||
| [36m<div />[39m], | ||
| ] | ||
| `) | ||
| expect(errorHandler).toHaveBeenNthCalledWith( | ||
| 2, | ||
| new Error( | ||
| 'The callback function which was passed did not return an element or non-empty array of elements. waitForElementToBeRemoved requires that the element(s) exist before waiting for removal.', | ||
| ), | ||
| ) | ||
| expect(errorHandler).toHaveBeenNthCalledWith( | ||
| 3, | ||
| new Error( | ||
| 'The callback function which was passed did not return an element or non-empty array of elements. waitForElementToBeRemoved requires that the element(s) exist before waiting for removal.', | ||
| ), | ||
| ) | ||
| }) | ||
|
|
||
| test('works if a container is not defined', async () => { | ||
| render(``) | ||
| const el = document.createElement('p') | ||
| document.body.appendChild(el) | ||
| el.innerHTML = 'I changed!' | ||
| const callback = jest | ||
| .fn(() => el.textContent === 'I changed!') | ||
| .mockName('callback') | ||
| const successHandler = jest.fn().mockName('successHandler') | ||
| const errorHandler = jest.fn().mockName('errorHandler') | ||
|
|
||
| let promise | ||
| if (typeof window === 'undefined') { | ||
| promise = waitForElementToBeRemoved(callback, {container: document}).then( | ||
| successHandler, | ||
| errorHandler, | ||
| ) | ||
| } else { | ||
| promise = waitForElementToBeRemoved(callback).then( | ||
| successHandler, | ||
| errorHandler, | ||
| ) | ||
| } | ||
|
|
||
| skipSomeTimeForMutationObserver() | ||
|
|
||
| expect(callback).toHaveBeenCalledTimes(1) | ||
| expect(successHandler).toHaveBeenCalledTimes(0) | ||
| expect(errorHandler).toHaveBeenCalledTimes(0) | ||
|
|
||
| el.innerHTML = 'Changed!' | ||
| skipSomeTimeForMutationObserver() | ||
| await promise | ||
|
|
||
| expect(callback).toHaveBeenCalledTimes(2) | ||
| expect(successHandler).toHaveBeenCalledTimes(1) | ||
| expect(successHandler).toHaveBeenCalledWith(true) | ||
| expect(errorHandler).toHaveBeenCalledTimes(0) | ||
|
|
||
| document.getElementsByTagName('html')[0].innerHTML = '' // cleans the document | ||
| }) | ||
|
|
||
| test('throws an error if callback is not a function', async () => { | ||
| const successHandler = jest.fn().mockName('successHandler') | ||
| const errorHandler = jest.fn().mockName('errorHandler') | ||
|
|
||
| let promise | ||
| if (typeof window === 'undefined') { | ||
| promise = waitForElementToBeRemoved(undefined, {container: document}).then( | ||
| successHandler, | ||
| errorHandler, | ||
| ) | ||
| } else { | ||
| promise = waitForElementToBeRemoved().then(successHandler, errorHandler) | ||
| } | ||
|
|
||
| skipSomeTimeForMutationObserver() | ||
| await promise | ||
|
|
||
| expect(errorHandler).toHaveBeenCalledTimes(1) | ||
| expect(errorHandler).toHaveBeenCalledWith( | ||
| new Error( | ||
| 'waitForElementToBeRemoved requires a function as the first parameter', | ||
| ), | ||
| ) | ||
| expect(successHandler).toHaveBeenCalledTimes(0) | ||
| }) | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
toBeTruthy is built-into jest. This adds things like toBeInTheDocument. But I don't think we need this comment anyway. Please remove it.