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.

js/tests/unit/dom/event-handler.spec.js

@@ -1,5 +1,6 @@
 import EventHandler from '../../../src/dom/event-handler'
-import { getFixture, clearFixture } from '../../helpers/fixture'
+import { clearFixture, getFixture } from '../../helpers/fixture'
+import { noop } from '../../../src/util'
 
 describe('EventHandler', () => {
   let fixtureEl
@@ -18,176 +19,190 @@ describe('EventHandler', () => {
 
       const div = fixtureEl.querySelector('div')
 
-      EventHandler.on(div, null, () => {})
-      EventHandler.on(null, 'click', () => {})
+      EventHandler.on(div, null, noop)
+      EventHandler.on(null, 'click', noop)
 
       expect().nothing()
     })
 
-    it('should add event listener', done => {
-      fixtureEl.innerHTML = '<div></div>'
+    it('should add event listener', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<div></div>'
 
-      const div = fixtureEl.querySelector('div')
+        const div = fixtureEl.querySelector('div')
 
-      EventHandler.on(div, 'click', () => {
-        expect().nothing()
-        done()
+        EventHandler.on(div, 'click', () => {
+          expect().nothing()
+          resolve()
+        })
+
+        div.click()
       })
-
-      div.click()
     })
 
-    it('should add namespaced event listener', done => {
-      fixtureEl.innerHTML = '<div></div>'
+    it('should add namespaced event listener', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<div></div>'
 
-      const div = fixtureEl.querySelector('div')
+        const div = fixtureEl.querySelector('div')
 
-      EventHandler.on(div, 'bs.namespace', () => {
-        expect().nothing()
-        done()
+        EventHandler.on(div, 'bs.namespace', () => {
+          expect().nothing()
+          resolve()
+        })
+
+        EventHandler.trigger(div, 'bs.namespace')
       })
-
-      EventHandler.trigger(div, 'bs.namespace')
     })
 
-    it('should add native namespaced event listener', done => {
-      fixtureEl.innerHTML = '<div></div>'
+    it('should add native namespaced event listener', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<div></div>'
 
-      const div = fixtureEl.querySelector('div')
+        const div = fixtureEl.querySelector('div')
 
-      EventHandler.on(div, 'click.namespace', () => {
-        expect().nothing()
-        done()
+        EventHandler.on(div, 'click.namespace', () => {
+          expect().nothing()
+          resolve()
+        })
+
+        EventHandler.trigger(div, 'click')
       })
-
-      EventHandler.trigger(div, 'click')
     })
 
-    it('should handle event delegation', done => {
-      EventHandler.on(document, 'click', '.test', () => {
-        expect().nothing()
-        done()
+    it('should handle event delegation', () => {
+      return new Promise(resolve => {
+        EventHandler.on(document, 'click', '.test', () => {
+          expect().nothing()
+          resolve()
+        })
+
+        fixtureEl.innerHTML = '<div class="test"></div>'
+
+        const div = fixtureEl.querySelector('div')
+
+        div.click()
       })
-
-      fixtureEl.innerHTML = '<div class="test"></div>'
-
-      const div = fixtureEl.querySelector('div')
-
-      div.click()
     })
 
-    it('should handle mouseenter/mouseleave like the native counterpart', done => {
-      fixtureEl.innerHTML = [
-        '<div class="outer">',
-        '<div class="inner">',
-        '<div class="nested">',
-        '<div class="deep"></div>',
-        '</div>',
-        '</div>',
-        '<div class="sibling"></div>',
-        '</div>'
-      ].join('')
+    it('should handle mouseenter/mouseleave like the native counterpart', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = [
+          '<div class="outer">',
+          '<div class="inner">',
+          '<div class="nested">',
+          '<div class="deep"></div>',
+          '</div>',
+          '</div>',
+          '<div class="sibling"></div>',
+          '</div>'
+        ].join('')
 
-      const outer = fixtureEl.querySelector('.outer')
-      const inner = fixtureEl.querySelector('.inner')
-      const nested = fixtureEl.querySelector('.nested')
-      const deep = fixtureEl.querySelector('.deep')
-      const sibling = fixtureEl.querySelector('.sibling')
+        const outer = fixtureEl.querySelector('.outer')
+        const inner = fixtureEl.querySelector('.inner')
+        const nested = fixtureEl.querySelector('.nested')
+        const deep = fixtureEl.querySelector('.deep')
+        const sibling = fixtureEl.querySelector('.sibling')
 
-      const enterSpy = jasmine.createSpy('mouseenter')
-      const leaveSpy = jasmine.createSpy('mouseleave')
-      const delegateEnterSpy = jasmine.createSpy('mouseenter')
-      const delegateLeaveSpy = jasmine.createSpy('mouseleave')
+        const enterSpy = jasmine.createSpy('mouseenter')
+        const leaveSpy = jasmine.createSpy('mouseleave')
+        const delegateEnterSpy = jasmine.createSpy('mouseenter')
+        const delegateLeaveSpy = jasmine.createSpy('mouseleave')
 
-      EventHandler.on(inner, 'mouseenter', enterSpy)
-      EventHandler.on(inner, 'mouseleave', leaveSpy)
-      EventHandler.on(outer, 'mouseenter', '.inner', delegateEnterSpy)
-      EventHandler.on(outer, 'mouseleave', '.inner', delegateLeaveSpy)
+        EventHandler.on(inner, 'mouseenter', enterSpy)
+        EventHandler.on(inner, 'mouseleave', leaveSpy)
+        EventHandler.on(outer, 'mouseenter', '.inner', delegateEnterSpy)
+        EventHandler.on(outer, 'mouseleave', '.inner', delegateLeaveSpy)
 
-      EventHandler.on(sibling, 'mouseenter', () => {
-        expect(enterSpy.calls.count()).toEqual(2)
-        expect(leaveSpy.calls.count()).toEqual(2)
-        expect(delegateEnterSpy.calls.count()).toEqual(2)
-        expect(delegateLeaveSpy.calls.count()).toEqual(2)
-        done()
-      })
+        EventHandler.on(sibling, 'mouseenter', () => {
+          expect(enterSpy.calls.count()).toEqual(2)
+          expect(leaveSpy.calls.count()).toEqual(2)
+          expect(delegateEnterSpy.calls.count()).toEqual(2)
+          expect(delegateLeaveSpy.calls.count()).toEqual(2)
+          resolve()
+        })
 
-      const moveMouse = (from, to) => {
-        from.dispatchEvent(new MouseEvent('mouseout', {
-          bubbles: true,
-          relatedTarget: to
-        }))
+        const moveMouse = (from, to) => {
+          from.dispatchEvent(new MouseEvent('mouseout', {
+            bubbles: true,
+            relatedTarget: to
+          }))
 
-        to.dispatchEvent(new MouseEvent('mouseover', {
-          bubbles: true,
-          relatedTarget: from
-        }))
-      }
+          to.dispatchEvent(new MouseEvent('mouseover', {
+            bubbles: true,
+            relatedTarget: from
+          }))
+        }
 
-      // from outer to deep and back to outer (nested)
-      moveMouse(outer, inner)
-      moveMouse(inner, nested)
-      moveMouse(nested, deep)
-      moveMouse(deep, nested)
-      moveMouse(nested, inner)
-      moveMouse(inner, outer)
-
-      setTimeout(() => {
-        expect(enterSpy.calls.count()).toEqual(1)
-        expect(leaveSpy.calls.count()).toEqual(1)
-        expect(delegateEnterSpy.calls.count()).toEqual(1)
-        expect(delegateLeaveSpy.calls.count()).toEqual(1)
-
-        // from outer to inner to sibling (adjacent)
+        // from outer to deep and back to outer (nested)
         moveMouse(outer, inner)
-        moveMouse(inner, sibling)
-      }, 20)
+        moveMouse(inner, nested)
+        moveMouse(nested, deep)
+        moveMouse(deep, nested)
+        moveMouse(nested, inner)
+        moveMouse(inner, outer)
+
+        setTimeout(() => {
+          expect(enterSpy.calls.count()).toEqual(1)
+          expect(leaveSpy.calls.count()).toEqual(1)
+          expect(delegateEnterSpy.calls.count()).toEqual(1)
+          expect(delegateLeaveSpy.calls.count()).toEqual(1)
+
+          // from outer to inner to sibling (adjacent)
+          moveMouse(outer, inner)
+          moveMouse(inner, sibling)
+        }, 20)
+      })
     })
   })
 
   describe('one', () => {
-    it('should call listener just once', done => {
-      fixtureEl.innerHTML = '<div></div>'
+    it('should call listener just once', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<div></div>'
 
-      let called = 0
-      const div = fixtureEl.querySelector('div')
-      const obj = {
-        oneListener() {
-          called++
+        let called = 0
+        const div = fixtureEl.querySelector('div')
+        const obj = {
+          oneListener() {
+            called++
+          }
         }
-      }
 
-      EventHandler.one(div, 'bootstrap', obj.oneListener)
+        EventHandler.one(div, 'bootstrap', obj.oneListener)
 
-      EventHandler.trigger(div, 'bootstrap')
-      EventHandler.trigger(div, 'bootstrap')
+        EventHandler.trigger(div, 'bootstrap')
+        EventHandler.trigger(div, 'bootstrap')
 
-      setTimeout(() => {
-        expect(called).toEqual(1)
-        done()
-      }, 20)
+        setTimeout(() => {
+          expect(called).toEqual(1)
+          resolve()
+        }, 20)
+      })
     })
 
-    it('should call delegated listener just once', done => {
-      fixtureEl.innerHTML = '<div></div>'
+    it('should call delegated listener just once', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<div></div>'
 
-      let called = 0
-      const div = fixtureEl.querySelector('div')
-      const obj = {
-        oneListener() {
-          called++
+        let called = 0
+        const div = fixtureEl.querySelector('div')
+        const obj = {
+          oneListener() {
+            called++
+          }
         }
-      }
 
-      EventHandler.one(fixtureEl, 'bootstrap', 'div', obj.oneListener)
+        EventHandler.one(fixtureEl, 'bootstrap', 'div', obj.oneListener)
 
-      EventHandler.trigger(div, 'bootstrap')
-      EventHandler.trigger(div, 'bootstrap')
+        EventHandler.trigger(div, 'bootstrap')
+        EventHandler.trigger(div, 'bootstrap')
 
-      setTimeout(() => {
-        expect(called).toEqual(1)
-        done()
-      }, 20)
+        setTimeout(() => {
+          expect(called).toEqual(1)
+          resolve()
+        }, 20)
+      })
     })
   })
 
@@ -196,171 +211,185 @@ describe('EventHandler', () => {
       fixtureEl.innerHTML = '<div></div>'
       const div = fixtureEl.querySelector('div')
 
-      EventHandler.off(div, null, () => {})
-      EventHandler.off(null, 'click', () => {})
+      EventHandler.off(div, null, noop)
+      EventHandler.off(null, 'click', noop)
       expect().nothing()
     })
 
-    it('should remove a listener', done => {
-      fixtureEl.innerHTML = '<div></div>'
-      const div = fixtureEl.querySelector('div')
+    it('should remove a listener', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<div></div>'
+        const div = fixtureEl.querySelector('div')
 
-      let called = 0
-      const handler = () => {
-        called++
-      }
+        let called = 0
+        const handler = () => {
+          called++
+        }
 
-      EventHandler.on(div, 'foobar', handler)
-      EventHandler.trigger(div, 'foobar')
+        EventHandler.on(div, 'foobar', handler)
+        EventHandler.trigger(div, 'foobar')
 
-      EventHandler.off(div, 'foobar', handler)
-      EventHandler.trigger(div, 'foobar')
+        EventHandler.off(div, 'foobar', handler)
+        EventHandler.trigger(div, 'foobar')
 
-      setTimeout(() => {
-        expect(called).toEqual(1)
-        done()
-      }, 20)
+        setTimeout(() => {
+          expect(called).toEqual(1)
+          resolve()
+        }, 20)
+      })
     })
 
-    it('should remove all the events', done => {
-      fixtureEl.innerHTML = '<div></div>'
-      const div = fixtureEl.querySelector('div')
+    it('should remove all the events', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<div></div>'
+        const div = fixtureEl.querySelector('div')
 
-      let called = 0
+        let called = 0
 
-      EventHandler.on(div, 'foobar', () => {
-        called++
+        EventHandler.on(div, 'foobar', () => {
+          called++
+        })
+        EventHandler.on(div, 'foobar', () => {
+          called++
+        })
+        EventHandler.trigger(div, 'foobar')
+
+        EventHandler.off(div, 'foobar')
+        EventHandler.trigger(div, 'foobar')
+
+        setTimeout(() => {
+          expect(called).toEqual(2)
+          resolve()
+        }, 20)
       })
-      EventHandler.on(div, 'foobar', () => {
-        called++
-      })
-      EventHandler.trigger(div, 'foobar')
-
-      EventHandler.off(div, 'foobar')
-      EventHandler.trigger(div, 'foobar')
-
-      setTimeout(() => {
-        expect(called).toEqual(2)
-        done()
-      }, 20)
     })
 
-    it('should remove all the namespaced listeners if namespace is passed', done => {
-      fixtureEl.innerHTML = '<div></div>'
-      const div = fixtureEl.querySelector('div')
+    it('should remove all the namespaced listeners if namespace is passed', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<div></div>'
+        const div = fixtureEl.querySelector('div')
 
-      let called = 0
+        let called = 0
 
-      EventHandler.on(div, 'foobar.namespace', () => {
-        called++
+        EventHandler.on(div, 'foobar.namespace', () => {
+          called++
+        })
+        EventHandler.on(div, 'foofoo.namespace', () => {
+          called++
+        })
+        EventHandler.trigger(div, 'foobar.namespace')
+        EventHandler.trigger(div, 'foofoo.namespace')
+
+        EventHandler.off(div, '.namespace')
+        EventHandler.trigger(div, 'foobar.namespace')
+        EventHandler.trigger(div, 'foofoo.namespace')
+
+        setTimeout(() => {
+          expect(called).toEqual(2)
+          resolve()
+        }, 20)
       })
-      EventHandler.on(div, 'foofoo.namespace', () => {
-        called++
-      })
-      EventHandler.trigger(div, 'foobar.namespace')
-      EventHandler.trigger(div, 'foofoo.namespace')
-
-      EventHandler.off(div, '.namespace')
-      EventHandler.trigger(div, 'foobar.namespace')
-      EventHandler.trigger(div, 'foofoo.namespace')
-
-      setTimeout(() => {
-        expect(called).toEqual(2)
-        done()
-      }, 20)
     })
 
-    it('should remove the namespaced listeners', done => {
-      fixtureEl.innerHTML = '<div></div>'
-      const div = fixtureEl.querySelector('div')
+    it('should remove the namespaced listeners', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<div></div>'
+        const div = fixtureEl.querySelector('div')
 
-      let calledCallback1 = 0
-      let calledCallback2 = 0
+        let calledCallback1 = 0
+        let calledCallback2 = 0
 
-      EventHandler.on(div, 'foobar.namespace', () => {
-        calledCallback1++
+        EventHandler.on(div, 'foobar.namespace', () => {
+          calledCallback1++
+        })
+        EventHandler.on(div, 'foofoo.namespace', () => {
+          calledCallback2++
+        })
+
+        EventHandler.trigger(div, 'foobar.namespace')
+        EventHandler.off(div, 'foobar.namespace')
+        EventHandler.trigger(div, 'foobar.namespace')
+
+        EventHandler.trigger(div, 'foofoo.namespace')
+
+        setTimeout(() => {
+          expect(calledCallback1).toEqual(1)
+          expect(calledCallback2).toEqual(1)
+          resolve()
+        }, 20)
       })
-      EventHandler.on(div, 'foofoo.namespace', () => {
-        calledCallback2++
-      })
-
-      EventHandler.trigger(div, 'foobar.namespace')
-      EventHandler.off(div, 'foobar.namespace')
-      EventHandler.trigger(div, 'foobar.namespace')
-
-      EventHandler.trigger(div, 'foofoo.namespace')
-
-      setTimeout(() => {
-        expect(calledCallback1).toEqual(1)
-        expect(calledCallback2).toEqual(1)
-        done()
-      }, 20)
     })
 
-    it('should remove the all the namespaced listeners for native events', done => {
-      fixtureEl.innerHTML = '<div></div>'
-      const div = fixtureEl.querySelector('div')
+    it('should remove the all the namespaced listeners for native events', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<div></div>'
+        const div = fixtureEl.querySelector('div')
 
-      let called = 0
+        let called = 0
 
-      EventHandler.on(div, 'click.namespace', () => {
-        called++
+        EventHandler.on(div, 'click.namespace', () => {
+          called++
+        })
+        EventHandler.on(div, 'click.namespace2', () => {
+          called++
+        })
+
+        EventHandler.trigger(div, 'click')
+        EventHandler.off(div, 'click')
+        EventHandler.trigger(div, 'click')
+
+        setTimeout(() => {
+          expect(called).toEqual(2)
+          resolve()
+        }, 20)
       })
-      EventHandler.on(div, 'click.namespace2', () => {
-        called++
-      })
-
-      EventHandler.trigger(div, 'click')
-      EventHandler.off(div, 'click')
-      EventHandler.trigger(div, 'click')
-
-      setTimeout(() => {
-        expect(called).toEqual(2)
-        done()
-      }, 20)
     })
 
-    it('should remove the specified namespaced listeners for native events', done => {
-      fixtureEl.innerHTML = '<div></div>'
-      const div = fixtureEl.querySelector('div')
+    it('should remove the specified namespaced listeners for native events', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<div></div>'
+        const div = fixtureEl.querySelector('div')
 
-      let called1 = 0
-      let called2 = 0
+        let called1 = 0
+        let called2 = 0
 
-      EventHandler.on(div, 'click.namespace', () => {
-        called1++
+        EventHandler.on(div, 'click.namespace', () => {
+          called1++
+        })
+        EventHandler.on(div, 'click.namespace2', () => {
+          called2++
+        })
+        EventHandler.trigger(div, 'click')
+
+        EventHandler.off(div, 'click.namespace')
+        EventHandler.trigger(div, 'click')
+
+        setTimeout(() => {
+          expect(called1).toEqual(1)
+          expect(called2).toEqual(2)
+          resolve()
+        }, 20)
       })
-      EventHandler.on(div, 'click.namespace2', () => {
-        called2++
-      })
-      EventHandler.trigger(div, 'click')
-
-      EventHandler.off(div, 'click.namespace')
-      EventHandler.trigger(div, 'click')
-
-      setTimeout(() => {
-        expect(called1).toEqual(1)
-        expect(called2).toEqual(2)
-        done()
-      }, 20)
     })
 
-    it('should remove a listener registered by .one', done => {
-      fixtureEl.innerHTML = '<div></div>'
+    it('should remove a listener registered by .one', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<div></div>'
 
-      const div = fixtureEl.querySelector('div')
-      const handler = () => {
-        throw new Error('called')
-      }
+        const div = fixtureEl.querySelector('div')
+        const handler = () => {
+          throw new Error('called')
+        }
 
-      EventHandler.one(div, 'foobar', handler)
-      EventHandler.off(div, 'foobar', handler)
+        EventHandler.one(div, 'foobar', handler)
+        EventHandler.off(div, 'foobar', handler)
 
-      EventHandler.trigger(div, 'foobar')
-      setTimeout(() => {
-        expect().nothing()
-        done()
-      }, 20)
+        EventHandler.trigger(div, 'foobar')
+        setTimeout(() => {
+          expect().nothing()
+          resolve()
+        }, 20)
+      })
     })
 
     it('should remove the correct delegated event listener', () => {

js/tests/unit/dom/manipulator.spec.js

@@ -1,5 +1,5 @@
 import Manipulator from '../../../src/dom/manipulator'
-import { getFixture, clearFixture } from '../../helpers/fixture'
+import { clearFixture, getFixture } from '../../helpers/fixture'
 
 describe('Manipulator', () => {
   let fixtureEl
@@ -134,42 +134,44 @@ describe('Manipulator', () => {
       })
     })
 
-    it('should not change offset when viewport is scrolled', done => {
-      const top = 500
-      const left = 1000
-      const scrollY = 200
-      const scrollX = 400
+    it('should not change offset when viewport is scrolled', () => {
+      return new Promise(resolve => {
+        const top = 500
+        const left = 1000
+        const scrollY = 200
+        const scrollX = 400
 
-      fixtureEl.innerHTML = `<div style="position:absolute;top:${top}px;left:${left}px"></div>`
+        fixtureEl.innerHTML = `<div style="position:absolute;top:${top}px;left:${left}px"></div>`
 
-      const div = fixtureEl.querySelector('div')
-      const offset = Manipulator.offset(div)
+        const div = fixtureEl.querySelector('div')
+        const offset = Manipulator.offset(div)
 
-      // append an element that forces scrollbars on the window so we can scroll
-      const { defaultView: win, body } = fixtureEl.ownerDocument
-      const forceScrollBars = document.createElement('div')
-      forceScrollBars.style.cssText = 'position:absolute;top:5000px;left:5000px;width:1px;height:1px'
-      body.append(forceScrollBars)
+        // append an element that forces scrollbars on the window so we can scroll
+        const { defaultView: win, body } = fixtureEl.ownerDocument
+        const forceScrollBars = document.createElement('div')
+        forceScrollBars.style.cssText = 'position:absolute;top:5000px;left:5000px;width:1px;height:1px'
+        body.append(forceScrollBars)
 
-      const scrollHandler = () => {
-        expect(window.pageYOffset).toEqual(scrollY)
-        expect(window.pageXOffset).toEqual(scrollX)
+        const scrollHandler = () => {
+          expect(window.pageYOffset).toEqual(scrollY)
+          expect(window.pageXOffset).toEqual(scrollX)
 
-        const newOffset = Manipulator.offset(div)
+          const newOffset = Manipulator.offset(div)
 
-        expect(newOffset).toEqual({
-          top: offset.top,
-          left: offset.left
-        })
+          expect(newOffset).toEqual({
+            top: offset.top,
+            left: offset.left
+          })
 
-        win.removeEventListener('scroll', scrollHandler)
-        forceScrollBars.remove()
-        win.scrollTo(0, 0)
-        done()
-      }
+          win.removeEventListener('scroll', scrollHandler)
+          forceScrollBars.remove()
+          win.scrollTo(0, 0)
+          resolve()
+        }
 
-      win.addEventListener('scroll', scrollHandler)
-      win.scrollTo(scrollX, scrollY)
+        win.addEventListener('scroll', scrollHandler)
+        win.scrollTo(scrollX, scrollY)
+      })
     })
   })