Use transitionEnd in QUnit since we moved away from PhantomJS

twbs · Mar 20, 2018 · fbb3214 · fbb3214
1 parent 2306f62
commit fbb3214
Show file tree

Hide file tree

Showing 11 changed files with 217 additions and 164 deletions.
diff --git a/js/src/alert.js b/js/src/alert.js
@@ -102,8 +102,7 @@ const Alert = (($) => {
     _removeElement(element) {
       $(element).removeClass(ClassName.SHOW)
 
-      if (!Util.supportsTransitionEnd() ||
-          !$(element).hasClass(ClassName.FADE)) {
+      if (!$(element).hasClass(ClassName.FADE)) {
         this._destroyElement(element)
         return
       }

diff --git a/js/src/carousel.js b/js/src/carousel.js
@@ -142,8 +142,7 @@ const Carousel = (($) => {
         this._isPaused = true
       }
 
-      if ($(this._element).find(Selector.NEXT_PREV)[0] &&
-        Util.supportsTransitionEnd()) {
+      if ($(this._element).find(Selector.NEXT_PREV)[0]) {
         Util.triggerTransitionEnd(this._element)
         this.cycle(true)
       }
@@ -376,8 +375,7 @@ const Carousel = (($) => {
         to: nextElementIndex
       })
 
-      if (Util.supportsTransitionEnd() &&
-        $(this._element).hasClass(ClassName.SLIDE)) {
+      if ($(this._element).hasClass(ClassName.SLIDE)) {
         $(nextElement).addClass(orderClassName)
 
         Util.reflow(nextElement)

diff --git a/js/src/collapse.js b/js/src/collapse.js
@@ -182,11 +182,6 @@ const Collapse = (($) => {
         $(this._element).trigger(Event.SHOWN)
       }
 
-      if (!Util.supportsTransitionEnd()) {
-        complete()
-        return
-      }
-
       const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1)
       const scrollSize = `scroll${capitalizedDimension}`
       const transitionDuration = Util.getTransitionDurationFromElement(this._element)
@@ -246,12 +241,6 @@ const Collapse = (($) => {
       }
 
       this._element.style[dimension] = ''
-
-      if (!Util.supportsTransitionEnd()) {
-        complete()
-        return
-      }
-
       const transitionDuration = Util.getTransitionDurationFromElement(this._element)
 
       $(this._element)

diff --git a/js/src/modal.js b/js/src/modal.js
@@ -107,7 +107,7 @@ const Modal = (($) => {
         return
       }
 
-      if (Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE)) {
+      if ($(this._element).hasClass(ClassName.FADE)) {
         this._isTransitioning = true
       }
 
@@ -168,8 +168,7 @@ const Modal = (($) => {
       }
 
       this._isShown = false
-
-      const transition = Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE)
+      const transition = $(this._element).hasClass(ClassName.FADE)
 
       if (transition) {
         this._isTransitioning = true
@@ -228,8 +227,7 @@ const Modal = (($) => {
     }
 
     _showElement(relatedTarget) {
-      const transition = Util.supportsTransitionEnd() &&
-        $(this._element).hasClass(ClassName.FADE)
+      const transition = $(this._element).hasClass(ClassName.FADE)
 
       if (!this._element.parentNode ||
          this._element.parentNode.nodeType !== Node.ELEMENT_NODE) {
@@ -331,8 +329,6 @@ const Modal = (($) => {
         ? ClassName.FADE : ''
 
       if (this._isShown && this._config.backdrop) {
-        const doAnimate = Util.supportsTransitionEnd() && animate
-
         this._backdrop = document.createElement('div')
         this._backdrop.className = ClassName.BACKDROP
 
@@ -357,7 +353,7 @@ const Modal = (($) => {
           }
         })
 
-        if (doAnimate) {
+        if (animate) {
           Util.reflow(this._backdrop)
         }
 
@@ -367,7 +363,7 @@ const Modal = (($) => {
           return
         }
 
-        if (!doAnimate) {
+        if (!animate) {
           callback()
           return
         }
@@ -387,8 +383,7 @@ const Modal = (($) => {
           }
         }
 
-        if (Util.supportsTransitionEnd() &&
-           $(this._element).hasClass(ClassName.FADE)) {
+        if ($(this._element).hasClass(ClassName.FADE)) {
           const backdropTransitionDuration = Util.getTransitionDurationFromElement(this._backdrop)
 
           $(this._backdrop)

diff --git a/js/src/tab.js b/js/src/tab.js
@@ -151,7 +151,6 @@ const Tab = (($) => {
 
       const active = activeElements[0]
       const isTransitioning = callback &&
-        Util.supportsTransitionEnd() &&
         (active && $(active).hasClass(ClassName.FADE))
 
       const complete = () => this._transitionComplete(

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
@@ -333,7 +333,7 @@ const Tooltip = (($) => {
           }
         }
 
-        if (Util.supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE)) {
+        if ($(this.tip).hasClass(ClassName.FADE)) {
           const transitionDuration = Util.getTransitionDurationFromElement(this.tip)
 
           $(this.tip)
@@ -383,8 +383,7 @@ const Tooltip = (($) => {
       this._activeTrigger[Trigger.FOCUS] = false
       this._activeTrigger[Trigger.HOVER] = false
 
-      if (Util.supportsTransitionEnd() &&
-          $(this.tip).hasClass(ClassName.FADE)) {
+      if ($(this.tip).hasClass(ClassName.FADE)) {
         const transitionDuration = Util.getTransitionDurationFromElement(tip)
 
         $(tip)

diff --git a/js/src/util.js b/js/src/util.js
@@ -14,8 +14,7 @@ const Util = (($) => {
    * ------------------------------------------------------------------------
    */
 
-  let transition = false
-
+  const TRANSITION_END = 'transitionend'
   const MAX_UID = 1000000
   const MILLISECONDS_MULTIPLIER = 1000
 
@@ -26,8 +25,8 @@ const Util = (($) => {
 
   function getSpecialTransitionEndEvent() {
     return {
-      bindType: transition.end,
-      delegateType: transition.end,
+      bindType: TRANSITION_END,
+      delegateType: TRANSITION_END,
       handle(event) {
         if ($(event.target).is(this)) {
           return event.handleObj.handler.apply(this, arguments) // eslint-disable-line prefer-rest-params
@@ -37,16 +36,6 @@ const Util = (($) => {
     }
   }
 
-  function transitionEndTest() {
-    if (typeof window !== 'undefined' && window.QUnit) {
-      return false
-    }
-
-    return {
-      end: 'transitionend'
-    }
-  }
-
   function transitionEndEmulator(duration) {
     let called = false
 
@@ -64,13 +53,8 @@ const Util = (($) => {
   }
 
   function setTransitionEndSupport() {
-    transition = transitionEndTest()
-
     $.fn.emulateTransitionEnd = transitionEndEmulator
-
-    if (Util.supportsTransitionEnd()) {
-      $.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent()
-    }
+    $.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent()
   }
 
   /**
@@ -130,11 +114,7 @@ const Util = (($) => {
     },
 
     triggerTransitionEnd(element) {
-      $(element).trigger(transition.end)
-    },
-
-    supportsTransitionEnd() {
-      return Boolean(transition)
+      $(element).trigger(TRANSITION_END)
     },
 
     isElement(obj) {

diff --git a/js/tests/unit/alert.js b/js/tests/unit/alert.js
@@ -48,6 +48,7 @@ $(function () {
 
   QUnit.test('should remove element when clicking .close', function (assert) {
     assert.expect(2)
+    var done = assert.async()
     var alertHTML = '<div class="alert alert-danger fade show">' +
         '<a class="close" href="#" data-dismiss="alert">×</a>' +
         '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>' +
@@ -56,9 +57,13 @@ $(function () {
 
     assert.notEqual($('#qunit-fixture').find('.alert').length, 0, 'element added to dom')
 
-    $alert.find('.close').trigger('click')
-
-    assert.strictEqual($('#qunit-fixture').find('.alert').length, 0, 'element removed from dom')
+    $alert
+      .one('closed.bs.alert', function () {
+        assert.strictEqual($('#qunit-fixture').find('.alert').length, 0, 'element removed from dom')
+        done()
+      })
+      .find('.close')
+      .trigger('click')
   })
 
   QUnit.test('should not fire closed when close is prevented', function (assert) {

diff --git a/js/tests/unit/collapse.js b/js/tests/unit/collapse.js
@@ -45,10 +45,14 @@ $(function () {
 
   QUnit.test('should show a collapsed element', function (assert) {
     assert.expect(2)
-    var $el = $('<div class="collapse"/>').bootstrapCollapse('show')
+    var done = assert.async()
+    var $el = $('<div class="collapse"/>')
 
-    assert.ok($el.hasClass('show'), 'has class "show"')
-    assert.ok(!/height/i.test($el.attr('style')), 'has height reset')
+    $el.one('shown.bs.collapse', function () {
+      assert.ok($el.hasClass('show'), 'has class "show"')
+      assert.ok(!/height/i.test($el.attr('style')), 'has height reset')
+      done()
+    }).bootstrapCollapse('show')
   })
 
   QUnit.test('should show multiple collapsed elements', function (assert) {