]>
Commit | Line | Data |
---|---|---|
6527f429 DM |
1 | describe("Ext.button.Segmented", function() {\r |
2 | var button;\r | |
3 | \r | |
4 | function makeButton(cfg) {\r | |
5 | button = Ext.create(Ext.apply({\r | |
6 | xtype: 'segmentedbutton',\r | |
7 | renderTo: document.body\r | |
8 | }, cfg));\r | |
9 | }\r | |
10 | \r | |
11 | function clickButton(index) {\r | |
12 | jasmine.fireMouseEvent(button.items.getAt(index).el, 'click');\r | |
13 | }\r | |
14 | \r | |
15 | afterEach(function() {\r | |
16 | button.destroy();\r | |
17 | });\r | |
18 | \r | |
19 | describe("value", function() {\r | |
20 | describe("allowMultiple:false", function() {\r | |
21 | function makeButton(cfg) {\r | |
22 | button = Ext.create(Ext.apply({\r | |
23 | xtype: 'segmentedbutton',\r | |
24 | renderTo: document.body,\r | |
25 | items: [\r | |
26 | { text: 'Foo', value: 'foo' },\r | |
27 | { text: 'Bar' }\r | |
28 | ]\r | |
29 | }, cfg));\r | |
30 | }\r | |
31 | \r | |
32 | it("should initialize with a null value", function() {\r | |
33 | makeButton();\r | |
34 | expect(button.getValue()).toBeNull();\r | |
35 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
36 | expect(button.items.getAt(1).pressed).toBe(false);\r | |
37 | });\r | |
38 | \r | |
39 | it("should initialize with a value", function() {\r | |
40 | makeButton({\r | |
41 | value: 'foo'\r | |
42 | });\r | |
43 | \r | |
44 | expect(button.getValue()).toBe('foo');\r | |
45 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
46 | expect(button.items.getAt(1).pressed).toBe(false);\r | |
47 | });\r | |
48 | \r | |
49 | it("should initialize with an index value", function() {\r | |
50 | makeButton({\r | |
51 | value: 1\r | |
52 | });\r | |
53 | \r | |
54 | expect(button.getValue()).toBe(1);\r | |
55 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
56 | expect(button.items.getAt(1).pressed).toBe(true);\r | |
57 | });\r | |
58 | \r | |
59 | it("should set a null value", function() {\r | |
60 | makeButton({\r | |
61 | value: 'foo'\r | |
62 | });\r | |
63 | \r | |
64 | button.setValue(null);\r | |
65 | \r | |
66 | expect(button.getValue()).toBe(null);\r | |
67 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
68 | expect(button.items.getAt(1).pressed).toBe(false);\r | |
69 | });\r | |
70 | \r | |
71 | it("should set a value", function() {\r | |
72 | makeButton();\r | |
73 | \r | |
74 | button.setValue('foo');\r | |
75 | \r | |
76 | expect(button.getValue()).toBe('foo');\r | |
77 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
78 | expect(button.items.getAt(1).pressed).toBe(false);\r | |
79 | });\r | |
80 | \r | |
81 | it("should set an index value", function() {\r | |
82 | makeButton();\r | |
83 | \r | |
84 | button.setValue(1);\r | |
85 | \r | |
86 | expect(button.getValue()).toBe(1);\r | |
87 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
88 | expect(button.items.getAt(1).pressed).toBe(true);\r | |
89 | });\r | |
90 | \r | |
91 | it("should set the value if a button is initialized with pressed:true", function() {\r | |
92 | makeButton({\r | |
93 | items: [{\r | |
94 | text: 'Foo',\r | |
95 | value: 'foo',\r | |
96 | pressed: true\r | |
97 | }]\r | |
98 | });\r | |
99 | \r | |
100 | expect(button.getValue()).toBe('foo');\r | |
101 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
102 | });\r | |
103 | \r | |
104 | it("should set the index value if a button with no value is initialized with pressed:true", function() {\r | |
105 | makeButton({\r | |
106 | items: [{\r | |
107 | text: 'Foo'\r | |
108 | }, {\r | |
109 | text: 'Bar',\r | |
110 | pressed: true\r | |
111 | }]\r | |
112 | });\r | |
113 | \r | |
114 | expect(button.getValue()).toBe(1);\r | |
115 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
116 | expect(button.items.getAt(1).pressed).toBe(true);\r | |
117 | });\r | |
118 | \r | |
119 | it("should set the value when a button is pressed by the user", function() {\r | |
120 | makeButton();\r | |
121 | \r | |
122 | clickButton(0);\r | |
123 | \r | |
124 | expect(button.getValue()).toBe('foo');\r | |
125 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
126 | expect(button.items.getAt(1).pressed).toBe(false);\r | |
127 | \r | |
128 | clickButton(1);\r | |
129 | \r | |
130 | expect(button.getValue()).toBe(1);\r | |
131 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
132 | expect(button.items.getAt(1).pressed).toBe(true);\r | |
133 | });\r | |
134 | \r | |
135 | it("should transform an index into a value if button value is available", function() {\r | |
136 | makeButton();\r | |
137 | \r | |
138 | // button at index 0 has a value of 'foo' so 0 will be transformed to 'foo'\r | |
139 | button.setValue(0);\r | |
140 | \r | |
141 | expect(button.getValue()).toBe('foo');\r | |
142 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
143 | expect(button.items.getAt(1).pressed).toBe(false);\r | |
144 | });\r | |
145 | \r | |
146 | it("should throw an error if multiple values are set", function() {\r | |
147 | makeButton();\r | |
148 | \r | |
149 | expect(function () {\r | |
150 | button.setValue(['foo', 1]);\r | |
151 | }).toThrow("Cannot set multiple values when allowMultiple is false");\r | |
152 | });\r | |
153 | \r | |
154 | it("should throw an error if no button value is matched", function() {\r | |
155 | makeButton({\r | |
156 | id: 'my-button'\r | |
157 | });\r | |
158 | \r | |
159 | expect(function () {\r | |
160 | button.setValue('blah');\r | |
161 | }).toThrow("Invalid value 'blah' for segmented button: 'my-button'");\r | |
162 | });\r | |
163 | \r | |
164 | it("should thow an error if index value is out of bounds", function() {\r | |
165 | makeButton({\r | |
166 | id: 'my-button'\r | |
167 | });\r | |
168 | \r | |
169 | expect(function () {\r | |
170 | button.setValue(2);\r | |
171 | }).toThrow("Invalid value '2' for segmented button: 'my-button'");\r | |
172 | });\r | |
173 | \r | |
174 | it("should error if multiple items have the same value", function() {\r | |
175 | makeButton({\r | |
176 | id: 'my-button'\r | |
177 | });\r | |
178 | \r | |
179 | expect(function() {\r | |
180 | button.add({\r | |
181 | text: 'Foo2',\r | |
182 | value: 'foo'\r | |
183 | });\r | |
184 | }).toThrow("Segmented button 'my-button' cannot contain multiple items with value: 'foo'");\r | |
185 | \r | |
186 | Ext.resumeLayouts();\r | |
187 | });\r | |
188 | \r | |
189 | describe("allowDepress:true", function() {\r | |
190 | it("should set the value to null when a button is depressed", function() {\r | |
191 | makeButton({\r | |
192 | allowDepress: true,\r | |
193 | items: [{\r | |
194 | text: 'Foo',\r | |
195 | pressed: true\r | |
196 | }]\r | |
197 | });\r | |
198 | \r | |
199 | clickButton(0);\r | |
200 | \r | |
201 | expect(button.getValue()).toBe(null);\r | |
202 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
203 | });\r | |
204 | });\r | |
205 | });\r | |
206 | \r | |
207 | describe("allowMultiple:true", function() {\r | |
208 | function makeButton(cfg) {\r | |
209 | button = Ext.create(Ext.apply({\r | |
210 | xtype: 'segmentedbutton',\r | |
211 | allowMultiple: true,\r | |
212 | renderTo: document.body,\r | |
213 | items: [\r | |
214 | { text: 'Seg', value: 'seg' },\r | |
215 | { text: 'Men' },\r | |
216 | { text: 'Ted', value: 'ted' }\r | |
217 | ]\r | |
218 | }, cfg));\r | |
219 | }\r | |
220 | \r | |
221 | it("should initialize with a null value", function() {\r | |
222 | makeButton();\r | |
223 | expect(button.getValue()).toEqual([]);\r | |
224 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
225 | expect(button.items.getAt(1).pressed).toBe(false);\r | |
226 | expect(button.items.getAt(2).pressed).toBe(false);\r | |
227 | });\r | |
228 | \r | |
229 | it("should initialize with an empty array", function() {\r | |
230 | makeButton({\r | |
231 | value: []\r | |
232 | });\r | |
233 | expect(button.getValue()).toEqual([]);\r | |
234 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
235 | expect(button.items.getAt(1).pressed).toBe(false);\r | |
236 | expect(button.items.getAt(2).pressed).toBe(false);\r | |
237 | });\r | |
238 | \r | |
239 | it("should initialize with a single value", function() {\r | |
240 | makeButton({\r | |
241 | value: ['seg']\r | |
242 | });\r | |
243 | \r | |
244 | expect(button.getValue()).toEqual(['seg']);\r | |
245 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
246 | expect(button.items.getAt(1).pressed).toBe(false);\r | |
247 | expect(button.items.getAt(2).pressed).toBe(false);\r | |
248 | });\r | |
249 | \r | |
250 | it("should initialize with a single index value", function() {\r | |
251 | makeButton({\r | |
252 | value: [1]\r | |
253 | });\r | |
254 | \r | |
255 | expect(button.getValue()).toEqual([1]);\r | |
256 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
257 | expect(button.items.getAt(1).pressed).toBe(true);\r | |
258 | expect(button.items.getAt(2).pressed).toBe(false);\r | |
259 | });\r | |
260 | \r | |
261 | it("should initialize with multiple values", function() {\r | |
262 | makeButton({\r | |
263 | value: ['seg', 'ted']\r | |
264 | });\r | |
265 | \r | |
266 | expect(button.getValue()).toEqual(['seg', 'ted']);\r | |
267 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
268 | expect(button.items.getAt(1).pressed).toBe(false);\r | |
269 | expect(button.items.getAt(2).pressed).toBe(true);\r | |
270 | });\r | |
271 | \r | |
272 | it("should initialize with multiple index values", function() {\r | |
273 | makeButton({\r | |
274 | value: [0, 1]\r | |
275 | });\r | |
276 | \r | |
277 | expect(button.getValue()).toEqual(['seg', 1]);\r | |
278 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
279 | expect(button.items.getAt(1).pressed).toBe(true);\r | |
280 | expect(button.items.getAt(2).pressed).toBe(false);\r | |
281 | });\r | |
282 | \r | |
283 | it("should set a null value", function() {\r | |
284 | makeButton({\r | |
285 | value: ['seg', 'ted']\r | |
286 | });\r | |
287 | \r | |
288 | button.setValue(null);\r | |
289 | \r | |
290 | expect(button.getValue()).toEqual([]);\r | |
291 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
292 | expect(button.items.getAt(1).pressed).toBe(false);\r | |
293 | expect(button.items.getAt(2).pressed).toBe(false);\r | |
294 | });\r | |
295 | \r | |
296 | it("should set the value to emtpy array", function() {\r | |
297 | makeButton({\r | |
298 | value: ['seg', 'ted']\r | |
299 | });\r | |
300 | \r | |
301 | button.setValue([]);\r | |
302 | \r | |
303 | expect(button.getValue()).toEqual([]);\r | |
304 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
305 | expect(button.items.getAt(1).pressed).toBe(false);\r | |
306 | expect(button.items.getAt(2).pressed).toBe(false);\r | |
307 | });\r | |
308 | \r | |
309 | it("should set a single value", function() {\r | |
310 | makeButton();\r | |
311 | \r | |
312 | button.setValue(['ted']);\r | |
313 | expect(button.getValue()).toEqual(['ted']);\r | |
314 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
315 | expect(button.items.getAt(1).pressed).toBe(false);\r | |
316 | expect(button.items.getAt(2).pressed).toBe(true);\r | |
317 | });\r | |
318 | \r | |
319 | it("should set a single index value", function() {\r | |
320 | makeButton();\r | |
321 | \r | |
322 | button.setValue([1]);\r | |
323 | \r | |
324 | expect(button.getValue()).toEqual([1]);\r | |
325 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
326 | expect(button.items.getAt(1).pressed).toBe(true);\r | |
327 | expect(button.items.getAt(2).pressed).toBe(false);\r | |
328 | });\r | |
329 | \r | |
330 | it("should set multiple values", function() {\r | |
331 | makeButton();\r | |
332 | \r | |
333 | button.setValue(['seg', 'ted']);\r | |
334 | \r | |
335 | expect(button.getValue()).toEqual(['seg', 'ted']);\r | |
336 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
337 | expect(button.items.getAt(1).pressed).toBe(false);\r | |
338 | expect(button.items.getAt(2).pressed).toBe(true);\r | |
339 | });\r | |
340 | \r | |
341 | it("should set multiple index values", function() {\r | |
342 | makeButton();\r | |
343 | \r | |
344 | button.setValue([1, 2]);\r | |
345 | \r | |
346 | expect(button.getValue()).toEqual([1, 'ted']);\r | |
347 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
348 | expect(button.items.getAt(1).pressed).toBe(true);\r | |
349 | expect(button.items.getAt(2).pressed).toBe(true);\r | |
350 | });\r | |
351 | \r | |
352 | it("should set values for buttons that are initialized with pressed:true", function() {\r | |
353 | makeButton({\r | |
354 | items: [{\r | |
355 | text: 'Seg',\r | |
356 | value: 'seg',\r | |
357 | pressed: true\r | |
358 | }, {\r | |
359 | text: 'Men',\r | |
360 | pressed: true\r | |
361 | }, {\r | |
362 | text: 'Ted',\r | |
363 | value: 'ted'\r | |
364 | }]\r | |
365 | });\r | |
366 | \r | |
367 | expect(button.getValue()).toEqual(['seg', 1]);\r | |
368 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
369 | expect(button.items.getAt(1).pressed).toBe(true);\r | |
370 | expect(button.items.getAt(2).pressed).toBe(false);\r | |
371 | });\r | |
372 | \r | |
373 | it("should set the value when a button is pressed by the user", function() {\r | |
374 | makeButton();\r | |
375 | \r | |
376 | clickButton(0);\r | |
377 | \r | |
378 | expect(button.getValue()).toEqual(['seg']);\r | |
379 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
380 | expect(button.items.getAt(1).pressed).toBe(false);\r | |
381 | expect(button.items.getAt(2).pressed).toBe(false);\r | |
382 | \r | |
383 | clickButton(1);\r | |
384 | \r | |
385 | expect(button.getValue()).toEqual(['seg', 1]);\r | |
386 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
387 | expect(button.items.getAt(1).pressed).toBe(true);\r | |
388 | expect(button.items.getAt(2).pressed).toBe(false);\r | |
389 | \r | |
390 | clickButton(0);\r | |
391 | \r | |
392 | expect(button.getValue()).toEqual([1]);\r | |
393 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
394 | expect(button.items.getAt(1).pressed).toBe(true);\r | |
395 | expect(button.items.getAt(2).pressed).toBe(false);\r | |
396 | \r | |
397 | clickButton(1);\r | |
398 | \r | |
399 | expect(button.getValue()).toEqual([]);\r | |
400 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
401 | expect(button.items.getAt(1).pressed).toBe(false);\r | |
402 | expect(button.items.getAt(2).pressed).toBe(false);\r | |
403 | });\r | |
404 | \r | |
405 | it("should accept a non-array value", function() {\r | |
406 | makeButton({\r | |
407 | value: 'seg'\r | |
408 | });\r | |
409 | \r | |
410 | expect(button.getValue()).toEqual(['seg']);\r | |
411 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
412 | expect(button.items.getAt(1).pressed).toBe(false);\r | |
413 | expect(button.items.getAt(2).pressed).toBe(false);\r | |
414 | });\r | |
415 | \r | |
416 | it("should accept a non-array index value", function() {\r | |
417 | makeButton({\r | |
418 | value: 2\r | |
419 | });\r | |
420 | \r | |
421 | expect(button.getValue()).toEqual(['ted']);\r | |
422 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
423 | expect(button.items.getAt(1).pressed).toBe(false);\r | |
424 | expect(button.items.getAt(2).pressed).toBe(true);\r | |
425 | });\r | |
426 | \r | |
427 | it("should throw an error if no button value is matched", function() {\r | |
428 | makeButton({\r | |
429 | id: 'my-button'\r | |
430 | });\r | |
431 | \r | |
432 | expect(function () {\r | |
433 | button.setValue(['seg', 'blah']);\r | |
434 | }).toThrow("Invalid value 'blah' for segmented button: 'my-button'");\r | |
435 | });\r | |
436 | \r | |
437 | it("should thow an error if an index value is out of bounds", function() {\r | |
438 | makeButton({\r | |
439 | id: 'my-button'\r | |
440 | });\r | |
441 | \r | |
442 | expect(function () {\r | |
443 | button.setValue(['seg', 3, 'ted']);\r | |
444 | }).toThrow("Invalid value '3' for segmented button: 'my-button'");\r | |
445 | });\r | |
446 | \r | |
447 | it("should fire a change event", function() {\r | |
448 | var newValues = [],\r | |
449 | oldValues = [];\r | |
450 | \r | |
451 | makeButton({\r | |
452 | listeners: {\r | |
453 | change: function(b, newValue, oldValue) {\r | |
454 | // Do not use push because that pushes the value array *contents*, not the array itself.\r | |
455 | newValues[newValues.length] = newValue;\r | |
456 | oldValues[oldValues.length] = oldValue;\r | |
457 | }\r | |
458 | }\r | |
459 | });\r | |
460 | \r | |
461 | button.setValue([1, 2]);\r | |
462 | \r | |
463 | expect(button.getValue()).toEqual([1, 'ted']);\r | |
464 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
465 | expect(button.items.getAt(1).pressed).toBe(true);\r | |
466 | expect(button.items.getAt(2).pressed).toBe(true);\r | |
467 | \r | |
468 | clickButton(1);\r | |
469 | \r | |
470 | expect(button.getValue()).toEqual(['ted']);\r | |
471 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
472 | expect(button.items.getAt(1).pressed).toBe(false);\r | |
473 | expect(button.items.getAt(2).pressed).toBe(true);\r | |
474 | \r | |
475 | expect(newValues[0]).toEqual([1, 'ted']);\r | |
476 | expect(oldValues[0]).toEqual([]);\r | |
477 | expect(newValues[1]).toEqual(['ted']);\r | |
478 | expect(oldValues[1]).toEqual([1, 'ted']);\r | |
479 | \r | |
480 | });\r | |
481 | \r | |
482 | describe('forceSelection', function() {\r | |
483 | it("should initialize with the value of the first button if none configured pressed", function() {\r | |
484 | makeButton({\r | |
485 | forceSelection: true\r | |
486 | });\r | |
487 | expect(button.getValue()).toEqual(['seg']);\r | |
488 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
489 | expect(button.items.getAt(1).pressed).toBe(false);\r | |
490 | expect(button.items.getAt(2).pressed).toBe(false);\r | |
491 | \r | |
492 | // This gesture should be vetoed because of forceSelection: true\r | |
493 | clickButton(0);\r | |
494 | expect(button.getValue()).toEqual(['seg']);\r | |
495 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
496 | expect(button.items.getAt(1).pressed).toBe(false);\r | |
497 | expect(button.items.getAt(2).pressed).toBe(false);\r | |
498 | });\r | |
499 | });\r | |
500 | });\r | |
501 | \r | |
502 | describe("with a viewmodel", function() {\r | |
503 | function makeButton(cfg) {\r | |
504 | button = Ext.create(Ext.apply({\r | |
505 | xtype: 'segmentedbutton',\r | |
506 | renderTo: document.body,\r | |
507 | items: [{\r | |
508 | text: 'Foo',\r | |
509 | value: 'foo'\r | |
510 | }, {\r | |
511 | text: 'Bar',\r | |
512 | value: 'bar'\r | |
513 | }, {\r | |
514 | text: 'Baz',\r | |
515 | value: 'baz'\r | |
516 | }]\r | |
517 | }, cfg));\r | |
518 | }\r | |
519 | \r | |
520 | it("should have the defaultBindProperty be value", function() {\r | |
521 | makeButton();\r | |
522 | expect(button.defaultBindProperty).toBe('value');\r | |
523 | });\r | |
524 | \r | |
525 | it("should be able to set an initial value from the view model", function() {\r | |
526 | var vm = new Ext.app.ViewModel({\r | |
527 | data: {\r | |
528 | value: 'baz'\r | |
529 | }\r | |
530 | });\r | |
531 | makeButton({\r | |
532 | viewModel: vm,\r | |
533 | bind: '{value}'\r | |
534 | });\r | |
535 | vm.notify();\r | |
536 | expect(button.getValue()).toBe('baz');\r | |
537 | });\r | |
538 | \r | |
539 | it("should react to view model changes", function() {\r | |
540 | var vm = new Ext.app.ViewModel();\r | |
541 | makeButton({\r | |
542 | viewModel: vm,\r | |
543 | bind: '{value}'\r | |
544 | });\r | |
545 | vm.set('value', 'foo');\r | |
546 | vm.notify();\r | |
547 | expect(button.getValue()).toBe('foo');\r | |
548 | });\r | |
549 | \r | |
550 | it("should update the value in the view model", function() {\r | |
551 | var vm = new Ext.app.ViewModel();\r | |
552 | makeButton({\r | |
553 | viewModel: vm,\r | |
554 | bind: '{value}'\r | |
555 | });\r | |
556 | button.setValue('bar');\r | |
557 | expect(vm.get('value')).toBe('bar');\r | |
558 | });\r | |
559 | });\r | |
560 | });\r | |
561 | \r | |
562 | describe("the toggle event", function() {\r | |
563 | var handler;\r | |
564 | \r | |
565 | beforeEach(function() {\r | |
566 | handler = jasmine.createSpy();\r | |
567 | makeButton({\r | |
568 | allowMultiple: true,\r | |
569 | items: [\r | |
570 | { text: 'Seg' },\r | |
571 | { text: 'Men' },\r | |
572 | { text: 'Ted', pressed: true }\r | |
573 | ],\r | |
574 | listeners: {\r | |
575 | toggle: handler\r | |
576 | }\r | |
577 | });\r | |
578 | });\r | |
579 | \r | |
580 | it("should fire the toggle event when a child button is pressed", function() {\r | |
581 | var item = button.items.getAt(1);\r | |
582 | \r | |
583 | item.setPressed(true);\r | |
584 | \r | |
585 | expect(handler.callCount).toBe(1);\r | |
586 | expect(handler.mostRecentCall.args[0]).toBe(button);\r | |
587 | expect(handler.mostRecentCall.args[1]).toBe(item);\r | |
588 | expect(handler.mostRecentCall.args[2]).toBe(true);\r | |
589 | });\r | |
590 | \r | |
591 | it("should fire the toggle event when a child button is depressed", function() {\r | |
592 | var item = button.items.getAt(2);\r | |
593 | \r | |
594 | item.setPressed(false);\r | |
595 | \r | |
596 | expect(handler.callCount).toBe(1);\r | |
597 | expect(handler.mostRecentCall.args[0]).toBe(button);\r | |
598 | expect(handler.mostRecentCall.args[1]).toBe(item);\r | |
599 | expect(handler.mostRecentCall.args[2]).toBe(false);\r | |
600 | });\r | |
601 | });\r | |
602 | \r | |
603 | describe("allowToggle", function() {\r | |
604 | it("should allow buttons to be toggled when allowToggle is true", function() {\r | |
605 | makeButton({\r | |
606 | items: [\r | |
607 | { text: 'Seg' },\r | |
608 | { text: 'Men' },\r | |
609 | { text: 'Ted' }\r | |
610 | ]\r | |
611 | });\r | |
612 | \r | |
613 | expect(button.items.getAt(0).enableToggle).toBe(true);\r | |
614 | expect(button.items.getAt(1).enableToggle).toBe(true);\r | |
615 | expect(button.items.getAt(2).enableToggle).toBe(true);\r | |
616 | \r | |
617 | clickButton(0);\r | |
618 | \r | |
619 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
620 | \r | |
621 | clickButton(1);\r | |
622 | \r | |
623 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
624 | expect(button.items.getAt(1).pressed).toBe(true);\r | |
625 | });\r | |
626 | \r | |
627 | it("should not allow toggling when allowToggle is false", function() {\r | |
628 | makeButton({\r | |
629 | allowToggle: false,\r | |
630 | items: [\r | |
631 | { text: 'Seg' },\r | |
632 | { text: 'Men' },\r | |
633 | { text: 'Ted' }\r | |
634 | ]\r | |
635 | });\r | |
636 | \r | |
637 | expect(button.items.getAt(0).enableToggle).toBe(false);\r | |
638 | expect(button.items.getAt(1).enableToggle).toBe(false);\r | |
639 | expect(button.items.getAt(2).enableToggle).toBe(false);\r | |
640 | \r | |
641 | clickButton(0);\r | |
642 | \r | |
643 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
644 | });\r | |
645 | });\r | |
646 | \r | |
647 | describe("allowMultiple", function() {\r | |
648 | describe("when false", function() {\r | |
649 | it("should use a toggleGroup", function() {\r | |
650 | makeButton({\r | |
651 | items: [\r | |
652 | { text: 'Seg' },\r | |
653 | { text: 'Men' },\r | |
654 | { text: 'Ted' }\r | |
655 | ]\r | |
656 | });\r | |
657 | \r | |
658 | expect(button.items.getAt(0).toggleGroup).toBe(button.getId());\r | |
659 | expect(button.items.getAt(1).toggleGroup).toBe(button.getId());\r | |
660 | expect(button.items.getAt(2).toggleGroup).toBe(button.getId());\r | |
661 | });\r | |
662 | \r | |
663 | it("should not use a toggleGroup when allowToggle is false", function() {\r | |
664 | makeButton({\r | |
665 | allowToggle: false,\r | |
666 | items: [\r | |
667 | { text: 'Seg' },\r | |
668 | { text: 'Men' },\r | |
669 | { text: 'Ted' }\r | |
670 | ]\r | |
671 | });\r | |
672 | \r | |
673 | expect(button.items.getAt(0).toggleGroup).toBeUndefined();\r | |
674 | expect(button.items.getAt(1).toggleGroup).toBeUndefined();\r | |
675 | expect(button.items.getAt(2).toggleGroup).toBeUndefined();\r | |
676 | });\r | |
677 | \r | |
678 | it("should only allow one button to be pressed at a time", function() {\r | |
679 | makeButton({\r | |
680 | items: [\r | |
681 | { text: 'Seg' },\r | |
682 | { text: 'Men' }\r | |
683 | ]\r | |
684 | });\r | |
685 | \r | |
686 | clickButton(0);\r | |
687 | \r | |
688 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
689 | expect(button.items.getAt(1).pressed).toBe(false);\r | |
690 | \r | |
691 | clickButton(1);\r | |
692 | \r | |
693 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
694 | expect(button.items.getAt(1).pressed).toBe(true);\r | |
695 | });\r | |
696 | \r | |
697 | it("should not allow buttons to be depressed", function() {\r | |
698 | makeButton({\r | |
699 | items: [\r | |
700 | { text: 'Seg' },\r | |
701 | { text: 'Men' }\r | |
702 | ]\r | |
703 | });\r | |
704 | \r | |
705 | clickButton(0);\r | |
706 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
707 | clickButton(0);\r | |
708 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
709 | });\r | |
710 | });\r | |
711 | \r | |
712 | describe("when true", function() {\r | |
713 | beforeEach(function() {\r | |
714 | makeButton({\r | |
715 | allowMultiple: true,\r | |
716 | items: [\r | |
717 | { text: 'Seg' },\r | |
718 | { text: 'Men' }\r | |
719 | ]\r | |
720 | });\r | |
721 | });\r | |
722 | \r | |
723 | it("should not use a toggleGroup", function() {\r | |
724 | expect(button.items.getAt(0).toggleGroup).toBeUndefined();\r | |
725 | expect(button.items.getAt(1).toggleGroup).toBeUndefined();\r | |
726 | });\r | |
727 | \r | |
728 | it("should allow multiple buttons to be pressed", function() {\r | |
729 | clickButton(0);\r | |
730 | \r | |
731 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
732 | expect(button.items.getAt(1).pressed).toBe(false);\r | |
733 | \r | |
734 | clickButton(1);\r | |
735 | \r | |
736 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
737 | expect(button.items.getAt(1).pressed).toBe(true);\r | |
738 | });\r | |
739 | \r | |
740 | it("should allow buttons to be depressed", function() {\r | |
741 | clickButton(0);\r | |
742 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
743 | clickButton(0);\r | |
744 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
745 | });\r | |
746 | });\r | |
747 | });\r | |
748 | \r | |
749 | describe("allowDepress", function() {\r | |
750 | function makeButton(cfg) {\r | |
751 | button = Ext.create(Ext.apply({\r | |
752 | xtype: 'segmentedbutton',\r | |
753 | renderTo: document.body,\r | |
754 | items: [\r | |
755 | { text: 'Seg' },\r | |
756 | { text: 'Men' },\r | |
757 | { text: 'Ted' }\r | |
758 | ]\r | |
759 | }, cfg));\r | |
760 | }\r | |
761 | \r | |
762 | describe("when true", function() {\r | |
763 | it("should allow buttons to be depressed", function() {\r | |
764 | makeButton({\r | |
765 | allowDepress: true\r | |
766 | });\r | |
767 | \r | |
768 | clickButton(0);\r | |
769 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
770 | clickButton(0);\r | |
771 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
772 | });\r | |
773 | });\r | |
774 | \r | |
775 | describe("when false", function() {\r | |
776 | it("should not allow buttons to be depressed", function() {\r | |
777 | makeButton();\r | |
778 | \r | |
779 | clickButton(0);\r | |
780 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
781 | clickButton(0);\r | |
782 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
783 | });\r | |
784 | \r | |
785 | it("should have no effect when allowMultiple is true", function() {\r | |
786 | makeButton({\r | |
787 | allowMultiple: true,\r | |
788 | allowDepress: false\r | |
789 | });\r | |
790 | \r | |
791 | clickButton(0);\r | |
792 | expect(button.items.getAt(0).pressed).toBe(true);\r | |
793 | clickButton(0);\r | |
794 | expect(button.items.getAt(0).pressed).toBe(false);\r | |
795 | });\r | |
796 | });\r | |
797 | });\r | |
798 | \r | |
799 | describe("disable/enable", function() {\r | |
800 | it("should disable the child buttons when disable() is called", function() {\r | |
801 | makeButton({\r | |
802 | items: [\r | |
803 | { text: 'foo' },\r | |
804 | { text: 'bar' }\r | |
805 | ]\r | |
806 | });\r | |
807 | \r | |
808 | expect(button.items.getAt(0).disabled).toBe(false);\r | |
809 | expect(button.items.getAt(1).disabled).toBe(false);\r | |
810 | \r | |
811 | button.disable();\r | |
812 | \r | |
813 | expect(button.items.getAt(0).disabled).toBe(true);\r | |
814 | expect(button.items.getAt(1).disabled).toBe(true);\r | |
815 | });\r | |
816 | \r | |
817 | it("should enable the child buttons when enable() is called", function() {\r | |
818 | makeButton({\r | |
819 | disabled: true,\r | |
820 | items: [\r | |
821 | { text: 'foo' },\r | |
822 | { text: 'bar' }\r | |
823 | ]\r | |
824 | });\r | |
825 | \r | |
826 | expect(button.items.getAt(0).disabled).toBe(true);\r | |
827 | expect(button.items.getAt(1).disabled).toBe(true);\r | |
828 | \r | |
829 | button.enable();\r | |
830 | \r | |
831 | expect(button.items.getAt(0).disabled).toBe(false);\r | |
832 | expect(button.items.getAt(1).disabled).toBe(false);\r | |
833 | });\r | |
834 | \r | |
835 | it("should not mask the element when disabled", function() {\r | |
836 | makeButton();\r | |
837 | expect(button.maskOnDisable).toBe(false);\r | |
838 | });\r | |
839 | });\r | |
840 | \r | |
841 | describe("defaultUI", function() {\r | |
842 | it("should default to 'default'", function() {\r | |
843 | makeButton({\r | |
844 | items: [{\r | |
845 | text: 'Foo'\r | |
846 | }]\r | |
847 | });\r | |
848 | expect(button.getDefaultUI()).toBe('default');\r | |
849 | expect(button.items.getAt(0).ui).toBe('default-small');\r | |
850 | });\r | |
851 | \r | |
852 | it("should allow buttons to configure their own UI", function() {\r | |
853 | makeButton({\r | |
854 | items: [{\r | |
855 | text: 'Foo',\r | |
856 | ui: 'bar'\r | |
857 | }]\r | |
858 | });\r | |
859 | expect(button.getDefaultUI()).toBe('default');\r | |
860 | expect(button.items.getAt(0).ui).toBe('bar-small');\r | |
861 | });\r | |
862 | \r | |
863 | it("should use the defaultUI as the UI of the items", function() {\r | |
864 | makeButton({\r | |
865 | defaultUI: 'bob',\r | |
866 | items: [{\r | |
867 | text: 'Foo'\r | |
868 | }]\r | |
869 | });\r | |
870 | expect(button.items.getAt(0).ui).toBe('bob-small');\r | |
871 | });\r | |
872 | \r | |
873 | it("should not use the defaultUI for items that have a ui on the item instance", function() {\r | |
874 | makeButton({\r | |
875 | defaultUI: 'bob',\r | |
876 | items: [{\r | |
877 | text: 'Foo',\r | |
878 | ui: 'hooray'\r | |
879 | }]\r | |
880 | });\r | |
881 | expect(button.items.getAt(0).ui).toBe('hooray-small');\r | |
882 | });\r | |
883 | \r | |
884 | it("should not use the defaultUI for items that have a ui on the item class", function() {\r | |
885 | Ext.define('spec.Btn', {\r | |
886 | extend: 'Ext.button.Button',\r | |
887 | ui: 'baz'\r | |
888 | });\r | |
889 | \r | |
890 | makeButton({\r | |
891 | defaultUI: 'bob',\r | |
892 | items: [{\r | |
893 | xclass: 'spec.Btn',\r | |
894 | text: 'Foo'\r | |
895 | }]\r | |
896 | });\r | |
897 | \r | |
898 | expect(button.items.getAt(0).ui).toBe('baz-small');\r | |
899 | \r | |
900 | Ext.undefine('spec.Btn');\r | |
901 | });\r | |
902 | \r | |
903 | it("should not use the defaultUI for items that have a ui of 'default' on the item instance", function() {\r | |
904 | makeButton({\r | |
905 | defaultUI: 'bob',\r | |
906 | items: [{\r | |
907 | text: 'Foo',\r | |
908 | ui: 'default'\r | |
909 | }]\r | |
910 | });\r | |
911 | expect(button.items.getAt(0).ui).toBe('default-small');\r | |
912 | });\r | |
913 | });\r | |
914 | \r | |
915 | describe("item classes", function() {\r | |
916 | var firstCls = 'x-segmented-button-first',\r | |
917 | middleCls = 'x-segmented-button-middle',\r | |
918 | lastCls = 'x-segmented-button-last';\r | |
919 | \r | |
920 | \r | |
921 | // expects all of the items to have correct classes\r | |
922 | function expectClasses(items) {\r | |
923 | var itemCount, el;\r | |
924 | \r | |
925 | items = items || button.items.items;\r | |
926 | itemCount = items.length;\r | |
927 | \r | |
928 | if (itemCount === 1) {\r | |
929 | el = items[0].getEl();\r | |
930 | expect(el.hasCls(firstCls)).toBe(false);\r | |
931 | expect(el.hasCls(middleCls)).toBe(false);\r | |
932 | expect(el.hasCls(lastCls)).toBe(false);\r | |
933 | } else {\r | |
934 | Ext.each(items, function(item, index) {\r | |
935 | el = item.getEl();\r | |
936 | \r | |
937 | if (index === 0) {\r | |
938 | expect(el.hasCls(firstCls)).toBe(true);\r | |
939 | expect(el.hasCls(middleCls)).toBe(false);\r | |
940 | expect(el.hasCls(lastCls)).toBe(false);\r | |
941 | } else if (index === itemCount - 1) {\r | |
942 | expect(el.hasCls(firstCls)).toBe(false);\r | |
943 | expect(el.hasCls(middleCls)).toBe(false);\r | |
944 | expect(el.hasCls(lastCls)).toBe(true);\r | |
945 | } else {\r | |
946 | expect(el.hasCls(firstCls)).toBe(false);\r | |
947 | expect(el.hasCls(middleCls)).toBe(true);\r | |
948 | expect(el.hasCls(lastCls)).toBe(false);\r | |
949 | }\r | |
950 | });\r | |
951 | }\r | |
952 | }\r | |
953 | \r | |
954 | \r | |
955 | it("should have the correct classes when there is only one item", function() {\r | |
956 | makeButton({\r | |
957 | items: [\r | |
958 | { text: 'Seg' }\r | |
959 | ]\r | |
960 | });\r | |
961 | \r | |
962 | expectClasses();\r | |
963 | });\r | |
964 | \r | |
965 | it("should have the correct classes when there are two items", function() {\r | |
966 | makeButton({\r | |
967 | items: [\r | |
968 | { text: 'Seg' },\r | |
969 | { text: 'Men' }\r | |
970 | ]\r | |
971 | });\r | |
972 | \r | |
973 | expectClasses();\r | |
974 | });\r | |
975 | \r | |
976 | it("should have the correct classes when there are three items", function() {\r | |
977 | makeButton({\r | |
978 | items: [\r | |
979 | { text: 'Seg' },\r | |
980 | { text: 'Men' },\r | |
981 | { text: 'Ted' }\r | |
982 | ]\r | |
983 | });\r | |
984 | \r | |
985 | expectClasses();\r | |
986 | });\r | |
987 | \r | |
988 | it("should have the correct classes when there are four items", function() {\r | |
989 | makeButton({\r | |
990 | items: [\r | |
991 | { text: 'Seg' },\r | |
992 | { text: 'Men' },\r | |
993 | { text: 'Ted' },\r | |
994 | { text: 'Btn' }\r | |
995 | ]\r | |
996 | });\r | |
997 | \r | |
998 | expectClasses();\r | |
999 | });\r | |
1000 | \r | |
1001 | it("should have the correct classes when items are added or removed", function () {\r | |
1002 | makeButton({\r | |
1003 | items: [\r | |
1004 | { text: 'Seg' }\r | |
1005 | ]\r | |
1006 | });\r | |
1007 | \r | |
1008 | // add button at the end\r | |
1009 | button.add({ text: 'Men' });\r | |
1010 | expectClasses();\r | |
1011 | \r | |
1012 | // insert button before first\r | |
1013 | button.insert(0, { text: 'Ted' });\r | |
1014 | expectClasses();\r | |
1015 | \r | |
1016 | // insert button in middle\r | |
1017 | button.insert(1, { text: 'Btn' });\r | |
1018 | expectClasses();\r | |
1019 | \r | |
1020 | // remove button from middle\r | |
1021 | button.remove(2);\r | |
1022 | expectClasses();\r | |
1023 | \r | |
1024 | // remove button from end\r | |
1025 | button.remove(2);\r | |
1026 | expectClasses();\r | |
1027 | \r | |
1028 | // remove first button\r | |
1029 | button.remove(0);\r | |
1030 | expectClasses();\r | |
1031 | });\r | |
1032 | \r | |
1033 | it("should have the correct classes when items are shown or hidden", function () {\r | |
1034 | makeButton({\r | |
1035 | items: [\r | |
1036 | { text: 'Seg', hidden: true },\r | |
1037 | { text: 'Men' },\r | |
1038 | { text: 'Ted', hidden: true },\r | |
1039 | { text: 'Btn', hidden: true }\r | |
1040 | ]\r | |
1041 | });\r | |
1042 | \r | |
1043 | var items = button.items;\r | |
1044 | \r | |
1045 | items.getAt(3).show();\r | |
1046 | expectClasses([\r | |
1047 | items.getAt(1),\r | |
1048 | items.getAt(3)\r | |
1049 | ]);\r | |
1050 | \r | |
1051 | items.getAt(0).show();\r | |
1052 | expectClasses([\r | |
1053 | items.getAt(0),\r | |
1054 | items.getAt(1),\r | |
1055 | items.getAt(3)\r | |
1056 | ]);\r | |
1057 | \r | |
1058 | items.getAt(2).show();\r | |
1059 | expectClasses([\r | |
1060 | items.getAt(0),\r | |
1061 | items.getAt(1),\r | |
1062 | items.getAt(2),\r | |
1063 | items.getAt(3)\r | |
1064 | ]);\r | |
1065 | \r | |
1066 | items.getAt(1).hide();\r | |
1067 | expectClasses([\r | |
1068 | items.getAt(0),\r | |
1069 | items.getAt(2),\r | |
1070 | items.getAt(3)\r | |
1071 | ]);\r | |
1072 | \r | |
1073 | items.getAt(3).hide();\r | |
1074 | expectClasses([\r | |
1075 | items.getAt(0),\r | |
1076 | items.getAt(2)\r | |
1077 | ]);\r | |
1078 | \r | |
1079 | items.getAt(0).hide();\r | |
1080 | expectClasses([\r | |
1081 | items.getAt(2)\r | |
1082 | ]);\r | |
1083 | });\r | |
1084 | });\r | |
1085 | \r | |
1086 | describe("layout", function() {\r | |
1087 | var dimensions = {\r | |
1088 | 1: 'width',\r | |
1089 | 2: 'height',\r | |
1090 | 3: 'width and height'\r | |
1091 | },\r | |
1092 | sizeStyle = {\r | |
1093 | 0: '',\r | |
1094 | 1: 'width:87px;',\r | |
1095 | 2: 'height:94px;',\r | |
1096 | 3: 'width:87px;height:94px;'\r | |
1097 | },\r | |
1098 | sizeStyleVert = {\r | |
1099 | 0: '',\r | |
1100 | 1: 'width:86px;',\r | |
1101 | 2: 'height:95px;',\r | |
1102 | 3: 'width:86px;height:95px;'\r | |
1103 | },\r | |
1104 | sizeStyleFirst = {\r | |
1105 | 0: '',\r | |
1106 | 1: 'width:86px;',\r | |
1107 | 2: 'height:94px;',\r | |
1108 | 3: 'width:86px;height:94px;'\r | |
1109 | },\r | |
1110 | sizeStyleFirstVert = {\r | |
1111 | 0: '',\r | |
1112 | 1: 'width:86px;',\r | |
1113 | 2: 'height:94px;',\r | |
1114 | 3: 'width:86px;height:94px;'\r | |
1115 | };\r | |
1116 | \r | |
1117 | \r | |
1118 | function makeLayoutSuite(shrinkWrap) {\r | |
1119 | function makeButton(cfg) {\r | |
1120 | var vertical = cfg.vertical,\r | |
1121 | itemText = '<div style="display:inline-block;background:red;' +\r | |
1122 | (vertical ? sizeStyleVert : sizeStyle)[shrinkWrap] + '"> </div>',\r | |
1123 | itemTextFirst = '<div style="display:inline-block;background:red;' +\r | |
1124 | (vertical ? sizeStyleFirstVert : sizeStyleFirst)[shrinkWrap] + '"> </div>';\r | |
1125 | \r | |
1126 | button = Ext.create(Ext.apply({\r | |
1127 | xtype: 'segmentedbutton',\r | |
1128 | renderTo: document.body,\r | |
1129 | width: (shrinkWrap & 1) ? null : vertical ? 100 : 300,\r | |
1130 | height: (shrinkWrap & 2) ? null : vertical ? 300 : 100,\r | |
1131 | items: [\r | |
1132 | { text: itemTextFirst },\r | |
1133 | { text: itemText },\r | |
1134 | { text: itemText }\r | |
1135 | ]\r | |
1136 | }, cfg));\r | |
1137 | }\r | |
1138 | \r | |
1139 | describe((shrinkWrap ? ("shrink wrap " + dimensions[shrinkWrap]) : "fixed width and height"), function() {\r | |
1140 | it("should layout horizontal", function() {\r | |
1141 | makeButton({});\r | |
1142 | \r | |
1143 | expect(button).toHaveLayout({\r | |
1144 | el: {\r | |
1145 | w: 300,\r | |
1146 | h: 100\r | |
1147 | },\r | |
1148 | items: {\r | |
1149 | 0: {\r | |
1150 | el: {\r | |
1151 | x: 0,\r | |
1152 | y: 0,\r | |
1153 | w: 100,\r | |
1154 | h: 100\r | |
1155 | }\r | |
1156 | },\r | |
1157 | 1: {\r | |
1158 | el: {\r | |
1159 | x: 100,\r | |
1160 | y: 0,\r | |
1161 | w: 100,\r | |
1162 | h: 100\r | |
1163 | }\r | |
1164 | },\r | |
1165 | 2: {\r | |
1166 | el: {\r | |
1167 | x: 200,\r | |
1168 | y: 0,\r | |
1169 | w: 100,\r | |
1170 | h: 100\r | |
1171 | }\r | |
1172 | }\r | |
1173 | }\r | |
1174 | });\r | |
1175 | });\r | |
1176 | \r | |
1177 | it("should layout vertical", function() {\r | |
1178 | makeButton({\r | |
1179 | vertical: true\r | |
1180 | });\r | |
1181 | \r | |
1182 | var shrinkHeight = (shrinkWrap & 2);\r | |
1183 | \r | |
1184 | // This layout matcher contains ranges for heights and y positions because\r | |
1185 | // fixed height table is subject to rounding errors in non-webkit browsers\r | |
1186 | // when the cells have borders.\r | |
1187 | expect(button).toHaveLayout({\r | |
1188 | el: {\r | |
1189 | w: 100,\r | |
1190 | h: 300\r | |
1191 | },\r | |
1192 | items: {\r | |
1193 | 0: {\r | |
1194 | el: {\r | |
1195 | x: 0,\r | |
1196 | y: 0,\r | |
1197 | w: 100,\r | |
1198 | h: shrinkHeight ? 100 : [100, 104]\r | |
1199 | }\r | |
1200 | },\r | |
1201 | 1: {\r | |
1202 | el: {\r | |
1203 | x: 0,\r | |
1204 | y: shrinkHeight ? 100 : [100, 103],\r | |
1205 | w: 100,\r | |
1206 | h: shrinkHeight ? 100 : [98, 100]\r | |
1207 | }\r | |
1208 | },\r | |
1209 | 2: {\r | |
1210 | el: {\r | |
1211 | x: 0,\r | |
1212 | y: shrinkHeight ? 200 : [200, 202],\r | |
1213 | w: 100,\r | |
1214 | h: shrinkHeight ? 100 : [98, 100]\r | |
1215 | }\r | |
1216 | }\r | |
1217 | }\r | |
1218 | });\r | |
1219 | });\r | |
1220 | });\r | |
1221 | }\r | |
1222 | \r | |
1223 | makeLayoutSuite(0); // fixed width and height\r | |
1224 | makeLayoutSuite(1); // shrinkWrap width\r | |
1225 | makeLayoutSuite(2); // shrinkWrap height\r | |
1226 | makeLayoutSuite(3); // shrinkWrap both\r | |
1227 | \r | |
1228 | describe("horizontal", function() {\r | |
1229 | it("should divide width evenly among non-widthed items", function() {\r | |
1230 | makeButton({\r | |
1231 | width: 300,\r | |
1232 | height: 100,\r | |
1233 | items: [\r | |
1234 | { text: 'Seg', width: 50 },\r | |
1235 | { text: 'Men' },\r | |
1236 | { text: 'Ted' }\r | |
1237 | ]\r | |
1238 | });\r | |
1239 | \r | |
1240 | expect(button).toHaveLayout({\r | |
1241 | el: {\r | |
1242 | w: 300,\r | |
1243 | h: 100\r | |
1244 | },\r | |
1245 | items: {\r | |
1246 | 0: {\r | |
1247 | el: {\r | |
1248 | x: 0,\r | |
1249 | y: 0,\r | |
1250 | w: 50,\r | |
1251 | h: 100\r | |
1252 | }\r | |
1253 | },\r | |
1254 | 1: {\r | |
1255 | el: {\r | |
1256 | x: 50,\r | |
1257 | y: 0,\r | |
1258 | w: 125,\r | |
1259 | h: 100\r | |
1260 | }\r | |
1261 | },\r | |
1262 | 2: {\r | |
1263 | el: {\r | |
1264 | x: 175,\r | |
1265 | y: 0,\r | |
1266 | w: 125,\r | |
1267 | h: 100\r | |
1268 | }\r | |
1269 | }\r | |
1270 | }\r | |
1271 | });\r | |
1272 | });\r | |
1273 | \r | |
1274 | it("should stretch all items to the height of the largest item", function() {\r | |
1275 | makeButton({\r | |
1276 | width: 300,\r | |
1277 | items: [\r | |
1278 | { text: 'Seg', height: 100 },\r | |
1279 | { text: 'Men' },\r | |
1280 | { text: 'Ted' }\r | |
1281 | ]\r | |
1282 | });\r | |
1283 | \r | |
1284 | expect(button).toHaveLayout({\r | |
1285 | el: {\r | |
1286 | w: 300,\r | |
1287 | h: 100\r | |
1288 | },\r | |
1289 | items: {\r | |
1290 | 0: {\r | |
1291 | el: {\r | |
1292 | x: 0,\r | |
1293 | y: 0,\r | |
1294 | w: 100,\r | |
1295 | h: 100\r | |
1296 | }\r | |
1297 | },\r | |
1298 | 1: {\r | |
1299 | el: {\r | |
1300 | x: 100,\r | |
1301 | y: 0,\r | |
1302 | w: 100,\r | |
1303 | h: 100\r | |
1304 | }\r | |
1305 | },\r | |
1306 | 2: {\r | |
1307 | el: {\r | |
1308 | x: 200,\r | |
1309 | y: 0,\r | |
1310 | w: 100,\r | |
1311 | h: 100\r | |
1312 | }\r | |
1313 | }\r | |
1314 | }\r | |
1315 | });\r | |
1316 | });\r | |
1317 | \r | |
1318 | if (!Ext.supports.CSS3BorderRadius) {\r | |
1319 | it("should stretch the frameBody when the width of the segmented button is stretched", function() {\r | |
1320 | makeButton({\r | |
1321 | width: 300,\r | |
1322 | items: [\r | |
1323 | { text: 'Foo' },\r | |
1324 | { text: 'Bar' }\r | |
1325 | ]\r | |
1326 | });\r | |
1327 | \r | |
1328 | var btn = button.items.getAt(1);\r | |
1329 | \r | |
1330 | expect(btn.frameBody.getWidth()).toBe(150 - btn.getFrameInfo().right);\r | |
1331 | });\r | |
1332 | }\r | |
1333 | });\r | |
1334 | \r | |
1335 | describe("vertical", function() {\r | |
1336 | it("should divide height evenly among non-heighted items", function() {\r | |
1337 | makeButton({\r | |
1338 | vertical: true,\r | |
1339 | width: 100,\r | |
1340 | height: 300,\r | |
1341 | items: [\r | |
1342 | { text: 'Seg', height: 50 },\r | |
1343 | { text: 'Men' },\r | |
1344 | { text: 'Ted' }\r | |
1345 | ]\r | |
1346 | });\r | |
1347 | \r | |
1348 | expect(button).toHaveLayout({\r | |
1349 | el: {\r | |
1350 | w: 100,\r | |
1351 | h: 300\r | |
1352 | },\r | |
1353 | items: {\r | |
1354 | 0: {\r | |
1355 | el: {\r | |
1356 | x: 0,\r | |
1357 | y: 0,\r | |
1358 | w: 100,\r | |
1359 | h: Ext.isIE8 ? 51 : 50\r | |
1360 | }\r | |
1361 | },\r | |
1362 | 1: {\r | |
1363 | el: {\r | |
1364 | x: 0,\r | |
1365 | y: Ext.isIE8 ? 51 : 50,\r | |
1366 | w: 100,\r | |
1367 | h: 125\r | |
1368 | }\r | |
1369 | },\r | |
1370 | 2: {\r | |
1371 | el: {\r | |
1372 | x: 0,\r | |
1373 | y: 175,\r | |
1374 | w: 100,\r | |
1375 | h: 125\r | |
1376 | }\r | |
1377 | }\r | |
1378 | }\r | |
1379 | });\r | |
1380 | });\r | |
1381 | \r | |
1382 | it("should stretch all items to the width of the largest item", function() {\r | |
1383 | makeButton({\r | |
1384 | vertical: true,\r | |
1385 | items: [\r | |
1386 | { text: 'Seg', width: 100 },\r | |
1387 | { text: 'Men' },\r | |
1388 | { text: 'Ted' }\r | |
1389 | ]\r | |
1390 | });\r | |
1391 | \r | |
1392 | expect(button).toHaveLayout({\r | |
1393 | el: {\r | |
1394 | w: 100\r | |
1395 | },\r | |
1396 | items: {\r | |
1397 | 0: {\r | |
1398 | el: {\r | |
1399 | x: 0,\r | |
1400 | y: 0,\r | |
1401 | w: 100,\r | |
1402 | h: 22\r | |
1403 | }\r | |
1404 | },\r | |
1405 | 1: {\r | |
1406 | el: {\r | |
1407 | x: 0,\r | |
1408 | y: 22,\r | |
1409 | w: 100,\r | |
1410 | h: 21\r | |
1411 | }\r | |
1412 | },\r | |
1413 | 2: {\r | |
1414 | el: {\r | |
1415 | x: 0,\r | |
1416 | y: 43,\r | |
1417 | w: 100,\r | |
1418 | h: 21\r | |
1419 | }\r | |
1420 | }\r | |
1421 | }\r | |
1422 | });\r | |
1423 | });\r | |
1424 | });\r | |
1425 | });\r | |
1426 | }); |