Add tests and snapshots

Author: Tolsee

src/__tests__/__snapshots__/wait-for-element-to-be-removed.js.snap

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it returns immediately if the callback returns the value before any mutations 1`] = `
+<div
+  data-test-attribute="something changed once"
+/>
+`;
+
+exports[`it throws if timeout is exceeded 1`] = `
+Array [
+  [Error: Timed out in waitForElementToBeRemoved.],
+]
+`;
+
+exports[`it throws if timeout is exceeded 2`] = `
+<div
+  data-test-attribute="something changed twice"
+/>
+`;
+
+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 throw error or a falsy value and only reacts to DOM mutations 1`] = `
+<div>
+  <div
+    data-testid="initial-element"
+  >
+    
+    
+  </div>
+  <div
+    data-testid="another-element-that-causes-mutation-1"
+  />
+  <div
+    data-testid="another-element-that-causes-mutation-2"
+  />
+</div>
+`;

src/__tests__/wait-for-element-to-be-removed.js

@@ -0,0 +1,278 @@
+import {waitForElementToBeRemoved, wait} from '../'
+// adds special assertions like toBeTruthy
+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))
+
+// Using `setTimeout` >30ms instead of `wait` here because `mutationobserver-shim` uses `setTimeout` ~30ms.
+const skipSomeTimeForMutationObserver = (delayMs = 50) =>
+  skipSomeTime(delayMs, 50)
+
+test('it waits for the callback to throw error or a falsy value and only reacts to DOM mutations', async () => {
+  const {container, getByTestId} = 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')],
+    [
+      () =>
+        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')
+
+  waitForElementToBeRemoved(callback, {container}).then(
+    successHandler,
+    errorHandler,
+  )
+
+  // One synchronous `callback` call is expected.
+  expect(callback).toHaveBeenCalledTimes(1)
+  expect(successHandler).toHaveBeenCalledTimes(0)
+  expect(errorHandler).toHaveBeenCalledTimes(0)
+
+  await 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()
+    await skipSomeTimeForMutationObserver() // eslint-disable-line no-await-in-loop
+  }
+
+  expect(callback).toHaveBeenCalledTimes(1 + mutationsAndCallbacks.length)
+  expect(successHandler).toHaveBeenCalledTimes(1)
+  expect(successHandler).toHaveBeenCalledWith(true)
+  expect(errorHandler).toHaveBeenCalledTimes(0)
+  expect(container).toMatchSnapshot()
+})
+
+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')
+
+  waitForElementToBeRemoved(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()
+})
+
+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')
+
+  waitForElementToBeRemoved(callback, {
+    container,
+  }).then(successHandler, errorHandler)
+
+  expect(callback).toHaveBeenCalledTimes(1)
+  expect(successHandler).toHaveBeenCalledTimes(0)
+  expect(errorHandler).toHaveBeenCalledTimes(0)
+
+  await skipSomeTimeForMutationObserver()
+
+  expect(callback).toHaveBeenCalledTimes(1)
+  expect(successHandler).toHaveBeenCalledTimes(0)
+  expect(errorHandler).toHaveBeenCalledTimes(0)
+
+  container.removeAttribute('data-test-attribute')
+  await skipSomeTimeForMutationObserver()
+
+  expect(callback).toHaveBeenCalledTimes(2)
+  expect(successHandler).toHaveBeenCalledTimes(1)
+  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')
+
+  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')
+  await 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)
+
+  expect(callback).toHaveBeenCalledTimes(3)
+  expect(successHandler).toHaveBeenCalledTimes(0)
+  expect(errorHandler).toHaveBeenCalledTimes(1)
+  expect(errorHandler.mock.calls[0]).toMatchSnapshot()
+  expect(container).toMatchSnapshot()
+})
+
+test('it returns immediately if the callback returns the value before any mutations', async () => {
+  const {container, getByTestId} = render(``)
+
+  const callback = jest
+    .fn(() => getByTestId('initial-element'))
+    .mockName('callback')
+  const successHandler = jest.fn().mockName('successHandler')
+  const errorHandler = jest.fn().mockName('errorHandler')
+
+  waitForElementToBeRemoved(callback, {
+    container,
+    timeout: 70,
+    mutationObserverOptions: {attributes: true},
+  }).then(successHandler, errorHandler)
+
+  // One synchronous `callback` call is expected.
+  expect(callback).toHaveBeenCalledTimes(1)
+
+  // The promise callbacks are expected to be called asyncronously.
+  expect(successHandler).toHaveBeenCalledTimes(0)
+  expect(errorHandler).toHaveBeenCalledTimes(0)
+  await wait()
+  expect(successHandler).toHaveBeenCalledTimes(1)
+  expect(errorHandler).toHaveBeenCalledTimes(0)
+
+  container.setAttribute('data-test-attribute', 'something changed once')
+  await skipSomeTimeForMutationObserver(50)
+
+  // No more calls are expected.
+  expect(callback).toHaveBeenCalledTimes(1)
+  expect(successHandler).toHaveBeenCalledTimes(1)
+  expect(errorHandler).toHaveBeenCalledTimes(0)
+
+  expect(container).toMatchSnapshot()
+})
+
+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')
+
+  if (typeof window === 'undefined') {
+    waitForElementToBeRemoved(callback, {container: document}).then(
+      successHandler,
+      errorHandler,
+    )
+  } else {
+    waitForElementToBeRemoved(callback).then(successHandler, errorHandler)
+  }
+
+  await skipSomeTimeForMutationObserver()
+
+  expect(callback).toHaveBeenCalledTimes(1)
+  expect(successHandler).toHaveBeenCalledTimes(0)
+  expect(errorHandler).toHaveBeenCalledTimes(0)
+
+  el.innerHTML = 'Changed!'
+  await skipSomeTimeForMutationObserver()
+
+  expect(callback).toHaveBeenCalledTimes(2)
+  expect(successHandler).toHaveBeenCalledTimes(1)
+  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')
+
+  if (typeof window === 'undefined') {
+    waitForElementToBeRemoved(undefined, {container: document}).then(
+      successHandler,
+      errorHandler,
+    )
+  } else {
+    waitForElementToBeRemoved().then(successHandler, errorHandler)
+  }
+
+  await skipSomeTimeForMutationObserver()
+
+  expect(errorHandler).toHaveBeenLastCalledWith(
+    'waitForElementToBeRemoved requires a callback as the first parameter',
+  )
+  expect(successHandler).toHaveBeenCalledTimes(0)
+})