$(function () {
'use strict'
QUnit.module('dropdowns plugin')
QUnit.test('should be defined on jquery object', function (assert) {
assert.expect(1)
assert.ok($(document.body).dropdown, 'dropdown method is defined')
})
QUnit.module('dropdowns', {
beforeEach: function () {
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
$.fn.bootstrapDropdown = $.fn.dropdown.noConflict()
},
afterEach: function () {
$.fn.dropdown = $.fn.bootstrapDropdown
delete $.fn.bootstrapDropdown
}
})
QUnit.test('should provide no conflict', function (assert) {
assert.expect(1)
assert.strictEqual(typeof $.fn.dropdown, 'undefined', 'dropdown was set back to undefined (org value)')
})
QUnit.test('should throw explicit error on undefined method', function (assert) {
assert.expect(1)
var $el = $('')
$el.bootstrapDropdown()
try {
$el.bootstrapDropdown('noMethod')
}
catch (err) {
assert.strictEqual(err.message, 'No method named "noMethod"')
}
})
QUnit.test('should return jquery collection containing the element', function (assert) {
assert.expect(2)
var $el = $('')
var $dropdown = $el.bootstrapDropdown()
assert.ok($dropdown instanceof $, 'returns jquery collection')
assert.strictEqual($dropdown[0], $el[0], 'collection contains element')
})
QUnit.test('should not open dropdown if target is disabled via attribute', function (assert) {
assert.expect(1)
var done = assert.async()
var dropdownHTML = '
'
$(dropdownHTML).appendTo('#qunit-fixture')
var $dropdown = $('#qunit-fixture').find('[data-toggle="dropdown"]').bootstrapDropdown()
$dropdown.on('click', function () {
assert.ok(!$dropdown.parent('.dropdown').hasClass('show'))
done()
})
$dropdown.trigger($.Event('click'))
})
QUnit.test('should not add class position-static to dropdown if boundary not set', function (assert) {
assert.expect(1)
var done = assert.async()
var dropdownHTML = '
'
var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown()
$dropdown
.parent('.dropdown')
.on('shown.bs.dropdown', function () {
assert.ok(!$dropdown.parent('.dropdown').hasClass('position-static'), '"position-static" class not added')
done()
})
$dropdown.trigger('click')
})
QUnit.test('should add class position-static to dropdown if boundary not scrollParent', function (assert) {
assert.expect(1)
var done = assert.async()
var dropdownHTML = '
'
var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown()
$dropdown
.parent('.dropdown')
.on('shown.bs.dropdown', function () {
assert.ok($dropdown.parent('.dropdown').hasClass('position-static'), '"position-static" class added')
done()
})
$dropdown.trigger('click')
})
QUnit.test('should set aria-expanded="true" on target when dropdown menu is shown', function (assert) {
assert.expect(1)
var done = assert.async()
var dropdownHTML = '
'
var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.bootstrapDropdown()
$dropdown
.parent('.dropdown')
.on('shown.bs.dropdown', function () {
assert.strictEqual($dropdown.attr('aria-expanded'), 'true', 'aria-expanded is set to string "true" on click')
done()
})
$dropdown.trigger('click')
})
QUnit.test('should set aria-expanded="false" on target when dropdown menu is hidden', function (assert) {
assert.expect(1)
var done = assert.async()
var dropdownHTML = '
'
var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.bootstrapDropdown()
$dropdown
.parent('.dropdown')
.on('hidden.bs.dropdown', function () {
assert.strictEqual($dropdown.attr('aria-expanded'), 'false', 'aria-expanded is set to string "false" on hide')
done()
})
$dropdown.trigger('click')
$(document.body).trigger('click')
})
QUnit.test('should not open dropdown if target is disabled via class', function (assert) {
assert.expect(1)
var done = assert.async()
var dropdownHTML = '
'
$(dropdownHTML).appendTo('#qunit-fixture')
var $dropdown = $('#qunit-fixture').find('[data-toggle="dropdown"]').bootstrapDropdown()
$dropdown.on('click', function () {
assert.ok(!$dropdown.parent('.dropdown').hasClass('show'))
done()
})
$dropdown.trigger($.Event('click'))
})
QUnit.test('should add class show to menu if clicked', function (assert) {
assert.expect(1)
var done = assert.async()
var dropdownHTML = '
'
var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown()
$dropdown
.parent('.dropdown')
.on('shown.bs.dropdown', function () {
assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
done()
})
$dropdown.trigger('click')
})
QUnit.test('should test if element has a # before assuming it\'s a selector', function (assert) {
assert.expect(1)
var done = assert.async()
var dropdownHTML = '
'
var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown()
$dropdown
.parent('.dropdown')
.on('shown.bs.dropdown', function () {
assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
done()
})
$dropdown.trigger('click')
})
QUnit.test('should remove "show" class if body is clicked', function (assert) {
assert.expect(2)
var done = assert.async()
var dropdownHTML = '
'
var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.bootstrapDropdown()
$dropdown
.parent('.dropdown')
.on('shown.bs.dropdown', function () {
assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
$(document.body).trigger('click')
}).on('hidden.bs.dropdown', function () {
assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), '"show" class removed')
done()
})
$dropdown.trigger('click')
})
QUnit.test('should remove "show" class if tabbing outside of menu', function (assert) {
assert.expect(2)
var done = assert.async()
var dropdownHTML = '
'
var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.bootstrapDropdown()
$dropdown
.parent('.dropdown')
.on('shown.bs.dropdown', function () {
assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
var e = $.Event('keyup')
e.which = 9 // Tab
$(document.body).trigger(e)
}).on('hidden.bs.dropdown', function () {
assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), '"show" class removed')
done()
})
$dropdown.trigger('click')
})
QUnit.test('should remove "show" class if body is clicked, with multiple dropdowns', function (assert) {
assert.expect(7)
var done = assert.async()
var dropdownHTML = '
'
var $dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]')
var $first = $dropdowns.first()
var $last = $dropdowns.last()
assert.strictEqual($dropdowns.length, 2, 'two dropdowns')
$first.parent('.dropdown')
.on('shown.bs.dropdown', function () {
assert.strictEqual($first.parents('.show').length, 1, '"show" class added on click')
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 .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 .dropdown-menu.show').length, 1, 'only one dropdown is shown')
$(document.body).trigger('click')
}).on('hidden.bs.dropdown', function () {
assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed')
done()
})
$first.trigger('click')
})
QUnit.test('should remove "show" class if body if tabbing outside of menu, with multiple dropdowns', function (assert) {
assert.expect(7)
var done = assert.async()
var dropdownHTML = '
'
var $dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]')
var $first = $dropdowns.first()
var $last = $dropdowns.last()
assert.strictEqual($dropdowns.length, 2, 'two dropdowns')
$first.parent('.dropdown')
.on('shown.bs.dropdown', function () {
assert.strictEqual($first.parents('.show').length, 1, '"show" class added on click')
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 .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 .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 .dropdown-menu.show').length, 0, '"show" class removed')
done()
})
$first.trigger('click')
})
QUnit.test('should fire show and hide event', function (assert) {
assert.expect(2)
var dropdownHTML = '
'
var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.bootstrapDropdown()
var done = assert.async()
$dropdown
.parent('.dropdown')
.on('show.bs.dropdown', function () {
assert.ok(true, 'show was fired')
})
.on('hide.bs.dropdown', function () {
assert.ok(true, 'hide was fired')
done()
})
$dropdown.trigger('click')
$(document.body).trigger('click')
})
QUnit.test('should fire shown and hidden event', function (assert) {
assert.expect(2)
var dropdownHTML = '
'
var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.bootstrapDropdown()
var done = assert.async()
$dropdown
.parent('.dropdown')
.on('shown.bs.dropdown', function () {
assert.ok(true, 'shown was fired')
})
.on('hidden.bs.dropdown', function () {
assert.ok(true, 'hidden was fired')
done()
})
$dropdown.trigger('click')
$(document.body).trigger('click')
})
QUnit.test('should fire shown and hidden event with a relatedTarget', function (assert) {
assert.expect(2)
var dropdownHTML = '
'
var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.bootstrapDropdown()
var done = assert.async()
$dropdown.parent('.dropdown')
.on('hidden.bs.dropdown', function (e) {
assert.strictEqual(e.relatedTarget, $dropdown[0])
done()
})
.on('shown.bs.dropdown', function (e) {
assert.strictEqual(e.relatedTarget, $dropdown[0])
$(document.body).trigger('click')
})
$dropdown.trigger('click')
})
QUnit.test('should ignore keyboard events within s and '
+ ''
+ ''
var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.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 () {
assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')
$textarea.trigger($.Event('click'))
})
$dropdown.trigger('click')
})
QUnit.test('Dropdown should not use Popper.js in navbar', function (assert) {
assert.expect(1)
var done = assert.async()
var html = ''
$(html).appendTo('#qunit-fixture')
var $triggerDropdown = $('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.bootstrapDropdown()
var $dropdownMenu = $triggerDropdown.next()
$triggerDropdown
.parent('.dropdown')
.on('shown.bs.dropdown', function () {
assert.ok(typeof $dropdownMenu.attr('style') === 'undefined', 'No inline style applied by Popper.js')
done()
})
$triggerDropdown.trigger($.Event('click'))
})
QUnit.test('should ignore keyboard events for s and '
+ '