]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | $(function () { |
2 | 'use strict' | |
3 | ||
4 | QUnit.module('modal plugin') | |
5 | ||
6 | QUnit.test('should be defined on jquery object', function (assert) { | |
7 | assert.expect(1) | |
8 | assert.ok($(document.body).modal, 'modal method is defined') | |
9 | }) | |
10 | ||
11 | QUnit.module('modal', { | |
12 | beforeEach: function () { | |
13 | // Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode | |
14 | $.fn.bootstrapModal = $.fn.modal.noConflict() | |
15 | }, | |
16 | afterEach: function () { | |
17 | $.fn.modal = $.fn.bootstrapModal | |
18 | delete $.fn.bootstrapModal | |
19 | } | |
20 | }) | |
21 | ||
22 | QUnit.test('should provide no conflict', function (assert) { | |
23 | assert.expect(1) | |
24 | assert.strictEqual($.fn.modal, undefined, 'modal was set back to undefined (orig value)') | |
25 | }) | |
26 | ||
27 | QUnit.test('should throw explicit error on undefined method', function (assert) { | |
28 | assert.expect(1) | |
29 | var $el = $('<div id="modal-test"/>') | |
30 | $el.bootstrapModal() | |
31 | try { | |
32 | $el.bootstrapModal('noMethod') | |
33 | } | |
34 | catch (err) { | |
35 | assert.strictEqual(err.message, 'No method named "noMethod"') | |
36 | } | |
37 | }) | |
38 | ||
39 | QUnit.test('should return jquery collection containing the element', function (assert) { | |
40 | assert.expect(2) | |
41 | var $el = $('<div id="modal-test"/>') | |
42 | var $modal = $el.bootstrapModal() | |
43 | assert.ok($modal instanceof $, 'returns jquery collection') | |
44 | assert.strictEqual($modal[0], $el[0], 'collection contains element') | |
45 | }) | |
46 | ||
47 | QUnit.test('should expose defaults var for settings', function (assert) { | |
48 | assert.expect(1) | |
49 | assert.ok($.fn.bootstrapModal.Constructor.Default, 'default object exposed') | |
50 | }) | |
51 | ||
52 | QUnit.test('should insert into dom when show method is called', function (assert) { | |
53 | assert.expect(1) | |
54 | var done = assert.async() | |
55 | ||
56 | $('<div id="modal-test"/>') | |
57 | .on('shown.bs.modal', function () { | |
58 | assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom') | |
59 | done() | |
60 | }) | |
61 | .bootstrapModal('show') | |
62 | }) | |
63 | ||
64 | QUnit.test('should fire show event', function (assert) { | |
65 | assert.expect(1) | |
66 | var done = assert.async() | |
67 | ||
68 | $('<div id="modal-test"/>') | |
69 | .on('show.bs.modal', function () { | |
70 | assert.ok(true, 'show event fired') | |
71 | done() | |
72 | }) | |
73 | .bootstrapModal('show') | |
74 | }) | |
75 | ||
76 | QUnit.test('should not fire shown when show was prevented', function (assert) { | |
77 | assert.expect(1) | |
78 | var done = assert.async() | |
79 | ||
80 | $('<div id="modal-test"/>') | |
81 | .on('show.bs.modal', function (e) { | |
82 | e.preventDefault() | |
83 | assert.ok(true, 'show event fired') | |
84 | done() | |
85 | }) | |
86 | .on('shown.bs.modal', function () { | |
87 | assert.ok(false, 'shown event fired') | |
88 | }) | |
89 | .bootstrapModal('show') | |
90 | }) | |
91 | ||
92 | QUnit.test('should hide modal when hide is called', function (assert) { | |
93 | assert.expect(3) | |
94 | var done = assert.async() | |
95 | ||
96 | $('<div id="modal-test"/>') | |
97 | .on('shown.bs.modal', function () { | |
98 | assert.ok($('#modal-test').is(':visible'), 'modal visible') | |
99 | assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom') | |
100 | $(this).bootstrapModal('hide') | |
101 | }) | |
102 | .on('hidden.bs.modal', function () { | |
103 | assert.ok(!$('#modal-test').is(':visible'), 'modal hidden') | |
104 | done() | |
105 | }) | |
106 | .bootstrapModal('show') | |
107 | }) | |
108 | ||
109 | QUnit.test('should toggle when toggle is called', function (assert) { | |
110 | assert.expect(3) | |
111 | var done = assert.async() | |
112 | ||
113 | $('<div id="modal-test"/>') | |
114 | .on('shown.bs.modal', function () { | |
115 | assert.ok($('#modal-test').is(':visible'), 'modal visible') | |
116 | assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom') | |
117 | $(this).bootstrapModal('toggle') | |
118 | }) | |
119 | .on('hidden.bs.modal', function () { | |
120 | assert.ok(!$('#modal-test').is(':visible'), 'modal hidden') | |
121 | done() | |
122 | }) | |
123 | .bootstrapModal('toggle') | |
124 | }) | |
125 | ||
126 | QUnit.test('should remove from dom when click [data-dismiss="modal"]', function (assert) { | |
127 | assert.expect(3) | |
128 | var done = assert.async() | |
129 | ||
130 | $('<div id="modal-test"><span class="close" data-dismiss="modal"/></div>') | |
131 | .on('shown.bs.modal', function () { | |
132 | assert.ok($('#modal-test').is(':visible'), 'modal visible') | |
133 | assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom') | |
134 | $(this).find('.close').trigger('click') | |
135 | }) | |
136 | .on('hidden.bs.modal', function () { | |
137 | assert.ok(!$('#modal-test').is(':visible'), 'modal hidden') | |
138 | done() | |
139 | }) | |
140 | .bootstrapModal('toggle') | |
141 | }) | |
142 | ||
143 | QUnit.test('should allow modal close with "backdrop:false"', function (assert) { | |
144 | assert.expect(2) | |
145 | var done = assert.async() | |
146 | ||
147 | $('<div id="modal-test" data-backdrop="false"/>') | |
148 | .on('shown.bs.modal', function () { | |
149 | assert.ok($('#modal-test').is(':visible'), 'modal visible') | |
150 | $(this).bootstrapModal('hide') | |
151 | }) | |
152 | .on('hidden.bs.modal', function () { | |
153 | assert.ok(!$('#modal-test').is(':visible'), 'modal hidden') | |
154 | done() | |
155 | }) | |
156 | .bootstrapModal('show') | |
157 | }) | |
158 | ||
159 | QUnit.test('should close modal when clicking outside of modal-content', function (assert) { | |
160 | assert.expect(3) | |
161 | var done = assert.async() | |
162 | ||
163 | $('<div id="modal-test"><div class="contents"/></div>') | |
164 | .on('shown.bs.modal', function () { | |
165 | assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom') | |
166 | $('.contents').trigger('click') | |
167 | assert.ok($('#modal-test').is(':visible'), 'modal visible') | |
168 | $('#modal-test').trigger('click') | |
169 | }) | |
170 | .on('hidden.bs.modal', function () { | |
171 | assert.ok(!$('#modal-test').is(':visible'), 'modal hidden') | |
172 | done() | |
173 | }) | |
174 | .bootstrapModal('show') | |
175 | }) | |
176 | ||
177 | QUnit.test('should not close modal when clicking outside of modal-content if data-backdrop="true"', function (assert) { | |
178 | assert.expect(1) | |
179 | var done = assert.async() | |
180 | ||
181 | $('<div id="modal-test" data-backdrop="false"><div class="contents"/></div>') | |
182 | .on('shown.bs.modal', function () { | |
183 | $('#modal-test').trigger('click') | |
184 | assert.ok($('#modal-test').is(':visible'), 'modal not hidden') | |
185 | done() | |
186 | }) | |
187 | .bootstrapModal('show') | |
188 | }) | |
189 | ||
190 | QUnit.test('should close modal when escape key is pressed via keydown', function (assert) { | |
191 | assert.expect(3) | |
192 | var done = assert.async() | |
193 | ||
194 | var $div = $('<div id="modal-test"/>') | |
195 | $div | |
196 | .on('shown.bs.modal', function () { | |
197 | assert.ok($('#modal-test').length, 'modal inserted into dom') | |
198 | assert.ok($('#modal-test').is(':visible'), 'modal visible') | |
199 | $div.trigger($.Event('keydown', { which: 27 })) | |
200 | ||
201 | setTimeout(function () { | |
202 | assert.ok(!$('#modal-test').is(':visible'), 'modal hidden') | |
203 | $div.remove() | |
204 | done() | |
205 | }, 0) | |
206 | }) | |
207 | .bootstrapModal('show') | |
208 | }) | |
209 | ||
210 | QUnit.test('should not close modal when escape key is pressed via keyup', function (assert) { | |
211 | assert.expect(3) | |
212 | var done = assert.async() | |
213 | ||
214 | var $div = $('<div id="modal-test"/>') | |
215 | $div | |
216 | .on('shown.bs.modal', function () { | |
217 | assert.ok($('#modal-test').length, 'modal inserted into dom') | |
218 | assert.ok($('#modal-test').is(':visible'), 'modal visible') | |
219 | $div.trigger($.Event('keyup', { which: 27 })) | |
220 | ||
221 | setTimeout(function () { | |
222 | assert.ok($div.is(':visible'), 'modal still visible') | |
223 | $div.remove() | |
224 | done() | |
225 | }, 0) | |
226 | }) | |
227 | .bootstrapModal('show') | |
228 | }) | |
229 | ||
230 | QUnit.test('should trigger hide event once when clicking outside of modal-content', function (assert) { | |
231 | assert.expect(1) | |
232 | var done = assert.async() | |
233 | ||
234 | var triggered | |
235 | ||
236 | $('<div id="modal-test"><div class="contents"/></div>') | |
237 | .on('shown.bs.modal', function () { | |
238 | triggered = 0 | |
239 | $('#modal-test').trigger('click') | |
240 | }) | |
241 | .on('hide.bs.modal', function () { | |
242 | triggered += 1 | |
243 | assert.strictEqual(triggered, 1, 'modal hide triggered once') | |
244 | done() | |
245 | }) | |
246 | .bootstrapModal('show') | |
247 | }) | |
248 | ||
249 | QUnit.test('should remove aria-hidden attribute when shown, add it back when hidden', function (assert) { | |
250 | assert.expect(3) | |
251 | var done = assert.async() | |
252 | ||
253 | $('<div id="modal-test" aria-hidden="true"/>') | |
254 | .on('shown.bs.modal', function () { | |
255 | assert.notOk($('#modal-test').is('[aria-hidden]'), 'aria-hidden attribute removed') | |
256 | $(this).bootstrapModal('hide') | |
257 | }) | |
258 | .on('hidden.bs.modal', function () { | |
259 | assert.ok($('#modal-test').is('[aria-hidden]'), 'aria-hidden attribute added') | |
260 | assert.strictEqual($('#modal-test').attr('aria-hidden'), 'true', 'correct aria-hidden="true" added') | |
261 | done() | |
262 | }) | |
263 | .bootstrapModal('show') | |
264 | }) | |
265 | ||
266 | QUnit.test('should close reopened modal with [data-dismiss="modal"] click', function (assert) { | |
267 | assert.expect(2) | |
268 | var done = assert.async() | |
269 | ||
270 | $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>') | |
271 | .one('shown.bs.modal', function () { | |
272 | $('#close').trigger('click') | |
273 | }) | |
274 | .one('hidden.bs.modal', function () { | |
275 | // after one open-close cycle | |
276 | assert.ok(!$('#modal-test').is(':visible'), 'modal hidden') | |
277 | $(this) | |
278 | .one('shown.bs.modal', function () { | |
279 | $('#close').trigger('click') | |
280 | }) | |
281 | .one('hidden.bs.modal', function () { | |
282 | assert.ok(!$('#modal-test').is(':visible'), 'modal hidden') | |
283 | done() | |
284 | }) | |
285 | .bootstrapModal('show') | |
286 | }) | |
287 | .bootstrapModal('show') | |
288 | }) | |
289 | ||
290 | QUnit.test('should restore focus to toggling element when modal is hidden after having been opened via data-api', function (assert) { | |
291 | assert.expect(1) | |
292 | var done = assert.async() | |
293 | ||
294 | var $toggleBtn = $('<button data-toggle="modal" data-target="#modal-test"/>').appendTo('#qunit-fixture') | |
295 | ||
296 | $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>') | |
297 | .on('hidden.bs.modal', function () { | |
298 | setTimeout(function () { | |
299 | assert.ok($(document.activeElement).is($toggleBtn), 'toggling element is once again focused') | |
300 | done() | |
301 | }, 0) | |
302 | }) | |
303 | .on('shown.bs.modal', function () { | |
304 | $('#close').trigger('click') | |
305 | }) | |
306 | .appendTo('#qunit-fixture') | |
307 | ||
308 | $toggleBtn.trigger('click') | |
309 | }) | |
310 | ||
311 | QUnit.test('should not restore focus to toggling element if the associated show event gets prevented', function (assert) { | |
312 | assert.expect(1) | |
313 | var done = assert.async() | |
314 | var $toggleBtn = $('<button data-toggle="modal" data-target="#modal-test"/>').appendTo('#qunit-fixture') | |
315 | var $otherBtn = $('<button id="other-btn"/>').appendTo('#qunit-fixture') | |
316 | ||
317 | $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div>') | |
318 | .one('show.bs.modal', function (e) { | |
319 | e.preventDefault() | |
320 | $otherBtn.trigger('focus') | |
321 | setTimeout($.proxy(function () { | |
322 | $(this).bootstrapModal('show') | |
323 | }, this), 0) | |
324 | }) | |
325 | .on('hidden.bs.modal', function () { | |
326 | setTimeout(function () { | |
327 | assert.ok($(document.activeElement).is($otherBtn), 'focus returned to toggling element') | |
328 | done() | |
329 | }, 0) | |
330 | }) | |
331 | .on('shown.bs.modal', function () { | |
332 | $('#close').trigger('click') | |
333 | }) | |
334 | .appendTo('#qunit-fixture') | |
335 | ||
336 | $toggleBtn.trigger('click') | |
337 | }) | |
338 | ||
339 | QUnit.test('should restore inline body padding after closing', function (assert) { | |
340 | assert.expect(2) | |
341 | var done = assert.async() | |
342 | var originalBodyPad = 0 | |
343 | var $body = $(document.body) | |
344 | ||
345 | $body.css('padding-right', originalBodyPad) | |
346 | ||
347 | $('<div id="modal-test"/>') | |
348 | .on('hidden.bs.modal', function () { | |
349 | var currentBodyPad = parseInt($body.css('padding-right'), 10) | |
350 | assert.notStrictEqual($body.attr('style'), '', 'body has non-empty style attribute') | |
351 | assert.strictEqual(currentBodyPad, originalBodyPad, 'original body padding was not changed') | |
352 | $body.removeAttr('style') | |
353 | done() | |
354 | }) | |
355 | .on('shown.bs.modal', function () { | |
356 | $(this).bootstrapModal('hide') | |
357 | }) | |
358 | .bootstrapModal('show') | |
359 | }) | |
360 | ||
361 | QUnit.test('should ignore values set via CSS when trying to restore body padding after closing', function (assert) { | |
362 | assert.expect(1) | |
363 | var done = assert.async() | |
364 | var $body = $(document.body) | |
365 | var $style = $('<style>body { padding-right: 42px; }</style>').appendTo('head') | |
366 | ||
367 | $('<div id="modal-test"/>') | |
368 | .on('hidden.bs.modal', function () { | |
369 | assert.ok(!$body.attr('style'), 'body does not have inline padding set') | |
370 | $style.remove() | |
371 | done() | |
372 | }) | |
373 | .on('shown.bs.modal', function () { | |
374 | $(this).bootstrapModal('hide') | |
375 | }) | |
376 | .bootstrapModal('show') | |
377 | }) | |
378 | ||
379 | QUnit.test('should have a paddingRight when the modal is taller than the viewport', function (assert) { | |
380 | assert.expect(2) | |
381 | var done = assert.async() | |
382 | $('<div class="fixed-top fixed-bottom sticky-top is-fixed">@Johann-S</div>').appendTo('#qunit-fixture') | |
383 | $('.fixed-top, .fixed-bottom, .is-fixed, .sticky-top').css('padding-right', '10px') | |
384 | ||
385 | $('<div id="modal-test"/>') | |
386 | .on('shown.bs.modal', function () { | |
387 | var paddingRight = parseInt($(document.body).css('padding-right'), 10) | |
388 | assert.strictEqual(isNaN(paddingRight), false) | |
389 | assert.strictEqual(paddingRight !== 0, true) | |
390 | $(document.body).css('padding-right', '') // Because test case "should ignore other inline styles when trying to restore body padding after closing" fail if not | |
391 | done() | |
392 | }) | |
393 | .bootstrapModal('show') | |
394 | }) | |
395 | ||
396 | QUnit.test('should remove padding-right on modal after closing', function (assert) { | |
397 | assert.expect(3) | |
398 | var done = assert.async() | |
399 | $('<div class="fixed-top fixed-bottom is-fixed sticky-top">@Johann-S</div>').appendTo('#qunit-fixture') | |
400 | $('.fixed-top, .fixed-bottom, .is-fixed, .sticky-top').css('padding-right', '10px') | |
401 | ||
402 | $('<div id="modal-test"/>') | |
403 | .on('shown.bs.modal', function () { | |
404 | var paddingRight = parseInt($(document.body).css('padding-right'), 10) | |
405 | assert.strictEqual(isNaN(paddingRight), false) | |
406 | assert.strictEqual(paddingRight !== 0, true) | |
407 | $(this).bootstrapModal('hide') | |
408 | }) | |
409 | .on('hidden.bs.modal', function () { | |
410 | var paddingRight = parseInt($(document.body).css('padding-right'), 10) | |
411 | assert.strictEqual(paddingRight, 0) | |
412 | done() | |
413 | }) | |
414 | .bootstrapModal('show') | |
415 | }) | |
416 | ||
417 | QUnit.test('should ignore other inline styles when trying to restore body padding after closing', function (assert) { | |
418 | assert.expect(2) | |
419 | var done = assert.async() | |
420 | var $body = $(document.body) | |
421 | var $style = $('<style>body { padding-right: 42px; }</style>').appendTo('head') | |
422 | ||
423 | $body.css('color', 'red') | |
424 | ||
425 | $('<div id="modal-test"/>') | |
426 | .on('hidden.bs.modal', function () { | |
427 | assert.strictEqual($body[0].style.paddingRight, '', 'body does not have inline padding set') | |
428 | assert.strictEqual($body[0].style.color, 'red', 'body still has other inline styles set') | |
429 | $body.removeAttr('style') | |
430 | $style.remove() | |
431 | done() | |
432 | }) | |
433 | .on('shown.bs.modal', function () { | |
434 | $(this).bootstrapModal('hide') | |
435 | }) | |
436 | .bootstrapModal('show') | |
437 | }) | |
438 | ||
439 | QUnit.test('should properly restore non-pixel inline body padding after closing', function (assert) { | |
440 | assert.expect(1) | |
441 | var done = assert.async() | |
442 | var $body = $(document.body) | |
443 | ||
444 | $body.css('padding-right', '5%') | |
445 | ||
446 | $('<div id="modal-test"/>') | |
447 | .on('hidden.bs.modal', function () { | |
448 | assert.strictEqual($body[0].style.paddingRight, '5%', 'body does not have inline padding set') | |
449 | $body.removeAttr('style') | |
450 | done() | |
451 | }) | |
452 | .on('shown.bs.modal', function () { | |
453 | $(this).bootstrapModal('hide') | |
454 | }) | |
455 | .bootstrapModal('show') | |
456 | }) | |
457 | ||
458 | QUnit.test('should not follow link in area tag', function (assert) { | |
459 | assert.expect(2) | |
460 | var done = assert.async() | |
461 | ||
462 | $('<map><area id="test" shape="default" data-toggle="modal" data-target="#modal-test" href="demo.html"/></map>') | |
463 | .appendTo('#qunit-fixture') | |
464 | ||
465 | $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>') | |
466 | .appendTo('#qunit-fixture') | |
467 | ||
468 | $('#test') | |
469 | .on('click.bs.modal.data-api', function (event) { | |
470 | assert.notOk(event.isDefaultPrevented(), 'navigating to href will happen') | |
471 | ||
472 | setTimeout(function () { | |
473 | assert.ok(event.isDefaultPrevented(), 'model shown instead of navigating to href') | |
474 | done() | |
475 | }, 1) | |
476 | }) | |
477 | .trigger('click') | |
478 | }) | |
479 | }) |