$(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-fixture').html('')
}
})
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.appendTo('#qunit-fixture')
$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 = $('')
$el.appendTo('#qunit-fixture')
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()
})
EventHandler.trigger($dropdown[0], '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()
})
EventHandler.trigger($dropdown[0], '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()
var dropdownParent = $dropdown.parent('.dropdown')[0]
EventHandler.on(dropdownParent, 'shown.bs.dropdown', function () {
assert.strictEqual($dropdown.attr('aria-expanded'), 'true', 'aria-expanded is set to string "true" on click')
done()
})
EventHandler.trigger($dropdown[0], '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()
var dropdownParent = $dropdown.parent('.dropdown')[0]
EventHandler.one(dropdownParent, 'hidden.bs.dropdown', function () {
assert.strictEqual($dropdown.attr('aria-expanded'), 'false', 'aria-expanded is set to string "false" on hide')
done()
})
EventHandler.trigger($dropdown[0], 'click')
EventHandler.trigger(document.body, '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 = '
'
$(dropdownHTML).appendTo('#qunit-fixture')
var $dropdown = $('#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')
done()
})
EventHandler.trigger($dropdown[0], '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()
})
EventHandler.trigger($dropdown[0], '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')
EventHandler.trigger(document.body, 'keyup', {
which: 9 // Tab
})
})
.on('hidden.bs.dropdown', function () {
assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), '"show" class removed')
done()
})
EventHandler.trigger($dropdown[0], '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')
EventHandler.trigger($last[0], '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()
})
EventHandler.trigger($first[0], '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 $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()
})
EventHandler.trigger($dropdown[0], 'click')
EventHandler.trigger(document.body, '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')
})
EventHandler.trigger($dropdown[0], 'click')
})
QUnit.test('should fire hide and hidden event with a clickEvent', function (assert) {
assert.expect(3)
var dropdownHTML = '
'
var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.bootstrapDropdown()
$dropdown.parent('.dropdown')
.on('hide.bs.dropdown', function (e) {
assert.ok(e.clickEvent)
})
.on('hidden.bs.dropdown', function (e) {
assert.ok(e.clickEvent)
})
.on('shown.bs.dropdown', function () {
assert.ok(true, 'shown was fired')
$(document.body).trigger('click')
})
$dropdown.trigger('click')
})
QUnit.test('should fire hide and hidden event without a clickEvent if event type is not click', function (assert) {
assert.expect(3)
var dropdownHTML = '