var $alert = $(alertHTML).bootstrapAlert().appendTo($('#qunit-fixture'))
var closeBtn = $alert.find('.close')[0]
- EventHandler.trigger(closeBtn, 'click')
+ closeBtn.dispatchEvent(new Event('click'))
assert.strictEqual($alert.hasClass('show'), false, 'remove .show class on .close click')
})
assert.notEqual($('#qunit-fixture').find('.alert').length, 0, 'element added to dom')
- EventHandler.on($alert[0], 'closed.bs.alert', function () {
+ $alert[0].addEventListener('closed.bs.alert', function () {
assert.strictEqual($('#qunit-fixture').find('.alert').length, 0, 'element removed from dom')
done()
})
var closeBtn = $alert.find('.close')[0]
- EventHandler.trigger(closeBtn, 'click')
+ closeBtn.dispatchEvent(new Event('click'))
})
QUnit.test('should not fire closed when close is prevented', function (assert) {
var $alert = $('<div class="alert"/>')
$alert.appendTo('#qunit-fixture')
- EventHandler.on($alert[0], 'close.bs.alert', function (e) {
+ $alert[0].addEventListener('close.bs.alert', function (e) {
e.preventDefault()
assert.ok(true, 'close event fired')
done()
})
- EventHandler.on($alert[0], 'closed.bs.alert', function () {
+ $alert[0].addEventListener('closed.bs.alert', function () {
assert.ok(false, 'closed event fired')
})
var $alert = $el.bootstrapAlert()
var alertInstance = Alert._getInstance($alert[0])
- $alert.one('closed.bs.alert', function () {
+ $alert[0].addEventListener('closed.bs.alert', function () {
assert.ok('alert closed')
done()
})
var $btn1 = $group.children().eq(0)
var $btn2 = $group.children().eq(1)
+ var inputBtn2 = $btn2.find('input')[0]
assert.ok($btn1.hasClass('active'), 'btn1 has active class')
assert.ok($btn1.find('input').prop('checked'), 'btn1 is checked')
assert.ok(!$btn2.hasClass('active'), 'btn2 does not have active class')
- assert.ok(!Manipulator.isChecked($btn2.find('input')[0]), 'btn2 is not checked')
+ assert.ok(!(inputBtn2.bsChecked || inputBtn2.checked), 'btn2 is not checked')
- EventHandler.trigger($btn2.find('input')[0], 'click')
+ inputBtn2.dispatchEvent(new Event('click'))
assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
assert.ok($btn2.hasClass('active'), 'btn2 has active class')
- assert.ok(Manipulator.isChecked($btn2.find('input')[0]), 'btn2 is checked')
+ assert.ok(inputBtn2.bsChecked || inputBtn2.checked, 'btn2 is checked')
- EventHandler.trigger($btn2.find('input')[0], 'click') // clicking an already checked radio should not un-check it
+ inputBtn2.dispatchEvent(new Event('click')) // clicking an already checked radio should not un-check it
assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
assert.ok($btn2.hasClass('active'), 'btn2 has active class')
- assert.ok(Manipulator.isChecked($btn2.find('input')[0]), 'btn2 is checked')
+ assert.ok(inputBtn2.bsChecked || inputBtn2.checked, 'btn2 is checked')
})
QUnit.test('should only toggle selectable inputs', function (assert) {
var $carousel = $('<div class="carousel"/>')
$carousel.appendTo('#qunit-fixture')
- EventHandler.on($carousel[0], 'slide.bs.carousel', function (e) {
+ $carousel[0].addEventListener('slide.bs.carousel', function (e) {
e.preventDefault()
assert.ok(true, 'slide event fired')
done()
})
- EventHandler.on($carousel[0], 'slid.bs.carousel', function () {
+ $carousel[0].addEventListener('slid.bs.carousel', function () {
assert.ok(false, 'slid event fired')
})
$carousel.bootstrapCarousel('next')
$carousel.appendTo('#qunit-fixture')
var done = assert.async()
- EventHandler
- .one($carousel[0], 'slide.bs.carousel', function (e) {
- e.preventDefault()
- setTimeout(function () {
- assert.ok($carousel.find('.carousel-item:nth-child(1)').is('.active'), 'first item still active')
- assert.ok($carousel.find('.carousel-indicators li:nth-child(1)').is('.active'), 'first indicator still active')
- $carousel.bootstrapCarousel('next')
- }, 0)
- })
-
- EventHandler
- .one($carousel[0], 'slid.bs.carousel', function () {
- setTimeout(function () {
- assert.ok(!$carousel.find('.carousel-item:nth-child(1)').is('.active'), 'first item still active')
- assert.ok(!$carousel.find('.carousel-indicators li:nth-child(1)').is('.active'), 'first indicator still active')
- assert.ok($carousel.find('.carousel-item:nth-child(2)').is('.active'), 'second item active')
- assert.ok($carousel.find('.carousel-indicators li:nth-child(2)').is('.active'), 'second indicator active')
- done()
- }, 0)
- })
+ function onSlide(e) {
+ e.preventDefault()
+ setTimeout(function () {
+ assert.ok($carousel.find('.carousel-item:nth-child(1)').is('.active'), 'first item still active')
+ assert.ok($carousel.find('.carousel-indicators li:nth-child(1)').is('.active'), 'first indicator still active')
+ $carousel.bootstrapCarousel('next')
+ }, 0)
+ $carousel[0].removeEventListener('slide.bs.carousel', onSlide)
+ }
+ $carousel[0].addEventListener('slide.bs.carousel', onSlide)
+
+ function onSlid() {
+ setTimeout(function () {
+ assert.ok(!$carousel.find('.carousel-item:nth-child(1)').is('.active'), 'first item still active')
+ assert.ok(!$carousel.find('.carousel-indicators li:nth-child(1)').is('.active'), 'first indicator still active')
+ assert.ok($carousel.find('.carousel-item:nth-child(2)').is('.active'), 'second item active')
+ assert.ok($carousel.find('.carousel-indicators li:nth-child(2)').is('.active'), 'second indicator active')
+ done()
+ }, 0)
+ $carousel[0].removeEventListener('slid.bs.carousel', onSlid)
+ }
+ $carousel[0].addEventListener('slid.bs.carousel', onSlid)
$carousel.bootstrapCarousel('next')
})
var done = assert.async()
- EventHandler
- .one($carousel[0], 'slide.bs.carousel', function (e) {
- assert.ok(e.direction, 'direction present on next')
- assert.strictEqual(e.direction, 'left', 'direction is left on next')
-
- EventHandler
- .one($carousel[0], 'slide.bs.carousel', function (e) {
- assert.ok(e.direction, 'direction present on prev')
- assert.strictEqual(e.direction, 'right', 'direction is right on prev')
- done()
- })
- $carousel.bootstrapCarousel('prev')
- })
+ function onSlide(e) {
+ assert.ok(e.direction, 'direction present on next')
+ assert.strictEqual(e.direction, 'left', 'direction is left on next')
+
+ $carousel[0].addEventListener('slide.bs.carousel', onSlide2)
+ $carousel[0].removeEventListener('slide.bs.carousel', onSlide)
+ $carousel.bootstrapCarousel('prev')
+ }
+
+ function onSlide2(e) {
+ assert.ok(e.direction, 'direction present on prev')
+ assert.strictEqual(e.direction, 'right', 'direction is right on prev')
+ done()
+ }
+
+ $carousel[0].addEventListener('slide.bs.carousel', onSlide)
$carousel.bootstrapCarousel('next')
})
var done = assert.async()
- EventHandler
- .one($carousel[0], 'slid.bs.carousel', function (e) {
- assert.ok(e.direction, 'direction present on next')
- assert.strictEqual(e.direction, 'left', 'direction is left on next')
-
- EventHandler
- .one($carousel[0], 'slid.bs.carousel', function (e) {
- assert.ok(e.direction, 'direction present on prev')
- assert.strictEqual(e.direction, 'right', 'direction is right on prev')
- done()
- })
- $carousel.bootstrapCarousel('prev')
- })
+ function onSlid(e) {
+ assert.ok(e.direction, 'direction present on next')
+ assert.strictEqual(e.direction, 'left', 'direction is left on next')
+
+ $carousel[0].addEventListener('slid.bs.carousel', onSlid2)
+ $carousel[0].removeEventListener('slid.bs.carousel', onSlid)
+ $carousel.bootstrapCarousel('prev')
+ }
+
+ function onSlid2(e) {
+ assert.ok(e.direction, 'direction present on prev')
+ assert.strictEqual(e.direction, 'right', 'direction is right on prev')
+ $carousel[0].removeEventListener('slid.bs.carousel', onSlid2)
+ done()
+ }
+
+ $carousel[0].addEventListener('slid.bs.carousel', onSlid)
$carousel.bootstrapCarousel('next')
})
var $carousel = $(template)
$carousel.appendTo('#qunit-fixture')
- EventHandler
- .one($carousel[0], 'slide.bs.carousel', function (e) {
- assert.ok(e.relatedTarget, 'relatedTarget present')
- assert.ok($(e.relatedTarget).hasClass('carousel-item'), 'relatedTarget has class "item"')
- done()
- })
+ function onSlide(e) {
+ assert.ok(e.relatedTarget, 'relatedTarget present')
+ assert.ok($(e.relatedTarget).hasClass('carousel-item'), 'relatedTarget has class "item"')
+ $carousel[0].removeEventListener('slide.bs.carousel', onSlide)
+ done()
+ }
+ $carousel[0].addEventListener('slide.bs.carousel', onSlide)
$carousel.bootstrapCarousel('next')
})
var $carousel = $(template)
$carousel.appendTo('#qunit-fixture')
- EventHandler
- .one($carousel[0], 'slid.bs.carousel', function (e) {
- assert.ok(e.relatedTarget, 'relatedTarget present')
- assert.ok($(e.relatedTarget).hasClass('carousel-item'), 'relatedTarget has class "item"')
- done()
- })
+ $carousel[0].addEventListener('slid.bs.carousel', function (e) {
+ assert.ok(e.relatedTarget, 'relatedTarget present')
+ assert.ok($(e.relatedTarget).hasClass('carousel-item'), 'relatedTarget has class "item"')
+ done()
+ })
$carousel.bootstrapCarousel('next')
})
var done = assert.async()
var $carousel = $(template)
- EventHandler
- .one($carousel[0], 'slid.bs.carousel', function (e) {
- assert.ok(typeof e.from !== 'undefined', 'from present')
- assert.ok(typeof e.to !== 'undefined', 'to present')
- done()
- })
+ $carousel[0].addEventListener('slid.bs.carousel', function (e) {
+ assert.ok(typeof e.from !== 'undefined', 'from present')
+ assert.ok(typeof e.to !== 'undefined', 'to present')
+ done()
+ })
- EventHandler
- .one($carousel[0], 'slide.bs.carousel', function (e) {
- assert.ok(typeof e.from !== 'undefined', 'from present')
- assert.ok(typeof e.to !== 'undefined', 'to present')
- })
+ $carousel[0].addEventListener('slide.bs.carousel', function (e) {
+ assert.ok(typeof e.from !== 'undefined', 'from present')
+ assert.ok(typeof e.to !== 'undefined', 'to present')
+ })
$carousel.bootstrapCarousel('next')
})
$carousel.attr('data-interval', 1814)
$carousel.appendTo('body')
- EventHandler.trigger($('[data-slide]').first()[0], 'click')
+ $('[data-slide]').first()[0].dispatchEvent(new Event('click'))
assert.strictEqual(Carousel._getInstance($carousel[0])._config.interval, 1814)
$carousel.remove()
$carousel.appendTo('body').attr('data-modal', 'foobar')
- EventHandler.trigger($('[data-slide]').first()[0], 'click')
+ $('[data-slide]').first()[0].dispatchEvent(new Event('click'))
assert.strictEqual(Carousel._getInstance($carousel[0])._config.interval, 1814, 'even if there is an data-modal attribute set')
$carousel.remove()
$carousel.appendTo('body')
- EventHandler.trigger($('[data-slide]').first()[0], 'click')
+ $('[data-slide]').first()[0].dispatchEvent(new Event('click'))
$carousel.attr('data-interval', 1860)
- EventHandler.trigger($('[data-slide]').first()[0], 'click')
+
+ $('[data-slide]').first()[0].dispatchEvent(new Event('click'))
assert.strictEqual(Carousel._getInstance($carousel[0])._config.interval, 1814, 'attributes should be read only on initialization')
$carousel.bootstrapCarousel('dispose')
$carousel.remove()
assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
- EventHandler.trigger($template[0], 'keydown', {
- which: 37
- })
+ var keyDown = new Event('keydown')
+ keyDown.which = 37
+ $template[0].dispatchEvent(keyDown)
assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
})
assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
- EventHandler.trigger($template[0], 'keydown', {
- which: 39
- })
+ var keyDown = new Event('keydown')
+ keyDown.which = 39
+ $template[0].dispatchEvent(keyDown)
assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
})
$template.bootstrapCarousel()
var done = assert.async()
- EventHandler.one($template[0], 'keydown', function (event) {
+ function handlerKeydown() {
assert.strictEqual(event.defaultPrevented, false)
- })
+ $template[0].removeEventListener('keydown', handlerKeydown)
+ }
+ $template[0].addEventListener('keydown', handlerKeydown)
// arrow down
- EventHandler.trigger($template[0], 'keydown', {
- which: 40
- })
+ var keyDown = new Event('keydown')
+ keyDown.which = 40
+ $template[0].dispatchEvent(keyDown)
- EventHandler.one($template[0], 'keydown', function (event) {
+ function handlerKeydown2() {
assert.strictEqual(event.defaultPrevented, false)
+ $template[0].addEventListener('keydown', handlerKeydown2)
done()
- })
+ }
+ $template[0].addEventListener('keydown', handlerKeydown2)
// arrow up
- EventHandler.trigger($template[0], 'keydown', {
- which: 38
- })
+ var keyDown2 = new Event('keydown')
+ keyDown2.which = 38
+ $template[0].dispatchEvent(keyDown2)
})
QUnit.test('should support disabling the keyboard navigation', function (assert) {
'<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>' +
'</div>'
var $carousel = $(carouselHTML)
+ var done = assert.async()
var getActiveId = function () {
return $carousel.find('.carousel-item.active').attr('id')
}
- var done = assert.async()
-
- EventHandler.one($carousel[0], 'slid.bs.carousel', function () {
- assert.strictEqual(getActiveId(), 'two', 'carousel slid from 1st to 2nd slide')
-
- EventHandler.one($carousel[0], 'slid.bs.carousel', function () {
- assert.strictEqual(getActiveId(), 'three', 'carousel slid from 2nd to 3rd slide')
+ $carousel[0].addEventListener('slid.bs.carousel', function () {
+ var activeId = getActiveId()
+ if (activeId === 'two') {
+ assert.strictEqual(activeId, 'two', 'carousel slid from 1st to 2nd slide')
+ $carousel.bootstrapCarousel('next')
+ return
+ }
- EventHandler.one($carousel[0], 'slid.bs.carousel', function () {
- assert.strictEqual(getActiveId(), 'one', 'carousel wrapped around and slid from 3rd to 1st slide')
- done()
- })
+ if (activeId === 'three') {
+ assert.strictEqual(activeId, 'three', 'carousel slid from 2nd to 3rd slide')
$carousel.bootstrapCarousel('next')
- })
- $carousel.bootstrapCarousel('next')
+ return
+ }
+
+ if (activeId === 'one') {
+ assert.strictEqual(activeId, 'one', 'carousel wrapped around and slid from 3rd to 1st slide')
+ done()
+ }
})
$carousel.bootstrapCarousel('next')
})
var done = assert.async()
- EventHandler.one($carousel[0], 'slid.bs.carousel', function () {
+ $carousel[0].addEventListener('slid.bs.carousel', function () {
assert.strictEqual($carousel.find('.carousel-item.active').attr('id'), 'three', 'carousel wrapped around and slid from 1st to 3rd slide')
done()
})
'<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>' +
'<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>' +
'</div>'
- var $carousel = $(carouselHTML)
+ var $carousel = $(carouselHTML).appendTo('#qunit-fixture')
var getActiveId = function () {
return $carousel.find('.carousel-item.active').attr('id')
}
var done = assert.async()
+ $carousel[0].addEventListener('slid.bs.carousel', function () {
+ var activeId = getActiveId()
+ if (activeId === 'two') {
+ assert.strictEqual(activeId, 'two', 'carousel slid from 1st to 2nd slide')
+ $carousel.bootstrapCarousel('next')
+ return
+ }
- EventHandler.one($carousel[0], 'slid.bs.carousel', function () {
- assert.strictEqual(getActiveId(), 'two', 'carousel slid from 1st to 2nd slide')
-
- EventHandler.one($carousel[0], 'slid.bs.carousel', function () {
- assert.strictEqual(getActiveId(), 'three', 'carousel slid from 2nd to 3rd slide')
-
- EventHandler.one($carousel[0], 'slid.bs.carousel', function () {
- assert.ok(false, 'carousel slid when it should not have slid')
- })
+ if (activeId === 'three') {
+ assert.strictEqual(activeId, 'three', 'carousel slid from 2nd to 3rd slide')
$carousel.bootstrapCarousel('next')
assert.strictEqual(getActiveId(), 'three', 'carousel did not wrap around and stayed on 3rd slide')
done()
- })
- $carousel.bootstrapCarousel('next')
+ }
})
$carousel.bootstrapCarousel('next')
})
'</div>'
var $carousel = $(carouselHTML)
- EventHandler.one($carousel[0], 'slid.bs.carousel', function () {
+ $carousel[0].addEventListener('slid.bs.carousel', function () {
assert.ok(false, 'carousel slid when it should not have slid')
})
$carousel.bootstrapCarousel('prev')
assert.ok(!/height/i.test($el2.attr('style')), 'has height reset')
done()
})
- EventHandler.trigger($target[0], 'click')
+ $target[0].dispatchEvent(new Event('click'))
})
QUnit.test('should collapse only the first collapse', function (assert) {
done()
})
- EventHandler.trigger($target[0], 'click')
+ $target[0].dispatchEvent(new Event('click'))
})
QUnit.test('should add "collapsed" class to target when collapse is hidden', function (assert) {
done()
})
- EventHandler.trigger($target[0], 'click')
+ $target[0].dispatchEvent(new Event('click'))
})
QUnit.test('should remove "collapsed" class from all triggers targeting the collapse when the collapse is shown', function (assert) {
done()
})
- EventHandler.trigger($target[0], 'click')
+ $target[0].dispatchEvent(new Event('click'))
})
QUnit.test('should add "collapsed" class to all triggers targeting the collapse when the collapse is hidden', function (assert) {
done()
})
- EventHandler.trigger($target[0], 'click')
+ $target[0].dispatchEvent(new Event('click'))
})
QUnit.test('should not close a collapse when initialized with "show" option if already shown', function (assert) {
done()
})
- EventHandler.trigger($target3[0], 'click')
+ $target3[0].dispatchEvent(new Event('click'))
})
QUnit.test('should allow dots in data-parent', function (assert) {
done()
})
- EventHandler.trigger($target3[0], 'click')
+ $target3[0].dispatchEvent(new Event('click'))
})
QUnit.test('should set aria-expanded="true" on trigger/control when collapse is shown', function (assert) {
done()
})
- EventHandler.trigger($target[0], 'click')
+ $target[0].dispatchEvent(new Event('click'))
})
QUnit.test('should set aria-expanded="false" on trigger/control when collapse is hidden', function (assert) {
done()
})
- EventHandler.trigger($target[0], 'click')
+ $target[0].dispatchEvent(new Event('click'))
})
QUnit.test('should set aria-expanded="true" on all triggers targeting the collapse when the collapse is shown', function (assert) {
done()
})
- EventHandler.trigger($target[0], 'click')
+ $target[0].dispatchEvent(new Event('click'))
})
QUnit.test('should set aria-expanded="false" on all triggers targeting the collapse when the collapse is hidden', function (assert) {
done()
})
- EventHandler.trigger($target[0], 'click')
+ $target[0].dispatchEvent(new Event('click'))
})
QUnit.test('should change aria-expanded from active accordion trigger/control to "false" and set the trigger/control for the newly active one to "true"', function (assert) {
done()
})
- EventHandler.trigger($target3[0], 'click')
+ $target3[0].dispatchEvent(new Event('click'))
})
QUnit.test('should not fire show event if show is prevented because other element is still transitioning', function (assert) {
var $target2 = $('<a role="button" data-toggle="collapse" href="#body2"/>').appendTo($groups.eq(1))
var $body2 = $('<div id="body2" class="collapse" data-parent="#accordion"/>').appendTo($groups.eq(1))
- EventHandler.trigger($target2[0], 'click')
+ $target2[0].dispatchEvent(new Event('click'))
$body2.toggleClass('show collapsing')
Collapse._getInstance($body2[0])._isTransitioning = true
- EventHandler.trigger($target1[0], 'click')
+ $target1[0].dispatchEvent(new Event('click'))
setTimeout(function () {
assert.ok(!showFired, 'show event did not fire')
assert.ok($collapseTwo.hasClass('show'), '#collapseTwo is shown')
done()
})
- EventHandler.trigger($triggerTwo[0], 'click')
+ $triggerTwo[0].dispatchEvent(new Event('click'))
})
- EventHandler.trigger($trigger[0], 'click')
+ $trigger[0].dispatchEvent(new Event('click'))
})
QUnit.test('should allow accordion to contain nested elements', function (assert) {
assert.ok($collapseTwo.hasClass('show'), '#collapseTwo is shown')
done()
})
- EventHandler.trigger($triggerTwo[0], 'click')
+ $triggerTwo[0].dispatchEvent(new Event('click'))
})
- EventHandler.trigger($trigger[0], 'click')
+ $trigger[0].dispatchEvent(new Event('click'))
})
QUnit.test('should allow accordion to target multiple elements', function (assert) {
assert.ok($collapseOneTwo.hasClass('show'), '#collapseOneTwo is shown')
assert.ok(!$collapseTwoOne.hasClass('show'), '#collapseTwoOne is not shown')
assert.ok(!$collapseTwoTwo.hasClass('show'), '#collapseTwoTwo is not shown')
- EventHandler.trigger($triggerTwo[0], 'click')
+ $triggerTwo[0].dispatchEvent(new Event('click'))
}
function secondTest() {
}
})
- EventHandler.trigger($trigger[0], 'click')
+ $trigger[0].dispatchEvent(new Event('click'))
})
QUnit.test('should collapse accordion children but not nested accordion children', function (assert) {
var $collapseTwo = $('#collapseTwo')
var $nestedCollapseOne = $('#nestedCollapseOne')
- EventHandler.one($collapseOne[0], 'shown.bs.collapse', function () {
+ function handlerCollapseOne() {
assert.ok($collapseOne.hasClass('show'), '#collapseOne is shown')
assert.ok(!$collapseTwo.hasClass('show'), '#collapseTwo is not shown')
assert.ok(!$('#nestedCollapseOne').hasClass('show'), '#nestedCollapseOne is not shown')
- EventHandler.one($nestedCollapseOne[0], 'shown.bs.collapse', function () {
- assert.ok($collapseOne.hasClass('show'), '#collapseOne is shown')
- assert.ok(!$collapseTwo.hasClass('show'), '#collapseTwo is not shown')
+ $nestedCollapseOne[0].addEventListener('shown.bs.collapse', handlerNestedCollapseOne)
+ $nestedTrigger[0].dispatchEvent(new Event('click'))
+ $collapseOne[0].removeEventListener('shown.bs.collapse', handlerCollapseOne)
+ }
+
+ function handlerNestedCollapseOne() {
+ assert.ok($collapseOne.hasClass('show'), '#collapseOne is shown')
+ assert.ok(!$collapseTwo.hasClass('show'), '#collapseTwo is not shown')
+ assert.ok($nestedCollapseOne.hasClass('show'), '#nestedCollapseOne is shown')
+
+ $collapseTwo[0].addEventListener('shown.bs.collapse', function () {
+ assert.ok(!$collapseOne.hasClass('show'), '#collapseOne is not shown')
+ assert.ok($collapseTwo.hasClass('show'), '#collapseTwo is shown')
assert.ok($nestedCollapseOne.hasClass('show'), '#nestedCollapseOne is shown')
- EventHandler.one($collapseTwo[0], 'shown.bs.collapse', function () {
- assert.ok(!$collapseOne.hasClass('show'), '#collapseOne is not shown')
- assert.ok($collapseTwo.hasClass('show'), '#collapseTwo is shown')
- assert.ok($nestedCollapseOne.hasClass('show'), '#nestedCollapseOne is shown')
- done()
- })
- EventHandler.trigger($triggerTwo[0], 'click')
+ done()
})
- EventHandler.trigger($nestedTrigger[0], 'click')
- })
- EventHandler.trigger($trigger[0], 'click')
+ $triggerTwo[0].dispatchEvent(new Event('click'))
+ $nestedCollapseOne[0].removeEventListener('shown.bs.collapse', handlerNestedCollapseOne)
+ }
+
+ $collapseOne[0].addEventListener('shown.bs.collapse', handlerCollapseOne)
+ $trigger[0].dispatchEvent(new Event('click'))
})
QUnit.test('should not prevent event for input', function (assert) {
var $target = $('<input type="checkbox" data-toggle="collapse" data-target="#collapsediv1" />').appendTo('#qunit-fixture')
var $collapse = $('<div id="collapsediv1"/>').appendTo('#qunit-fixture')
- EventHandler.one($collapse[0], 'shown.bs.collapse', function () {
+ $collapse[0].addEventListener('shown.bs.collapse', function () {
assert.ok($collapse.hasClass('show'))
assert.ok($target.attr('aria-expanded') === 'true')
assert.ok($target.prop('checked'))
assert.ok($trigger3.hasClass('collapsed'), 'trigger3 has collapsed class')
done()
})
- EventHandler.trigger($trigger1[0], 'click')
+ $trigger1[0].dispatchEvent(new Event('click'))
})
- EventHandler.trigger($trigger2[0], 'click')
+ $trigger2[0].dispatchEvent(new Event('click'))
})
- EventHandler.trigger($trigger3[0], 'click')
+ $trigger3[0].dispatchEvent(new Event('click'))
})
QUnit.test('should set aria-expanded="true" to triggers targeting shown collaspe and aria-expanded="false" only when all the targeted collapses are shown', function (assert) {
assert.strictEqual($trigger3.attr('aria-expanded'), 'false', 'aria-expanded on trigger3 is "false"')
done()
})
- EventHandler.trigger($trigger1[0], 'click')
+ $trigger1[0].dispatchEvent(new Event('click'))
})
- EventHandler.trigger($trigger2[0], 'click')
+ $trigger2[0].dispatchEvent(new Event('click'))
})
- EventHandler.trigger($trigger3[0], 'click')
+ $trigger3[0].dispatchEvent(new Event('click'))
})
QUnit.test('should not prevent interactions inside the collapse element', function (assert) {
'</div>'
var $collapse = $(htmlCollapse).appendTo('#qunit-fixture')
- EventHandler.one($collapse[0], 'shown.bs.collapse', function () {
+ $collapse[0].addEventListener('shown.bs.collapse', function () {
assert.ok($target.prop('checked'), '$trigger is checked')
var $testCheckbox = $('#testCheckbox')
$testCheckbox.trigger($.Event('click'))
assert.ok(!$dropdown.parent('.dropdown').hasClass('position-static'), '"position-static" class not added')
done()
})
- EventHandler.trigger($dropdown[0], 'click')
+ $dropdown[0].dispatchEvent(new Event('click'))
})
QUnit.test('should add class position-static to dropdown if boundary not scrollParent', function (assert) {
assert.ok($dropdown.parent('.dropdown').hasClass('position-static'), '"position-static" class added')
done()
})
- EventHandler.trigger($dropdown[0], 'click')
+ $dropdown[0].dispatchEvent(new Event('click'))
})
QUnit.test('should set aria-expanded="true" on target when dropdown menu is shown', function (assert) {
var dropdownParent = $dropdown.parent('.dropdown')[0]
- EventHandler.on(dropdownParent, 'shown.bs.dropdown', function () {
+ dropdownParent.addEventListener('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')
+ $dropdown[0].dispatchEvent(new Event('click'))
})
QUnit.test('should set aria-expanded="false" on target when dropdown menu is hidden', function (assert) {
var dropdownParent = $dropdown.parent('.dropdown')[0]
- EventHandler.one(dropdownParent, 'hidden.bs.dropdown', function () {
+ dropdownParent.addEventListener('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')
+ $dropdown[0].dispatchEvent(new Event('click'))
+ document.body.click()
})
QUnit.test('should not open dropdown if target is disabled via class', function (assert) {
assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
done()
})
- EventHandler.trigger($dropdown[0], 'click')
+ $dropdown[0].dispatchEvent(new Event('click'))
})
QUnit.test('should remove "show" class if body is clicked', function (assert) {
done()
})
- EventHandler.trigger($dropdown[0], 'click')
+ $dropdown[0].dispatchEvent(new Event('click'))
})
QUnit.test('should remove "show" class if tabbing outside of menu', function (assert) {
.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
- })
+ var keyup9 = new Event('keyup')
+ keyup9.which = 9 // Tab
+ document.dispatchEvent(keyup9)
})
.on('hidden.bs.dropdown', function () {
assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), '"show" class removed')
done()
})
- EventHandler.trigger($dropdown[0], 'click')
+ $dropdown[0].dispatchEvent(new Event('click'))
})
QUnit.test('should remove "show" class if body is clicked, with multiple dropdowns', function (assert) {
$(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[0].dispatchEvent(new Event('click'))
})
$last.parent('.btn-group')
assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed')
done()
})
- EventHandler.trigger($first[0], 'click')
+ $first[0].dispatchEvent(new Event('click'))
})
QUnit.test('should remove "show" class if body if tabbing outside of menu, with multiple dropdowns', function (assert) {
.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')
- EventHandler.trigger(document.body, 'keyup', {
- which: 9 // Tab
- })
+ var keyup = new Event('keyup')
+ keyup.which = 9 // Tab
+ document.dispatchEvent(keyup)
}).on('hidden.bs.dropdown', function () {
assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed')
- EventHandler.trigger($last[0], 'click')
+ $last[0].dispatchEvent(new Event('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')
- EventHandler.trigger(document.body, 'keyup', {
- which: 9 // Tab
- })
+ var keyup = new Event('keyup')
+ keyup.which = 9 // Tab
+ document.dispatchEvent(keyup)
}).on('hidden.bs.dropdown', function () {
assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed')
done()
})
- EventHandler.trigger($first[0], 'click')
+ $first[0].dispatchEvent(new Event('click'))
})
QUnit.test('should fire show and hide event', function (assert) {
done()
})
- EventHandler.trigger($dropdown[0], 'click')
- EventHandler.trigger(document.body, 'click')
+ $dropdown[0].dispatchEvent(new Event('click'))
+ document.body.click()
})
QUnit.test('should fire shown and hidden event', function (assert) {
done()
})
- EventHandler.trigger($dropdown[0], 'click')
- EventHandler.trigger(document.body, 'click')
+ $dropdown[0].dispatchEvent(new Event('click'))
+ document.body.click()
})
QUnit.test('should fire shown and hidden event with a relatedTarget', function (assert) {
$(document.body).trigger('click')
})
- EventHandler.trigger($dropdown[0], 'click')
+ $dropdown[0].dispatchEvent(new Event('click'))
})
QUnit.test('should fire hide and hidden event with a clickEvent', function (assert) {
done()
})
- EventHandler.trigger($dropdown[0], 'click')
+ $dropdown[0].dispatchEvent(new Event('click'))
})
QUnit.test('should skip disabled element when using keyboard navigation', function (assert) {
assert.ok(!$(document.activeElement).is(':disabled'), ':disabled is not focused')
done()
})
- EventHandler.trigger($dropdown[0], 'click')
+ $dropdown[0].dispatchEvent(new Event('click'))
})
QUnit.test('should focus next/previous element when using keyboard navigation', function (assert) {
.on('shown.bs.dropdown', function () {
assert.ok(true, 'shown was fired')
- EventHandler.trigger($dropdown[0], 'keydown', {
- which: 40
- })
+ var keydown40 = new Event('keydown')
+ keydown40.which = 40
+ $dropdown[0].dispatchEvent(keydown40)
assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused')
- EventHandler.trigger(document.activeElement, 'keydown', {
- which: 40
- })
+ document.activeElement.dispatchEvent(keydown40)
assert.ok($(document.activeElement).is($('#item2')), 'item2 is focused')
- EventHandler.trigger(document.activeElement, 'keydown', {
- which: 38
- })
+ var keydown38 = new Event('keydown')
+ keydown38.which = 38
+ document.activeElement.dispatchEvent(keydown38)
assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused')
done()
})
- EventHandler.trigger($dropdown[0], 'click')
+ $dropdown[0].dispatchEvent(new Event('click'))
})
QUnit.test('should not close the dropdown if the user clicks on a text field', function (assert) {
.parent('.dropdown')
.on('shown.bs.dropdown', function () {
assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')
- EventHandler.trigger($textfield[0], 'click')
+ $textfield[0].dispatchEvent(new Event('click'))
})
- EventHandler.trigger($dropdown[0], 'click')
+ $dropdown[0].dispatchEvent(new Event('click'))
})
QUnit.test('should not close the dropdown if the user clicks on a textarea', function (assert) {
.parent('.dropdown')
.on('shown.bs.dropdown', function () {
assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')
- EventHandler.trigger($textarea[0], 'click')
+ $textarea[0].dispatchEvent(new Event('click'))
})
- EventHandler.trigger($dropdown[0], 'click')
+ $dropdown[0].dispatchEvent(new Event('click'))
})
QUnit.test('Dropdown should not use Popper.js in navbar', function (assert) {
assert.ok(typeof $dropdownMenu.attr('style') === 'undefined', 'No inline style applied by Popper.js')
done()
})
- EventHandler.trigger($triggerDropdown[0], 'click')
+ $triggerDropdown[0].dispatchEvent(new Event('click'))
})
QUnit.test('should ignore keyboard events for <input>s and <textarea>s within dropdown-menu, except for escape key', function (assert) {
// Key escape
$input.trigger('focus')
- EventHandler.trigger($input[0], 'keydown', {
- which: 27
- })
+ var keydown = new Event('keydown')
+ keydown.which = 27
+ $input[0].dispatchEvent(keydown)
assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown')
done()
})
- EventHandler.trigger($dropdown[0], 'click')
+ $dropdown[0].dispatchEvent(new Event('click'))
})
QUnit.test('should ignore space key events for <input>s within dropdown, and accept up, down and escape', function (assert) {
// Key escape
$input.trigger('focus')
- EventHandler.trigger($input[0], 'keydown', {
- which: 27
- })
+ var keydown = new Event('keydown')
+ keydown.which = 27
+ $input[0].dispatchEvent(keydown)
assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown')
$dropdown
// Key down
$input.trigger('focus')
- EventHandler.trigger($input[0], 'keydown', {
- which: 40
- })
+ var keydown40 = new Event('keydown')
+ keydown40.which = 40
+ $input[0].dispatchEvent(keydown40)
assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')
$dropdown
.one('shown.bs.dropdown', function () {
// Key up
$input.trigger('focus')
- EventHandler.trigger($input[0], 'keydown', {
- which: 38
- })
+ var keydown38 = new Event('keydown')
+ keydown38.which = 38
+ $input[0].dispatchEvent(keydown38)
+
assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')
done()
}).bootstrapDropdown('toggle')
- EventHandler.trigger($input[0], 'click')
+ $input[0].dispatchEvent(new Event('click'))
})
- EventHandler.trigger($input[0], 'click')
+ $input[0].dispatchEvent(new Event('click'))
})
- EventHandler.trigger($input[0], 'click')
+ $input[0].dispatchEvent(new Event('click'))
})
QUnit.test('should ignore space key events for <textarea>s within dropdown, and accept up, down and escape', function (assert) {
// Key escape
$textarea.trigger('focus')
- EventHandler.trigger($textarea[0], 'keydown', {
- which: 27
- })
+ var keydown27 = new Event('keydown')
+ keydown27.which = 27
+ $textarea[0].dispatchEvent(keydown27)
assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown')
$dropdown
// Key down
$textarea.trigger('focus')
- EventHandler.trigger($textarea[0], 'keydown', {
- which: 40
- })
+ var keydown40 = new Event('keydown')
+ keydown40.which = 40
+ $textarea[0].dispatchEvent(keydown40)
assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')
$dropdown
.one('shown.bs.dropdown', function () {
// Key up
$textarea.trigger('focus')
- EventHandler.trigger($textarea[0], 'keydown', {
- which: 38
- })
+ var keydown38 = new Event('keydown')
+ keydown38.which = 38
+ $textarea[0].dispatchEvent(keydown38)
+
assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')
done()
}).bootstrapDropdown('toggle')
- EventHandler.trigger($textarea[0], 'click')
+ $textarea[0].dispatchEvent(new Event('click'))
})
- EventHandler.trigger($textarea[0], 'click')
+ $textarea[0].dispatchEvent(new Event('click'))
})
- EventHandler.trigger($textarea[0], 'click')
+ $textarea[0].dispatchEvent(new Event('click'))
})
QUnit.test('should not use Popper.js if display set to static', function (assert) {
done()
})
- EventHandler.trigger($dropdown[0], 'click')
+ $dropdown[0].dispatchEvent(new Event('click'))
})
QUnit.test('should call Popper.js and detect navbar on update', function (assert) {
})
.one('shown.bs.popover', function () {
assert.notEqual($('.popover').length, 0, 'popover was inserted')
- EventHandler.trigger($div.find('a')[0], 'click')
+ $div.find('a')[0].click()
})
.one('hidden.bs.popover', function () {
assert.strictEqual($('.popover').length, 0, 'popover was removed')
done()
})
- EventHandler.trigger($div.find('a')[0], 'click')
+ $div.find('a')[0].click()
})
QUnit.test('should detach popover content rather than removing it so that event handlers are left intact', function (assert) {
})
$popover.bootstrapPopover('disable')
- EventHandler.trigger($popover[0], 'click')
+ $popover[0].click()
setTimeout(function () {
assert.strictEqual($('.popover').length === 0, true)
$popover.bootstrapPopover('enable')
- EventHandler.trigger($popover[0], 'click')
+ $popover[0].click()
}, 200)
})
done()
})
- EventHandler.trigger($popover[0], 'click')
+ $popover[0].click()
})
})
method: 'offset'
})
} else if (type === 'data') {
- EventHandler.trigger(window, 'load')
+ window.dispatchEvent(new Event('load'))
}
var $target = $('#div-' + type + 'm-2')
method: 'position'
})
} else if (type === 'data') {
- EventHandler.trigger(window, 'load')
+ window.dispatchEvent(new Event('load'))
}
var $target = $('#div-' + type + 'm-2')
'</ul>'
var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
- EventHandler.trigger($tabs.find('li:last-child a')[0], 'click')
+ $tabs.find('li:last-child a')[0].click()
assert.notOk($tabs.find('li:first-child a').hasClass('active'))
assert.ok($tabs.find('li:last-child a').hasClass('active'))
})
'</ul>'
var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
- EventHandler.trigger($tabs.find('li:first-child a')[0], 'click')
+ $tabs.find('li:first-child a')[0].click()
assert.ok($tabs.find('li:first-child a').hasClass('active'))
assert.notOk($tabs.find('li:last-child a').hasClass('active'))
assert.notOk($tabs.find('li:last-child .dropdown-menu a:first-child').hasClass('active'))
$('#tab1').on('shown.bs.tab', function () {
assert.ok($('#x-tab1').hasClass('active'))
- EventHandler.trigger($('#tabNested2')[0], 'click')
+ $('#tabNested2')[0].click()
})
- EventHandler.trigger($('#tab1')[0], 'click')
+ $('#tab1')[0].click()
})
QUnit.test('should not remove fade class if no active pane is present', function (assert) {
done()
})
- EventHandler.trigger($('#tab-home')[0], 'click')
+ $('#tab-home')[0].click()
})
- EventHandler.trigger($('#tab-profile')[0], 'click')
+ $('#tab-profile')[0].click()
})
QUnit.test('should handle removed tabs', function (assert) {
done()
}, 200)
- EventHandler.trigger($tooltip[0], 'mouseover')
+ $tooltip[0].dispatchEvent(new Event('mouseover'))
})
QUnit.test('should not show tooltip if leave event occurs before delay expires', function (assert) {
setTimeout(function () {
assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
- EventHandler.trigger($tooltip[0], 'mouseout')
+ $tooltip[0].dispatchEvent(new Event('mouseout'))
}, 100)
setTimeout(function () {
done()
}, 200)
- EventHandler.trigger($tooltip[0], 'mouseover')
+ $tooltip[0].dispatchEvent(new Event('mouseover'))
})
QUnit.test('should not hide tooltip if leave event occurs and enter event occurs within the hide delay', function (assert) {
setTimeout(function () {
assert.ok($('.tooltip').is('.fade.show'), '1ms: tooltip faded active')
- EventHandler.trigger($tooltip[0], 'mouseout')
+ $tooltip[0].dispatchEvent(new Event('mouseout'))
setTimeout(function () {
assert.ok($('.tooltip').is('.fade.show'), '100ms: tooltip still faded active')
- EventHandler.trigger($tooltip[0], 'mouseover')
+ $tooltip[0].dispatchEvent(new Event('mouseover'))
}, 100)
setTimeout(function () {
}, 200)
}, 0)
- EventHandler.trigger($tooltip[0], 'mouseover')
+ $tooltip[0].dispatchEvent(new Event('mouseover'))
})
QUnit.test('should not show tooltip if leave event occurs before delay expires', function (assert) {
setTimeout(function () {
assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
- EventHandler.trigger($tooltip[0], 'mouseout')
+ $tooltip[0].dispatchEvent(new Event('mouseout'))
}, 100)
setTimeout(function () {
done()
}, 200)
- EventHandler.trigger($tooltip[0], 'mouseover')
+ $tooltip[0].dispatchEvent(new Event('mouseover'))
})
QUnit.test('should not show tooltip if leave event occurs before delay expires, even if hide delay is 0', function (assert) {
setTimeout(function () {
assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
- EventHandler.trigger($tooltip[0], 'mouseout')
+ $tooltip[0].dispatchEvent(new Event('mouseout'))
}, 100)
setTimeout(function () {
done()
}, 250)
- EventHandler.trigger($tooltip[0], 'mouseover')
+ $tooltip[0].dispatchEvent(new Event('mouseover'))
})
QUnit.test('should wait 200ms before hiding the tooltip', function (assert) {
setTimeout(function () {
assert.ok($(Tooltip._getInstance($tooltip[0]).tip).is('.fade.show'), '1ms: tooltip faded active')
- EventHandler.trigger($tooltip[0], 'mouseout')
+ $tooltip[0].dispatchEvent(new Event('mouseout'))
setTimeout(function () {
assert.ok($(Tooltip._getInstance($tooltip[0]).tip).is('.fade.show'), '100ms: tooltip still faded active')
}, 200)
}, 0)
- EventHandler.trigger($tooltip[0], 'mouseover')
+ $tooltip[0].dispatchEvent(new Event('mouseover'))
})
QUnit.test('should not reload the tooltip on subsequent mouseenter events', function (assert) {
title: titleHtml
})
- EventHandler.trigger($('#tt-outer')[0], 'mouseover')
+ $('#tt-outer')[0].dispatchEvent(new Event('mouseover'))
var currentUid = $('#tt-content').text()
- EventHandler.trigger($('#tt-outer')[0], 'mouseover')
+ $('#tt-outer')[0].dispatchEvent(new Event('mouseover'))
assert.strictEqual(currentUid, $('#tt-content').text())
})
var obj = Tooltip._getInstance($tooltip[0])
- EventHandler.trigger($('#tt-outer')[0], 'mouseover')
+ $('#tt-outer')[0].dispatchEvent(new Event('mouseover'))
var currentUid = $('#tt-content').text()
- EventHandler.trigger($('#tt-outer')[0], 'mouseout')
+ $('#tt-outer')[0].dispatchEvent(new Event('mouseout'))
assert.strictEqual(currentUid, $('#tt-content').text())
assert.ok(obj._hoverState === 'out', 'the tooltip hoverState should be set to "out"')
- EventHandler.trigger($('#tt-outer')[0], 'mouseover')
+ $('#tt-outer')[0].dispatchEvent(new Event('mouseover'))
assert.ok(obj._hoverState === 'show', 'the tooltip hoverState should be set to "show"')
assert.strictEqual(currentUid, $('#tt-content').text())
$.each(tests, function (idx, triggers) {
for (var i = 0, len = triggers.length; i < len; i++) {
- EventHandler.trigger($el[0], triggers[i])
+ $el[0].dispatchEvent(new Event(triggers[i]))
assert.equal(i < len - 1, showingTooltip())
}
})
return $tooltip.hasClass('show') || tooltip._hoverState === 'show'
}
- EventHandler.trigger($el[0], 'click')
+ $el[0].click()
assert.ok(showingTooltip(), 'tooltip is faded in')
$el.bootstrapTooltip('hide')
assert.ok(!showingTooltip(), 'tooltip was faded out')
- EventHandler.trigger($el[0], 'click')
+ $el[0].click()
assert.ok(showingTooltip(), 'tooltip is faded in again')
})
})
$trigger.bootstrapTooltip('disable')
- EventHandler.trigger($trigger[0], 'click')
+ $trigger[0].click()
setTimeout(function () {
assert.strictEqual($('.tooltip').length === 0, true)
$trigger.bootstrapTooltip('enable')
- EventHandler.trigger($trigger[0], 'click')
+ $trigger[0].click()
}, 200)
})