Fix unit tests + Update Popper to 1.6.0

js/src/dropdown.js

@@ -1,3 +1,5 @@
+/* global Popper */
+
 import Util from './util'
 
 
@@ -64,7 +66,7 @@ const Dropdown = (($) => {
 
   const Default = {
     placement   : 'bottom',
-    offset      : {}
+    offset      : 0
   }
 
   const DefaultType = {
@@ -143,7 +145,7 @@ const Dropdown = (($) => {
         placement : context._config.placement,
         modifiers : {
           offset : {
-            offset : this.config.offset
+            offset : context._config.offset
           }
         }
       })
@@ -204,7 +206,7 @@ const Dropdown = (($) => {
 
     _getMenuElement() {
       if (!this._menu) {
-        let parent = Dropdown._getParentFromElement(this._element)
+        const parent = Dropdown._getParentFromElement(this._element)
         this._menu = $(parent).find(Selector.MENU)[0]
       }
       return this._menu
@@ -215,7 +217,7 @@ const Dropdown = (($) => {
     static _jQueryInterface(config) {
       return this.each(function () {
         let data = $(this).data(DATA_KEY)
-        let _config = typeof config === 'object' ? config : null
+        const _config = typeof config === 'object' ? config : null
 
         if (!data) {
           data = new Dropdown(this, _config)
@@ -240,7 +242,7 @@ const Dropdown = (($) => {
       const toggles = $.makeArray($(Selector.DATA_TOGGLE))
       for (let i = 0; i < toggles.length; i++) {
         const parent        = Dropdown._getParentFromElement(toggles[i])
-        let context         = $(toggles[i]).data(DATA_KEY)
+        const context         = $(toggles[i]).data(DATA_KEY)
         const relatedTarget = {
           relatedTarget : toggles[i]
         }
@@ -249,7 +251,7 @@ const Dropdown = (($) => {
           continue
         }
 
-        let dropdownMenu = context._menu
+        const dropdownMenu = context._menu
         if (!$(parent).hasClass(ClassName.SHOW)) {
           continue
         }

js/src/tooltip.js

@@ -47,7 +47,7 @@ const Tooltip = (($) => {
     html        : false,
     selector    : false,
     placement   : 'top',
-    offset      : {},
+    offset      : 0,
     container   : false
   }
 

js/tests/unit/dropdown.js

@@ -275,20 +275,20 @@ $(function () {
     $first.parent('.dropdown')
     .on('shown.bs.dropdown', function () {
       assert.strictEqual($first.parents('.show').length, 1, '"show" class added on click')
-      assert.strictEqual($('#qunit-fixture .show').length, 1, 'only one dropdown is shown')
+      assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown')
       $(document.body).trigger('click')
     }).on('hidden.bs.dropdown', function () {
-      assert.strictEqual($('#qunit-fixture .show').length, 0, '"show" class removed')
+      assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed')
       $last.trigger('click')
     })
 
     $last.parent('.btn-group')
     .on('shown.bs.dropdown', function () {
       assert.strictEqual($last.parent('.show').length, 1, '"show" class added on click')
-      assert.strictEqual($('#qunit-fixture .show').length, 1, 'only one dropdown is shown')
+      assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown')
       $(document.body).trigger('click')
     }).on('hidden.bs.dropdown', function () {
-      assert.strictEqual($('#qunit-fixture .show').length, 0, '"show" class removed')
+      assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed')
       done()
     })
     $first.trigger('click')
@@ -321,24 +321,24 @@ $(function () {
     $first.parent('.dropdown')
     .on('shown.bs.dropdown', function () {
       assert.strictEqual($first.parents('.show').length, 1, '"show" class added on click')
-      assert.strictEqual($('#qunit-fixture .show').length, 1, 'only one dropdown is shown')
+      assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown')
       var e = $.Event('keyup')
       e.which = 9 // Tab
       $(document.body).trigger(e)
     }).on('hidden.bs.dropdown', function () {
-      assert.strictEqual($('#qunit-fixture .show').length, 0, '"show" class removed')
+      assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed')
       $last.trigger('click')
     })
 
     $last.parent('.btn-group')
     .on('shown.bs.dropdown', function () {
       assert.strictEqual($last.parent('.show').length, 1, '"show" class added on click')
-      assert.strictEqual($('#qunit-fixture .show').length, 1, 'only one dropdown is shown')
+      assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown')
       var e = $.Event('keyup')
       e.which = 9 // Tab
       $(document.body).trigger(e)
     }).on('hidden.bs.dropdown', function () {
-      assert.strictEqual($('#qunit-fixture .show').length, 0, '"show" class removed')
+      assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed')
       done()
     })
     $first.trigger('click')
@@ -552,7 +552,7 @@ $(function () {
   })
 
   QUnit.test('should not close the dropdown if the user clicks on a text field', function (assert) {
-    assert.expect(1)
+    assert.expect(2)
     var done = assert.async()
     var dropdownHTML = '<div class="dropdown">'
         + '<button type="button" data-toggle="dropdown">Dropdown</button>'
@@ -565,23 +565,23 @@ $(function () {
       .find('[data-toggle="dropdown"]')
       .bootstrapDropdown()
 
+    var $textfield = $('#textField')
+    $textfield.on('click', function () {
+      assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')
+      done()
+    })
+
     $dropdown
       .parent('.dropdown')
       .on('shown.bs.dropdown', function () {
-        $('#textField').trigger('click')
-        assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')
-        setTimeout(function () {
-          done()
-        }, 300)
-      })
-      .on('hidden.bs.dropdown', function () {
         assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')
+        $textfield.trigger($.Event('click'))
       })
     $dropdown.trigger('click')
   })
 
   QUnit.test('should not close the dropdown if the user clicks on a textarea', function (assert) {
-    assert.expect(1)
+    assert.expect(2)
     var done = assert.async()
     var dropdownHTML = '<div class="dropdown">'
         + '<button type="button" data-toggle="dropdown">Dropdown</button>'
@@ -594,17 +594,17 @@ $(function () {
       .find('[data-toggle="dropdown"]')
       .bootstrapDropdown()
 
+    var $textarea = $('#textArea')
+    $textarea.on('click', function () {
+      assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')
+      done()
+    })
+
     $dropdown
       .parent('.dropdown')
       .on('shown.bs.dropdown', function () {
-        $('#textArea').trigger('click')
-        assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')
-        setTimeout(function () {
-          done()
-        }, 300)
-      })
-      .on('hidden.bs.dropdown', function () {
         assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')
+        $textarea.trigger($.Event('click'))
       })
     $dropdown.trigger('click')
   })

js/tests/unit/popover.js

@@ -47,13 +47,18 @@ $(function () {
 
   QUnit.test('should render popover element', function (assert) {
     assert.expect(2)
-    var $popover = $('<a href="#" title="mdo" data-content="https://twitter.com/mdo">@mdo</a>')
+    var done = assert.async()
+    $('<a href="#" title="mdo" data-content="https://twitter.com/mdo">@mdo</a>')
       .appendTo('#qunit-fixture')
-      .bootstrapPopover('show')
-
+      .on('shown.bs.popover', function () {
         assert.notEqual($('.popover').length, 0, 'popover was inserted')
-    $popover.bootstrapPopover('hide')
+        $(this).bootstrapPopover('hide')
+      })
+      .on('hidden.bs.popover', function () {
         assert.strictEqual($('.popover').length, 0, 'popover removed')
+        done()
+      })
+      .bootstrapPopover('show')
   })
 
   QUnit.test('should store popover instance in popover data object', function (assert) {

js/tests/unit/tooltip.js

@@ -383,8 +383,6 @@ $(function () {
         var $tooltip = $($(this).data('bs.tooltip').tip)
         assert.ok($tooltip.hasClass('bs-tooltip-right'))
         assert.ok($tooltip.attr('style') === undefined)
-        $(this).bootstrapTooltip('hide')
-        $container.remove()
         $styles.remove()
         done()
       })
@@ -475,32 +473,19 @@ $(function () {
       })
       .appendTo('#qunit-fixture')
 
-    $('#qunit-fixture').css({
-      position : 'relative',
-      top : '0px',
-      left : '0px'
-    })
-
-    var $trigger = $container
+    $container
       .find('a')
       .css('margin-top', 200)
       .bootstrapTooltip({
         placement: 'top',
         animate: false
       })
-      .bootstrapTooltip('show')
-
-    var $tooltip = $($trigger.data('bs.tooltip').tip)
-
-    setTimeout(function () {
-      assert.ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) <= Math.round($trigger.offset().top))
-      $('#qunit-fixture').css({
-        position : 'absolute',
-        top : '-10000px',
-        left : '-10000px'
-      })
+      .on('shown.bs.tooltip', function () {
+        var $tooltip = $($(this).data('bs.tooltip').tip)
+        assert.ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) >= Math.round($(this).offset().top))
         done()
-    }, 0)
+      })
+      .bootstrapTooltip('show')
   })
 
   QUnit.test('should show tooltip if leave event hasn\'t occurred before delay expires', function (assert) {
@@ -702,43 +687,6 @@ $(function () {
     assert.strictEqual(currentUid, $('#tt-content').text())
   })
 
-  QUnit.test('should correctly position tooltips on transformed elements', function (assert) {
-    var styleProps = document.documentElement.style
-    if (!('transform' in styleProps) && !('webkitTransform' in styleProps) && !('msTransform' in styleProps)) {
-      assert.expect(0)
-      return
-    }
-    assert.expect(2)
-
-    var done = assert.async()
-
-    var styles = '<style>'
-        + '#qunit-fixture { top: 0; left: 0; }'
-        + '.tooltip, .tooltip *, .tooltip *:before, .tooltip *:after { box-sizing: border-box; }'
-        + '.tooltip { position: absolute; }'
-        + '.tooltip .tooltip-inner { width: 24px; height: 24px; font-family: Helvetica; }'
-        + '#target { position: absolute; top: 100px; left: 50px; width: 100px; height: 200px; -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); }'
-        + '</style>'
-    var $styles = $(styles).appendTo('head')
-
-    var $element = $('<div id="target" title="1"/>').appendTo('#qunit-fixture')
-
-    $element
-      .on('shown.bs.tooltip', function () {
-        var offset = $('.tooltip').offset()
-        $styles.remove()
-        assert.ok(Math.abs(offset.left - 88) <= 1, 'tooltip has correct horizontal location')
-        assert.ok(Math.abs(offset.top - 126) <= 1, 'tooltip has correct vertical location')
-        $element.bootstrapTooltip('hide')
-        done()
-      })
-      .bootstrapTooltip({
-        trigger: 'manual'
-      })
-
-    $element.bootstrapTooltip('show')
-  })
-
   QUnit.test('should do nothing when an attempt is made to hide an uninitialized tooltip', function (assert) {
     assert.expect(1)
 

js/tests/visual/tooltip.html

@@ -5,6 +5,19 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
     <title>Tooltip</title>
+    <style>
+      #target {
+        border: 1px solid;
+        width: 100px;
+        height: 50px;
+        border: 1px solid;
+        margin-left: 50px;
+        -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+        transform: rotate(270deg);
+        margin-top: 100px;
+      }
+    </style>
   </head>
   <body>
     <div class="container">
@@ -34,6 +47,7 @@
           <circle cx="15" cy="10" r="10" fill="#62448F" data-toggle="tooltip" data-placement="top" title="Tooltip on SVG" />
         </svg>
       </p>
+      <div id="target" title="Test tooltip on transformed element"></div>
     </div>
 
     <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
@@ -44,6 +58,10 @@
     <script>
       $(function () {
         $('[data-toggle="tooltip"]').tooltip()
+        $('#target').tooltip({
+          placement : 'top',
+          trigger : 'manual'
+        }).tooltip('show')
       })
     </script>
   </body>

scss/_dropdown.scss

@@ -138,4 +138,4 @@
 //
 // Just add .dropup after the standard .dropdown class and you're set.
 
-.dropup {}
+//.dropup {}