Unit test to check if our carousel do not cycle when we cannot see it

1 files changed, 37 insertions, 0 deletions

diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index 894f78ab5..cef461576 100644
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -842,4 +842,41 @@ $(function () {
     })
     $textArea.trigger(eventKeyDown)
   })
+
+  QUnit.test('Should not go to the next item when the carousel is not visible', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+    var html = '<div id="myCarousel" class="carousel slide" data-interval="50" style="display: none;">'
+             + '  <div class="carousel-inner">'
+             + '    <div id="firstItem" class="carousel-item active">'
+             + '      <img alt="">'
+             + '    </div>'
+             + '    <div class="carousel-item">'
+             + '      <img alt="">'
+             + '    </div>'
+             + '    <div class="carousel-item">'
+             + '      <img alt="">'
+             + '    </div>'
+             + '  <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>'
+             + '  <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>'
+             + '</div>'
+    var $html = $(html)
+    $html
+      .appendTo('#qunit-fixture')
+      .bootstrapCarousel()
+
+    var $firstItem = $('#firstItem')
+    setTimeout(function () {
+      assert.ok($firstItem.hasClass('active'))
+      $html
+        .bootstrapCarousel('dispose')
+        .attr('style', 'visibility: hidden;')
+        .bootstrapCarousel()
+
+      setTimeout(function () {
+        assert.ok($firstItem.hasClass('active'))
+        done()
+      }, 80)
+    }, 80)
+  })
 })