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 equalHeight = testHelper.equalHeight,
10 state = testHelper.state;
11  
12 QUnit.module( "tabs: options" );
13  
14 QUnit.test( "{ active: default }", function( assert ) {
15 assert.expect( 6 );
16  
17 var element = $( "#tabs1" ).tabs();
18 assert.equal( element.tabs( "option", "active" ), 0, "should be 0 by default" );
19 state( assert, element, 1, 0, 0 );
20 element.tabs( "destroy" );
21  
22 location.hash = "#fragment-3";
23 element = $( "#tabs1" ).tabs();
24 assert.equal( element.tabs( "option", "active" ), 2, "should be 2 based on URL" );
25 state( assert, element, 0, 0, 1 );
26 element.tabs( "destroy" );
27  
28 location.hash = "#custom-id";
29 element = $( "#tabs2" ).tabs();
30 assert.equal( element.tabs( "option", "active" ), 3, "should be 3 based on URL" );
31 state( assert, element, 0, 0, 0, 1, 0 );
32 element.tabs( "destroy" );
33 location.hash = "#";
34 } );
35  
36 QUnit.test( "{ active: false }", function( assert ) {
37 assert.expect( 7 );
38  
39 var element = $( "#tabs1" ).tabs( {
40 active: false,
41 collapsible: true
42 } );
43 state( assert, element, 0, 0, 0 );
44 assert.equal( element.find( ".ui-tabs-nav .ui-state-active" ).length, 0, "no tabs selected" );
45 assert.strictEqual( element.tabs( "option", "active" ), false );
46  
47 element.tabs( "option", "collapsible", false );
48 state( assert, element, 1, 0, 0 );
49 assert.equal( element.tabs( "option", "active" ), 0 );
50  
51 element.tabs( "destroy" );
52 element.tabs( {
53 active: false
54 } );
55 state( assert, element, 1, 0, 0 );
56 assert.strictEqual( element.tabs( "option", "active" ), 0 );
57 } );
58  
59 QUnit.test( "{ active: Number }", function( assert ) {
60 assert.expect( 8 );
61  
62 var element = $( "#tabs1" ).tabs( {
63 active: 2
64 } );
65 assert.equal( element.tabs( "option", "active" ), 2 );
66 state( assert, element, 0, 0, 1 );
67  
68 element.tabs( "option", "active", 0 );
69 assert.equal( element.tabs( "option", "active" ), 0 );
70 state( assert, element, 1, 0, 0 );
71  
72 element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).trigger( "click" );
73 assert.equal( element.tabs( "option", "active" ), 1 );
74 state( assert, element, 0, 1, 0 );
75  
76 element.tabs( "option", "active", 10 );
77 assert.equal( element.tabs( "option", "active" ), 1 );
78 state( assert, element, 0, 1, 0 );
79 } );
80  
81 QUnit.test( "{ active: -Number }", function( assert ) {
82 assert.expect( 8 );
83  
84 var element = $( "#tabs1" ).tabs( {
85 active: -1
86 } );
87 assert.equal( element.tabs( "option", "active" ), 2 );
88 state( assert, element, 0, 0, 1 );
89  
90 element.tabs( "option", "active", -2 );
91 assert.equal( element.tabs( "option", "active" ), 1 );
92 state( assert, element, 0, 1, 0 );
93  
94 element.tabs( "option", "active", -10 );
95 assert.equal( element.tabs( "option", "active" ), 1 );
96 state( assert, element, 0, 1, 0 );
97  
98 element.tabs( "option", "active", -3 );
99 assert.equal( element.tabs( "option", "active" ), 0 );
100 state( assert, element, 1, 0, 0 );
101 } );
102  
103 QUnit.test( "active - mismatched tab/panel order", function( assert ) {
104 assert.expect( 3 );
105  
106 location.hash = "#tabs7-2";
107 var element = $( "#tabs7" ).tabs();
108 assert.equal( element.tabs( "option", "active" ), 1, "should be 1 based on URL" );
109 state( assert, element, 0, 1 );
110 element.tabs( "option", "active", 0 );
111 state( assert, element, 1, 0 );
112 location.hash = "#";
113 } );
114  
115 QUnit.test( "collapsible", function( assert ) {
116 assert.expect( 13 );
117  
118 var element = $( "#tabs1" ).tabs( {
119 active: 1,
120 collapsible: true
121 } );
122 assert.hasClasses( element, "ui-tabs-collapsible" );
123 element.tabs( "option", "active", false );
124 assert.equal( element.tabs( "option", "active" ), false );
125 state( assert, element, 0, 0, 0 );
126  
127 element.tabs( "option", "active", 1 );
128 assert.equal( element.tabs( "option", "active" ), 1 );
129 state( assert, element, 0, 1, 0 );
130  
131 element.find( ".ui-state-active .ui-tabs-anchor" ).trigger( "click" );
132 assert.equal( element.tabs( "option", "active" ), false );
133 state( assert, element, 0, 0, 0 );
134  
135 element.tabs( "option", "collapsible", false );
136 assert.lacksClasses( element, "ui-tabs-collapsible" );
137  
138 element.tabs( "option", "collapsible", true );
139  
140 assert.hasClasses( element, "ui-tabs-collapsible" );
141  
142 element.tabs( {
143 active: 1,
144 collapsible: false
145 } );
146 element.tabs( "option", "active", false );
147 assert.equal( element.tabs( "option", "active" ), 1 );
148 state( assert, element, 0, 1, 0 );
149  
150 element.find( ".ui-state-active .ui-tabs-anchor" ).eq( 1 ).trigger( "click" );
151 assert.equal( element.tabs( "option", "active" ), 1 );
152 state( assert, element, 0, 1, 0 );
153  
154 } );
155  
156 QUnit.test( "disabled", function( assert ) {
157 assert.expect( 23 );
158  
159 // Fully enabled by default
160 var event,
161 element = $( "#tabs1" ).tabs();
162 disabled( assert, element, false );
163  
164 assert.lacksClasses( element.tabs( "widget" ), "ui-state-disabled" );
165 assert.lacksClasses( element.tabs( "widget" ), "ui-tabs-disabled" );
166 assert.ok( !element.tabs( "widget" ).attr( "aria-disabled" ), "after: wrapper doesn't have aria-disabled attr" );
167  
168 // Disable single tab
169 element.tabs( "option", "disabled", [ 1 ] );
170 disabled( assert, element, [ 1 ] );
171  
172 assert.lacksClasses( element.tabs( "widget" ), "ui-state-disabled" );
173 assert.lacksClasses( element.tabs( "widget" ), "ui-tabs-disabled" );
174 assert.ok( !element.tabs( "widget" ).attr( "aria-disabled" ), "after: wrapper doesn't have aria-disabled attr" );
175  
176 // Disabled active tab
177 element.tabs( "option", "disabled", [ 0, 1 ] );
178 disabled( assert, element, [ 0, 1 ] );
179  
180 assert.lacksClasses( element.tabs( "widget" ), "ui-state-disabled" );
181 assert.lacksClasses( element.tabs( "widget" ), "ui-tabs-disabled" );
182 assert.ok( !element.tabs( "widget" ).attr( "aria-disabled" ), "after: wrapper doesn't have aria-disabled attr" );
183  
184 // Disable all tabs
185 element.tabs( "option", "disabled", [ 0, 1, 2 ] );
186 disabled( assert, element, true );
187  
188 assert.lacksClasses( element.tabs( "widget" ), "ui-state-disabled" );
189 assert.hasClasses( element.tabs( "widget" ), "ui-tabs-disabled" );
190 assert.ok( !element.tabs( "widget" ).attr( "aria-disabled" ), "after: wrapper doesn't have aria-disabled attr" );
191  
192 event = $.Event( "click" );
193 element.find( ".ui-tabs-anchor" ).eq( 0 ).trigger( event );
194 assert.ok( event.isDefaultPrevented(), "click is prevented for disabled tab" );
195  
196 // Enable all tabs
197 element.tabs( "option", "disabled", [] );
198 disabled( assert, element, false );
199 } );
200  
201 QUnit.test( "{ event: null }", function( assert ) {
202 assert.expect( 5 );
203  
204 var element = $( "#tabs1" ).tabs( {
205 event: null
206 } );
207 state( assert, element, 1, 0, 0 );
208  
209 element.tabs( "option", "active", 1 );
210 assert.equal( element.tabs( "option", "active" ), 1 );
211 state( assert, element, 0, 1, 0 );
212  
213 // Ensure default click handler isn't bound
214 element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 2 ).trigger( "click" );
215 assert.equal( element.tabs( "option", "active" ), 1 );
216 state( assert, element, 0, 1, 0 );
217 } );
218  
219 QUnit.test( "{ event: custom }", function( assert ) {
220 assert.expect( 11 );
221  
222 var element = $( "#tabs1" ).tabs( {
223 event: "custom1 custom2"
224 } );
225 state( assert, element, 1, 0, 0 );
226  
227 element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).trigger( "custom1" );
228 assert.equal( element.tabs( "option", "active" ), 1 );
229 state( assert, element, 0, 1, 0 );
230  
231 // Ensure default click handler isn't bound
232 element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 2 ).trigger( "click" );
233 assert.equal( element.tabs( "option", "active" ), 1 );
234 state( assert, element, 0, 1, 0 );
235  
236 element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 2 ).trigger( "custom2" );
237 assert.equal( element.tabs( "option", "active" ), 2 );
238 state( assert, element, 0, 0, 1 );
239  
240 element.tabs( "option", "event", "custom3" );
241  
242 // Ensure old event handlers are unbound
243 element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).trigger( "custom1" );
244 assert.equal( element.tabs( "option", "active" ), 2 );
245 state( assert, element, 0, 0, 1 );
246  
247 element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).trigger( "custom3" );
248 assert.equal( element.tabs( "option", "active" ), 1 );
249 state( assert, element, 0, 1, 0 );
250 } );
251  
252 QUnit.test( "{ heightStyle: 'auto' }", function( assert ) {
253 assert.expect( 2 );
254 var element = $( "#tabs8" ).tabs( { heightStyle: "auto" } );
255 equalHeight( assert, element, 45 );
256 } );
257  
258 QUnit.test( "{ heightStyle: 'content' }", function( assert ) {
259 assert.expect( 2 );
260 var element = $( "#tabs8" ).tabs( { heightStyle: "content" } ),
261 sizes = element.find( ".ui-tabs-panel" ).map( function() {
262 return $( this ).height();
263 } ).get();
264 assert.equal( sizes[ 0 ], 45 );
265 assert.equal( sizes[ 1 ], 15 );
266 } );
267  
268 QUnit.test( "{ heightStyle: 'fill' }", function( assert ) {
269 assert.expect( 4 );
270 $( "#tabs8Wrapper" ).height( 500 );
271 var element = $( "#tabs8" ).tabs( { heightStyle: "fill" } );
272 equalHeight( assert, element, 485 );
273 element.tabs( "destroy" );
274  
275 element = $( "#tabs8" ).css( {
276 "border": "1px solid black",
277 "padding": "1px 0"
278 } );
279 element.tabs( { heightStyle: "fill" } );
280 equalHeight( assert, element, 481 );
281 } );
282  
283 QUnit.test( "{ heightStyle: 'fill' } with sibling", function( assert ) {
284 assert.expect( 2 );
285 $( "#tabs8Wrapper" ).height( 500 );
286 $( "<p>Lorem Ipsum</p>" )
287 .css( {
288 height: 50,
289 marginTop: 20,
290 marginBottom: 30
291 } )
292 .prependTo( "#tabs8Wrapper" );
293 var element = $( "#tabs8" ).tabs( { heightStyle: "fill" } );
294 equalHeight( assert, element, 385 );
295 } );
296  
297 QUnit.test( "{ heightStyle: 'fill' } with multiple siblings", function( assert ) {
298 assert.expect( 2 );
299 $( "#tabs8Wrapper" ).height( 500 );
300 $( "<p>Lorem Ipsum</p>" )
301 .css( {
302 height: 50,
303 marginTop: 20,
304 marginBottom: 30
305 } )
306 .prependTo( "#tabs8Wrapper" );
307 $( "<p>Lorem Ipsum</p>" )
308 .css( {
309 height: 50,
310 marginTop: 20,
311 marginBottom: 30,
312 position: "absolute"
313 } )
314 .prependTo( "#tabs8Wrapper" );
315 $( "<p>Lorem Ipsum</p>" )
316 .css( {
317 height: 25,
318 marginTop: 10,
319 marginBottom: 15
320 } )
321 .prependTo( "#tabs8Wrapper" );
322 var element = $( "#tabs8" ).tabs( { heightStyle: "fill" } );
323 equalHeight( assert, element, 335 );
324 } );
325  
326 QUnit.test( "hide and show: false", function( assert ) {
327 assert.expect( 3 );
328 var element = $( "#tabs1" ).tabs( {
329 show: false,
330 hide: false
331 } ),
332 widget = element.tabs( "instance" ),
333 panels = element.find( ".ui-tabs-panel" );
334 widget._show = function() {
335 assert.ok( false, "_show() called" );
336 };
337 widget._hide = function() {
338 assert.ok( false, "_hide() called" );
339 };
340  
341 assert.ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
342 element.tabs( "option", "active", 1 );
343 assert.ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" );
344 assert.ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" );
345 } );
346  
347 QUnit.test( "hide and show - animation", function( assert ) {
348 var ready = assert.async();
349 assert.expect( 5 );
350 var element = $( "#tabs1" ).tabs( {
351 show: "drop",
352 hide: 2000
353 } ),
354 widget = element.tabs( "instance" ),
355 panels = element.find( ".ui-tabs-panel" );
356 widget._show = function( element, options, callback ) {
357 assert.strictEqual( element[ 0 ], panels[ 1 ], "correct element in _show()" );
358 assert.equal( options, "drop", "correct options in _show()" );
359 setTimeout( function() {
360 callback();
361 } );
362 };
363 widget._hide = function( element, options, callback ) {
364 assert.strictEqual( element[ 0 ], panels[ 0 ], "correct element in _hide()" );
365 assert.equal( options, 2000, "correct options in _hide()" );
366 setTimeout( function() {
367 callback();
368 ready();
369 } );
370 };
371  
372 assert.ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
373 element.tabs( "option", "active", 1 );
374 } );
375  
376 } );