corrade-http-templates – Blame information for rev 62
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
62 | office | 1 | define( [ |
2 | "qunit", |
||
3 | "jquery", |
||
4 | "./helper", |
||
5 | "ui/widgets/tabs" |
||
6 | ], function( QUnit, $, testHelper ) { |
||
7 | |||
8 | var disabled = testHelper.disabled, |
||
9 | state = testHelper.state; |
||
10 | |||
11 | QUnit.module( "tabs: methods" ); |
||
12 | |||
13 | QUnit.test( "destroy", function( assert ) { |
||
14 | assert.expect( 2 ); |
||
15 | assert.domEqual( "#tabs1", function() { |
||
16 | $( "#tabs1" ).tabs().tabs( "destroy" ); |
||
17 | } ); |
||
18 | assert.domEqual( "#tabs2", function() { |
||
19 | $( "#tabs2" ).tabs().tabs( "destroy" ); |
||
20 | } ); |
||
21 | } ); |
||
22 | |||
23 | QUnit.test( "destroy - ajax", function( assert ) { |
||
24 | var ready = assert.async(); |
||
25 | assert.expect( 1 ); |
||
26 | assert.domEqual( "#tabs2", function( done ) { |
||
27 | var element = $( "#tabs2" ).tabs( { |
||
28 | load: function() { |
||
29 | setTimeout( function() { |
||
30 | element.tabs( "destroy" ); |
||
31 | done(); |
||
32 | ready(); |
||
33 | } ); |
||
34 | } |
||
35 | } ); |
||
36 | element.tabs( "option", "active", 2 ); |
||
37 | } ); |
||
38 | } ); |
||
39 | |||
40 | QUnit.test( "enable", function( assert ) { |
||
41 | assert.expect( 8 ); |
||
42 | |||
43 | var element = $( "#tabs1" ).tabs( { disabled: true } ); |
||
44 | disabled( assert, element, true ); |
||
45 | element.tabs( "enable" ); |
||
46 | disabled( assert, element, false ); |
||
47 | element.tabs( "destroy" ); |
||
48 | |||
49 | element.tabs( { disabled: [ 0, 1 ] } ); |
||
50 | disabled( assert, element, [ 0, 1 ] ); |
||
51 | element.tabs( "enable" ); |
||
52 | disabled( assert, element, false ); |
||
53 | } ); |
||
54 | |||
55 | QUnit.test( "enable( index )", function( assert ) { |
||
56 | assert.expect( 10 ); |
||
57 | |||
58 | var element = $( "#tabs1" ).tabs( { disabled: true } ); |
||
59 | disabled( assert, element, true ); |
||
60 | |||
61 | // fully disabled -> partially disabled |
||
62 | element.tabs( "enable", 1 ); |
||
63 | disabled( assert, element, [ 0, 2 ] ); |
||
64 | |||
65 | // partially disabled -> partially disabled |
||
66 | element.tabs( "enable", 2 ); |
||
67 | disabled( assert, element, [ 0 ] ); |
||
68 | |||
69 | // already enabled tab, no change |
||
70 | element.tabs( "enable", 2 ); |
||
71 | disabled( assert, element, [ 0 ] ); |
||
72 | |||
73 | // partially disabled -> fully enabled |
||
74 | element.tabs( "enable", 0 ); |
||
75 | disabled( assert, element, false ); |
||
76 | } ); |
||
77 | |||
78 | QUnit.test( "disable", function( assert ) { |
||
79 | assert.expect( 8 ); |
||
80 | |||
81 | var element = $( "#tabs1" ).tabs( { disabled: false } ); |
||
82 | disabled( assert, element, false ); |
||
83 | element.tabs( "disable" ); |
||
84 | disabled( assert, element, true ); |
||
85 | element.tabs( "destroy" ); |
||
86 | |||
87 | element.tabs( { disabled: [ 0, 1 ] } ); |
||
88 | disabled( assert, element, [ 0, 1 ] ); |
||
89 | element.tabs( "disable" ); |
||
90 | disabled( assert, element, true ); |
||
91 | } ); |
||
92 | |||
93 | QUnit.test( "disable( index )", function( assert ) { |
||
94 | assert.expect( 10 ); |
||
95 | |||
96 | var element = $( "#tabs1" ).tabs( { disabled: false } ); |
||
97 | disabled( assert, element, false ); |
||
98 | |||
99 | // fully enabled -> partially disabled |
||
100 | element.tabs( "disable", 1 ); |
||
101 | disabled( assert, element, [ 1 ] ); |
||
102 | |||
103 | // partially disabled -> partially disabled |
||
104 | element.tabs( "disable", 2 ); |
||
105 | disabled( assert, element, [ 1, 2 ] ); |
||
106 | |||
107 | // already disabled tab, no change |
||
108 | element.tabs( "disable", 2 ); |
||
109 | disabled( assert, element, [ 1, 2 ] ); |
||
110 | |||
111 | // partially disabled -> fully disabled |
||
112 | element.tabs( "disable", 0 ); |
||
113 | disabled( assert, element, true ); |
||
114 | } ); |
||
115 | |||
116 | QUnit.test( "refresh", function( assert ) { |
||
117 | assert.expect( 27 ); |
||
118 | |||
119 | var element = $( "#tabs1" ).tabs(); |
||
120 | state( assert, element, 1, 0, 0 ); |
||
121 | disabled( assert, element, false ); |
||
122 | |||
123 | // Disable tab via markup |
||
124 | element.find( ".ui-tabs-nav li" ).eq( 1 ).addClass( "ui-state-disabled" ); |
||
125 | element.tabs( "refresh" ); |
||
126 | state( assert, element, 1, 0, 0 ); |
||
127 | disabled( assert, element, [ 1 ] ); |
||
128 | |||
129 | // Add remote tab |
||
130 | element.find( ".ui-tabs-nav" ).append( "<li id='newTab'><a href='data/test.html'>new</a></li>" ); |
||
131 | element.tabs( "refresh" ); |
||
132 | state( assert, element, 1, 0, 0, 0 ); |
||
133 | disabled( assert, element, [ 1 ] ); |
||
134 | assert.equal( element.find( "#" + $( "#newTab" ).attr( "aria-controls" ) ).length, 1, |
||
135 | "panel added for remote tab" ); |
||
136 | |||
137 | // Remove all tabs |
||
138 | element.find( ".ui-tabs-nav li, .ui-tabs-panel" ).remove(); |
||
139 | element.tabs( "refresh" ); |
||
140 | state( assert, element ); |
||
141 | assert.equal( element.tabs( "option", "active" ), false, "no active tab" ); |
||
142 | |||
143 | // Add tabs |
||
144 | element.find( ".ui-tabs-nav" ) |
||
145 | .append( "<li class='ui-state-disabled'><a href='#newTab2'>new 2</a></li>" ) |
||
146 | .append( "<li><a href='#newTab3'>new 3</a></li>" ) |
||
147 | .append( "<li><a href='#newTab4'>new 4</a></li>" ) |
||
148 | .append( "<li><a href='#newTab5'>new 5</a></li>" ); |
||
149 | element |
||
150 | .append( "<div id='newTab2'>new 2</div>" ) |
||
151 | .append( "<div id='newTab3'>new 3</div>" ) |
||
152 | .append( "<div id='newTab4'>new 4</div>" ) |
||
153 | .append( "<div id='newTab5'>new 5</div>" ); |
||
154 | element.tabs( "refresh" ); |
||
155 | state( assert, element, 0, 0, 0, 0 ); |
||
156 | disabled( assert, element, [ 0 ] ); |
||
157 | |||
158 | // Activate third tab |
||
159 | element.tabs( "option", "active", 2 ); |
||
160 | state( assert, element, 0, 0, 1, 0 ); |
||
161 | disabled( assert, element, [ 0 ] ); |
||
162 | |||
163 | // Remove fourth tab, third tab should stay active |
||
164 | element.find( ".ui-tabs-nav li" ).eq( 3 ).remove(); |
||
165 | element.find( ".ui-tabs-panel" ).eq( 3 ).remove(); |
||
166 | element.tabs( "refresh" ); |
||
167 | state( assert, element, 0, 0, 1 ); |
||
168 | disabled( assert, element, [ 0 ] ); |
||
169 | |||
170 | // Remove third (active) tab, second tab should become active |
||
171 | element.find( ".ui-tabs-nav li" ).eq( 2 ).remove(); |
||
172 | element.find( ".ui-tabs-panel" ).eq( 2 ).remove(); |
||
173 | element.tabs( "refresh" ); |
||
174 | state( assert, element, 0, 1 ); |
||
175 | disabled( assert, element, [ 0 ] ); |
||
176 | |||
177 | // Remove first tab, previously active tab (now first) should stay active |
||
178 | element.find( ".ui-tabs-nav li" ).eq( 0 ).remove(); |
||
179 | element.find( ".ui-tabs-panel" ).eq( 0 ).remove(); |
||
180 | element.tabs( "refresh" ); |
||
181 | state( assert, element, 1 ); |
||
182 | disabled( assert, element, false ); |
||
183 | } ); |
||
184 | |||
185 | QUnit.test( "refresh - looping", function( assert ) { |
||
186 | assert.expect( 6 ); |
||
187 | |||
188 | var element = $( "#tabs1" ).tabs( { |
||
189 | disabled: [ 0 ], |
||
190 | active: 1 |
||
191 | } ); |
||
192 | state( assert, element, 0, 1, 0 ); |
||
193 | disabled( assert, element, [ 0 ] ); |
||
194 | |||
195 | // Remove active, jump to previous |
||
196 | // previous is disabled, just back one more |
||
197 | // reached first tab, move to end |
||
198 | // activate last tab |
||
199 | element.find( ".ui-tabs-nav li" ).eq( 2 ).remove(); |
||
200 | element.tabs( "refresh" ); |
||
201 | state( assert, element, 0, 1 ); |
||
202 | disabled( assert, element, [ 0 ] ); |
||
203 | } ); |
||
204 | |||
205 | QUnit.test( "load", function( assert ) { |
||
206 | var ready = assert.async(); |
||
207 | assert.expect( 30 ); |
||
208 | |||
209 | var element = $( "#tabs2" ).tabs(); |
||
210 | |||
211 | // Load content of inactive tab |
||
212 | // useful for preloading content with custom caching |
||
213 | element.one( "tabsbeforeload", function( event, ui ) { |
||
214 | var tab = element.find( ".ui-tabs-nav li" ).eq( 3 ), |
||
215 | panelId = tab.attr( "aria-controls" ), |
||
216 | panel = $( "#" + panelId ); |
||
217 | |||
218 | assert.ok( !( "originalEvent" in event ), "originalEvent" ); |
||
219 | assert.equal( ui.tab.length, 1, "tab length" ); |
||
220 | assert.strictEqual( ui.tab[ 0 ], tab[ 0 ], "tab" ); |
||
221 | assert.equal( ui.panel.length, 1, "panel length" ); |
||
222 | assert.strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" ); |
||
223 | state( assert, element, 1, 0, 0, 0, 0 ); |
||
224 | } ); |
||
225 | element.one( "tabsload", function( event, ui ) { |
||
226 | |||
227 | // TODO: remove wrapping in 2.0 |
||
228 | var uiTab = $( ui.tab ), |
||
229 | uiPanel = $( ui.panel ), |
||
230 | tab = element.find( ".ui-tabs-nav li" ).eq( 3 ), |
||
231 | panelId = tab.attr( "aria-controls" ), |
||
232 | panel = $( "#" + panelId ); |
||
233 | |||
234 | assert.ok( !( "originalEvent" in event ), "originalEvent" ); |
||
235 | assert.equal( uiTab.length, 1, "tab length" ); |
||
236 | assert.strictEqual( uiTab[ 0 ], tab[ 0 ], "tab" ); |
||
237 | assert.equal( uiPanel.length, 1, "panel length" ); |
||
238 | assert.strictEqual( uiPanel[ 0 ], panel[ 0 ], "panel" ); |
||
239 | assert.equal( uiPanel.find( "p" ).length, 1, "panel html" ); |
||
240 | state( assert, element, 1, 0, 0, 0, 0 ); |
||
241 | setTimeout( tabsload1 ); |
||
242 | } ); |
||
243 | element.tabs( "load", 3 ); |
||
244 | state( assert, element, 1, 0, 0, 0, 0 ); |
||
245 | |||
246 | function tabsload1() { |
||
247 | |||
248 | // no need to test details of event (tested in events tests) |
||
249 | element.one( "tabsbeforeload", function() { |
||
250 | assert.ok( true, "tabsbeforeload invoked" ); |
||
251 | } ); |
||
252 | element.one( "tabsload", function() { |
||
253 | assert.ok( true, "tabsload invoked" ); |
||
254 | setTimeout( tabsload2 ); |
||
255 | } ); |
||
256 | element.tabs( "option", "active", 3 ); |
||
257 | state( assert, element, 0, 0, 0, 1, 0 ); |
||
258 | } |
||
259 | |||
260 | function tabsload2() { |
||
261 | |||
262 | // reload content of active tab |
||
263 | element.one( "tabsbeforeload", function( event, ui ) { |
||
264 | var tab = element.find( ".ui-tabs-nav li" ).eq( 3 ), |
||
265 | panelId = tab.attr( "aria-controls" ), |
||
266 | panel = $( "#" + panelId ); |
||
267 | |||
268 | assert.ok( !( "originalEvent" in event ), "originalEvent" ); |
||
269 | assert.equal( ui.tab.length, 1, "tab length" ); |
||
270 | assert.strictEqual( ui.tab[ 0 ], tab[ 0 ], "tab" ); |
||
271 | assert.equal( ui.panel.length, 1, "panel length" ); |
||
272 | assert.strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" ); |
||
273 | state( assert, element, 0, 0, 0, 1, 0 ); |
||
274 | } ); |
||
275 | element.one( "tabsload", function( event, ui ) { |
||
276 | |||
277 | // TODO: remove wrapping in 2.0 |
||
278 | var uiTab = $( ui.tab ), |
||
279 | uiPanel = $( ui.panel ), |
||
280 | tab = element.find( ".ui-tabs-nav li" ).eq( 3 ), |
||
281 | panelId = tab.attr( "aria-controls" ), |
||
282 | panel = $( "#" + panelId ); |
||
283 | |||
284 | assert.ok( !( "originalEvent" in event ), "originalEvent" ); |
||
285 | assert.equal( uiTab.length, 1, "tab length" ); |
||
286 | assert.strictEqual( uiTab[ 0 ], tab[ 0 ], "tab" ); |
||
287 | assert.equal( uiPanel.length, 1, "panel length" ); |
||
288 | assert.strictEqual( uiPanel[ 0 ], panel[ 0 ], "panel" ); |
||
289 | state( assert, element, 0, 0, 0, 1, 0 ); |
||
290 | ready(); |
||
291 | } ); |
||
292 | element.tabs( "load", 3 ); |
||
293 | state( assert, element, 0, 0, 0, 1, 0 ); |
||
294 | } |
||
295 | } ); |
||
296 | |||
297 | QUnit.test( "widget", function( assert ) { |
||
298 | assert.expect( 2 ); |
||
299 | var element = $( "#tabs1" ).tabs(), |
||
300 | widgetElement = element.tabs( "widget" ); |
||
301 | assert.equal( widgetElement.length, 1, "one element" ); |
||
302 | assert.strictEqual( widgetElement[ 0 ], element[ 0 ], "same element" ); |
||
303 | } ); |
||
304 | |||
305 | } ); |