Add touch support in our carousel with HammerJS.

5 files changed, 146 insertions, 7 deletions

diff --git a/js/tests/index.html b/js/tests/index.html
index ce4a0e308..201e15f2a 100644
--- a/js/tests/index.html
+++ b/js/tests/index.html
@@ -20,6 +20,7 @@
       }())
     </script>
     <script src="../../node_modules/popper.js/dist/umd/popper.min.js"></script>
+    <script src="../../node_modules/hammerjs/hammer.min.js"></script>
 
     <!-- QUnit -->
     <link rel="stylesheet" href="../../node_modules/qunit/qunit/qunit.css" media="screen">
@@ -28,6 +29,9 @@
     <!-- Sinon -->
     <script src="../../node_modules/sinon/pkg/sinon-no-sourcemaps.js"></script>
 
+    <!-- Hammer simulator -->
+    <script src="../../node_modules/hammer-simulator/index.js"></script>
+
     <script>
       // Disable jQuery event aliases to ensure we don't accidentally use any of them
       [
diff --git a/js/tests/karma.conf.js b/js/tests/karma.conf.js
index 070606a52..c3c64e885 100644
--- a/js/tests/karma.conf.js
+++ b/js/tests/karma.conf.js
@@ -12,16 +12,16 @@ const jqueryFile = process.env.USE_OLD_JQUERY ? 'https://code.jquery.com/jquery-
 const bundle = process.env.BUNDLE === 'true'
 const browserStack = process.env.BROWSER === 'true'
 
-const frameworks = [
-  'qunit',
-  'sinon'
-]
-
 const plugins = [
   'karma-qunit',
   'karma-sinon'
 ]
 
+const frameworks = [
+  'qunit',
+  'sinon'
+]
+
 const reporters = ['dots']
 
 const detectBrowsers = {
@@ -46,7 +46,12 @@ const customLaunchers = {
   }
 }
 
-let files = ['node_modules/popper.js/dist/umd/popper.min.js']
+let files = [
+  'node_modules/popper.js/dist/umd/popper.min.js',
+  'node_modules/hammerjs/hammer.min.js',
+  'node_modules/hammer-simulator/index.js'
+]
+
 const conf = {
   basePath: '../..',
   port: 9876,
diff --git a/js/tests/unit/.eslintrc.json b/js/tests/unit/.eslintrc.json
index 0896f406d..a7fa64af0 100644
--- a/js/tests/unit/.eslintrc.json
+++ b/js/tests/unit/.eslintrc.json
@@ -9,7 +9,9 @@
     "sinon": false,
     "Util": false,
     "Alert": false,
-    "Button": false
+    "Button": false,
+    "Carousel": false,
+    "Simulator": false
   },
   "parserOptions": {
     "ecmaVersion": 5,
diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index 20b12f4b0..0bc52219e 100644
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -1,6 +1,10 @@
 $(function () {
   'use strict'
 
+  window.Carousel = typeof bootstrap !== 'undefined' ? bootstrap.Carousel : Carousel
+
+  var touchSupported = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0
+
   QUnit.module('carousel plugin')
 
   QUnit.test('should be defined on jQuery object', function (assert) {
@@ -25,6 +29,20 @@ $(function () {
     assert.strictEqual(typeof $.fn.carousel, 'undefined', 'carousel was set back to undefined (orig value)')
   })
 
+  QUnit.test('should return version', function (assert) {
+    assert.expect(1)
+
+    assert.strictEqual(typeof Carousel.VERSION, 'string')
+  })
+
+  QUnit.test('should return default parameters', function (assert) {
+    assert.expect(1)
+
+    var defaultConfig = Carousel.Default
+
+    assert.strictEqual(defaultConfig.touch, true)
+  })
+
   QUnit.test('should throw explicit error on undefined method', function (assert) {
     assert.expect(1)
     var $el = $('<div/>')
@@ -989,4 +1007,113 @@ $(function () {
       }, 80)
     }, 80)
   })
+
+  QUnit.test('should allow swiperight and call prev', function (assert) {
+    if (!touchSupported) {
+      assert.expect(0)
+
+      return
+    }
+
+    assert.expect(2)
+    var done = assert.async()
+    document.documentElement.ontouchstart = $.noop
+
+    var carouselHTML =
+        '<div class="carousel" data-interval="false">' +
+        '  <div class="carousel-inner">' +
+        '    <div id="item" class="carousel-item">' +
+        '      <img alt="">' +
+        '    </div>' +
+        '    <div class="carousel-item active">' +
+        '      <img alt="">' +
+        '    </div>' +
+        '  </div>' +
+        '</div>'
+
+    var $carousel = $(carouselHTML)
+    $carousel.appendTo('#qunit-fixture')
+    var $item = $('#item')
+    $carousel.bootstrapCarousel()
+
+    $carousel.one('slid.bs.carousel', function () {
+      assert.ok(true, 'slid event fired')
+      assert.ok($item.hasClass('active'))
+      delete document.documentElement.ontouchstart
+      done()
+    })
+
+    Simulator.gestures.swipe($carousel[0], {
+      deltaX: 300,
+      deltaY: 0
+    })
+  })
+
+  QUnit.test('should not use HammerJS when touch option is false', function (assert) {
+    assert.expect(1)
+
+    var $carousel = $('<div></div>').appendTo('#qunit-fixture')
+    $carousel.bootstrapCarousel({
+      touch: false
+    })
+
+    var carousel = $carousel.data('bs.carousel')
+
+    assert.strictEqual(carousel.hammer, null)
+  })
+
+  QUnit.test('should use HammerJS when touch option is true', function (assert) {
+    assert.expect(1)
+
+    document.documentElement.ontouchstart = $.noop
+
+    var $carousel = $('<div></div>').appendTo('#qunit-fixture')
+    $carousel.bootstrapCarousel()
+
+    var carousel = $carousel.data('bs.carousel')
+
+    assert.ok(carousel.hammer !== null)
+  })
+
+  QUnit.test('should allow swipeleft and call next', function (assert) {
+    if (!touchSupported) {
+      assert.expect(0)
+
+      return
+    }
+
+    assert.expect(2)
+    var done = assert.async()
+    document.documentElement.ontouchstart = $.noop
+
+    var carouselHTML =
+        '<div class="carousel" data-interval="false">' +
+        '  <div class="carousel-inner">' +
+        '    <div id="item" class="carousel-item active">' +
+        '      <img alt="">' +
+        '    </div>' +
+        '    <div class="carousel-item">' +
+        '      <img alt="">' +
+        '    </div>' +
+        '  </div>' +
+        '</div>'
+
+    var $carousel = $(carouselHTML)
+    $carousel.appendTo('#qunit-fixture')
+    var $item = $('#item')
+    $carousel.bootstrapCarousel()
+
+    $carousel.one('slid.bs.carousel', function () {
+      assert.ok(true, 'slid event fired')
+      assert.ok(!$item.hasClass('active'))
+      delete document.documentElement.ontouchstart
+      done()
+    })
+
+    Simulator.gestures.swipe($carousel[0], {
+      pos: [300, 10],
+      deltaX: -300,
+      deltaY: 0
+    })
+  })
 })
diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html
index 630f870cf..cd917caa6 100644
--- a/js/tests/visual/carousel.html
+++ b/js/tests/visual/carousel.html
@@ -46,6 +46,7 @@
     </div>
 
     <script src="../../../site/docs/4.1/assets/js/vendor/jquery-slim.min.js"></script>
+    <script src="../../../node_modules/hammerjs/hammer.min.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/carousel.js"></script>
     <script>