]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | $(function () { |
2 | 'use strict' | |
3 | ||
4 | QUnit.module('collapse plugin') | |
5 | ||
6 | QUnit.test('should be defined on jquery object', function (assert) { | |
7 | assert.expect(1) | |
8 | assert.ok($(document.body).collapse, 'collapse method is defined') | |
9 | }) | |
10 | ||
11 | QUnit.module('collapse', { | |
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.bootstrapCollapse = $.fn.collapse.noConflict() | |
15 | }, | |
16 | afterEach: function () { | |
17 | $.fn.collapse = $.fn.bootstrapCollapse | |
18 | delete $.fn.bootstrapCollapse | |
19 | } | |
20 | }) | |
21 | ||
22 | QUnit.test('should provide no conflict', function (assert) { | |
23 | assert.expect(1) | |
24 | assert.strictEqual($.fn.collapse, undefined, 'collapse was set back to undefined (org value)') | |
25 | }) | |
26 | ||
27 | QUnit.test('should throw explicit error on undefined method', function (assert) { | |
28 | assert.expect(1) | |
29 | var $el = $('<div/>') | |
30 | $el.bootstrapCollapse() | |
31 | try { | |
32 | $el.bootstrapCollapse('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/>') | |
42 | var $collapse = $el.bootstrapCollapse() | |
43 | assert.ok($collapse instanceof $, 'returns jquery collection') | |
44 | assert.strictEqual($collapse[0], $el[0], 'collection contains element') | |
45 | }) | |
46 | ||
47 | QUnit.test('should show a collapsed element', function (assert) { | |
48 | assert.expect(2) | |
49 | var $el = $('<div class="collapse"/>').bootstrapCollapse('show') | |
50 | ||
51 | assert.ok($el.hasClass('show'), 'has class "show"') | |
52 | assert.ok(!/height/i.test($el.attr('style')), 'has height reset') | |
53 | }) | |
54 | ||
55 | QUnit.test('should collapse only the first collapse', function (assert) { | |
56 | assert.expect(2) | |
57 | var html = [ | |
58 | '<div class="panel-group" id="accordion1">', | |
59 | '<div class="panel">', | |
60 | '<div id="collapse1" class="collapse"/>', | |
61 | '</div>', | |
62 | '</div>', | |
63 | '<div class="panel-group" id="accordion2">', | |
64 | '<div class="panel">', | |
65 | '<div id="collapse2" class="collapse show"/>', | |
66 | '</div>', | |
67 | '</div>' | |
68 | ].join('') | |
69 | $(html).appendTo('#qunit-fixture') | |
70 | var $el1 = $('#collapse1') | |
71 | var $el2 = $('#collapse2') | |
72 | $el1.bootstrapCollapse('show') | |
73 | ||
74 | assert.ok($el1.hasClass('show')) | |
75 | assert.ok($el2.hasClass('show')) | |
76 | }) | |
77 | ||
78 | QUnit.test('should hide a collapsed element', function (assert) { | |
79 | assert.expect(1) | |
80 | var $el = $('<div class="collapse"/>').bootstrapCollapse('hide') | |
81 | ||
82 | assert.ok(!$el.hasClass('show'), 'does not have class "show"') | |
83 | }) | |
84 | ||
85 | QUnit.test('should not fire shown when show is prevented', function (assert) { | |
86 | assert.expect(1) | |
87 | var done = assert.async() | |
88 | ||
89 | $('<div class="collapse"/>') | |
90 | .on('show.bs.collapse', function (e) { | |
91 | e.preventDefault() | |
92 | assert.ok(true, 'show event fired') | |
93 | done() | |
94 | }) | |
95 | .on('shown.bs.collapse', function () { | |
96 | assert.ok(false, 'shown event fired') | |
97 | }) | |
98 | .bootstrapCollapse('show') | |
99 | }) | |
100 | ||
101 | QUnit.test('should reset style to auto after finishing opening collapse', function (assert) { | |
102 | assert.expect(2) | |
103 | var done = assert.async() | |
104 | ||
105 | $('<div class="collapse" style="height: 0px"/>') | |
106 | .on('show.bs.collapse', function () { | |
107 | assert.strictEqual(this.style.height, '0px', 'height is 0px') | |
108 | }) | |
109 | .on('shown.bs.collapse', function () { | |
110 | assert.strictEqual(this.style.height, '', 'height is auto') | |
111 | done() | |
112 | }) | |
113 | .bootstrapCollapse('show') | |
114 | }) | |
115 | ||
116 | QUnit.test('should reset style to auto after finishing closing collapse', function (assert) { | |
117 | assert.expect(1) | |
118 | var done = assert.async() | |
119 | ||
120 | $('<div class="collapse"/>') | |
121 | .on('shown.bs.collapse', function () { | |
122 | $(this).bootstrapCollapse('hide') | |
123 | }) | |
124 | .on('hidden.bs.collapse', function () { | |
125 | assert.strictEqual(this.style.height, '', 'height is auto') | |
126 | done() | |
127 | }) | |
128 | .bootstrapCollapse('show') | |
129 | }) | |
130 | ||
131 | QUnit.test('should remove "collapsed" class from target when collapse is shown', function (assert) { | |
132 | assert.expect(1) | |
133 | var done = assert.async() | |
134 | ||
135 | var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture') | |
136 | ||
137 | $('<div id="test1"/>') | |
138 | .appendTo('#qunit-fixture') | |
139 | .on('shown.bs.collapse', function () { | |
140 | assert.ok(!$target.hasClass('collapsed'), 'target does not have collapsed class') | |
141 | done() | |
142 | }) | |
143 | ||
144 | $target.trigger('click') | |
145 | }) | |
146 | ||
147 | QUnit.test('should add "collapsed" class to target when collapse is hidden', function (assert) { | |
148 | assert.expect(1) | |
149 | var done = assert.async() | |
150 | ||
151 | var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture') | |
152 | ||
153 | $('<div id="test1" class="show"/>') | |
154 | .appendTo('#qunit-fixture') | |
155 | .on('hidden.bs.collapse', function () { | |
156 | assert.ok($target.hasClass('collapsed'), 'target has collapsed class') | |
157 | done() | |
158 | }) | |
159 | ||
160 | $target.trigger('click') | |
161 | }) | |
162 | ||
163 | QUnit.test('should remove "collapsed" class from all triggers targeting the collapse when the collapse is shown', function (assert) { | |
164 | assert.expect(2) | |
165 | var done = assert.async() | |
166 | ||
167 | var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture') | |
168 | var $alt = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture') | |
169 | ||
170 | $('<div id="test1"/>') | |
171 | .appendTo('#qunit-fixture') | |
172 | .on('shown.bs.collapse', function () { | |
173 | assert.ok(!$target.hasClass('collapsed'), 'target trigger does not have collapsed class') | |
174 | assert.ok(!$alt.hasClass('collapsed'), 'alt trigger does not have collapsed class') | |
175 | done() | |
176 | }) | |
177 | ||
178 | $target.trigger('click') | |
179 | }) | |
180 | ||
181 | QUnit.test('should add "collapsed" class to all triggers targeting the collapse when the collapse is hidden', function (assert) { | |
182 | assert.expect(2) | |
183 | var done = assert.async() | |
184 | ||
185 | var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture') | |
186 | var $alt = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture') | |
187 | ||
188 | $('<div id="test1" class="show"/>') | |
189 | .appendTo('#qunit-fixture') | |
190 | .on('hidden.bs.collapse', function () { | |
191 | assert.ok($target.hasClass('collapsed'), 'target has collapsed class') | |
192 | assert.ok($alt.hasClass('collapsed'), 'alt trigger has collapsed class') | |
193 | done() | |
194 | }) | |
195 | ||
196 | $target.trigger('click') | |
197 | }) | |
198 | ||
199 | QUnit.test('should not close a collapse when initialized with "show" option if already shown', function (assert) { | |
200 | assert.expect(0) | |
201 | var done = assert.async() | |
202 | ||
203 | var $test = $('<div id="test1" class="show"/>') | |
204 | .appendTo('#qunit-fixture') | |
205 | .on('hide.bs.collapse', function () { | |
206 | assert.ok(false) | |
207 | }) | |
208 | ||
209 | $test.bootstrapCollapse('show') | |
210 | ||
211 | setTimeout(done, 0) | |
212 | }) | |
213 | ||
214 | QUnit.test('should open a collapse when initialized with "show" option if not already shown', function (assert) { | |
215 | assert.expect(1) | |
216 | var done = assert.async() | |
217 | ||
218 | var $test = $('<div id="test1" />') | |
219 | .appendTo('#qunit-fixture') | |
220 | .on('show.bs.collapse', function () { | |
221 | assert.ok(true) | |
222 | }) | |
223 | ||
224 | $test.bootstrapCollapse('show') | |
225 | ||
226 | setTimeout(done, 0) | |
227 | }) | |
228 | ||
229 | QUnit.test('should not show a collapse when initialized with "hide" option if already hidden', function (assert) { | |
230 | assert.expect(0) | |
231 | var done = assert.async() | |
232 | ||
233 | $('<div class="collapse"></div>') | |
234 | .appendTo('#qunit-fixture') | |
235 | .on('show.bs.collapse', function () { | |
236 | assert.ok(false, 'showing a previously-uninitialized hidden collapse when the "hide" method is called') | |
237 | }) | |
238 | .bootstrapCollapse('hide') | |
239 | ||
240 | setTimeout(done, 0) | |
241 | }) | |
242 | ||
243 | QUnit.test('should hide a collapse when initialized with "hide" option if not already hidden', function (assert) { | |
244 | assert.expect(1) | |
245 | var done = assert.async() | |
246 | ||
247 | $('<div class="collapse show"></div>') | |
248 | .appendTo('#qunit-fixture') | |
249 | .on('hide.bs.collapse', function () { | |
250 | assert.ok(true, 'hiding a previously-uninitialized shown collapse when the "hide" method is called') | |
251 | }) | |
252 | .bootstrapCollapse('hide') | |
253 | ||
254 | setTimeout(done, 0) | |
255 | }) | |
256 | ||
257 | QUnit.test('should remove "collapsed" class from active accordion target', function (assert) { | |
258 | assert.expect(3) | |
259 | var done = assert.async() | |
260 | ||
261 | var accordionHTML = '<div id="accordion">' | |
262 | + '<div class="card"/>' | |
263 | + '<div class="card"/>' | |
264 | + '<div class="card"/>' | |
265 | + '</div>' | |
266 | var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card') | |
267 | ||
268 | var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0)) | |
269 | ||
270 | $('<div id="body1" class="show"/>').appendTo($groups.eq(0)) | |
271 | ||
272 | var $target2 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body2" data-parent="#accordion"/>').appendTo($groups.eq(1)) | |
273 | ||
274 | $('<div id="body2"/>').appendTo($groups.eq(1)) | |
275 | ||
276 | var $target3 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body3" data-parent="#accordion"/>').appendTo($groups.eq(2)) | |
277 | ||
278 | $('<div id="body3"/>') | |
279 | .appendTo($groups.eq(2)) | |
280 | .on('shown.bs.collapse', function () { | |
281 | assert.ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"') | |
282 | assert.ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"') | |
283 | assert.ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"') | |
284 | ||
285 | done() | |
286 | }) | |
287 | ||
288 | $target3.trigger('click') | |
289 | }) | |
290 | ||
291 | QUnit.test('should allow dots in data-parent', function (assert) { | |
292 | assert.expect(3) | |
293 | var done = assert.async() | |
294 | ||
295 | var accordionHTML = '<div class="accordion">' | |
296 | + '<div class="card"/>' | |
297 | + '<div class="card"/>' | |
298 | + '<div class="card"/>' | |
299 | + '</div>' | |
300 | var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card') | |
301 | ||
302 | var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent=".accordion"/>').appendTo($groups.eq(0)) | |
303 | ||
304 | $('<div id="body1" class="show"/>').appendTo($groups.eq(0)) | |
305 | ||
306 | var $target2 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body2" data-parent=".accordion"/>').appendTo($groups.eq(1)) | |
307 | ||
308 | $('<div id="body2"/>').appendTo($groups.eq(1)) | |
309 | ||
310 | var $target3 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body3" data-parent=".accordion"/>').appendTo($groups.eq(2)) | |
311 | ||
312 | $('<div id="body3"/>') | |
313 | .appendTo($groups.eq(2)) | |
314 | .on('shown.bs.collapse', function () { | |
315 | assert.ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"') | |
316 | assert.ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"') | |
317 | assert.ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"') | |
318 | ||
319 | done() | |
320 | }) | |
321 | ||
322 | $target3.trigger('click') | |
323 | }) | |
324 | ||
325 | QUnit.test('should set aria-expanded="true" on target when collapse is shown', function (assert) { | |
326 | assert.expect(1) | |
327 | var done = assert.async() | |
328 | ||
329 | var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1" aria-expanded="false"/>').appendTo('#qunit-fixture') | |
330 | ||
331 | $('<div id="test1"/>') | |
332 | .appendTo('#qunit-fixture') | |
333 | .on('shown.bs.collapse', function () { | |
334 | assert.strictEqual($target.attr('aria-expanded'), 'true', 'aria-expanded on target is "true"') | |
335 | done() | |
336 | }) | |
337 | ||
338 | $target.trigger('click') | |
339 | }) | |
340 | ||
341 | QUnit.test('should set aria-expanded="false" on target when collapse is hidden', function (assert) { | |
342 | assert.expect(1) | |
343 | var done = assert.async() | |
344 | ||
345 | var $target = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture') | |
346 | ||
347 | $('<div id="test1" class="show"/>') | |
348 | .appendTo('#qunit-fixture') | |
349 | .on('hidden.bs.collapse', function () { | |
350 | assert.strictEqual($target.attr('aria-expanded'), 'false', 'aria-expanded on target is "false"') | |
351 | done() | |
352 | }) | |
353 | ||
354 | $target.trigger('click') | |
355 | }) | |
356 | ||
357 | QUnit.test('should set aria-expanded="true" on all triggers targeting the collapse when the collapse is shown', function (assert) { | |
358 | assert.expect(2) | |
359 | var done = assert.async() | |
360 | ||
361 | var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1" aria-expanded="false"/>').appendTo('#qunit-fixture') | |
362 | var $alt = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1" aria-expanded="false"/>').appendTo('#qunit-fixture') | |
363 | ||
364 | $('<div id="test1"/>') | |
365 | .appendTo('#qunit-fixture') | |
366 | .on('shown.bs.collapse', function () { | |
367 | assert.strictEqual($target.attr('aria-expanded'), 'true', 'aria-expanded on target is "true"') | |
368 | assert.strictEqual($alt.attr('aria-expanded'), 'true', 'aria-expanded on alt is "true"') | |
369 | done() | |
370 | }) | |
371 | ||
372 | $target.trigger('click') | |
373 | }) | |
374 | ||
375 | QUnit.test('should set aria-expanded="false" on all triggers targeting the collapse when the collapse is hidden', function (assert) { | |
376 | assert.expect(2) | |
377 | var done = assert.async() | |
378 | ||
379 | var $target = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture') | |
380 | var $alt = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture') | |
381 | ||
382 | $('<div id="test1" class="show"/>') | |
383 | .appendTo('#qunit-fixture') | |
384 | .on('hidden.bs.collapse', function () { | |
385 | assert.strictEqual($target.attr('aria-expanded'), 'false', 'aria-expanded on target is "false"') | |
386 | assert.strictEqual($alt.attr('aria-expanded'), 'false', 'aria-expanded on alt is "false"') | |
387 | done() | |
388 | }) | |
389 | ||
390 | $target.trigger('click') | |
391 | }) | |
392 | ||
393 | QUnit.test('should change aria-expanded from active accordion target to "false" and set the newly active one to "true"', function (assert) { | |
394 | assert.expect(3) | |
395 | var done = assert.async() | |
396 | ||
397 | var accordionHTML = '<div id="accordion">' | |
398 | + '<div class="card"/>' | |
399 | + '<div class="card"/>' | |
400 | + '<div class="card"/>' | |
401 | + '</div>' | |
402 | var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card') | |
403 | ||
404 | var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0)) | |
405 | ||
406 | $('<div id="body1" aria-expanded="true" class="show"/>').appendTo($groups.eq(0)) | |
407 | ||
408 | var $target2 = $('<a role="button" data-toggle="collapse" href="#body2" data-parent="#accordion" class="collapsed" />').appendTo($groups.eq(1)) | |
409 | ||
410 | $('<div id="body2" aria-expanded="false"/>').appendTo($groups.eq(1)) | |
411 | ||
412 | var $target3 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body3" data-parent="#accordion"/>').appendTo($groups.eq(2)) | |
413 | ||
414 | $('<div id="body3" aria-expanded="false"/>') | |
415 | .appendTo($groups.eq(2)) | |
416 | .on('shown.bs.collapse', function () { | |
417 | assert.strictEqual($target1.attr('aria-expanded'), 'false', 'inactive target 1 has aria-expanded="false"') | |
418 | assert.strictEqual($target2.attr('aria-expanded'), 'false', 'inactive target 2 has aria-expanded="false"') | |
419 | assert.strictEqual($target3.attr('aria-expanded'), 'true', 'active target 3 has aria-expanded="false"') | |
420 | ||
421 | done() | |
422 | }) | |
423 | ||
424 | $target3.trigger('click') | |
425 | }) | |
426 | ||
427 | QUnit.test('should not fire show event if show is prevented because other element is still transitioning', function (assert) { | |
428 | assert.expect(1) | |
429 | var done = assert.async() | |
430 | ||
431 | var accordionHTML = '<div id="accordion">' | |
432 | + '<div class="card"/>' | |
433 | + '<div class="card"/>' | |
434 | + '</div>' | |
435 | var showFired = false | |
436 | var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card') | |
437 | ||
438 | var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0)) | |
439 | ||
440 | $('<div id="body1" class="collapse"/>') | |
441 | .appendTo($groups.eq(0)) | |
442 | .on('show.bs.collapse', function () { | |
443 | showFired = true | |
444 | }) | |
445 | ||
446 | var $target2 = $('<a role="button" data-toggle="collapse" href="#body2" data-parent="#accordion"/>').appendTo($groups.eq(1)) | |
447 | var $body2 = $('<div id="body2" class="collapse"/>').appendTo($groups.eq(1)) | |
448 | ||
449 | $target2.trigger('click') | |
450 | ||
451 | $body2 | |
452 | .toggleClass('show collapsing') | |
453 | .data('bs.collapse')._isTransitioning = 1 | |
454 | ||
455 | $target1.trigger('click') | |
456 | ||
457 | setTimeout(function () { | |
458 | assert.ok(!showFired, 'show event did not fire') | |
459 | done() | |
460 | }, 1) | |
461 | }) | |
462 | ||
463 | QUnit.test('should add "collapsed" class to target when collapse is hidden via manual invocation', function (assert) { | |
464 | assert.expect(1) | |
465 | var done = assert.async() | |
466 | ||
467 | var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture') | |
468 | ||
469 | $('<div id="test1" class="show"/>') | |
470 | .appendTo('#qunit-fixture') | |
471 | .on('hidden.bs.collapse', function () { | |
472 | assert.ok($target.hasClass('collapsed')) | |
473 | done() | |
474 | }) | |
475 | .bootstrapCollapse('hide') | |
476 | }) | |
477 | ||
478 | QUnit.test('should remove "collapsed" class from target when collapse is shown via manual invocation', function (assert) { | |
479 | assert.expect(1) | |
480 | var done = assert.async() | |
481 | ||
482 | var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture') | |
483 | ||
484 | $('<div id="test1"/>') | |
485 | .appendTo('#qunit-fixture') | |
486 | .on('shown.bs.collapse', function () { | |
487 | assert.ok(!$target.hasClass('collapsed')) | |
488 | done() | |
489 | }) | |
490 | .bootstrapCollapse('show') | |
491 | }) | |
492 | ||
493 | }) |