1 $(function () { |
|
2 |
|
3 module("dropdowns") |
|
4 |
|
5 test("should provide no conflict", function () { |
|
6 var dropdown = $.fn.dropdown.noConflict() |
|
7 ok(!$.fn.dropdown, 'dropdown was set back to undefined (org value)') |
|
8 $.fn.dropdown = dropdown |
|
9 }) |
|
10 |
|
11 test("should be defined on jquery object", function () { |
|
12 ok($(document.body).dropdown, 'dropdown method is defined') |
|
13 }) |
|
14 |
|
15 test("should return element", function () { |
|
16 var el = $("<div />") |
|
17 ok(el.dropdown()[0] === el[0], 'same element returned') |
|
18 }) |
|
19 |
|
20 test("should not open dropdown if target is disabled", function () { |
|
21 var dropdownHTML = '<ul class="tabs">' |
|
22 + '<li class="dropdown">' |
|
23 + '<button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>' |
|
24 + '<ul class="dropdown-menu">' |
|
25 + '<li><a href="#">Secondary link</a></li>' |
|
26 + '<li><a href="#">Something else here</a></li>' |
|
27 + '<li class="divider"></li>' |
|
28 + '<li><a href="#">Another link</a></li>' |
|
29 + '</ul>' |
|
30 + '</li>' |
|
31 + '</ul>' |
|
32 , dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click() |
|
33 |
|
34 ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class added on click') |
|
35 }) |
|
36 |
|
37 test("should not open dropdown if target is disabled", function () { |
|
38 var dropdownHTML = '<ul class="tabs">' |
|
39 + '<li class="dropdown">' |
|
40 + '<button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>' |
|
41 + '<ul class="dropdown-menu">' |
|
42 + '<li><a href="#">Secondary link</a></li>' |
|
43 + '<li><a href="#">Something else here</a></li>' |
|
44 + '<li class="divider"></li>' |
|
45 + '<li><a href="#">Another link</a></li>' |
|
46 + '</ul>' |
|
47 + '</li>' |
|
48 + '</ul>' |
|
49 , dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click() |
|
50 |
|
51 ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class added on click') |
|
52 }) |
|
53 |
|
54 test("should add class open to menu if clicked", function () { |
|
55 var dropdownHTML = '<ul class="tabs">' |
|
56 + '<li class="dropdown">' |
|
57 + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' |
|
58 + '<ul class="dropdown-menu">' |
|
59 + '<li><a href="#">Secondary link</a></li>' |
|
60 + '<li><a href="#">Something else here</a></li>' |
|
61 + '<li class="divider"></li>' |
|
62 + '<li><a href="#">Another link</a></li>' |
|
63 + '</ul>' |
|
64 + '</li>' |
|
65 + '</ul>' |
|
66 , dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click() |
|
67 |
|
68 ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click') |
|
69 }) |
|
70 |
|
71 test("should test if element has a # before assuming it's a selector", function () { |
|
72 var dropdownHTML = '<ul class="tabs">' |
|
73 + '<li class="dropdown">' |
|
74 + '<a href="/foo/" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' |
|
75 + '<ul class="dropdown-menu">' |
|
76 + '<li><a href="#">Secondary link</a></li>' |
|
77 + '<li><a href="#">Something else here</a></li>' |
|
78 + '<li class="divider"></li>' |
|
79 + '<li><a href="#">Another link</a></li>' |
|
80 + '</ul>' |
|
81 + '</li>' |
|
82 + '</ul>' |
|
83 , dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click() |
|
84 |
|
85 ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click') |
|
86 }) |
|
87 |
|
88 |
|
89 test("should remove open class if body clicked", function () { |
|
90 var dropdownHTML = '<ul class="tabs">' |
|
91 + '<li class="dropdown">' |
|
92 + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' |
|
93 + '<ul class="dropdown-menu">' |
|
94 + '<li><a href="#">Secondary link</a></li>' |
|
95 + '<li><a href="#">Something else here</a></li>' |
|
96 + '<li class="divider"></li>' |
|
97 + '<li><a href="#">Another link</a></li>' |
|
98 + '</ul>' |
|
99 + '</li>' |
|
100 + '</ul>' |
|
101 , dropdown = $(dropdownHTML) |
|
102 .appendTo('#qunit-fixture') |
|
103 .find('[data-toggle="dropdown"]') |
|
104 .dropdown() |
|
105 .click() |
|
106 |
|
107 ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click') |
|
108 $('body').click() |
|
109 ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class removed') |
|
110 dropdown.remove() |
|
111 }) |
|
112 |
|
113 test("should remove open class if body clicked, with multiple drop downs", function () { |
|
114 var dropdownHTML = |
|
115 '<ul class="nav">' |
|
116 + ' <li><a href="#menu1">Menu 1</a></li>' |
|
117 + ' <li class="dropdown" id="testmenu">' |
|
118 + ' <a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <b class="caret"></b></a>' |
|
119 + ' <ul class="dropdown-menu" role="menu">' |
|
120 + ' <li><a href="#sub1">Submenu 1</a></li>' |
|
121 + ' </ul>' |
|
122 + ' </li>' |
|
123 + '</ul>' |
|
124 + '<div class="btn-group">' |
|
125 + ' <button class="btn">Actions</button>' |
|
126 + ' <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>' |
|
127 + ' <ul class="dropdown-menu">' |
|
128 + ' <li><a href="#">Action 1</a></li>' |
|
129 + ' </ul>' |
|
130 + '</div>' |
|
131 , dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]') |
|
132 , first = dropdowns.first() |
|
133 , last = dropdowns.last() |
|
134 |
|
135 ok(dropdowns.length == 2, "Should be two dropdowns") |
|
136 |
|
137 first.click() |
|
138 ok(first.parents('.open').length == 1, 'open class added on click') |
|
139 ok($('#qunit-fixture .open').length == 1, 'only one object is open') |
|
140 $('body').click() |
|
141 ok($("#qunit-fixture .open").length === 0, 'open class removed') |
|
142 |
|
143 last.click() |
|
144 ok(last.parent('.open').length == 1, 'open class added on click') |
|
145 ok($('#qunit-fixture .open').length == 1, 'only one object is open') |
|
146 $('body').click() |
|
147 ok($("#qunit-fixture .open").length === 0, 'open class removed') |
|
148 |
|
149 $("#qunit-fixture").html("") |
|
150 }) |
|
151 |
|
152 test("should fire show and hide event", function () { |
|
153 var dropdownHTML = '<ul class="tabs">' |
|
154 + '<li class="dropdown">' |
|
155 + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' |
|
156 + '<ul class="dropdown-menu">' |
|
157 + '<li><a href="#">Secondary link</a></li>' |
|
158 + '<li><a href="#">Something else here</a></li>' |
|
159 + '<li class="divider"></li>' |
|
160 + '<li><a href="#">Another link</a></li>' |
|
161 + '</ul>' |
|
162 + '</li>' |
|
163 + '</ul>' |
|
164 , dropdown = $(dropdownHTML) |
|
165 .appendTo('#qunit-fixture') |
|
166 .find('[data-toggle="dropdown"]') |
|
167 .dropdown() |
|
168 |
|
169 stop() |
|
170 |
|
171 dropdown |
|
172 .parent('.dropdown') |
|
173 .bind('show.bs.dropdown', function () { |
|
174 ok(true, 'show was called') |
|
175 }) |
|
176 .bind('hide.bs.dropdown', function () { |
|
177 ok(true, 'hide was called') |
|
178 start() |
|
179 }) |
|
180 |
|
181 dropdown.click() |
|
182 $(document.body).click() |
|
183 }) |
|
184 |
|
185 |
|
186 test("should fire shown and hiden event", function () { |
|
187 var dropdownHTML = '<ul class="tabs">' |
|
188 + '<li class="dropdown">' |
|
189 + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' |
|
190 + '<ul class="dropdown-menu">' |
|
191 + '<li><a href="#">Secondary link</a></li>' |
|
192 + '<li><a href="#">Something else here</a></li>' |
|
193 + '<li class="divider"></li>' |
|
194 + '<li><a href="#">Another link</a></li>' |
|
195 + '</ul>' |
|
196 + '</li>' |
|
197 + '</ul>' |
|
198 , dropdown = $(dropdownHTML) |
|
199 .appendTo('#qunit-fixture') |
|
200 .find('[data-toggle="dropdown"]') |
|
201 .dropdown() |
|
202 |
|
203 stop() |
|
204 |
|
205 dropdown |
|
206 .parent('.dropdown') |
|
207 .bind('shown.bs.dropdown', function () { |
|
208 ok(true, 'show was called') |
|
209 }) |
|
210 .bind('hidden.bs.dropdown', function () { |
|
211 ok(true, 'hide was called') |
|
212 start() |
|
213 }) |
|
214 |
|
215 dropdown.click() |
|
216 $(document.body).click() |
|
217 }) |
|
218 |
|
219 }) |
|