corrade-http-templates – Blame information for rev 62

Subversion Repositories:
Rev:
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 } );