tests: replace 'done' callback with 'Promise' to fix deprecation errors (#35659)

Reference:

https://jasmine.github.io/tutorials/async

'DEPRECATION: An asynchronous function called its 'done' callback more than once. This is a bug in the spec, beforeAll, beforeEach, afterAll, or afterEach function in question. This will be treated as an error in a future version. See<https://jasmine.github.io/tutorials/upgrading_to_Jasmine_4.0#deprecations-due-to-calling-done-multiple-times> for more information.

5 files changed, 551 insertions, 495 deletions

diff --git a/js/tests/unit/util/backdrop.spec.js b/js/tests/unit/util/backdrop.spec.js
index f9903c832..73384fc90 100644
--- a/js/tests/unit/util/backdrop.spec.js
+++ b/js/tests/unit/util/backdrop.spec.js
@@ -23,267 +23,297 @@ describe('Backdrop', () => {
   })
 
   describe('show', () => {
-    it('should append the backdrop html once on show and include the "show" class if it is "shown"', done => {
-      const instance = new Backdrop({
-        isVisible: true,
-        isAnimated: false
-      })
-      const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
+    it('should append the backdrop html once on show and include the "show" class if it is "shown"', () => {
+      return new Promise(resolve => {
+        const instance = new Backdrop({
+          isVisible: true,
+          isAnimated: false
+        })
+        const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
 
-      expect(getElements()).toHaveSize(0)
+        expect(getElements()).toHaveSize(0)
 
-      instance.show()
-      instance.show(() => {
-        expect(getElements()).toHaveSize(1)
-        for (const el of getElements()) {
-          expect(el).toHaveClass(CLASS_NAME_SHOW)
-        }
+        instance.show()
+        instance.show(() => {
+          expect(getElements()).toHaveSize(1)
+          for (const el of getElements()) {
+            expect(el).toHaveClass(CLASS_NAME_SHOW)
+          }
 
-        done()
+          resolve()
+        })
       })
     })
 
-    it('should not append the backdrop html if it is not "shown"', done => {
-      const instance = new Backdrop({
-        isVisible: false,
-        isAnimated: true
-      })
-      const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
+    it('should not append the backdrop html if it is not "shown"', () => {
+      return new Promise(resolve => {
+        const instance = new Backdrop({
+          isVisible: false,
+          isAnimated: true
+        })
+        const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
 
-      expect(getElements()).toHaveSize(0)
-      instance.show(() => {
         expect(getElements()).toHaveSize(0)
-        done()
+        instance.show(() => {
+          expect(getElements()).toHaveSize(0)
+          resolve()
+        })
       })
     })
 
-    it('should append the backdrop html once and include the "fade" class if it is "shown" and "animated"', done => {
-      const instance = new Backdrop({
-        isVisible: true,
-        isAnimated: true
-      })
-      const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
+    it('should append the backdrop html once and include the "fade" class if it is "shown" and "animated"', () => {
+      return new Promise(resolve => {
+        const instance = new Backdrop({
+          isVisible: true,
+          isAnimated: true
+        })
+        const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
 
-      expect(getElements()).toHaveSize(0)
+        expect(getElements()).toHaveSize(0)
 
-      instance.show(() => {
-        expect(getElements()).toHaveSize(1)
-        for (const el of getElements()) {
-          expect(el).toHaveClass(CLASS_NAME_FADE)
-        }
+        instance.show(() => {
+          expect(getElements()).toHaveSize(1)
+          for (const el of getElements()) {
+            expect(el).toHaveClass(CLASS_NAME_FADE)
+          }
 
-        done()
+          resolve()
+        })
       })
     })
   })
 
   describe('hide', () => {
-    it('should remove the backdrop html', done => {
-      const instance = new Backdrop({
-        isVisible: true,
-        isAnimated: true
-      })
+    it('should remove the backdrop html', () => {
+      return new Promise(resolve => {
+        const instance = new Backdrop({
+          isVisible: true,
+          isAnimated: true
+        })
 
-      const getElements = () => document.body.querySelectorAll(CLASS_BACKDROP)
+        const getElements = () => document.body.querySelectorAll(CLASS_BACKDROP)
 
-      expect(getElements()).toHaveSize(0)
-      instance.show(() => {
-        expect(getElements()).toHaveSize(1)
-        instance.hide(() => {
-          expect(getElements()).toHaveSize(0)
-          done()
+        expect(getElements()).toHaveSize(0)
+        instance.show(() => {
+          expect(getElements()).toHaveSize(1)
+          instance.hide(() => {
+            expect(getElements()).toHaveSize(0)
+            resolve()
+          })
         })
       })
     })
 
-    it('should remove the "show" class', done => {
-      const instance = new Backdrop({
-        isVisible: true,
-        isAnimated: true
-      })
-      const elem = instance._getElement()
+    it('should remove the "show" class', () => {
+      return new Promise(resolve => {
+        const instance = new Backdrop({
+          isVisible: true,
+          isAnimated: true
+        })
+        const elem = instance._getElement()
 
-      instance.show()
-      instance.hide(() => {
-        expect(elem).not.toHaveClass(CLASS_NAME_SHOW)
-        done()
+        instance.show()
+        instance.hide(() => {
+          expect(elem).not.toHaveClass(CLASS_NAME_SHOW)
+          resolve()
+        })
       })
     })
 
-    it('should not try to remove Node on remove method if it is not "shown"', done => {
-      const instance = new Backdrop({
-        isVisible: false,
-        isAnimated: true
-      })
-      const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
-      const spy = spyOn(instance, 'dispose').and.callThrough()
+    it('should not try to remove Node on remove method if it is not "shown"', () => {
+      return new Promise(resolve => {
+        const instance = new Backdrop({
+          isVisible: false,
+          isAnimated: true
+        })
+        const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
+        const spy = spyOn(instance, 'dispose').and.callThrough()
 
-      expect(getElements()).toHaveSize(0)
-      expect(instance._isAppended).toBeFalse()
-      instance.show(() => {
-        instance.hide(() => {
-          expect(getElements()).toHaveSize(0)
-          expect(spy).not.toHaveBeenCalled()
-          expect(instance._isAppended).toBeFalse()
-          done()
+        expect(getElements()).toHaveSize(0)
+        expect(instance._isAppended).toBeFalse()
+        instance.show(() => {
+          instance.hide(() => {
+            expect(getElements()).toHaveSize(0)
+            expect(spy).not.toHaveBeenCalled()
+            expect(instance._isAppended).toBeFalse()
+            resolve()
+          })
         })
       })
     })
 
-    it('should not error if the backdrop no longer has a parent', done => {
-      fixtureEl.innerHTML = '<div id="wrapper"></div>'
+    it('should not error if the backdrop no longer has a parent', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<div id="wrapper"></div>'
 
-      const wrapper = fixtureEl.querySelector('#wrapper')
-      const instance = new Backdrop({
-        isVisible: true,
-        isAnimated: true,
-        rootElement: wrapper
-      })
+        const wrapper = fixtureEl.querySelector('#wrapper')
+        const instance = new Backdrop({
+          isVisible: true,
+          isAnimated: true,
+          rootElement: wrapper
+        })
 
-      const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
+        const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
 
-      instance.show(() => {
-        wrapper.remove()
-        instance.hide(() => {
-          expect(getElements()).toHaveSize(0)
-          done()
+        instance.show(() => {
+          wrapper.remove()
+          instance.hide(() => {
+            expect(getElements()).toHaveSize(0)
+            resolve()
+          })
         })
       })
     })
   })
 
   describe('click callback', () => {
-    it('should execute callback on click', done => {
-      const spy = jasmine.createSpy('spy')
+    it('should execute callback on click', () => {
+      return new Promise(resolve => {
+        const spy = jasmine.createSpy('spy')
 
-      const instance = new Backdrop({
-        isVisible: true,
-        isAnimated: false,
-        clickCallback: () => spy()
-      })
-      const endTest = () => {
-        setTimeout(() => {
-          expect(spy).toHaveBeenCalled()
-          done()
-        }, 10)
-      }
-
-      instance.show(() => {
-        const clickEvent = new Event('mousedown', { bubbles: true, cancelable: true })
-        document.querySelector(CLASS_BACKDROP).dispatchEvent(clickEvent)
-        endTest()
-      })
-    })
-  })
+        const instance = new Backdrop({
+          isVisible: true,
+          isAnimated: false,
+          clickCallback: () => spy()
+        })
+        const endTest = () => {
+          setTimeout(() => {
+            expect(spy).toHaveBeenCalled()
+            resolve()
+          }, 10)
+        }
 
-  describe('animation callbacks', () => {
-    it('should show and hide backdrop after counting transition duration if it is animated', done => {
-      const instance = new Backdrop({
-        isVisible: true,
-        isAnimated: true
-      })
-      const spy2 = jasmine.createSpy('spy2')
-
-      const execDone = () => {
-        setTimeout(() => {
-          expect(spy2).toHaveBeenCalledTimes(2)
-          done()
-        }, 10)
-      }
-
-      instance.show(spy2)
-      instance.hide(() => {
-        spy2()
-        execDone()
+        instance.show(() => {
+          const clickEvent = new Event('mousedown', { bubbles: true, cancelable: true })
+          document.querySelector(CLASS_BACKDROP).dispatchEvent(clickEvent)
+          endTest()
+        })
       })
-      expect(spy2).not.toHaveBeenCalled()
     })
 
-    it('should show and hide backdrop without a delay if it is not animated', done => {
-      const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
-      const instance = new Backdrop({
-        isVisible: true,
-        isAnimated: false
+    describe('animation callbacks', () => {
+      it('should show and hide backdrop after counting transition duration if it is animated', () => {
+        return new Promise(resolve => {
+          const instance = new Backdrop({
+            isVisible: true,
+            isAnimated: true
+          })
+          const spy2 = jasmine.createSpy('spy2')
+
+          const execDone = () => {
+            setTimeout(() => {
+              expect(spy2).toHaveBeenCalledTimes(2)
+              resolve()
+            }, 10)
+          }
+
+          instance.show(spy2)
+          instance.hide(() => {
+            spy2()
+            execDone()
+          })
+          expect(spy2).not.toHaveBeenCalled()
+        })
       })
-      const spy2 = jasmine.createSpy('spy2')
 
-      instance.show(spy2)
-      instance.hide(spy2)
-
-      setTimeout(() => {
-        expect(spy2).toHaveBeenCalled()
-        expect(spy).not.toHaveBeenCalled()
-        done()
-      }, 10)
-    })
-
-    it('should not call delay callbacks if it is not "shown"', done => {
-      const instance = new Backdrop({
-        isVisible: false,
-        isAnimated: true
+      it('should show and hide backdrop without a delay if it is not animated', () => {
+        return new Promise(resolve => {
+          const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
+          const instance = new Backdrop({
+            isVisible: true,
+            isAnimated: false
+          })
+          const spy2 = jasmine.createSpy('spy2')
+
+          instance.show(spy2)
+          instance.hide(spy2)
+
+          setTimeout(() => {
+            expect(spy2).toHaveBeenCalled()
+            expect(spy).not.toHaveBeenCalled()
+            resolve()
+          }, 10)
+        })
       })
-      const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
 
-      instance.show()
-      instance.hide(() => {
-        expect(spy).not.toHaveBeenCalled()
-        done()
+      it('should not call delay callbacks if it is not "shown"', () => {
+        return new Promise(resolve => {
+          const instance = new Backdrop({
+            isVisible: false,
+            isAnimated: true
+          })
+          const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
+
+          instance.show()
+          instance.hide(() => {
+            expect(spy).not.toHaveBeenCalled()
+            resolve()
+          })
+        })
       })
     })
-  })
 
-  describe('Config', () => {
-    describe('rootElement initialization', () => {
-      it('should be appended on "document.body" by default', done => {
-        const instance = new Backdrop({
-          isVisible: true
-        })
-        const getElement = () => document.querySelector(CLASS_BACKDROP)
-        instance.show(() => {
-          expect(getElement().parentElement).toEqual(document.body)
-          done()
+    describe('Config', () => {
+      describe('rootElement initialization', () => {
+        it('should be appended on "document.body" by default', () => {
+          return new Promise(resolve => {
+            const instance = new Backdrop({
+              isVisible: true
+            })
+            const getElement = () => document.querySelector(CLASS_BACKDROP)
+            instance.show(() => {
+              expect(getElement().parentElement).toEqual(document.body)
+              resolve()
+            })
+          })
         })
-      })
 
-      it('should find the rootElement if passed as a string', done => {
-        const instance = new Backdrop({
-          isVisible: true,
-          rootElement: 'body'
-        })
-        const getElement = () => document.querySelector(CLASS_BACKDROP)
-        instance.show(() => {
-          expect(getElement().parentElement).toEqual(document.body)
-          done()
+        it('should find the rootElement if passed as a string', () => {
+          return new Promise(resolve => {
+            const instance = new Backdrop({
+              isVisible: true,
+              rootElement: 'body'
+            })
+            const getElement = () => document.querySelector(CLASS_BACKDROP)
+            instance.show(() => {
+              expect(getElement().parentElement).toEqual(document.body)
+              resolve()
+            })
+          })
         })
-      })
-
-      it('should be appended on any element given by the proper config', done => {
-        fixtureEl.innerHTML = '<div id="wrapper"></div>'
 
-        const wrapper = fixtureEl.querySelector('#wrapper')
-        const instance = new Backdrop({
-          isVisible: true,
-          rootElement: wrapper
-        })
-        const getElement = () => document.querySelector(CLASS_BACKDROP)
-        instance.show(() => {
-          expect(getElement().parentElement).toEqual(wrapper)
-          done()
+        it('should be appended on any element given by the proper config', () => {
+          return new Promise(resolve => {
+            fixtureEl.innerHTML = '<div id="wrapper"></div>'
+
+            const wrapper = fixtureEl.querySelector('#wrapper')
+            const instance = new Backdrop({
+              isVisible: true,
+              rootElement: wrapper
+            })
+            const getElement = () => document.querySelector(CLASS_BACKDROP)
+            instance.show(() => {
+              expect(getElement().parentElement).toEqual(wrapper)
+              resolve()
+            })
+          })
         })
       })
-    })
 
-    describe('ClassName', () => {
-      it('should allow configuring className', done => {
-        const instance = new Backdrop({
-          isVisible: true,
-          className: 'foo'
-        })
-        const getElement = () => document.querySelector('.foo')
-        instance.show(() => {
-          expect(getElement()).toEqual(instance._getElement())
-          instance.dispose()
-          done()
+      describe('ClassName', () => {
+        it('should allow configuring className', () => {
+          return new Promise(resolve => {
+            const instance = new Backdrop({
+              isVisible: true,
+              className: 'foo'
+            })
+            const getElement = () => document.querySelector('.foo')
+            instance.show(() => {
+              expect(getElement()).toEqual(instance._getElement())
+              instance.dispose()
+              resolve()
+            })
+          })
         })
       })
     })
diff --git a/js/tests/unit/util/focustrap.spec.js b/js/tests/unit/util/focustrap.spec.js
index 52a757397..55f6a23a7 100644
--- a/js/tests/unit/util/focustrap.spec.js
+++ b/js/tests/unit/util/focustrap.spec.js
@@ -1,7 +1,7 @@
 import FocusTrap from '../../../src/util/focustrap'
 import EventHandler from '../../../src/dom/event-handler'
 import SelectorEngine from '../../../src/dom/selector-engine'
-import { clearFixture, getFixture, createEvent } from '../../helpers/fixture'
+import { clearFixture, createEvent, getFixture } from '../../helpers/fixture'
 
 describe('FocusTrap', () => {
   let fixtureEl
@@ -41,140 +41,148 @@ describe('FocusTrap', () => {
       expect(trapElement.focus).not.toHaveBeenCalled()
     })
 
-    it('should force focus inside focus trap if it can', done => {
-      fixtureEl.innerHTML = [
-        '<a href="#" id="outside">outside</a>',
-        '<div id="focustrap" tabindex="-1">',
-        '  <a href="#" id="inside">inside</a>',
-        '</div>'
-      ].join('')
+    it('should force focus inside focus trap if it can', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = [
+          '<a href="#" id="outside">outside</a>',
+          '<div id="focustrap" tabindex="-1">',
+          '  <a href="#" id="inside">inside</a>',
+          '</div>'
+        ].join('')
 
-      const trapElement = fixtureEl.querySelector('div')
-      const focustrap = new FocusTrap({ trapElement })
-      focustrap.activate()
+        const trapElement = fixtureEl.querySelector('div')
+        const focustrap = new FocusTrap({ trapElement })
+        focustrap.activate()
 
-      const inside = document.getElementById('inside')
+        const inside = document.getElementById('inside')
 
-      const focusInListener = () => {
-        expect(inside.focus).toHaveBeenCalled()
-        document.removeEventListener('focusin', focusInListener)
-        done()
-      }
+        const focusInListener = () => {
+          expect(inside.focus).toHaveBeenCalled()
+          document.removeEventListener('focusin', focusInListener)
+          resolve()
+        }
 
-      spyOn(inside, 'focus')
-      spyOn(SelectorEngine, 'focusableChildren').and.callFake(() => [inside])
+        spyOn(inside, 'focus')
+        spyOn(SelectorEngine, 'focusableChildren').and.callFake(() => [inside])
 
-      document.addEventListener('focusin', focusInListener)
+        document.addEventListener('focusin', focusInListener)
 
-      const focusInEvent = createEvent('focusin', { bubbles: true })
-      Object.defineProperty(focusInEvent, 'target', {
-        value: document.getElementById('outside')
-      })
+        const focusInEvent = createEvent('focusin', { bubbles: true })
+        Object.defineProperty(focusInEvent, 'target', {
+          value: document.getElementById('outside')
+        })
 
-      document.dispatchEvent(focusInEvent)
+        document.dispatchEvent(focusInEvent)
+      })
     })
 
-    it('should wrap focus around forward on tab', done => {
-      fixtureEl.innerHTML = [
-        '<a href="#" id="outside">outside</a>',
-        '<div id="focustrap" tabindex="-1">',
-        '  <a href="#" id="first">first</a>',
-        '  <a href="#" id="inside">inside</a>',
-        '  <a href="#" id="last">last</a>',
-        '</div>'
-      ].join('')
-
-      const trapElement = fixtureEl.querySelector('div')
-      const focustrap = new FocusTrap({ trapElement })
-      focustrap.activate()
-
-      const first = document.getElementById('first')
-      const inside = document.getElementById('inside')
-      const last = document.getElementById('last')
-      const outside = document.getElementById('outside')
-
-      spyOn(SelectorEngine, 'focusableChildren').and.callFake(() => [first, inside, last])
-      spyOn(first, 'focus').and.callThrough()
-
-      const focusInListener = () => {
-        expect(first.focus).toHaveBeenCalled()
-        first.removeEventListener('focusin', focusInListener)
-        done()
-      }
-
-      first.addEventListener('focusin', focusInListener)
-
-      const keydown = createEvent('keydown')
-      keydown.key = 'Tab'
-
-      document.dispatchEvent(keydown)
-      outside.focus()
+    it('should wrap focus around forward on tab', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = [
+          '<a href="#" id="outside">outside</a>',
+          '<div id="focustrap" tabindex="-1">',
+          '  <a href="#" id="first">first</a>',
+          '  <a href="#" id="inside">inside</a>',
+          '  <a href="#" id="last">last</a>',
+          '</div>'
+        ].join('')
+
+        const trapElement = fixtureEl.querySelector('div')
+        const focustrap = new FocusTrap({ trapElement })
+        focustrap.activate()
+
+        const first = document.getElementById('first')
+        const inside = document.getElementById('inside')
+        const last = document.getElementById('last')
+        const outside = document.getElementById('outside')
+
+        spyOn(SelectorEngine, 'focusableChildren').and.callFake(() => [first, inside, last])
+        spyOn(first, 'focus').and.callThrough()
+
+        const focusInListener = () => {
+          expect(first.focus).toHaveBeenCalled()
+          first.removeEventListener('focusin', focusInListener)
+          resolve()
+        }
+
+        first.addEventListener('focusin', focusInListener)
+
+        const keydown = createEvent('keydown')
+        keydown.key = 'Tab'
+
+        document.dispatchEvent(keydown)
+        outside.focus()
+      })
     })
 
-    it('should wrap focus around backwards on shift-tab', done => {
-      fixtureEl.innerHTML = [
-        '<a href="#" id="outside">outside</a>',
-        '<div id="focustrap" tabindex="-1">',
-        '  <a href="#" id="first">first</a>',
-        '  <a href="#" id="inside">inside</a>',
-        '  <a href="#" id="last">last</a>',
-        '</div>'
-      ].join('')
-
-      const trapElement = fixtureEl.querySelector('div')
-      const focustrap = new FocusTrap({ trapElement })
-      focustrap.activate()
-
-      const first = document.getElementById('first')
-      const inside = document.getElementById('inside')
-      const last = document.getElementById('last')
-      const outside = document.getElementById('outside')
-
-      spyOn(SelectorEngine, 'focusableChildren').and.callFake(() => [first, inside, last])
-      spyOn(last, 'focus').and.callThrough()
-
-      const focusInListener = () => {
-        expect(last.focus).toHaveBeenCalled()
-        last.removeEventListener('focusin', focusInListener)
-        done()
-      }
-
-      last.addEventListener('focusin', focusInListener)
-
-      const keydown = createEvent('keydown')
-      keydown.key = 'Tab'
-      keydown.shiftKey = true
-
-      document.dispatchEvent(keydown)
-      outside.focus()
+    it('should wrap focus around backwards on shift-tab', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = [
+          '<a href="#" id="outside">outside</a>',
+          '<div id="focustrap" tabindex="-1">',
+          '  <a href="#" id="first">first</a>',
+          '  <a href="#" id="inside">inside</a>',
+          '  <a href="#" id="last">last</a>',
+          '</div>'
+        ].join('')
+
+        const trapElement = fixtureEl.querySelector('div')
+        const focustrap = new FocusTrap({ trapElement })
+        focustrap.activate()
+
+        const first = document.getElementById('first')
+        const inside = document.getElementById('inside')
+        const last = document.getElementById('last')
+        const outside = document.getElementById('outside')
+
+        spyOn(SelectorEngine, 'focusableChildren').and.callFake(() => [first, inside, last])
+        spyOn(last, 'focus').and.callThrough()
+
+        const focusInListener = () => {
+          expect(last.focus).toHaveBeenCalled()
+          last.removeEventListener('focusin', focusInListener)
+          resolve()
+        }
+
+        last.addEventListener('focusin', focusInListener)
+
+        const keydown = createEvent('keydown')
+        keydown.key = 'Tab'
+        keydown.shiftKey = true
+
+        document.dispatchEvent(keydown)
+        outside.focus()
+      })
     })
 
-    it('should force focus on itself if there is no focusable content', done => {
-      fixtureEl.innerHTML = [
-        '<a href="#" id="outside">outside</a>',
-        '<div id="focustrap" tabindex="-1"></div>'
-      ].join('')
+    it('should force focus on itself if there is no focusable content', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = [
+          '<a href="#" id="outside">outside</a>',
+          '<div id="focustrap" tabindex="-1"></div>'
+        ].join('')
 
-      const trapElement = fixtureEl.querySelector('div')
-      const focustrap = new FocusTrap({ trapElement })
-      focustrap.activate()
+        const trapElement = fixtureEl.querySelector('div')
+        const focustrap = new FocusTrap({ trapElement })
+        focustrap.activate()
 
-      const focusInListener = () => {
-        expect(focustrap._config.trapElement.focus).toHaveBeenCalled()
-        document.removeEventListener('focusin', focusInListener)
-        done()
-      }
+        const focusInListener = () => {
+          expect(focustrap._config.trapElement.focus).toHaveBeenCalled()
+          document.removeEventListener('focusin', focusInListener)
+          resolve()
+        }
 
-      spyOn(focustrap._config.trapElement, 'focus')
+        spyOn(focustrap._config.trapElement, 'focus')
 
-      document.addEventListener('focusin', focusInListener)
+        document.addEventListener('focusin', focusInListener)
 
-      const focusInEvent = createEvent('focusin', { bubbles: true })
-      Object.defineProperty(focusInEvent, 'target', {
-        value: document.getElementById('outside')
-      })
+        const focusInEvent = createEvent('focusin', { bubbles: true })
+        Object.defineProperty(focusInEvent, 'target', {
+          value: document.getElementById('outside')
+        })
 
-      document.dispatchEvent(focusInEvent)
+        document.dispatchEvent(focusInEvent)
+      })
     })
   })
 
diff --git a/js/tests/unit/util/index.spec.js b/js/tests/unit/util/index.spec.js
index 9d8c5ed98..0d60ca989 100644
--- a/js/tests/unit/util/index.spec.js
+++ b/js/tests/unit/util/index.spec.js
@@ -1,5 +1,6 @@
 import * as Util from '../../../src/util/index'
 import { clearFixture, getFixture } from '../../helpers/fixture'
+import { noop } from '../../../src/util/index'
 
 describe('Util', () => {
   let fixtureEl
@@ -154,18 +155,20 @@ describe('Util', () => {
   })
 
   describe('triggerTransitionEnd', () => {
-    it('should trigger transitionend event', done => {
-      fixtureEl.innerHTML = '<div></div>'
+    it('should trigger transitionend event', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<div></div>'
 
-      const el = fixtureEl.querySelector('div')
-      const spy = spyOn(el, 'dispatchEvent').and.callThrough()
+        const el = fixtureEl.querySelector('div')
+        const spy = spyOn(el, 'dispatchEvent').and.callThrough()
 
-      el.addEventListener('transitionend', () => {
-        expect(spy).toHaveBeenCalled()
-        done()
-      })
+        el.addEventListener('transitionend', () => {
+          expect(spy).toHaveBeenCalled()
+          resolve()
+        })
 
-      Util.triggerTransitionEnd(el)
+        Util.triggerTransitionEnd(el)
+      })
     })
   })
 
@@ -611,9 +614,9 @@ describe('Util', () => {
     })
 
     it('should define a plugin on the jQuery instance', () => {
-      const pluginMock = function () {}
+      const pluginMock = Util.noop
       pluginMock.NAME = 'test'
-      pluginMock.jQueryInterface = function () {}
+      pluginMock.jQueryInterface = Util.noop
 
       Util.defineJQueryPlugin(pluginMock)
       expect(fakejQuery.fn.test).toEqual(pluginMock.jQueryInterface)
@@ -658,96 +661,104 @@ describe('Util', () => {
       expect(callbackSpy).toHaveBeenCalled()
     })
 
-    it('should execute a function after a computed CSS transition duration and there was no transitionend event dispatched', done => {
-      const el = document.createElement('div')
-      const callbackSpy = jasmine.createSpy('callback spy')
+    it('should execute a function after a computed CSS transition duration and there was no transitionend event dispatched', () => {
+      return new Promise(resolve => {
+        const el = document.createElement('div')
+        const callbackSpy = jasmine.createSpy('callback spy')
 
-      spyOn(window, 'getComputedStyle').and.returnValue({
-        transitionDuration: '0.05s',
-        transitionDelay: '0s'
-      })
+        spyOn(window, 'getComputedStyle').and.returnValue({
+          transitionDuration: '0.05s',
+          transitionDelay: '0s'
+        })
 
-      Util.executeAfterTransition(callbackSpy, el)
+        Util.executeAfterTransition(callbackSpy, el)
 
-      setTimeout(() => {
-        expect(callbackSpy).toHaveBeenCalled()
-        done()
-      }, 70)
+        setTimeout(() => {
+          expect(callbackSpy).toHaveBeenCalled()
+          resolve()
+        }, 70)
+      })
     })
 
-    it('should not execute a function a second time after a computed CSS transition duration and if a transitionend event has already been dispatched', done => {
-      const el = document.createElement('div')
-      const callbackSpy = jasmine.createSpy('callback spy')
+    it('should not execute a function a second time after a computed CSS transition duration and if a transitionend event has already been dispatched', () => {
+      return new Promise(resolve => {
+        const el = document.createElement('div')
+        const callbackSpy = jasmine.createSpy('callback spy')
 
-      spyOn(window, 'getComputedStyle').and.returnValue({
-        transitionDuration: '0.05s',
-        transitionDelay: '0s'
-      })
+        spyOn(window, 'getComputedStyle').and.returnValue({
+          transitionDuration: '0.05s',
+          transitionDelay: '0s'
+        })
 
-      Util.executeAfterTransition(callbackSpy, el)
+        Util.executeAfterTransition(callbackSpy, el)
 
-      setTimeout(() => {
-        el.dispatchEvent(new TransitionEvent('transitionend'))
-      }, 50)
+        setTimeout(() => {
+          el.dispatchEvent(new TransitionEvent('transitionend'))
+        }, 50)
 
-      setTimeout(() => {
-        expect(callbackSpy).toHaveBeenCalledTimes(1)
-        done()
-      }, 70)
+        setTimeout(() => {
+          expect(callbackSpy).toHaveBeenCalledTimes(1)
+          resolve()
+        }, 70)
+      })
     })
 
-    it('should not trigger a transitionend event if another transitionend event had already happened', done => {
-      const el = document.createElement('div')
+    it('should not trigger a transitionend event if another transitionend event had already happened', () => {
+      return new Promise(resolve => {
+        const el = document.createElement('div')
 
-      spyOn(window, 'getComputedStyle').and.returnValue({
-        transitionDuration: '0.05s',
-        transitionDelay: '0s'
-      })
+        spyOn(window, 'getComputedStyle').and.returnValue({
+          transitionDuration: '0.05s',
+          transitionDelay: '0s'
+        })
 
-      Util.executeAfterTransition(() => {}, el)
+        Util.executeAfterTransition(noop, el)
 
-      // simulate a event dispatched by the browser
-      el.dispatchEvent(new TransitionEvent('transitionend'))
+        // simulate a event dispatched by the browser
+        el.dispatchEvent(new TransitionEvent('transitionend'))
 
-      const dispatchSpy = spyOn(el, 'dispatchEvent').and.callThrough()
+        const dispatchSpy = spyOn(el, 'dispatchEvent').and.callThrough()
 
-      setTimeout(() => {
-        // setTimeout should not have triggered another transitionend event.
-        expect(dispatchSpy).not.toHaveBeenCalled()
-        done()
-      }, 70)
+        setTimeout(() => {
+          // setTimeout should not have triggered another transitionend event.
+          expect(dispatchSpy).not.toHaveBeenCalled()
+          resolve()
+        }, 70)
+      })
     })
 
-    it('should ignore transitionend events from nested elements', done => {
-      fixtureEl.innerHTML = [
-        '<div class="outer">',
-        '  <div class="nested"></div>',
-        '</div>'
-      ].join('')
+    it('should ignore transitionend events from nested elements', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = [
+          '<div class="outer">',
+          '  <div class="nested"></div>',
+          '</div>'
+        ].join('')
 
-      const outer = fixtureEl.querySelector('.outer')
-      const nested = fixtureEl.querySelector('.nested')
-      const callbackSpy = jasmine.createSpy('callback spy')
+        const outer = fixtureEl.querySelector('.outer')
+        const nested = fixtureEl.querySelector('.nested')
+        const callbackSpy = jasmine.createSpy('callback spy')
 
-      spyOn(window, 'getComputedStyle').and.returnValue({
-        transitionDuration: '0.05s',
-        transitionDelay: '0s'
-      })
+        spyOn(window, 'getComputedStyle').and.returnValue({
+          transitionDuration: '0.05s',
+          transitionDelay: '0s'
+        })
 
-      Util.executeAfterTransition(callbackSpy, outer)
+        Util.executeAfterTransition(callbackSpy, outer)
 
-      nested.dispatchEvent(new TransitionEvent('transitionend', {
-        bubbles: true
-      }))
+        nested.dispatchEvent(new TransitionEvent('transitionend', {
+          bubbles: true
+        }))
 
-      setTimeout(() => {
-        expect(callbackSpy).not.toHaveBeenCalled()
-      }, 20)
+        setTimeout(() => {
+          expect(callbackSpy).not.toHaveBeenCalled()
+        }, 20)
 
-      setTimeout(() => {
-        expect(callbackSpy).toHaveBeenCalled()
-        done()
-      }, 70)
+        setTimeout(() => {
+          expect(callbackSpy).toHaveBeenCalled()
+          resolve()
+        }, 70)
+      })
     })
   })
 
diff --git a/js/tests/unit/util/scrollbar.spec.js b/js/tests/unit/util/scrollbar.spec.js
index fc3a6f4e8..6fcf5718b 100644
--- a/js/tests/unit/util/scrollbar.spec.js
+++ b/js/tests/unit/util/scrollbar.spec.js
@@ -101,7 +101,7 @@ describe('ScrollBar', () => {
   })
 
   describe('hide - reset', () => {
-    it('should adjust the inline padding of fixed elements which are full-width', done => {
+    it('should adjust the inline padding of fixed elements which are full-width', () => {
       fixtureEl.innerHTML = [
         '<div style="height: 110vh; width: 100%">',
         '  <div class="fixed-top" id="fixed1" style="padding-right: 0px; width: 100vw"></div>',
@@ -134,10 +134,9 @@ describe('ScrollBar', () => {
       expect(getPaddingAttr(fixedEl2)).toBeNull()
       expect(currentPadding).toEqual(originalPadding)
       expect(currentPadding2).toEqual(originalPadding2)
-      done()
     })
 
-    it('should remove padding & margin if not existed before adjustment', done => {
+    it('should remove padding & margin if not existed before adjustment', () => {
       fixtureEl.innerHTML = [
         '<div style="height: 110vh; width: 100%">',
         '  <div class="fixed" id="fixed" style="width: 100vw;"></div>',
@@ -155,10 +154,9 @@ describe('ScrollBar', () => {
 
       expect(fixedEl.getAttribute('style').includes('padding-right')).toBeFalse()
       expect(stickyEl.getAttribute('style').includes('margin-right')).toBeFalse()
-      done()
     })
 
-    it('should adjust the inline margin and padding of sticky elements', done => {
+    it('should adjust the inline margin and padding of sticky elements', () => {
       fixtureEl.innerHTML = [
         '<div style="height: 110vh">',
         '  <div class="sticky-top" style="margin-right: 10px; padding-right: 20px; width: 100vw; height: 10px"></div>',
@@ -184,7 +182,6 @@ describe('ScrollBar', () => {
       expect(getMarginX(stickyTopEl)).toEqual(originalMargin)
       expect(getPaddingAttr(stickyTopEl)).toBeNull()
       expect(getPaddingX(stickyTopEl)).toEqual(originalPadding)
-      done()
     })
 
     it('should not adjust the inline margin and padding of sticky and fixed elements when element do not have full width', () => {
diff --git a/js/tests/unit/util/swipe.spec.js b/js/tests/unit/util/swipe.spec.js
index 93131b8fd..054aab695 100644
--- a/js/tests/unit/util/swipe.spec.js
+++ b/js/tests/unit/util/swipe.spec.js
@@ -78,74 +78,80 @@ describe('Swipe', () => {
   })
 
   describe('Config', () => {
-    it('Test leftCallback', done => {
-      const spyRight = jasmine.createSpy('spy')
-      clearPointerEvents()
-      defineDocumentElementOntouchstart()
-      // eslint-disable-next-line no-new
-      new Swipe(swipeEl, {
-        leftCallback: () => {
-          expect(spyRight).not.toHaveBeenCalled()
-          restorePointerEvents()
-          done()
-        },
-        rightCallback: spyRight
-      })
-
-      mockSwipeGesture(swipeEl, {
-        pos: [300, 10],
-        deltaX: -300
+    it('Test leftCallback', () => {
+      return new Promise(resolve => {
+        const spyRight = jasmine.createSpy('spy')
+        clearPointerEvents()
+        defineDocumentElementOntouchstart()
+        // eslint-disable-next-line no-new
+        new Swipe(swipeEl, {
+          leftCallback: () => {
+            expect(spyRight).not.toHaveBeenCalled()
+            restorePointerEvents()
+            resolve()
+          },
+          rightCallback: spyRight
+        })
+
+        mockSwipeGesture(swipeEl, {
+          pos: [300, 10],
+          deltaX: -300
+        })
       })
     })
 
-    it('Test rightCallback', done => {
-      const spyLeft = jasmine.createSpy('spy')
-      clearPointerEvents()
-      defineDocumentElementOntouchstart()
-      // eslint-disable-next-line no-new
-      new Swipe(swipeEl, {
-        rightCallback: () => {
-          expect(spyLeft).not.toHaveBeenCalled()
-          restorePointerEvents()
-          done()
-        },
-        leftCallback: spyLeft
-      })
-
-      mockSwipeGesture(swipeEl, {
-        pos: [10, 10],
-        deltaX: 300
+    it('Test rightCallback', () => {
+      return new Promise(resolve => {
+        const spyLeft = jasmine.createSpy('spy')
+        clearPointerEvents()
+        defineDocumentElementOntouchstart()
+        // eslint-disable-next-line no-new
+        new Swipe(swipeEl, {
+          rightCallback: () => {
+            expect(spyLeft).not.toHaveBeenCalled()
+            restorePointerEvents()
+            resolve()
+          },
+          leftCallback: spyLeft
+        })
+
+        mockSwipeGesture(swipeEl, {
+          pos: [10, 10],
+          deltaX: 300
+        })
       })
     })
 
-    it('Test endCallback', done => {
-      clearPointerEvents()
-      defineDocumentElementOntouchstart()
-      let isFirstTime = true
-
-      const callback = () => {
-        if (isFirstTime) {
-          isFirstTime = false
-          return
-        }
+    it('Test endCallback', () => {
+      return new Promise(resolve => {
+        clearPointerEvents()
+        defineDocumentElementOntouchstart()
+        let isFirstTime = true
 
-        expect().nothing()
-        restorePointerEvents()
-        done()
-      }
+        const callback = () => {
+          if (isFirstTime) {
+            isFirstTime = false
+            return
+          }
 
-      // eslint-disable-next-line no-new
-      new Swipe(swipeEl, {
-        endCallback: callback
-      })
-      mockSwipeGesture(swipeEl, {
-        pos: [10, 10],
-        deltaX: 300
-      })
+          expect().nothing()
+          restorePointerEvents()
+          resolve()
+        }
 
-      mockSwipeGesture(swipeEl, {
-        pos: [300, 10],
-        deltaX: -300
+        // eslint-disable-next-line no-new
+        new Swipe(swipeEl, {
+          endCallback: callback
+        })
+        mockSwipeGesture(swipeEl, {
+          pos: [10, 10],
+          deltaX: 300
+        })
+
+        mockSwipeGesture(swipeEl, {
+          pos: [300, 10],
+          deltaX: -300
+        })
       })
     })
   })
@@ -170,53 +176,57 @@ describe('Swipe', () => {
       expect(swipe._handleSwipe).not.toHaveBeenCalled()
     })
 
-    it('should allow swipeRight and call "rightCallback" with pointer events', done => {
-      if (!supportPointerEvent) {
-        expect().nothing()
-        done()
-        return
-      }
-
-      const style = '#fixture .pointer-event { touch-action: none !important; }'
-      fixtureEl.innerHTML += style
-
-      defineDocumentElementOntouchstart()
-      // eslint-disable-next-line no-new
-      new Swipe(swipeEl, {
-        rightCallback: () => {
-          deleteDocumentElementOntouchstart()
+    it('should allow swipeRight and call "rightCallback" with pointer events', () => {
+      return new Promise(resolve => {
+        if (!supportPointerEvent) {
           expect().nothing()
-          done()
+          resolve()
+          return
         }
-      })
 
-      mockSwipeGesture(swipeEl, { deltaX: 300 }, 'pointer')
-    })
+        const style = '#fixture .pointer-event { touch-action: none !important; }'
+        fixtureEl.innerHTML += style
 
-    it('should allow swipeLeft and call "leftCallback" with pointer events', done => {
-      if (!supportPointerEvent) {
-        expect().nothing()
-        done()
-        return
-      }
+        defineDocumentElementOntouchstart()
+        // eslint-disable-next-line no-new
+        new Swipe(swipeEl, {
+          rightCallback: () => {
+            deleteDocumentElementOntouchstart()
+            expect().nothing()
+            resolve()
+          }
+        })
 
-      const style = '#fixture .pointer-event { touch-action: none !important; }'
-      fixtureEl.innerHTML += style
+        mockSwipeGesture(swipeEl, { deltaX: 300 }, 'pointer')
+      })
+    })
 
-      defineDocumentElementOntouchstart()
-      // eslint-disable-next-line no-new
-      new Swipe(swipeEl, {
-        leftCallback: () => {
+    it('should allow swipeLeft and call "leftCallback" with pointer events', () => {
+      return new Promise(resolve => {
+        if (!supportPointerEvent) {
           expect().nothing()
-          deleteDocumentElementOntouchstart()
-          done()
+          resolve()
+          return
         }
-      })
 
-      mockSwipeGesture(swipeEl, {
-        pos: [300, 10],
-        deltaX: -300
-      }, 'pointer')
+        const style = '#fixture .pointer-event { touch-action: none !important; }'
+        fixtureEl.innerHTML += style
+
+        defineDocumentElementOntouchstart()
+        // eslint-disable-next-line no-new
+        new Swipe(swipeEl, {
+          leftCallback: () => {
+            expect().nothing()
+            deleteDocumentElementOntouchstart()
+            resolve()
+          }
+        })
+
+        mockSwipeGesture(swipeEl, {
+          pos: [300, 10],
+          deltaX: -300
+        }, 'pointer')
+      })
     })
   })