kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Clean modal unit tests up

Browse source
This commit is contained in:
Heinrich Fenkart 2014-06-18 21:34:21 +02:00
parent 9ff66a12bc
commit 998c3724e8
1 changed files with 63 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

147
js/tests/unit/modal.js
View file

@ -4,8 +4,7 @@ $(function () {
module('modal plugin') module('modal plugin')
test('should be defined on jquery object', function () { test('should be defined on jquery object', function () {
var div = $('<div id="modal-test"></div>') ok($(document.body).modal, 'modal method is defined')
ok(div.modal, 'modal method is defined')
}) })
module('modal', { module('modal', {
@ -20,13 +19,14 @@ $(function () {
}) })
test('should provide no conflict', function () { test('should provide no conflict', function () {
ok(!$.fn.modal, 'modal was set back to undefined (orig value)') strictEqual($.fn.modal, undefined, 'modal was set back to undefined (orig value)')
}) })
test('should return element', function () { test('should return jquery collection containing the element', function () {
var div = $('<div id="modal-test"></div>') var $el = $('<div id="modal-test"/>')
ok(div.bootstrapModal() == div, 'document.body returned') var $modal = $el.bootstrapModal()
$('#modal-test').remove() ok($modal instanceof $, 'returns jquery collection')
strictEqual($modal[0], $el[0], 'collection contains element')
}) })
test('should expose defaults var for settings', function () { test('should expose defaults var for settings', function () {
@ -35,11 +35,10 @@ $(function () {
test('should insert into dom when show method is called', function () { test('should insert into dom when show method is called', function () {
stop() stop()
$.support.transition = false
$('<div id="modal-test"></div>') $('<div id="modal-test"/>')
.on('shown.bs.modal', function () { .on('shown.bs.modal', function () {
ok($('#modal-test').length, 'modal inserted into dom') notEqual($('#modal-test').length, 0, 'modal inserted into dom')
$(this).remove()
start() start()
}) })
.bootstrapModal('show') .bootstrapModal('show')
@ -47,46 +46,41 @@ $(function () {
test('should fire show event', function () { test('should fire show event', function () {
stop() stop()
$.support.transition = false
$('<div id="modal-test"></div>') $('<div id="modal-test"/>')
.on('show.bs.modal', function () { .on('show.bs.modal', function () {
ok(true, 'show was called') ok(true, 'show event fired')
})
.on('shown.bs.modal', function () {
$(this).remove()
start() start()
}) })
.bootstrapModal('show') .bootstrapModal('show')
}) })
test('should not fire shown when default prevented', function () { test('should not fire shown when show was prevented', function () {
stop() stop()
$.support.transition = false
$('<div id="modal-test"></div>') $('<div id="modal-test"/>')
.on('show.bs.modal', function (e) { .on('show.bs.modal', function (e) {
e.preventDefault() e.preventDefault()
ok(true, 'show was called') ok(true, 'show event fired')
start() start()
}) })
.on('shown.bs.modal', function () { .on('shown.bs.modal', function () {
ok(false, 'shown was called') ok(false, 'shown event fired')
}) })
.bootstrapModal('show') .bootstrapModal('show')
}) })
test('should hide modal when hide is called', function () { test('should hide modal when hide is called', function () {
stop() stop()
$.support.transition = false
$('<div id="modal-test"></div>') $('<div id="modal-test"/>')
.on('shown.bs.modal', function () { .on('shown.bs.modal', function () {
ok($('#modal-test').is(':visible'), 'modal visible') ok($('#modal-test').is(':visible'), 'modal visible')
ok($('#modal-test').length, 'modal inserted into dom') notEqual($('#modal-test').length, 0, 'modal inserted into dom')
$(this).bootstrapModal('hide') $(this).bootstrapModal('hide')
}) })
.on('hidden.bs.modal', function () { .on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden') ok(!$('#modal-test').is(':visible'), 'modal hidden')
$('#modal-test').remove()
start() start()
}) })
.bootstrapModal('show') .bootstrapModal('show')
@ -94,17 +88,15 @@ $(function () {
test('should toggle when toggle is called', function () { test('should toggle when toggle is called', function () {
stop() stop()
$.support.transition = false
var div = $('<div id="modal-test"></div>') $('<div id="modal-test"/>')
div
.on('shown.bs.modal', function () { .on('shown.bs.modal', function () {
ok($('#modal-test').is(':visible'), 'modal visible') ok($('#modal-test').is(':visible'), 'modal visible')
ok($('#modal-test').length, 'modal inserted into dom') notEqual($('#modal-test').length, 0, 'modal inserted into dom')
div.bootstrapModal('toggle') $(this).bootstrapModal('toggle')
}) })
.on('hidden.bs.modal', function () { .on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden') ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start() start()
}) })
.bootstrapModal('toggle') .bootstrapModal('toggle')
@ -112,17 +104,15 @@ $(function () {
test('should remove from dom when click [data-dismiss="modal"]', function () { test('should remove from dom when click [data-dismiss="modal"]', function () {
stop() stop()
$.support.transition = false
var div = $('<div id="modal-test"><span class="close" data-dismiss="modal"></span></div>') $('<div id="modal-test"><span class="close" data-dismiss="modal"/></div>')
div
.on('shown.bs.modal', function () { .on('shown.bs.modal', function () {
ok($('#modal-test').is(':visible'), 'modal visible') ok($('#modal-test').is(':visible'), 'modal visible')
ok($('#modal-test').length, 'modal inserted into dom') notEqual($('#modal-test').length, 0, 'modal inserted into dom')
div.find('.close').click() $(this).find('.close').click()
}) })
.on('hidden.bs.modal', function () { .on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden') ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start() start()
}) })
.bootstrapModal('toggle') .bootstrapModal('toggle')
@ -130,16 +120,14 @@ $(function () {
test('should allow modal close with "backdrop:false"', function () { test('should allow modal close with "backdrop:false"', function () {
stop() stop()
$.support.transition = false
var div = $('<div>', { id: 'modal-test', 'data-backdrop': false }) $('<div id="modal-test" data-backdrop="false"/>')
div
.on('shown.bs.modal', function () { .on('shown.bs.modal', function () {
ok($('#modal-test').is(':visible'), 'modal visible') ok($('#modal-test').is(':visible'), 'modal visible')
div.bootstrapModal('hide') $(this).bootstrapModal('hide')
}) })
.on('hidden.bs.modal', function () { .on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden') ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start() start()
}) })
.bootstrapModal('show') .bootstrapModal('show')
@ -147,18 +135,16 @@ $(function () {
test('should close modal when clicking outside of modal-content', function () { test('should close modal when clicking outside of modal-content', function () {
stop() stop()
$.support.transition = false
var div = $('<div id="modal-test"><div class="contents"></div></div>') $('<div id="modal-test"><div class="contents"/></div>')
div
.on('shown.bs.modal', function () { .on('shown.bs.modal', function () {
ok($('#modal-test').length, 'modal insterted into dom') notEqual($('#modal-test').length, 0, 'modal insterted into dom')
$('.contents').click() $('.contents').click()
ok($('#modal-test').is(':visible'), 'modal visible') ok($('#modal-test').is(':visible'), 'modal visible')
$('#modal-test').mousedown() $('#modal-test').mousedown()
}) })
.on('hidden.bs.modal', function () { .on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden') ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start() start()
}) })
.bootstrapModal('show') .bootstrapModal('show')
@ -204,19 +190,17 @@ $(function () {
test('should trigger hide event once when clicking outside of modal-content', function () { test('should trigger hide event once when clicking outside of modal-content', function () {
stop() stop()
$.support.transition = false
var triggered var triggered
var div = $('<div id="modal-test"><div class="contents"></div></div>')
div $('<div id="modal-test"><div class="contents"/></div>')
.on('shown.bs.modal', function () { .on('shown.bs.modal', function () {
triggered = 0 triggered = 0
$('#modal-test').mousedown() $('#modal-test').mousedown()
}) })
.on('hide.bs.modal', function () { .on('hide.bs.modal', function () {
triggered += 1 triggered += 1
ok(triggered === 1, 'modal hide triggered once') strictEqual(triggered, 1, 'modal hide triggered once')
start() start()
}) })
.bootstrapModal('show') .bootstrapModal('show')
@ -224,34 +208,31 @@ $(function () {
test('should close reopened modal with [data-dismiss="modal"] click', function () { test('should close reopened modal with [data-dismiss="modal"] click', function () {
stop() stop()
$.support.transition = false
var div = $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"></div></div></div>') $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>')
div
.on('shown.bs.modal', function () { .on('shown.bs.modal', function () {
$('#close').click() $('#close').click()
ok(!$('#modal-test').is(':visible'), 'modal hidden') ok(!$('#modal-test').is(':visible'), 'modal hidden')
}) })
.one('hidden.bs.modal', function () { .one('hidden.bs.modal', function () {
div.one('hidden.bs.modal', function () { $(this)
start() .one('hidden.bs.modal', function () {
}).bootstrapModal('show') start()
})
.bootstrapModal('show')
}) })
.bootstrapModal('show') .bootstrapModal('show')
div.remove()
}) })
test('should restore focus to toggling element when modal is hidden after having been opened via data-api', function () { test('should restore focus to toggling element when modal is hidden after having been opened via data-api', function () {
stop() stop()
$.support.transition = false
var toggleBtn = $('<button data-toggle="modal" data-target="#modal-test">Launch modal</button>').appendTo('#qunit-fixture') var $toggleBtn = $('<button data-toggle="modal" data-target="#modal-test"/>').appendTo('#qunit-fixture')
var div = $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"></div></div></div>')
div $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>')
.on('hidden.bs.modal', function () { .on('hidden.bs.modal', function () {
window.setTimeout(function () { // give the focus restoration callback a chance to run setTimeout(function () {
equal(document.activeElement, toggleBtn[0], 'toggling element is once again focused') ok($(document.activeElement).is($toggleBtn), 'toggling element is once again focused')
div.remove()
toggleBtn.remove()
start() start()
}, 0) }, 0)
}) })
@ -259,29 +240,26 @@ $(function () {
$('#close').click() $('#close').click()
}) })
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
toggleBtn.click()
$toggleBtn.click()
}) })
test('should not restore focus to toggling element if the associated show event gets prevented', function () { test('should not restore focus to toggling element if the associated show event gets prevented', function () {
stop() stop()
$.support.transition = false var $toggleBtn = $('<button data-toggle="modal" data-target="#modal-test"/>').appendTo('#qunit-fixture')
var toggleBtn = $('<button data-toggle="modal" data-target="#modal-test">Launch modal</button>').appendTo('#qunit-fixture') var $otherBtn = $('<button id="other-btn"/>').appendTo('#qunit-fixture')
var otherBtn = $('<button id="other-btn">Golden boy</button>').appendTo('#qunit-fixture')
var div = $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"></div></div></div>') $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div>')
div
.one('show.bs.modal', function (e) { .one('show.bs.modal', function (e) {
e.preventDefault() e.preventDefault()
otherBtn.focus() $otherBtn.focus()
window.setTimeout(function () { // give the focus event from the previous line a chance to run setTimeout($.proxy(function () {
div.bootstrapModal('show') $(this).bootstrapModal('show')
}, 0) }, this), 0)
}) })
.on('hidden.bs.modal', function () { .on('hidden.bs.modal', function () {
window.setTimeout(function () { // give the focus restoration callback a chance to run (except it shouldn't run in this case) setTimeout(function () {
equal(document.activeElement, otherBtn[0], 'show was prevented, so focus should not have been restored to toggling element') ok($(document.activeElement).is($otherBtn), 'focus returned to toggling element')
div.remove()
toggleBtn.remove()
otherBtn.remove()
start() start()
}, 0) }, 0)
}) })
@ -289,6 +267,7 @@ $(function () {
$('#close').click() $('#close').click()
}) })
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
toggleBtn.click()
$toggleBtn.click()
}) })
}) })