rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages 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')
test('should be defined on jquery object', function () {
var div = $('<div id="modal-test"></div>')
ok(div.modal, 'modal method is defined')
ok($(document.body).modal, 'modal method is defined')
})
module('modal', {
@ -20,13 +19,14 @@ $(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 () {
var div = $('<div id="modal-test"></div>')
ok(div.bootstrapModal() == div, 'document.body returned')
$('#modal-test').remove()
test('should return jquery collection containing the element', function () {
var $el = $('<div id="modal-test"/>')
var $modal = $el.bootstrapModal()
ok($modal instanceof $, 'returns jquery collection')
strictEqual($modal[0], $el[0], 'collection contains element')
})
test('should expose defaults var for settings', function () {
@ -35,11 +35,10 @@ $(function () {
test('should insert into dom when show method is called', function () {
stop()
$.support.transition = false
$('<div id="modal-test"></div>')
$('<div id="modal-test"/>')
.on('shown.bs.modal', function () {
ok($('#modal-test').length, 'modal inserted into dom')
$(this).remove()
notEqual($('#modal-test').length, 0, 'modal inserted into dom')
start()
})
.bootstrapModal('show')
@ -47,46 +46,41 @@ $(function () {
test('should fire show event', function () {
stop()
$.support.transition = false
$('<div id="modal-test"></div>')
$('<div id="modal-test"/>')
.on('show.bs.modal', function () {
ok(true, 'show was called')
})
.on('shown.bs.modal', function () {
$(this).remove()
ok(true, 'show event fired')
start()
})
.bootstrapModal('show')
})
test('should not fire shown when default prevented', function () {
test('should not fire shown when show was prevented', function () {
stop()
$.support.transition = false
$('<div id="modal-test"></div>')
$('<div id="modal-test"/>')
.on('show.bs.modal', function (e) {
e.preventDefault()
ok(true, 'show was called')
ok(true, 'show event fired')
start()
})
.on('shown.bs.modal', function () {
ok(false, 'shown was called')
ok(false, 'shown event fired')
})
.bootstrapModal('show')
})
test('should hide modal when hide is called', function () {
stop()
$.support.transition = false
$('<div id="modal-test"></div>')
$('<div id="modal-test"/>')
.on('shown.bs.modal', function () {
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')
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
$('#modal-test').remove()
start()
})
.bootstrapModal('show')
@ -94,17 +88,15 @@ $(function () {
test('should toggle when toggle is called', function () {
stop()
$.support.transition = false
var div = $('<div id="modal-test"></div>')
div
$('<div id="modal-test"/>')
.on('shown.bs.modal', function () {
ok($('#modal-test').is(':visible'), 'modal visible')
ok($('#modal-test').length, 'modal inserted into dom')
div.bootstrapModal('toggle')
notEqual($('#modal-test').length, 0, 'modal inserted into dom')
$(this).bootstrapModal('toggle')
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start()
})
.bootstrapModal('toggle')
@ -112,17 +104,15 @@ $(function () {
test('should remove from dom when click [data-dismiss="modal"]', function () {
stop()
$.support.transition = false
var div = $('<div id="modal-test"><span class="close" data-dismiss="modal"></span></div>')
div
$('<div id="modal-test"><span class="close" data-dismiss="modal"/></div>')
.on('shown.bs.modal', function () {
ok($('#modal-test').is(':visible'), 'modal visible')
ok($('#modal-test').length, 'modal inserted into dom')
div.find('.close').click()
notEqual($('#modal-test').length, 0, 'modal inserted into dom')
$(this).find('.close').click()
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start()
})
.bootstrapModal('toggle')
@ -130,16 +120,14 @@ $(function () {
test('should allow modal close with "backdrop:false"', function () {
stop()
$.support.transition = false
var div = $('<div>', { id: 'modal-test', 'data-backdrop': false })
div
$('<div id="modal-test" data-backdrop="false"/>')
.on('shown.bs.modal', function () {
ok($('#modal-test').is(':visible'), 'modal visible')
div.bootstrapModal('hide')
$(this).bootstrapModal('hide')
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start()
})
.bootstrapModal('show')
@ -147,18 +135,16 @@ $(function () {
test('should close modal when clicking outside of modal-content', function () {
stop()
$.support.transition = false
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 () {
ok($('#modal-test').length, 'modal insterted into dom')
notEqual($('#modal-test').length, 0, 'modal insterted into dom')
$('.contents').click()
ok($('#modal-test').is(':visible'), 'modal visible')
$('#modal-test').mousedown()
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start()
})
.bootstrapModal('show')
@ -204,19 +190,17 @@ $(function () {
test('should trigger hide event once when clicking outside of modal-content', function () {
stop()
$.support.transition = false
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 () {
triggered = 0
$('#modal-test').mousedown()
})
.on('hide.bs.modal', function () {
triggered += 1
ok(triggered === 1, 'modal hide triggered once')
strictEqual(triggered, 1, 'modal hide triggered once')
start()
})
.bootstrapModal('show')
@ -224,34 +208,31 @@ $(function () {
test('should close reopened modal with [data-dismiss="modal"] click', function () {
stop()
$.support.transition = false
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('shown.bs.modal', function () {
$('#close').click()
ok(!$('#modal-test').is(':visible'), 'modal hidden')
})
.one('hidden.bs.modal', function () {
div.one('hidden.bs.modal', function () {
start()
}).bootstrapModal('show')
$(this)
.one('hidden.bs.modal', function () {
start()
})
.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 () {
stop()
$.support.transition = false
var toggleBtn = $('<button data-toggle="modal" data-target="#modal-test">Launch modal</button>').appendTo('#qunit-fixture')
var div = $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"></div></div></div>')
div
var $toggleBtn = $('<button data-toggle="modal" data-target="#modal-test"/>').appendTo('#qunit-fixture')
$('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>')
.on('hidden.bs.modal', function () {
window.setTimeout(function () { // give the focus restoration callback a chance to run
equal(document.activeElement, toggleBtn[0], 'toggling element is once again focused')
div.remove()
toggleBtn.remove()
setTimeout(function () {
ok($(document.activeElement).is($toggleBtn), 'toggling element is once again focused')
start()
}, 0)
})
@ -259,29 +240,26 @@ $(function () {
$('#close').click()
})
.appendTo('#qunit-fixture')
toggleBtn.click()
$toggleBtn.click()
})
test('should not restore focus to toggling element if the associated show event gets prevented', function () {
stop()
$.support.transition = false
var toggleBtn = $('<button data-toggle="modal" data-target="#modal-test">Launch modal</button>').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
var $toggleBtn = $('<button data-toggle="modal" data-target="#modal-test"/>').appendTo('#qunit-fixture')
var $otherBtn = $('<button id="other-btn"/>').appendTo('#qunit-fixture')
$('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div>')
.one('show.bs.modal', function (e) {
e.preventDefault()
otherBtn.focus()
window.setTimeout(function () { // give the focus event from the previous line a chance to run
div.bootstrapModal('show')
}, 0)
$otherBtn.focus()
setTimeout($.proxy(function () {
$(this).bootstrapModal('show')
}, this), 0)
})
.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)
equal(document.activeElement, otherBtn[0], 'show was prevented, so focus should not have been restored to toggling element')
div.remove()
toggleBtn.remove()
otherBtn.remove()
setTimeout(function () {
ok($(document.activeElement).is($otherBtn), 'focus returned to toggling element')
start()
}, 0)
})
@ -289,6 +267,7 @@ $(function () {
$('#close').click()
})
.appendTo('#qunit-fixture')
toggleBtn.click()
$toggleBtn.click()
})
})