Skip to content

Commit

Permalink
Fix units tests for dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@Johann-S
Johann-S committed Apr 14, 2017
1 parent d857f86 commit e010e2c
Show file tree
Hide file tree
Showing 6 changed files with 52 additions and 71 deletions.
14 changes: 8 additions & 6 deletions js/src/dropdown.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
/* global Popper */

import Util from './util'


Expand Down Expand Up @@ -64,7 +66,7 @@ const Dropdown = (($) => {

const Default = {
placement : 'bottom',
offset : {}
offset : 0
}

const DefaultType = {
Expand Down Expand Up @@ -143,7 +145,7 @@ const Dropdown = (($) => {
placement : context._config.placement,
modifiers : {
offset : {
offset : this.config.offset
offset : context._config.offset
}
}
})
Expand Down Expand Up @@ -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
Expand All @@ -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)
Expand All @@ -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]
}
Expand All @@ -249,7 +251,7 @@ const Dropdown = (($) => {
continue
}

let dropdownMenu = context._menu
const dropdownMenu = context._menu
if (!$(parent).hasClass(ClassName.SHOW)) {
continue
}
Expand Down
2 changes: 1 addition & 1 deletion js/src/tooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const Tooltip = (($) => {
html : false,
selector : false,
placement : 'top',
offset : {},
offset : 0,
container : false
}

Expand Down
48 changes: 24 additions & 24 deletions js/tests/unit/dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down Expand Up @@ -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')
Expand Down Expand Up @@ -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>'
Expand All @@ -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>'
Expand All @@ -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')
})
Expand Down
39 changes: 0 additions & 39 deletions js/tests/unit/tooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
})
Expand Down Expand Up @@ -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)

Expand Down
18 changes: 18 additions & 0 deletions js/tests/visual/tooltip.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion scss/_dropdown.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,4 +138,4 @@
//
// Just add .dropup after the standard .dropdown class and you're set.

.dropup {}
//.dropup {}

0 comments on commit e010e2c

Please sign in to comment.