Skip to content
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.

Sign up for GitHub

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
merged 29 commits into from
Mar 9, 2019
Merged

Wait for element to be removed #218

Changes from 1 commit
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
f3eca1c
Add tests and snapshots
Tolsee Feb 22, 2019
c547962
Implement waitForElementToBeRemoved method
Tolsee Feb 22, 2019
cc21522
Export waitForElementToBeRemoved
Tolsee Feb 22, 2019
c75e492
Add as contributor
Tolsee Feb 22, 2019
a349725
Update README.md after rebase
Tolsee Feb 22, 2019
d1d303d
Throw error is the element is not present in the first place
Tolsee Feb 23, 2019
39fea0e
Add test for full coverage
Tolsee Feb 23, 2019
36c4e4c
User jest time faker
Tolsee Feb 24, 2019
f5b081d
Add typings
Tolsee Feb 24, 2019
2dedb1f
Cleanup
Tolsee Feb 24, 2019
54cbc89
Update snapshot
Tolsee Feb 24, 2019
999ff5c
Get rid of iife
Tolsee Feb 25, 2019
e7a018e
Cleanup from review
Tolsee Feb 26, 2019
0518e78
Check for empty array as well
Tolsee Feb 26, 2019
d6150af
Check for error, falsy and empty to check whether the element is removed
Tolsee Feb 26, 2019
4e2f81c
error not defined error fix
Tolsee Feb 27, 2019
20ada81
Change snapshot to inline snapshot
Tolsee Feb 27, 2019
46a952f
Update snapshot
Tolsee Feb 27, 2019
618c240
Merge branch 'ts-wait-for-element-to-be-removed' of https://github.co…
Tolsee Feb 27, 2019
af327d1
Merge branch 'master' into ts-wait-for-element-to-be-removed
Tolsee Feb 27, 2019
505d783
Only observe mutations if synchronous test passes
Tolsee Feb 27, 2019
6fcfc83
only observer if synchronous test passes fix
Tolsee Feb 27, 2019
579c876
Await for the respective promise to resolve in test
Tolsee Feb 27, 2019
2f7452d
Snapshot test to normal toHaveBeenCalledWith assertions
Tolsee Feb 28, 2019
20cd110
Update comment
Tolsee Feb 28, 2019
bc2e3f2
Remove comment
Tolsee Feb 28, 2019
9834de2
test: improve tests for wait-for-element-to-be-removed
Mar 9, 2019
17f136f
test: fix everything
Mar 9, 2019
6664f0a
test: do not test unstable node versions
Mar 9, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
User jest time faker
  • Loading branch information
@Tolsee
Tolsee committed Feb 24, 2019
commit 36c4e4c66f617787a54fa156914eb2bb858f2ef2
61 changes: 37 additions & 24 deletions src/__tests__/wait-for-element-to-be-removed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@ import 'jest-dom/extend-expect'
import {render} from './helpers/test-utils'
import document from './helpers/document'

const skipSomeTime = delayMs =>
new Promise(resolve => setTimeout(resolve, delayMs))
jest.useFakeTimers()

// Using `setTimeout` >30ms instead of `wait` here because `mutationobserver-shim` uses `setTimeout` ~30ms.
const skipSomeTimeForMutationObserver = (delayMs = 50) =>
skipSomeTime(delayMs, 50)
const skipSomeTimeForMutationObserver = (delayMs = 50) => {
jest.advanceTimersByTime(delayMs)
jest.runAllImmediates()
}

test('it waits for the callback to throw error or a falsy value and only reacts to DOM mutations', async () => {
const {container, getByTestId} = render(
Expand Down Expand Up @@ -52,7 +53,7 @@ test('it waits for the callback to throw error or a falsy value and only reacts
const successHandler = jest.fn().mockName('successHandler')
const errorHandler = jest.fn().mockName('errorHandler')

waitForElementToBeRemoved(callback, {container}).then(
const promise = waitForElementToBeRemoved(callback, {container}).then(
successHandler,
errorHandler,
)
Expand All @@ -62,7 +63,7 @@ test('it waits for the callback to throw error or a falsy value and only reacts
expect(successHandler).toHaveBeenCalledTimes(0)
expect(errorHandler).toHaveBeenCalledTimes(0)

await skipSomeTimeForMutationObserver()
skipSomeTimeForMutationObserver()

// No more expected calls without DOM mutations.
expect(callback).toHaveBeenCalledTimes(1)
Expand All @@ -73,9 +74,11 @@ test('it waits for the callback to throw error or a falsy value and only reacts
for (const [mutationImpl, callbackImpl] of mutationsAndCallbacks) {
callback.mockImplementation(callbackImpl)
mutationImpl()
await skipSomeTimeForMutationObserver() // eslint-disable-line no-await-in-loop
skipSomeTimeForMutationObserver() // eslint-disable-line no-await-in-loop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doesn't this still need the await?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think so. Now the test runs synchronously because we're using jest fake timers.

}

await promise

expect(callback).toHaveBeenCalledTimes(1 + mutationsAndCallbacks.length)
expect(successHandler).toHaveBeenCalledTimes(1)
expect(successHandler.mock.calls[0]).toMatchSnapshot()
Expand All @@ -91,7 +94,7 @@ test('it waits characterData mutation', async () => {
const successHandler = jest.fn().mockName('successHandler')
const errorHandler = jest.fn().mockName('errorHandler')

waitForElementToBeRemoved(callback, {container}).then(
const promise = waitForElementToBeRemoved(callback, {container}).then(
successHandler,
errorHandler,
)
Expand All @@ -101,14 +104,15 @@ test('it waits characterData mutation', async () => {
expect(errorHandler).toHaveBeenCalledTimes(0)
expect(callback).toHaveBeenCalledTimes(1)

await skipSomeTimeForMutationObserver()
skipSomeTimeForMutationObserver()

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

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

expect(successHandler).toHaveBeenCalledTimes(1)
expect(successHandler.mock.calls[0]).toMatchSnapshot()
Expand All @@ -126,22 +130,23 @@ test('it waits for the attributes mutation', async () => {
const successHandler = jest.fn().mockName('successHandler')
const errorHandler = jest.fn().mockName('errorHandler')

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

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

await skipSomeTimeForMutationObserver()
skipSomeTimeForMutationObserver()

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

container.removeAttribute('data-test-attribute')
await skipSomeTimeForMutationObserver()
skipSomeTimeForMutationObserver()
await promise

expect(callback).toHaveBeenCalledTimes(2)
expect(successHandler).toHaveBeenCalledTimes(1)
Expand All @@ -156,7 +161,7 @@ test('it throws if timeout is exceeded', async () => {
const successHandler = jest.fn().mockName('successHandler')
const errorHandler = jest.fn().mockName('errorHandler')

waitForElementToBeRemoved(callback, {
const promise = waitForElementToBeRemoved(callback, {
container,
timeout: 70,
mutationObserverOptions: {attributes: true},
Expand All @@ -167,14 +172,15 @@ test('it throws if timeout is exceeded', async () => {
expect(errorHandler).toHaveBeenCalledTimes(0)

container.setAttribute('data-test-attribute', 'something changed once')
await skipSomeTimeForMutationObserver(50)
skipSomeTimeForMutationObserver(50)

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

container.setAttribute('data-test-attribute', 'something changed twice')
await skipSomeTimeForMutationObserver(50)
skipSomeTimeForMutationObserver(50)
await promise

expect(callback).toHaveBeenCalledTimes(3)
expect(successHandler).toHaveBeenCalledTimes(0)
Expand Down Expand Up @@ -215,7 +221,7 @@ test('it returns error immediately if there callback returns falsy value or erro
expect(errorHandler).toHaveBeenCalledTimes(2)

container.setAttribute('data-test-attribute', 'something changed once')
await skipSomeTimeForMutationObserver(50)
skipSomeTimeForMutationObserver(50)

// No more calls are expected.
expect(callbackForError).toHaveBeenCalledTimes(1)
Expand All @@ -237,23 +243,28 @@ test('works if a container is not defined', async () => {
const successHandler = jest.fn().mockName('successHandler')
const errorHandler = jest.fn().mockName('errorHandler')

let promise
if (typeof window === 'undefined') {
waitForElementToBeRemoved(callback, {container: document}).then(
promise = waitForElementToBeRemoved(callback, {container: document}).then(
successHandler,
errorHandler,
)
} else {
waitForElementToBeRemoved(callback).then(successHandler, errorHandler)
promise = waitForElementToBeRemoved(callback).then(
successHandler,
errorHandler,
)
}

await skipSomeTimeForMutationObserver()
skipSomeTimeForMutationObserver()

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

el.innerHTML = 'Changed!'
await skipSomeTimeForMutationObserver()
skipSomeTimeForMutationObserver()
await promise

expect(callback).toHaveBeenCalledTimes(2)
expect(successHandler).toHaveBeenCalledTimes(1)
Expand All @@ -267,16 +278,18 @@ 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') {
waitForElementToBeRemoved(undefined, {container: document}).then(
promise = waitForElementToBeRemoved(undefined, {container: document}).then(
successHandler,
errorHandler,
)
} else {
waitForElementToBeRemoved().then(successHandler, errorHandler)
promise = waitForElementToBeRemoved().then(successHandler, errorHandler)
}

await skipSomeTimeForMutationObserver()
skipSomeTimeForMutationObserver()
await promise

expect(errorHandler).toHaveBeenCalledTimes(1)
expect(errorHandler.mock.calls[0]).toMatchSnapshot()
Expand Down