Merge branch 'twbs:main' into mainHEADmain

1 files changed, 234 insertions, 207 deletions

diff --git a/js/tests/unit/util/backdrop.spec.js b/js/tests/unit/util/backdrop.spec.js
index 818ddf221..0faaac6a5 100644
--- a/js/tests/unit/util/backdrop.spec.js
+++ b/js/tests/unit/util/backdrop.spec.js
@@ -1,6 +1,6 @@
-import Backdrop from '../../../src/util/backdrop'
-import { getTransitionDurationFromElement } from '../../../src/util/index'
-import { clearFixture, getFixture } from '../../helpers/fixture'
+import Backdrop from '../../../src/util/backdrop.js'
+import { getTransitionDurationFromElement } from '../../../src/util/index.js'
+import { clearFixture, getFixture } from '../../helpers/fixture.js'
 
 const CLASS_BACKDROP = '.modal-backdrop'
 const CLASS_NAME_FADE = 'fade'
@@ -23,270 +23,297 @@ describe('Backdrop', () => {
   })
 
   describe('show', () => {
-    it('if it is "shown", should append the backdrop html once, on show, and contain "show" class', 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().length).toEqual(0)
+        expect(getElements()).toHaveSize(0)
 
-      instance.show()
-      instance.show(() => {
-        expect(getElements().length).toEqual(1)
-        for (const el of getElements()) {
-          expect(el.classList.contains(CLASS_NAME_SHOW)).toEqual(true)
-        }
+        instance.show()
+        instance.show(() => {
+          expect(getElements()).toHaveSize(1)
+          for (const el of getElements()) {
+            expect(el).toHaveClass(CLASS_NAME_SHOW)
+          }
 
-        done()
+          resolve()
+        })
       })
     })
 
-    it('if it is not "shown", should not append the backdrop html', 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().length).toEqual(0)
-      instance.show(() => {
-        expect(getElements().length).toEqual(0)
-        done()
+        expect(getElements()).toHaveSize(0)
+        instance.show(() => {
+          expect(getElements()).toHaveSize(0)
+          resolve()
+        })
       })
     })
 
-    it('if it is "shown" and "animated", should append the backdrop html once, and contain "fade" class', 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().length).toEqual(0)
+        expect(getElements()).toHaveSize(0)
 
-      instance.show(() => {
-        expect(getElements().length).toEqual(1)
-        for (const el of getElements()) {
-          expect(el.classList.contains(CLASS_NAME_FADE)).toEqual(true)
-        }
+        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().length).toEqual(0)
-      instance.show(() => {
-        expect(getElements().length).toEqual(1)
-        instance.hide(() => {
-          expect(getElements().length).toEqual(0)
-          done()
+        expect(getElements()).toHaveSize(0)
+        instance.show(() => {
+          expect(getElements()).toHaveSize(1)
+          instance.hide(() => {
+            expect(getElements()).toHaveSize(0)
+            resolve()
+          })
         })
       })
     })
 
-    it('should remove "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.classList.contains(CLASS_NAME_SHOW)).toEqual(false)
-        done()
+        instance.show()
+        instance.hide(() => {
+          expect(elem).not.toHaveClass(CLASS_NAME_SHOW)
+          resolve()
+        })
       })
     })
 
-    it('if it is not "shown", should not try to remove Node on remove method', 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().length).toEqual(0)
-      expect(instance._isAppended).toEqual(false)
-      instance.show(() => {
-        instance.hide(() => {
-          expect(getElements().length).toEqual(0)
-          expect(spy).not.toHaveBeenCalled()
-          expect(instance._isAppended).toEqual(false)
-          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().length).toEqual(0)
-          done()
+        instance.show(() => {
+          wrapper.remove()
+          instance.hide(() => {
+            expect(getElements()).toHaveSize(0)
+            resolve()
+          })
         })
       })
     })
   })
 
   describe('click callback', () => {
-    it('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 = document.createEvent('MouseEvents')
-        clickEvent.initEvent('mousedown', true, true)
-        document.querySelector(CLASS_BACKDROP).dispatchEvent(clickEvent)
-        endTest()
-      })
-    })
-  })
-
-  describe('animation callbacks', () => {
-    it('if it is animated, should show and hide backdrop after counting transition duration', 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()
-      })
-      expect(spy2).not.toHaveBeenCalled()
-    })
+        const instance = new Backdrop({
+          isVisible: true,
+          isAnimated: false,
+          clickCallback: () => spy()
+        })
+        const endTest = () => {
+          setTimeout(() => {
+            expect(spy).toHaveBeenCalled()
+            resolve()
+          }, 10)
+        }
 
-    it('if it is not animated, should show and hide backdrop without delay', done => {
-      const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
-      const instance = new Backdrop({
-        isVisible: true,
-        isAnimated: false
+        instance.show(() => {
+          const clickEvent = new Event('mousedown', { bubbles: true, cancelable: true })
+          document.querySelector(CLASS_BACKDROP).dispatchEvent(clickEvent)
+          endTest()
+        })
       })
-      const spy2 = jasmine.createSpy('spy2')
-
-      instance.show(spy2)
-      instance.hide(spy2)
-
-      setTimeout(() => {
-        expect(spy2).toHaveBeenCalled()
-        expect(spy).not.toHaveBeenCalled()
-        done()
-      }, 10)
     })
 
-    it('if it is not "shown", should not call delay callbacks', done => {
-      const instance = new Backdrop({
-        isVisible: false,
-        isAnimated: true
+    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 spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
 
-      instance.show()
-      instance.hide(() => {
-        expect(spy).not.toHaveBeenCalled()
-        done()
-      })
-    })
-  })
-  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()
+      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)
         })
       })
 
-      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 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()
+          })
         })
       })
+    })
 
-      it('Should appended on any element given by the proper config', done => {
-        fixtureEl.innerHTML = [
-          '<div id="wrapper">',
-          '</div>'
-        ].join('')
+    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()
+            })
+          })
+        })
 
-        const wrapper = fixtureEl.querySelector('#wrapper')
-        const instance = new Backdrop({
-          isVisible: true,
-          rootElement: wrapper
+        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()
+            })
+          })
         })
-        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 be able to have different classNames than default', 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()
+            })
+          })
         })
       })
     })