1 $(function () { |
|
2 |
|
3 module("collapse") |
|
4 |
|
5 test("should provide no conflict", function () { |
|
6 var collapse = $.fn.collapse.noConflict() |
|
7 ok(!$.fn.collapse, 'collapse was set back to undefined (org value)') |
|
8 $.fn.collapse = collapse |
|
9 }) |
|
10 |
|
11 test("should be defined on jquery object", function () { |
|
12 ok($(document.body).collapse, 'collapse method is defined') |
|
13 }) |
|
14 |
|
15 test("should return element", function () { |
|
16 ok($(document.body).collapse()[0] == document.body, 'document.body returned') |
|
17 }) |
|
18 |
|
19 test("should show a collapsed element", function () { |
|
20 var el = $('<div class="collapse"></div>').collapse('show') |
|
21 ok(el.hasClass('in'), 'has class in') |
|
22 ok(/height/.test(el.attr('style')), 'has height set') |
|
23 }) |
|
24 |
|
25 test("should hide a collapsed element", function () { |
|
26 var el = $('<div class="collapse"></div>').collapse('hide') |
|
27 ok(!el.hasClass('in'), 'does not have class in') |
|
28 ok(/height/.test(el.attr('style')), 'has height set') |
|
29 }) |
|
30 |
|
31 test("should not fire shown when show is prevented", function () { |
|
32 $.support.transition = false |
|
33 stop() |
|
34 $('<div class="collapse"/>') |
|
35 .on('show.bs.collapse', function (e) { |
|
36 e.preventDefault(); |
|
37 ok(true); |
|
38 start(); |
|
39 }) |
|
40 .on('shown.bs.collapse', function () { |
|
41 ok(false); |
|
42 }) |
|
43 .collapse('show') |
|
44 }) |
|
45 |
|
46 test("should reset style to auto after finishing opening collapse", function () { |
|
47 $.support.transition = false |
|
48 stop() |
|
49 $('<div class="collapse" style="height: 0px"/>') |
|
50 .on('show.bs.collapse', function () { |
|
51 ok(this.style.height == '0px') |
|
52 }) |
|
53 .on('shown.bs.collapse', function () { |
|
54 ok(this.style.height == 'auto') |
|
55 start() |
|
56 }) |
|
57 .collapse('show') |
|
58 }) |
|
59 |
|
60 test("should add active class to target when collapse shown", function () { |
|
61 $.support.transition = false |
|
62 stop() |
|
63 |
|
64 var target = $('<a data-toggle="collapse" href="#test1"></a>') |
|
65 .appendTo($('#qunit-fixture')) |
|
66 |
|
67 var collapsible = $('<div id="test1"></div>') |
|
68 .appendTo($('#qunit-fixture')) |
|
69 .on('show.bs.collapse', function () { |
|
70 ok(!target.hasClass('collapsed')) |
|
71 start() |
|
72 }) |
|
73 |
|
74 target.click() |
|
75 }) |
|
76 |
|
77 test("should remove active class to target when collapse hidden", function () { |
|
78 $.support.transition = false |
|
79 stop() |
|
80 |
|
81 var target = $('<a data-toggle="collapse" href="#test1"></a>') |
|
82 .appendTo($('#qunit-fixture')) |
|
83 |
|
84 var collapsible = $('<div id="test1" class="in"></div>') |
|
85 .appendTo($('#qunit-fixture')) |
|
86 .on('hide.bs.collapse', function () { |
|
87 ok(target.hasClass('collapsed')) |
|
88 start() |
|
89 }) |
|
90 |
|
91 target.click() |
|
92 }) |
|
93 |
|
94 test("should remove active class from inactive accordion targets", function () { |
|
95 $.support.transition = false |
|
96 stop() |
|
97 |
|
98 var accordion = $('<div id="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>') |
|
99 .appendTo($('#qunit-fixture')) |
|
100 |
|
101 var target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"></a>') |
|
102 .appendTo(accordion.find('.accordion-group').eq(0)) |
|
103 |
|
104 var collapsible1 = $('<div id="body1" class="in"></div>') |
|
105 .appendTo(accordion.find('.accordion-group').eq(0)) |
|
106 |
|
107 var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent="#accordion"></a>') |
|
108 .appendTo(accordion.find('.accordion-group').eq(1)) |
|
109 |
|
110 var collapsible2 = $('<div id="body2"></div>') |
|
111 .appendTo(accordion.find('.accordion-group').eq(1)) |
|
112 |
|
113 var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent="#accordion"></a>') |
|
114 .appendTo(accordion.find('.accordion-group').eq(2)) |
|
115 |
|
116 var collapsible3 = $('<div id="body3"></div>') |
|
117 .appendTo(accordion.find('.accordion-group').eq(2)) |
|
118 .on('show.bs.collapse', function () { |
|
119 ok(target1.hasClass('collapsed')) |
|
120 ok(target2.hasClass('collapsed')) |
|
121 ok(!target3.hasClass('collapsed')) |
|
122 |
|
123 start() |
|
124 }) |
|
125 |
|
126 target3.click() |
|
127 }) |
|
128 |
|
129 test("should allow dots in data-parent", function () { |
|
130 $.support.transition = false |
|
131 stop() |
|
132 |
|
133 var accordion = $('<div class="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>') |
|
134 .appendTo($('#qunit-fixture')) |
|
135 |
|
136 var target1 = $('<a data-toggle="collapse" href="#body1" data-parent=".accordion"></a>') |
|
137 .appendTo(accordion.find('.accordion-group').eq(0)) |
|
138 |
|
139 var collapsible1 = $('<div id="body1" class="in"></div>') |
|
140 .appendTo(accordion.find('.accordion-group').eq(0)) |
|
141 |
|
142 var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent=".accordion"></a>') |
|
143 .appendTo(accordion.find('.accordion-group').eq(1)) |
|
144 |
|
145 var collapsible2 = $('<div id="body2"></div>') |
|
146 .appendTo(accordion.find('.accordion-group').eq(1)) |
|
147 |
|
148 var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent=".accordion"></a>') |
|
149 .appendTo(accordion.find('.accordion-group').eq(2)) |
|
150 |
|
151 var collapsible3 = $('<div id="body3"></div>') |
|
152 .appendTo(accordion.find('.accordion-group').eq(2)) |
|
153 .on('show.bs.collapse', function () { |
|
154 ok(target1.hasClass('collapsed')) |
|
155 ok(target2.hasClass('collapsed')) |
|
156 ok(!target3.hasClass('collapsed')) |
|
157 |
|
158 start() |
|
159 }) |
|
160 |
|
161 target3.click() |
|
162 }) |
|
163 |
|
164 }) |
|