From e010e2c3333f70a78ac5cc24fb55517ecfaadf3b Mon Sep 17 00:00:00 2001 From: Johann-S <johann.servoire@gmail.com> Date: Fri, 14 Apr 2017 13:30:55 +0200 Subject: [PATCH] Fix units tests for dropdown --- js/src/dropdown.js | 14 ++++++----- js/src/tooltip.js | 2 +- js/tests/unit/dropdown.js | 48 ++++++++++++++++++------------------ js/tests/unit/tooltip.js | 39 ----------------------------- js/tests/visual/tooltip.html | 18 ++++++++++++++ scss/_dropdown.scss | 2 +- 6 files changed, 52 insertions(+), 71 deletions(-) diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 777d45f7c396..6baa7171ed9d 100644 --- a/js/src/dropdown.js +++ b/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 } diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 6205b7d182f3..fd8b8ad59d4c 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -47,7 +47,7 @@ const Tooltip = (($) => { html : false, selector : false, placement : 'top', - offset : {}, + offset : 0, container : false } diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js index a15eb52450d6..1dd675b0b685 100644 --- a/js/tests/unit/dropdown.js +++ b/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') }) diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js index 0bb90156b9e1..0982078ef2a5 100644 --- a/js/tests/unit/tooltip.js +++ b/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() }) @@ -702,43 +700,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) diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html index 9fbd196b6faa..c45926eba98e 100644 --- a/js/tests/visual/tooltip.html +++ b/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 @@ <h1>Tooltip <small>Bootstrap Visual Test</small></h1> <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 @@ <h1>Tooltip <small>Bootstrap Visual Test</small></h1> <script> $(function () { $('[data-toggle="tooltip"]').tooltip() + $('#target').tooltip({ + placement : 'top', + trigger : 'manual' + }).tooltip('show') }) </script> </body> diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 2c57f0209c65..4f0e6fcce6e9 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -138,4 +138,4 @@ // // Just add .dropup after the standard .dropdown class and you're set. -.dropup {} +//.dropup {}