[V4] Throw error when a plugin is in transition (#17823)

* Throw error when a plugin is in transition
* Add unit tests about plugins in transition

4 files changed, 87 insertions, 2 deletions

diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html
index 2017f338b..b26fb4a0d 100644
--- a/js/tests/visual/carousel.html
+++ b/js/tests/visual/carousel.html
@@ -46,11 +46,31 @@
     <script src="../../dist/carousel.js"></script>
 
     <script>
-      $(function() {
+      // Should throw an error because carousel is in transition
+      function testCarouselTransitionError() {
+        var err = false
+        var $carousel = $('#carousel-example-generic')
+        $carousel.on('slid.bs.carousel', function () {
+          $carousel.off('slid.bs.carousel')
+          if (!err) {
+            alert('No error thrown for : testCarouselTransitionError')
+          }
+        })
+        try {
+          $carousel.carousel('next').carousel('prev')
+        }
+        catch (e) {
+          err = true
+          console.error(e.message)
+        }
+      }
+
+      $(function () {
         // Test to show that the carousel doesn't slide when the current tab isn't visible
-        $('#carousel-example-generic').on('slid.bs.carousel', function(event) {
+        $('#carousel-example-generic').on('slid.bs.carousel', function (event) {
           console.log('slid at ', event.timeStamp)
         })
+        testCarouselTransitionError()
       })
     </script>
   </body>
diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html
index e13597984..973d3c5ee 100644
--- a/js/tests/visual/collapse.html
+++ b/js/tests/visual/collapse.html
@@ -61,5 +61,30 @@
     <script src="../vendor/jquery.min.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/collapse.js"></script>
+    <script>
+      // JavaScript Test
+      $(function () {
+        testCollapseTransitionError()
+      });
+
+      // Should throw an error because carousel is in transition
+      function testCollapseTransitionError() {
+        var err = false
+        $('#collapseOne').on('hidden.bs.collapse', function (e) {
+          $(this).off('hidden.bs.collapse')
+          if (!err) {
+            alert('No error thrown for : testCollapseTransitionError')
+          }
+        })
+
+        try {
+          $('#collapseOne').collapse('hide').collapse('show')
+        }
+        catch (e) {
+          err = true
+          console.error(e.message)
+        }
+      }
+    </script>
   </body>
 </html>
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index fa5bd368a..69d392350 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -188,6 +188,26 @@
         }
       }
 
+      // Should throw an error because modal is in transition
+      function testModalTransitionError() {
+        var err = false
+        // Close #myModal
+        $('#myModal').on('shown.bs.modal', function () {
+          $('#myModal').modal('hide').off('shown.bs.modal')
+          if (!err) {
+            alert('No error thrown for : testModalTransitionError')
+          }
+        })
+
+        try {
+          $('#myModal').modal('show').modal('hide')
+        }
+        catch (e) {
+          err = true
+          console.error(e.message)
+        }
+      }
+
       $(function () {
         $('[data-toggle="popover"]').popover()
         $('[data-toggle="tooltip"]').tooltip()
@@ -200,6 +220,7 @@
           $('#firefoxModal').on('focus', reportFirefoxTestResult.bind(false))
           $('#ff-bug-input').on('focus', reportFirefoxTestResult.bind(true))
         })
+        testModalTransitionError()
       })
     </script>
   </body>
diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
index 999e7eda6..6cd33e7e6 100644
--- a/js/tests/visual/tooltip.html
+++ b/js/tests/visual/tooltip.html
@@ -42,7 +42,26 @@
     <script>
       $(function () {
         $('[data-toggle="tooltip"]').tooltip()
+        testTooltipTransitionError()
       })
+
+      // Should throw an error because tooltip is in transition
+      function testTooltipTransitionError() {
+        var err = false
+        $('#btnOne').on('shown.bs.tooltip', function () {
+          $('#btnOne').tooltip('hide').off('shown.bs.tooltip')
+          if (!err) {
+            alert('No error thrown for : testTooltipTransitionError')
+          }
+        })
+        try {
+          $('#btnOne').tooltip('show').tooltip('hide')
+        }
+        catch (e) {
+          err = true
+          console.error(e.message)
+        }
+      }
     </script>
   </body>
 </html>