1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-23 18:40:03 +00:00

fix(event-handler): remove the use of our event handler in unit test

This commit is contained in:
Johann-S 2018-06-07 22:21:31 +02:00 committed by XhmikosR
parent 2b78078779
commit 9313446274
9 changed files with 301 additions and 278 deletions

View File

@ -45,7 +45,7 @@ $(function () {
var $alert = $(alertHTML).bootstrapAlert().appendTo($('#qunit-fixture')) var $alert = $(alertHTML).bootstrapAlert().appendTo($('#qunit-fixture'))
var closeBtn = $alert.find('.close')[0] 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.strictEqual($alert.hasClass('show'), false, 'remove .show class on .close click')
}) })
@ -60,13 +60,13 @@ $(function () {
assert.notEqual($('#qunit-fixture').find('.alert').length, 0, 'element added to dom') 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') assert.strictEqual($('#qunit-fixture').find('.alert').length, 0, 'element removed from dom')
done() done()
}) })
var closeBtn = $alert.find('.close')[0] 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) { QUnit.test('should not fire closed when close is prevented', function (assert) {
@ -75,12 +75,12 @@ $(function () {
var $alert = $('<div class="alert"/>') var $alert = $('<div class="alert"/>')
$alert.appendTo('#qunit-fixture') $alert.appendTo('#qunit-fixture')
EventHandler.on($alert[0], 'close.bs.alert', function (e) { $alert[0].addEventListener('close.bs.alert', function (e) {
e.preventDefault() e.preventDefault()
assert.ok(true, 'close event fired') assert.ok(true, 'close event fired')
done() done()
}) })
EventHandler.on($alert[0], 'closed.bs.alert', function () { $alert[0].addEventListener('closed.bs.alert', function () {
assert.ok(false, 'closed event fired') assert.ok(false, 'closed event fired')
}) })
@ -95,7 +95,7 @@ $(function () {
var $alert = $el.bootstrapAlert() var $alert = $el.bootstrapAlert()
var alertInstance = Alert._getInstance($alert[0]) var alertInstance = Alert._getInstance($alert[0])
$alert.one('closed.bs.alert', function () { $alert[0].addEventListener('closed.bs.alert', function () {
assert.ok('alert closed') assert.ok('alert closed')
done() done()
}) })

View File

@ -125,25 +125,26 @@ $(function () {
var $btn1 = $group.children().eq(0) var $btn1 = $group.children().eq(0)
var $btn2 = $group.children().eq(1) var $btn2 = $group.children().eq(1)
var inputBtn2 = $btn2.find('input')[0]
assert.ok($btn1.hasClass('active'), 'btn1 has active class') assert.ok($btn1.hasClass('active'), 'btn1 has active class')
assert.ok($btn1.find('input').prop('checked'), 'btn1 is checked') assert.ok($btn1.find('input').prop('checked'), 'btn1 is checked')
assert.ok(!$btn2.hasClass('active'), 'btn2 does not have active class') 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.hasClass('active'), 'btn1 does not have active class')
assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked') assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
assert.ok($btn2.hasClass('active'), 'btn2 has active class') 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.hasClass('active'), 'btn1 does not have active class')
assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked') assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
assert.ok($btn2.hasClass('active'), 'btn2 has active class') 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) { QUnit.test('should only toggle selectable inputs', function (assert) {

View File

@ -116,12 +116,12 @@ $(function () {
var $carousel = $('<div class="carousel"/>') var $carousel = $('<div class="carousel"/>')
$carousel.appendTo('#qunit-fixture') $carousel.appendTo('#qunit-fixture')
EventHandler.on($carousel[0], 'slide.bs.carousel', function (e) { $carousel[0].addEventListener('slide.bs.carousel', function (e) {
e.preventDefault() e.preventDefault()
assert.ok(true, 'slide event fired') assert.ok(true, 'slide event fired')
done() done()
}) })
EventHandler.on($carousel[0], 'slid.bs.carousel', function () { $carousel[0].addEventListener('slid.bs.carousel', function () {
assert.ok(false, 'slid event fired') assert.ok(false, 'slid event fired')
}) })
$carousel.bootstrapCarousel('next') $carousel.bootstrapCarousel('next')
@ -153,26 +153,28 @@ $(function () {
$carousel.appendTo('#qunit-fixture') $carousel.appendTo('#qunit-fixture')
var done = assert.async() var done = assert.async()
EventHandler function onSlide(e) {
.one($carousel[0], 'slide.bs.carousel', function (e) { e.preventDefault()
e.preventDefault() setTimeout(function () {
setTimeout(function () { assert.ok($carousel.find('.carousel-item:nth-child(1)').is('.active'), 'first item still active')
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-indicators li:nth-child(1)').is('.active'), 'first indicator still active') $carousel.bootstrapCarousel('next')
$carousel.bootstrapCarousel('next') }, 0)
}, 0) $carousel[0].removeEventListener('slide.bs.carousel', onSlide)
}) }
$carousel[0].addEventListener('slide.bs.carousel', onSlide)
EventHandler function onSlid() {
.one($carousel[0], 'slid.bs.carousel', function () { setTimeout(function () {
setTimeout(function () { assert.ok(!$carousel.find('.carousel-item:nth-child(1)').is('.active'), 'first item still active')
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-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-item:nth-child(2)').is('.active'), 'second item active') assert.ok($carousel.find('.carousel-indicators li:nth-child(2)').is('.active'), 'second indicator active')
assert.ok($carousel.find('.carousel-indicators li:nth-child(2)').is('.active'), 'second indicator active') done()
done() }, 0)
}, 0) $carousel[0].removeEventListener('slid.bs.carousel', onSlid)
}) }
$carousel[0].addEventListener('slid.bs.carousel', onSlid)
$carousel.bootstrapCarousel('next') $carousel.bootstrapCarousel('next')
}) })
@ -217,19 +219,22 @@ $(function () {
var done = assert.async() var done = assert.async()
EventHandler function onSlide(e) {
.one($carousel[0], 'slide.bs.carousel', function (e) { assert.ok(e.direction, 'direction present on next')
assert.ok(e.direction, 'direction present on next') assert.strictEqual(e.direction, 'left', 'direction is left on next')
assert.strictEqual(e.direction, 'left', 'direction is left on next')
EventHandler $carousel[0].addEventListener('slide.bs.carousel', onSlide2)
.one($carousel[0], 'slide.bs.carousel', function (e) { $carousel[0].removeEventListener('slide.bs.carousel', onSlide)
assert.ok(e.direction, 'direction present on prev') $carousel.bootstrapCarousel('prev')
assert.strictEqual(e.direction, 'right', 'direction is right on prev') }
done()
}) function onSlide2(e) {
$carousel.bootstrapCarousel('prev') 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') $carousel.bootstrapCarousel('next')
}) })
@ -273,19 +278,23 @@ $(function () {
var done = assert.async() var done = assert.async()
EventHandler function onSlid(e) {
.one($carousel[0], 'slid.bs.carousel', function (e) { assert.ok(e.direction, 'direction present on next')
assert.ok(e.direction, 'direction present on next') assert.strictEqual(e.direction, 'left', 'direction is left on next')
assert.strictEqual(e.direction, 'left', 'direction is left on next')
EventHandler $carousel[0].addEventListener('slid.bs.carousel', onSlid2)
.one($carousel[0], 'slid.bs.carousel', function (e) { $carousel[0].removeEventListener('slid.bs.carousel', onSlid)
assert.ok(e.direction, 'direction present on prev') $carousel.bootstrapCarousel('prev')
assert.strictEqual(e.direction, 'right', 'direction is right on prev') }
done()
}) function onSlid2(e) {
$carousel.bootstrapCarousel('prev') 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') $carousel.bootstrapCarousel('next')
}) })
@ -329,13 +338,14 @@ $(function () {
var $carousel = $(template) var $carousel = $(template)
$carousel.appendTo('#qunit-fixture') $carousel.appendTo('#qunit-fixture')
EventHandler function onSlide(e) {
.one($carousel[0], 'slide.bs.carousel', function (e) { assert.ok(e.relatedTarget, 'relatedTarget present')
assert.ok(e.relatedTarget, 'relatedTarget present') assert.ok($(e.relatedTarget).hasClass('carousel-item'), 'relatedTarget has class "item"')
assert.ok($(e.relatedTarget).hasClass('carousel-item'), 'relatedTarget has class "item"') $carousel[0].removeEventListener('slide.bs.carousel', onSlide)
done() done()
}) }
$carousel[0].addEventListener('slide.bs.carousel', onSlide)
$carousel.bootstrapCarousel('next') $carousel.bootstrapCarousel('next')
}) })
@ -379,12 +389,11 @@ $(function () {
var $carousel = $(template) var $carousel = $(template)
$carousel.appendTo('#qunit-fixture') $carousel.appendTo('#qunit-fixture')
EventHandler $carousel[0].addEventListener('slid.bs.carousel', function (e) {
.one($carousel[0], 'slid.bs.carousel', function (e) { assert.ok(e.relatedTarget, 'relatedTarget present')
assert.ok(e.relatedTarget, 'relatedTarget present') assert.ok($(e.relatedTarget).hasClass('carousel-item'), 'relatedTarget has class "item"')
assert.ok($(e.relatedTarget).hasClass('carousel-item'), 'relatedTarget has class "item"') done()
done() })
})
$carousel.bootstrapCarousel('next') $carousel.bootstrapCarousel('next')
}) })
@ -419,18 +428,16 @@ $(function () {
var done = assert.async() var done = assert.async()
var $carousel = $(template) var $carousel = $(template)
EventHandler $carousel[0].addEventListener('slid.bs.carousel', function (e) {
.one($carousel[0], 'slid.bs.carousel', function (e) { assert.ok(typeof e.from !== 'undefined', 'from present')
assert.ok(typeof e.from !== 'undefined', 'from present') assert.ok(typeof e.to !== 'undefined', 'to present')
assert.ok(typeof e.to !== 'undefined', 'to present') done()
done() })
})
EventHandler $carousel[0].addEventListener('slide.bs.carousel', function (e) {
.one($carousel[0], 'slide.bs.carousel', function (e) { assert.ok(typeof e.from !== 'undefined', 'from present')
assert.ok(typeof e.from !== 'undefined', 'from present') assert.ok(typeof e.to !== 'undefined', 'to present')
assert.ok(typeof e.to !== 'undefined', 'to present') })
})
$carousel.bootstrapCarousel('next') $carousel.bootstrapCarousel('next')
}) })
@ -474,19 +481,20 @@ $(function () {
$carousel.attr('data-interval', 1814) $carousel.attr('data-interval', 1814)
$carousel.appendTo('body') $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) assert.strictEqual(Carousel._getInstance($carousel[0])._config.interval, 1814)
$carousel.remove() $carousel.remove()
$carousel.appendTo('body').attr('data-modal', 'foobar') $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') assert.strictEqual(Carousel._getInstance($carousel[0])._config.interval, 1814, 'even if there is an data-modal attribute set')
$carousel.remove() $carousel.remove()
$carousel.appendTo('body') $carousel.appendTo('body')
EventHandler.trigger($('[data-slide]').first()[0], 'click') $('[data-slide]').first()[0].dispatchEvent(new Event('click'))
$carousel.attr('data-interval', 1860) $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') assert.strictEqual(Carousel._getInstance($carousel[0])._config.interval, 1814, 'attributes should be read only on initialization')
$carousel.bootstrapCarousel('dispose') $carousel.bootstrapCarousel('dispose')
$carousel.remove() $carousel.remove()
@ -619,9 +627,9 @@ $(function () {
assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active') assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
EventHandler.trigger($template[0], 'keydown', { var keyDown = new Event('keydown')
which: 37 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')
}) })
@ -647,9 +655,9 @@ $(function () {
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', { var keyDown = new Event('keydown')
which: 39 keyDown.which = 39
}) $template[0].dispatchEvent(keyDown)
assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active') assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
}) })
@ -668,24 +676,28 @@ $(function () {
$template.bootstrapCarousel() $template.bootstrapCarousel()
var done = assert.async() var done = assert.async()
EventHandler.one($template[0], 'keydown', function (event) { function handlerKeydown() {
assert.strictEqual(event.defaultPrevented, false) assert.strictEqual(event.defaultPrevented, false)
}) $template[0].removeEventListener('keydown', handlerKeydown)
}
$template[0].addEventListener('keydown', handlerKeydown)
// arrow down // arrow down
EventHandler.trigger($template[0], 'keydown', { var keyDown = new Event('keydown')
which: 40 keyDown.which = 40
}) $template[0].dispatchEvent(keyDown)
EventHandler.one($template[0], 'keydown', function (event) { function handlerKeydown2() {
assert.strictEqual(event.defaultPrevented, false) assert.strictEqual(event.defaultPrevented, false)
$template[0].addEventListener('keydown', handlerKeydown2)
done() done()
}) }
$template[0].addEventListener('keydown', handlerKeydown2)
// arrow up // arrow up
EventHandler.trigger($template[0], 'keydown', { var keyDown2 = new Event('keydown')
which: 38 keyDown2.which = 38
}) $template[0].dispatchEvent(keyDown2)
}) })
QUnit.test('should support disabling the keyboard navigation', function (assert) { QUnit.test('should support disabling the keyboard navigation', function (assert) {
@ -794,25 +806,29 @@ $(function () {
'<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>' + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>' +
'</div>' '</div>'
var $carousel = $(carouselHTML) var $carousel = $(carouselHTML)
var done = assert.async()
var getActiveId = function () { var getActiveId = function () {
return $carousel.find('.carousel-item.active').attr('id') return $carousel.find('.carousel-item.active').attr('id')
} }
var done = assert.async() $carousel[0].addEventListener('slid.bs.carousel', function () {
var activeId = getActiveId()
EventHandler.one($carousel[0], 'slid.bs.carousel', function () { if (activeId === 'two') {
assert.strictEqual(getActiveId(), 'two', 'carousel slid from 1st to 2nd slide') assert.strictEqual(activeId, '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.strictEqual(getActiveId(), 'one', 'carousel wrapped around and slid from 3rd to 1st slide')
done()
})
$carousel.bootstrapCarousel('next') $carousel.bootstrapCarousel('next')
}) return
$carousel.bootstrapCarousel('next') }
if (activeId === 'three') {
assert.strictEqual(activeId, 'three', 'carousel slid from 2nd to 3rd slide')
$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') $carousel.bootstrapCarousel('next')
}) })
@ -843,7 +859,7 @@ $(function () {
var done = assert.async() 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') assert.strictEqual($carousel.find('.carousel-item.active').attr('id'), 'three', 'carousel wrapped around and slid from 1st to 3rd slide')
done() done()
}) })
@ -872,27 +888,26 @@ $(function () {
'<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>' + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>' +
'<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>' + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>' +
'</div>' '</div>'
var $carousel = $(carouselHTML) var $carousel = $(carouselHTML).appendTo('#qunit-fixture')
var getActiveId = function () { var getActiveId = function () {
return $carousel.find('.carousel-item.active').attr('id') return $carousel.find('.carousel-item.active').attr('id')
} }
var done = assert.async() 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 () { if (activeId === 'three') {
assert.strictEqual(getActiveId(), 'two', 'carousel slid from 1st to 2nd slide') assert.strictEqual(activeId, 'three', 'carousel slid from 2nd to 3rd 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')
})
$carousel.bootstrapCarousel('next') $carousel.bootstrapCarousel('next')
assert.strictEqual(getActiveId(), 'three', 'carousel did not wrap around and stayed on 3rd slide') assert.strictEqual(getActiveId(), 'three', 'carousel did not wrap around and stayed on 3rd slide')
done() done()
}) }
$carousel.bootstrapCarousel('next')
}) })
$carousel.bootstrapCarousel('next') $carousel.bootstrapCarousel('next')
}) })
@ -921,7 +936,7 @@ $(function () {
'</div>' '</div>'
var $carousel = $(carouselHTML) 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') assert.ok(false, 'carousel slid when it should not have slid')
}) })
$carousel.bootstrapCarousel('prev') $carousel.bootstrapCarousel('prev')

View File

@ -73,7 +73,7 @@ $(function () {
assert.ok(!/height/i.test($el2.attr('style')), 'has height reset') assert.ok(!/height/i.test($el2.attr('style')), 'has height reset')
done() done()
}) })
EventHandler.trigger($target[0], 'click') $target[0].dispatchEvent(new Event('click'))
}) })
QUnit.test('should collapse only the first collapse', function (assert) { QUnit.test('should collapse only the first collapse', function (assert) {
@ -167,7 +167,7 @@ $(function () {
done() 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) { QUnit.test('should add "collapsed" class to target when collapse is hidden', function (assert) {
@ -183,7 +183,7 @@ $(function () {
done() 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) { QUnit.test('should remove "collapsed" class from all triggers targeting the collapse when the collapse is shown', function (assert) {
@ -201,7 +201,7 @@ $(function () {
done() 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) { QUnit.test('should add "collapsed" class to all triggers targeting the collapse when the collapse is hidden', function (assert) {
@ -219,7 +219,7 @@ $(function () {
done() 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) { QUnit.test('should not close a collapse when initialized with "show" option if already shown', function (assert) {
@ -311,7 +311,7 @@ $(function () {
done() done()
}) })
EventHandler.trigger($target3[0], 'click') $target3[0].dispatchEvent(new Event('click'))
}) })
QUnit.test('should allow dots in data-parent', function (assert) { QUnit.test('should allow dots in data-parent', function (assert) {
@ -345,7 +345,7 @@ $(function () {
done() 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) { QUnit.test('should set aria-expanded="true" on trigger/control when collapse is shown', function (assert) {
@ -361,7 +361,7 @@ $(function () {
done() 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) { QUnit.test('should set aria-expanded="false" on trigger/control when collapse is hidden', function (assert) {
@ -377,7 +377,7 @@ $(function () {
done() 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) { QUnit.test('should set aria-expanded="true" on all triggers targeting the collapse when the collapse is shown', function (assert) {
@ -395,7 +395,7 @@ $(function () {
done() 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) { QUnit.test('should set aria-expanded="false" on all triggers targeting the collapse when the collapse is hidden', function (assert) {
@ -413,7 +413,7 @@ $(function () {
done() 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) { 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) {
@ -447,7 +447,7 @@ $(function () {
done() 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) { QUnit.test('should not fire show event if show is prevented because other element is still transitioning', function (assert) {
@ -472,12 +472,12 @@ $(function () {
var $target2 = $('<a role="button" data-toggle="collapse" href="#body2"/>').appendTo($groups.eq(1)) 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)) 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') $body2.toggleClass('show collapsing')
Collapse._getInstance($body2[0])._isTransitioning = true Collapse._getInstance($body2[0])._isTransitioning = true
EventHandler.trigger($target1[0], 'click') $target1[0].dispatchEvent(new Event('click'))
setTimeout(function () { setTimeout(function () {
assert.ok(!showFired, 'show event did not fire') assert.ok(!showFired, 'show event did not fire')
@ -542,9 +542,9 @@ $(function () {
assert.ok($collapseTwo.hasClass('show'), '#collapseTwo is shown') assert.ok($collapseTwo.hasClass('show'), '#collapseTwo is shown')
done() 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) { QUnit.test('should allow accordion to contain nested elements', function (assert) {
@ -582,9 +582,9 @@ $(function () {
assert.ok($collapseTwo.hasClass('show'), '#collapseTwo is shown') assert.ok($collapseTwo.hasClass('show'), '#collapseTwo is shown')
done() 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) { QUnit.test('should allow accordion to target multiple elements', function (assert) {
@ -616,7 +616,7 @@ $(function () {
assert.ok($collapseOneTwo.hasClass('show'), '#collapseOneTwo is shown') assert.ok($collapseOneTwo.hasClass('show'), '#collapseOneTwo is shown')
assert.ok(!$collapseTwoOne.hasClass('show'), '#collapseTwoOne is not shown') assert.ok(!$collapseTwoOne.hasClass('show'), '#collapseTwoOne is not shown')
assert.ok(!$collapseTwoTwo.hasClass('show'), '#collapseTwoTwo 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() { function secondTest() {
@ -659,7 +659,7 @@ $(function () {
} }
}) })
EventHandler.trigger($trigger[0], 'click') $trigger[0].dispatchEvent(new Event('click'))
}) })
QUnit.test('should collapse accordion children but not nested accordion children', function (assert) { QUnit.test('should collapse accordion children but not nested accordion children', function (assert) {
@ -690,26 +690,33 @@ $(function () {
var $collapseTwo = $('#collapseTwo') var $collapseTwo = $('#collapseTwo')
var $nestedCollapseOne = $('#nestedCollapseOne') var $nestedCollapseOne = $('#nestedCollapseOne')
EventHandler.one($collapseOne[0], 'shown.bs.collapse', function () { function handlerCollapseOne() {
assert.ok($collapseOne.hasClass('show'), '#collapseOne is shown') assert.ok($collapseOne.hasClass('show'), '#collapseOne is shown')
assert.ok(!$collapseTwo.hasClass('show'), '#collapseTwo is not shown') assert.ok(!$collapseTwo.hasClass('show'), '#collapseTwo is not shown')
assert.ok(!$('#nestedCollapseOne').hasClass('show'), '#nestedCollapseOne is not shown') assert.ok(!$('#nestedCollapseOne').hasClass('show'), '#nestedCollapseOne is not shown')
EventHandler.one($nestedCollapseOne[0], 'shown.bs.collapse', function () { $nestedCollapseOne[0].addEventListener('shown.bs.collapse', handlerNestedCollapseOne)
assert.ok($collapseOne.hasClass('show'), '#collapseOne is shown') $nestedTrigger[0].dispatchEvent(new Event('click'))
assert.ok(!$collapseTwo.hasClass('show'), '#collapseTwo is not shown') $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') assert.ok($nestedCollapseOne.hasClass('show'), '#nestedCollapseOne is shown')
EventHandler.one($collapseTwo[0], 'shown.bs.collapse', function () { done()
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')
}) })
EventHandler.trigger($nestedTrigger[0], 'click') $triggerTwo[0].dispatchEvent(new Event('click'))
}) $nestedCollapseOne[0].removeEventListener('shown.bs.collapse', handlerNestedCollapseOne)
EventHandler.trigger($trigger[0], 'click') }
$collapseOne[0].addEventListener('shown.bs.collapse', handlerCollapseOne)
$trigger[0].dispatchEvent(new Event('click'))
}) })
QUnit.test('should not prevent event for input', function (assert) { QUnit.test('should not prevent event for input', function (assert) {
@ -718,7 +725,7 @@ $(function () {
var $target = $('<input type="checkbox" data-toggle="collapse" data-target="#collapsediv1" />').appendTo('#qunit-fixture') var $target = $('<input type="checkbox" data-toggle="collapse" data-target="#collapsediv1" />').appendTo('#qunit-fixture')
var $collapse = $('<div id="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($collapse.hasClass('show'))
assert.ok($target.attr('aria-expanded') === 'true') assert.ok($target.attr('aria-expanded') === 'true')
assert.ok($target.prop('checked')) assert.ok($target.prop('checked'))
@ -753,11 +760,11 @@ $(function () {
assert.ok($trigger3.hasClass('collapsed'), 'trigger3 has collapsed class') assert.ok($trigger3.hasClass('collapsed'), 'trigger3 has collapsed class')
done() 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) { 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) {
@ -785,11 +792,11 @@ $(function () {
assert.strictEqual($trigger3.attr('aria-expanded'), 'false', 'aria-expanded on trigger3 is "false"') assert.strictEqual($trigger3.attr('aria-expanded'), 'false', 'aria-expanded on trigger3 is "false"')
done() 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) { QUnit.test('should not prevent interactions inside the collapse element', function (assert) {
@ -803,7 +810,7 @@ $(function () {
'</div>' '</div>'
var $collapse = $(htmlCollapse).appendTo('#qunit-fixture') 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') assert.ok($target.prop('checked'), '$trigger is checked')
var $testCheckbox = $('#testCheckbox') var $testCheckbox = $('#testCheckbox')
$testCheckbox.trigger($.Event('click')) $testCheckbox.trigger($.Event('click'))

View File

@ -90,7 +90,7 @@ $(function () {
assert.ok(!$dropdown.parent('.dropdown').hasClass('position-static'), '"position-static" class not added') assert.ok(!$dropdown.parent('.dropdown').hasClass('position-static'), '"position-static" class not added')
done() 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) { QUnit.test('should add class position-static to dropdown if boundary not scrollParent', function (assert) {
@ -112,7 +112,7 @@ $(function () {
assert.ok($dropdown.parent('.dropdown').hasClass('position-static'), '"position-static" class added') assert.ok($dropdown.parent('.dropdown').hasClass('position-static'), '"position-static" class added')
done() 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) { QUnit.test('should set aria-expanded="true" on target when dropdown menu is shown', function (assert) {
@ -136,11 +136,11 @@ $(function () {
var dropdownParent = $dropdown.parent('.dropdown')[0] 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') assert.strictEqual($dropdown.attr('aria-expanded'), 'true', 'aria-expanded is set to string "true" on click')
done() 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) { QUnit.test('should set aria-expanded="false" on target when dropdown menu is hidden', function (assert) {
@ -164,13 +164,13 @@ $(function () {
var dropdownParent = $dropdown.parent('.dropdown')[0] 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') assert.strictEqual($dropdown.attr('aria-expanded'), 'false', 'aria-expanded is set to string "false" on hide')
done() done()
}) })
EventHandler.trigger($dropdown[0], 'click') $dropdown[0].dispatchEvent(new Event('click'))
EventHandler.trigger(document.body, 'click') document.body.click()
}) })
QUnit.test('should not open dropdown if target is disabled via class', function (assert) { QUnit.test('should not open dropdown if target is disabled via class', function (assert) {
@ -221,7 +221,7 @@ $(function () {
assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click') assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
done() done()
}) })
EventHandler.trigger($dropdown[0], 'click') $dropdown[0].dispatchEvent(new Event('click'))
}) })
QUnit.test('should remove "show" class if body is clicked', function (assert) { QUnit.test('should remove "show" class if body is clicked', function (assert) {
@ -253,7 +253,7 @@ $(function () {
done() 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) { QUnit.test('should remove "show" class if tabbing outside of menu', function (assert) {
@ -279,16 +279,16 @@ $(function () {
.on('shown.bs.dropdown', function () { .on('shown.bs.dropdown', function () {
assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click') assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
EventHandler.trigger(document.body, 'keyup', { var keyup9 = new Event('keyup')
which: 9 // Tab keyup9.which = 9 // Tab
}) document.dispatchEvent(keyup9)
}) })
.on('hidden.bs.dropdown', function () { .on('hidden.bs.dropdown', function () {
assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), '"show" class removed') assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), '"show" class removed')
done() 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) { QUnit.test('should remove "show" class if body is clicked, with multiple dropdowns', function (assert) {
@ -322,7 +322,7 @@ $(function () {
$(document.body).trigger('click') $(document.body).trigger('click')
}).on('hidden.bs.dropdown', function () { }).on('hidden.bs.dropdown', function () {
assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed') 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') $last.parent('.btn-group')
@ -334,7 +334,7 @@ $(function () {
assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed') assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed')
done() 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) { QUnit.test('should remove "show" class if body if tabbing outside of menu, with multiple dropdowns', function (assert) {
@ -365,26 +365,26 @@ $(function () {
.on('shown.bs.dropdown', function () { .on('shown.bs.dropdown', function () {
assert.strictEqual($first.parents('.show').length, 1, '"show" class added on click') 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') assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown')
EventHandler.trigger(document.body, 'keyup', { var keyup = new Event('keyup')
which: 9 // Tab keyup.which = 9 // Tab
}) document.dispatchEvent(keyup)
}).on('hidden.bs.dropdown', function () { }).on('hidden.bs.dropdown', function () {
assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed') 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') $last.parent('.btn-group')
.on('shown.bs.dropdown', function () { .on('shown.bs.dropdown', function () {
assert.strictEqual($last.parent('.show').length, 1, '"show" class added on click') 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') assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown')
EventHandler.trigger(document.body, 'keyup', { var keyup = new Event('keyup')
which: 9 // Tab keyup.which = 9 // Tab
}) document.dispatchEvent(keyup)
}).on('hidden.bs.dropdown', function () { }).on('hidden.bs.dropdown', function () {
assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed') assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed')
done() done()
}) })
EventHandler.trigger($first[0], 'click') $first[0].dispatchEvent(new Event('click'))
}) })
QUnit.test('should fire show and hide event', function (assert) { QUnit.test('should fire show and hide event', function (assert) {
@ -417,8 +417,8 @@ $(function () {
done() done()
}) })
EventHandler.trigger($dropdown[0], 'click') $dropdown[0].dispatchEvent(new Event('click'))
EventHandler.trigger(document.body, 'click') document.body.click()
}) })
QUnit.test('should fire shown and hidden event', function (assert) { QUnit.test('should fire shown and hidden event', function (assert) {
@ -451,8 +451,8 @@ $(function () {
done() done()
}) })
EventHandler.trigger($dropdown[0], 'click') $dropdown[0].dispatchEvent(new Event('click'))
EventHandler.trigger(document.body, 'click') document.body.click()
}) })
QUnit.test('should fire shown and hidden event with a relatedTarget', function (assert) { QUnit.test('should fire shown and hidden event with a relatedTarget', function (assert) {
@ -484,7 +484,7 @@ $(function () {
$(document.body).trigger('click') $(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) { QUnit.test('should fire hide and hidden event with a clickEvent', function (assert) {
@ -598,7 +598,7 @@ $(function () {
done() done()
}) })
EventHandler.trigger($dropdown[0], 'click') $dropdown[0].dispatchEvent(new Event('click'))
}) })
QUnit.test('should skip disabled element when using keyboard navigation', function (assert) { QUnit.test('should skip disabled element when using keyboard navigation', function (assert) {
@ -633,7 +633,7 @@ $(function () {
assert.ok(!$(document.activeElement).is(':disabled'), ':disabled is not focused') assert.ok(!$(document.activeElement).is(':disabled'), ':disabled is not focused')
done() 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) { QUnit.test('should focus next/previous element when using keyboard navigation', function (assert) {
@ -658,23 +658,21 @@ $(function () {
.on('shown.bs.dropdown', function () { .on('shown.bs.dropdown', function () {
assert.ok(true, 'shown was fired') assert.ok(true, 'shown was fired')
EventHandler.trigger($dropdown[0], 'keydown', { var keydown40 = new Event('keydown')
which: 40 keydown40.which = 40
}) $dropdown[0].dispatchEvent(keydown40)
assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused') assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused')
EventHandler.trigger(document.activeElement, 'keydown', { document.activeElement.dispatchEvent(keydown40)
which: 40
})
assert.ok($(document.activeElement).is($('#item2')), 'item2 is focused') assert.ok($(document.activeElement).is($('#item2')), 'item2 is focused')
EventHandler.trigger(document.activeElement, 'keydown', { var keydown38 = new Event('keydown')
which: 38 keydown38.which = 38
}) document.activeElement.dispatchEvent(keydown38)
assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused') assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused')
done() 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) { QUnit.test('should not close the dropdown if the user clicks on a text field', function (assert) {
@ -701,9 +699,9 @@ $(function () {
.parent('.dropdown') .parent('.dropdown')
.on('shown.bs.dropdown', function () { .on('shown.bs.dropdown', function () {
assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown') 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) { QUnit.test('should not close the dropdown if the user clicks on a textarea', function (assert) {
@ -730,9 +728,9 @@ $(function () {
.parent('.dropdown') .parent('.dropdown')
.on('shown.bs.dropdown', function () { .on('shown.bs.dropdown', function () {
assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown') 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) { QUnit.test('Dropdown should not use Popper.js in navbar', function (assert) {
@ -761,7 +759,7 @@ $(function () {
assert.ok(typeof $dropdownMenu.attr('style') === 'undefined', 'No inline style applied by Popper.js') assert.ok(typeof $dropdownMenu.attr('style') === 'undefined', 'No inline style applied by Popper.js')
done() 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) { QUnit.test('should ignore keyboard events for <input>s and <textarea>s within dropdown-menu, except for escape key', function (assert) {
@ -824,15 +822,15 @@ $(function () {
// Key escape // Key escape
$input.trigger('focus') $input.trigger('focus')
EventHandler.trigger($input[0], 'keydown', { var keydown = new Event('keydown')
which: 27 keydown.which = 27
}) $input[0].dispatchEvent(keydown)
assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown') assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown')
done() 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) { QUnit.test('should ignore space key events for <input>s within dropdown, and accept up, down and escape', function (assert) {
@ -873,9 +871,9 @@ $(function () {
// Key escape // Key escape
$input.trigger('focus') $input.trigger('focus')
EventHandler.trigger($input[0], 'keydown', { var keydown = new Event('keydown')
which: 27 keydown.which = 27
}) $input[0].dispatchEvent(keydown)
assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown') assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown')
$dropdown $dropdown
@ -885,9 +883,9 @@ $(function () {
// Key down // Key down
$input.trigger('focus') $input.trigger('focus')
EventHandler.trigger($input[0], 'keydown', { var keydown40 = new Event('keydown')
which: 40 keydown40.which = 40
}) $input[0].dispatchEvent(keydown40)
assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused') assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')
$dropdown $dropdown
@ -895,17 +893,18 @@ $(function () {
.one('shown.bs.dropdown', function () { .one('shown.bs.dropdown', function () {
// Key up // Key up
$input.trigger('focus') $input.trigger('focus')
EventHandler.trigger($input[0], 'keydown', { var keydown38 = new Event('keydown')
which: 38 keydown38.which = 38
}) $input[0].dispatchEvent(keydown38)
assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused') assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')
done() done()
}).bootstrapDropdown('toggle') }).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) { QUnit.test('should ignore space key events for <textarea>s within dropdown, and accept up, down and escape', function (assert) {
@ -946,9 +945,9 @@ $(function () {
// Key escape // Key escape
$textarea.trigger('focus') $textarea.trigger('focus')
EventHandler.trigger($textarea[0], 'keydown', { var keydown27 = new Event('keydown')
which: 27 keydown27.which = 27
}) $textarea[0].dispatchEvent(keydown27)
assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown') assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown')
$dropdown $dropdown
@ -958,9 +957,9 @@ $(function () {
// Key down // Key down
$textarea.trigger('focus') $textarea.trigger('focus')
EventHandler.trigger($textarea[0], 'keydown', { var keydown40 = new Event('keydown')
which: 40 keydown40.which = 40
}) $textarea[0].dispatchEvent(keydown40)
assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused') assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')
$dropdown $dropdown
@ -968,17 +967,18 @@ $(function () {
.one('shown.bs.dropdown', function () { .one('shown.bs.dropdown', function () {
// Key up // Key up
$textarea.trigger('focus') $textarea.trigger('focus')
EventHandler.trigger($textarea[0], 'keydown', { var keydown38 = new Event('keydown')
which: 38 keydown38.which = 38
}) $textarea[0].dispatchEvent(keydown38)
assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused') assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')
done() done()
}).bootstrapDropdown('toggle') }).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) { QUnit.test('should not use Popper.js if display set to static', function (assert) {
@ -1008,7 +1008,7 @@ $(function () {
done() 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) { QUnit.test('should call Popper.js and detect navbar on update', function (assert) {

View File

@ -281,14 +281,14 @@ $(function () {
}) })
.one('shown.bs.popover', function () { .one('shown.bs.popover', function () {
assert.notEqual($('.popover').length, 0, 'popover was inserted') 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 () { .one('hidden.bs.popover', function () {
assert.strictEqual($('.popover').length, 0, 'popover was removed') assert.strictEqual($('.popover').length, 0, 'popover was removed')
done() 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) { QUnit.test('should detach popover content rather than removing it so that event handlers are left intact', function (assert) {
@ -438,11 +438,11 @@ $(function () {
}) })
$popover.bootstrapPopover('disable') $popover.bootstrapPopover('disable')
EventHandler.trigger($popover[0], 'click') $popover[0].click()
setTimeout(function () { setTimeout(function () {
assert.strictEqual($('.popover').length === 0, true) assert.strictEqual($('.popover').length === 0, true)
$popover.bootstrapPopover('enable') $popover.bootstrapPopover('enable')
EventHandler.trigger($popover[0], 'click') $popover[0].click()
}, 200) }, 200)
}) })
@ -464,6 +464,6 @@ $(function () {
done() done()
}) })
EventHandler.trigger($popover[0], 'click') $popover[0].click()
}) })
}) })

View File

@ -665,7 +665,7 @@ $(function () {
method: 'offset' method: 'offset'
}) })
} else if (type === 'data') { } else if (type === 'data') {
EventHandler.trigger(window, 'load') window.dispatchEvent(new Event('load'))
} }
var $target = $('#div-' + type + 'm-2') var $target = $('#div-' + type + 'm-2')
@ -712,7 +712,7 @@ $(function () {
method: 'position' method: 'position'
}) })
} else if (type === 'data') { } else if (type === 'data') {
EventHandler.trigger(window, 'load') window.dispatchEvent(new Event('load'))
} }
var $target = $('#div-' + type + 'm-2') var $target = $('#div-' + type + 'm-2')

View File

@ -320,7 +320,7 @@ $(function () {
'</ul>' '</ul>'
var $tabs = $(tabsHTML).appendTo('#qunit-fixture') 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.notOk($tabs.find('li:first-child a').hasClass('active'))
assert.ok($tabs.find('li:last-child a').hasClass('active')) assert.ok($tabs.find('li:last-child a').hasClass('active'))
}) })
@ -339,7 +339,7 @@ $(function () {
'</ul>' '</ul>'
var $tabs = $(tabsHTML).appendTo('#qunit-fixture') 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.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 a').hasClass('active'))
assert.notOk($tabs.find('li:last-child .dropdown-menu a:first-child').hasClass('active')) assert.notOk($tabs.find('li:last-child .dropdown-menu a:first-child').hasClass('active'))
@ -378,10 +378,10 @@ $(function () {
$('#tab1').on('shown.bs.tab', function () { $('#tab1').on('shown.bs.tab', function () {
assert.ok($('#x-tab1').hasClass('active')) 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) { QUnit.test('should not remove fade class if no active pane is present', function (assert) {
@ -412,10 +412,10 @@ $(function () {
done() 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) { QUnit.test('should handle removed tabs', function (assert) {

View File

@ -583,7 +583,7 @@ $(function () {
done() done()
}, 200) }, 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) { QUnit.test('should not show tooltip if leave event occurs before delay expires', function (assert) {
@ -598,7 +598,7 @@ $(function () {
setTimeout(function () { setTimeout(function () {
assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active') assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
EventHandler.trigger($tooltip[0], 'mouseout') $tooltip[0].dispatchEvent(new Event('mouseout'))
}, 100) }, 100)
setTimeout(function () { setTimeout(function () {
@ -606,7 +606,7 @@ $(function () {
done() done()
}, 200) }, 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) { QUnit.test('should not hide tooltip if leave event occurs and enter event occurs within the hide delay', function (assert) {
@ -624,11 +624,11 @@ $(function () {
setTimeout(function () { setTimeout(function () {
assert.ok($('.tooltip').is('.fade.show'), '1ms: tooltip faded active') assert.ok($('.tooltip').is('.fade.show'), '1ms: tooltip faded active')
EventHandler.trigger($tooltip[0], 'mouseout') $tooltip[0].dispatchEvent(new Event('mouseout'))
setTimeout(function () { setTimeout(function () {
assert.ok($('.tooltip').is('.fade.show'), '100ms: tooltip still faded active') assert.ok($('.tooltip').is('.fade.show'), '100ms: tooltip still faded active')
EventHandler.trigger($tooltip[0], 'mouseover') $tooltip[0].dispatchEvent(new Event('mouseover'))
}, 100) }, 100)
setTimeout(function () { setTimeout(function () {
@ -637,7 +637,7 @@ $(function () {
}, 200) }, 200)
}, 0) }, 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) { QUnit.test('should not show tooltip if leave event occurs before delay expires', function (assert) {
@ -652,7 +652,7 @@ $(function () {
setTimeout(function () { setTimeout(function () {
assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active') assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
EventHandler.trigger($tooltip[0], 'mouseout') $tooltip[0].dispatchEvent(new Event('mouseout'))
}, 100) }, 100)
setTimeout(function () { setTimeout(function () {
@ -660,7 +660,7 @@ $(function () {
done() done()
}, 200) }, 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) { QUnit.test('should not show tooltip if leave event occurs before delay expires, even if hide delay is 0', function (assert) {
@ -678,7 +678,7 @@ $(function () {
setTimeout(function () { setTimeout(function () {
assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active') assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
EventHandler.trigger($tooltip[0], 'mouseout') $tooltip[0].dispatchEvent(new Event('mouseout'))
}, 100) }, 100)
setTimeout(function () { setTimeout(function () {
@ -686,7 +686,7 @@ $(function () {
done() done()
}, 250) }, 250)
EventHandler.trigger($tooltip[0], 'mouseover') $tooltip[0].dispatchEvent(new Event('mouseover'))
}) })
QUnit.test('should wait 200ms before hiding the tooltip', function (assert) { QUnit.test('should wait 200ms before hiding the tooltip', function (assert) {
@ -705,7 +705,7 @@ $(function () {
setTimeout(function () { setTimeout(function () {
assert.ok($(Tooltip._getInstance($tooltip[0]).tip).is('.fade.show'), '1ms: tooltip faded active') 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 () { setTimeout(function () {
assert.ok($(Tooltip._getInstance($tooltip[0]).tip).is('.fade.show'), '100ms: tooltip still faded active') assert.ok($(Tooltip._getInstance($tooltip[0]).tip).is('.fade.show'), '100ms: tooltip still faded active')
@ -717,7 +717,7 @@ $(function () {
}, 200) }, 200)
}, 0) }, 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) { QUnit.test('should not reload the tooltip on subsequent mouseenter events', function (assert) {
@ -742,11 +742,11 @@ $(function () {
title: titleHtml title: titleHtml
}) })
EventHandler.trigger($('#tt-outer')[0], 'mouseover') $('#tt-outer')[0].dispatchEvent(new Event('mouseover'))
var currentUid = $('#tt-content').text() var currentUid = $('#tt-content').text()
EventHandler.trigger($('#tt-outer')[0], 'mouseover') $('#tt-outer')[0].dispatchEvent(new Event('mouseover'))
assert.strictEqual(currentUid, $('#tt-content').text()) assert.strictEqual(currentUid, $('#tt-content').text())
}) })
@ -774,16 +774,16 @@ $(function () {
var obj = Tooltip._getInstance($tooltip[0]) var obj = Tooltip._getInstance($tooltip[0])
EventHandler.trigger($('#tt-outer')[0], 'mouseover') $('#tt-outer')[0].dispatchEvent(new Event('mouseover'))
var currentUid = $('#tt-content').text() 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.strictEqual(currentUid, $('#tt-content').text())
assert.ok(obj._hoverState === 'out', 'the tooltip hoverState should be set to "out"') 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.ok(obj._hoverState === 'show', 'the tooltip hoverState should be set to "show"')
assert.strictEqual(currentUid, $('#tt-content').text()) assert.strictEqual(currentUid, $('#tt-content').text())
@ -839,7 +839,7 @@ $(function () {
$.each(tests, function (idx, triggers) { $.each(tests, function (idx, triggers) {
for (var i = 0, len = triggers.length; i < len; i++) { 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()) assert.equal(i < len - 1, showingTooltip())
} }
}) })
@ -861,13 +861,13 @@ $(function () {
return $tooltip.hasClass('show') || tooltip._hoverState === 'show' return $tooltip.hasClass('show') || tooltip._hoverState === 'show'
} }
EventHandler.trigger($el[0], 'click') $el[0].click()
assert.ok(showingTooltip(), 'tooltip is faded in') assert.ok(showingTooltip(), 'tooltip is faded in')
$el.bootstrapTooltip('hide') $el.bootstrapTooltip('hide')
assert.ok(!showingTooltip(), 'tooltip was faded out') assert.ok(!showingTooltip(), 'tooltip was faded out')
EventHandler.trigger($el[0], 'click') $el[0].click()
assert.ok(showingTooltip(), 'tooltip is faded in again') assert.ok(showingTooltip(), 'tooltip is faded in again')
}) })
@ -987,11 +987,11 @@ $(function () {
}) })
$trigger.bootstrapTooltip('disable') $trigger.bootstrapTooltip('disable')
EventHandler.trigger($trigger[0], 'click') $trigger[0].click()
setTimeout(function () { setTimeout(function () {
assert.strictEqual($('.tooltip').length === 0, true) assert.strictEqual($('.tooltip').length === 0, true)
$trigger.bootstrapTooltip('enable') $trigger.bootstrapTooltip('enable')
EventHandler.trigger($trigger[0], 'click') $trigger[0].click()
}, 200) }, 200)
}) })