]>
Commit | Line | Data |
---|---|---|
6527f429 DM |
1 | describe("Ext.layout.container.Accordion", function() {\r |
2 | \r | |
3 | describe("single item", function() {\r | |
4 | var panel, child;\r | |
5 | function makePanel(multi, fill) {\r | |
6 | panel = new Ext.panel.Panel({\r | |
7 | width: 100,\r | |
8 | height: 100,\r | |
9 | layout: {\r | |
10 | type: 'accordion',\r | |
11 | animate: false,\r | |
12 | multi: multi,\r | |
13 | fill: fill === false ? false : true\r | |
14 | },\r | |
15 | items: [{\r | |
16 | title: 'Child Panel'\r | |
17 | }],\r | |
18 | renderTo: Ext.getBody()\r | |
19 | });\r | |
20 | child = panel.items.getAt(0);\r | |
21 | }\r | |
22 | \r | |
23 | afterEach(function() {\r | |
24 | panel.destroy();\r | |
25 | });\r | |
26 | \r | |
27 | describe("single collapse", function() {\r | |
28 | beforeEach(function() {\r | |
29 | makePanel();\r | |
30 | });\r | |
31 | \r | |
32 | it("should not allow the item to collapse", function() {\r | |
33 | child.collapse();\r | |
34 | expect(child.collapsed).toBe(false);\r | |
35 | });\r | |
36 | });\r | |
37 | \r | |
38 | describe("multi collapse", function() {\r | |
39 | beforeEach(function() {\r | |
40 | makePanel(true);\r | |
41 | });\r | |
42 | \r | |
43 | it("should not allow the item to collapse", function() {\r | |
44 | child.collapse();\r | |
45 | expect(child.collapsed).toBe(false);\r | |
46 | });\r | |
47 | });\r | |
48 | \r | |
49 | });\r | |
50 | \r | |
51 | describe("dynamic items", function(){\r | |
52 | var ct, makeCt, expectCollapsed, expectExpanded;\r | |
53 | \r | |
54 | beforeEach(function(){\r | |
55 | makeCt = function(items, isMulti) {\r | |
56 | ct = new Ext.container.Container({\r | |
57 | renderTo: document.body,\r | |
58 | width: 200,\r | |
59 | height: 400,\r | |
60 | layout: {\r | |
61 | type: 'accordion',\r | |
62 | animate: false,\r | |
63 | multi: isMulti\r | |
64 | },\r | |
65 | items: items\r | |
66 | }); \r | |
67 | };\r | |
68 | \r | |
69 | expectCollapsed = function(index){\r | |
70 | expect(ct.items.getAt(index).collapsed).toBeTruthy(); \r | |
71 | };\r | |
72 | \r | |
73 | expectExpanded = function(index){\r | |
74 | expect(ct.items.getAt(index).collapsed).toBeFalsy(); \r | |
75 | };\r | |
76 | });\r | |
77 | \r | |
78 | afterEach(function(){\r | |
79 | Ext.destroy(ct);\r | |
80 | makeCt = ct = expectExpanded = expectCollapsed = null;\r | |
81 | });\r | |
82 | \r | |
83 | describe("single", function() {\r | |
84 | it("should collapse a dynamic item by default", function(){\r | |
85 | makeCt([{\r | |
86 | title: 'Default'\r | |
87 | }]);\r | |
88 | var c = new Ext.panel.Panel({\r | |
89 | title: 'Dynamic'\r | |
90 | });\r | |
91 | ct.add(c);\r | |
92 | expectCollapsed(1);\r | |
93 | });\r | |
94 | \r | |
95 | it("should be able to expand items that were added dynamically", function() {\r | |
96 | makeCt([{\r | |
97 | title: 'Default'\r | |
98 | }]);\r | |
99 | var c = new Ext.panel.Panel({\r | |
100 | title: 'Dynamic'\r | |
101 | });\r | |
102 | ct.add(c);\r | |
103 | c.expand();\r | |
104 | expectCollapsed(0);\r | |
105 | expectExpanded(1);\r | |
106 | });\r | |
107 | \r | |
108 | it("should be able to expand items that were added dynamically", function() {\r | |
109 | makeCt([{\r | |
110 | title: 'Default'\r | |
111 | }]);\r | |
112 | var c = new Ext.panel.Panel({\r | |
113 | title: 'Dynamic'\r | |
114 | });\r | |
115 | ct.add(c);\r | |
116 | c.expand();\r | |
117 | c.collapse();\r | |
118 | expectExpanded(0);\r | |
119 | expectCollapsed(1);\r | |
120 | });\r | |
121 | \r | |
122 | it("should not expand other items when adding", function() {\r | |
123 | makeCt([{\r | |
124 | title: 'Expanded'\r | |
125 | }, {\r | |
126 | title: 'Static - Collapsed'\r | |
127 | }]);\r | |
128 | ct.add({\r | |
129 | title: 'Dynamic'\r | |
130 | });\r | |
131 | expectExpanded(0);\r | |
132 | expectCollapsed(1);\r | |
133 | expectCollapsed(2);\r | |
134 | });\r | |
135 | });\r | |
136 | \r | |
137 | describe("multi", function(){\r | |
138 | it("should leave an item expanded by default", function(){\r | |
139 | makeCt([{\r | |
140 | title: 'Default'\r | |
141 | }], true);\r | |
142 | var c = new Ext.panel.Panel({\r | |
143 | title: 'Dynamic'\r | |
144 | });\r | |
145 | ct.add(c);\r | |
146 | expectExpanded(1);\r | |
147 | });\r | |
148 | \r | |
149 | it("should collapse the item if we specify it explicitly", function(){\r | |
150 | makeCt([{\r | |
151 | title: 'Default'\r | |
152 | }], true);\r | |
153 | var c = new Ext.panel.Panel({\r | |
154 | title: 'Dynamic',\r | |
155 | collapsed: true\r | |
156 | });\r | |
157 | ct.add(c);\r | |
158 | expectCollapsed(1);\r | |
159 | });\r | |
160 | \r | |
161 | it("should be able to expand items that were added dynamically", function() {\r | |
162 | makeCt([{\r | |
163 | title: 'Default'\r | |
164 | }], true);\r | |
165 | var c = new Ext.panel.Panel({\r | |
166 | title: 'Dynamic',\r | |
167 | collapsed: true\r | |
168 | });\r | |
169 | ct.add(c);\r | |
170 | c.expand();\r | |
171 | expectExpanded(0);\r | |
172 | expectExpanded(1);\r | |
173 | });\r | |
174 | \r | |
175 | it("should be able to collapse items that were added dynamically", function() {\r | |
176 | makeCt([{\r | |
177 | title: 'Default'\r | |
178 | }], true);\r | |
179 | var c = new Ext.panel.Panel({\r | |
180 | title: 'Dynamic',\r | |
181 | collapsed: true\r | |
182 | });\r | |
183 | ct.add(c);\r | |
184 | c.expand();\r | |
185 | c.collapse();\r | |
186 | expectExpanded(0);\r | |
187 | expectCollapsed(1);\r | |
188 | });\r | |
189 | });\r | |
190 | });\r | |
191 | \r | |
192 | describe("expand/collapse", function(){\r | |
193 | \r | |
194 | var ct, makeCt, expectCollapsed, expectExpanded;\r | |
195 | \r | |
196 | beforeEach(function(){\r | |
197 | makeCt = function(items, multi, fill) {\r | |
198 | ct = new Ext.container.Container({\r | |
199 | renderTo: document.body,\r | |
200 | width: 200,\r | |
201 | height: 400,\r | |
202 | layout: {\r | |
203 | type: 'accordion',\r | |
204 | animate: false,\r | |
205 | multi: multi,\r | |
206 | fill: fill === false ? false : true\r | |
207 | },\r | |
208 | items: items\r | |
209 | }); \r | |
210 | };\r | |
211 | \r | |
212 | expectCollapsed = function(index){\r | |
213 | var item = ct.items.getAt(index);\r | |
214 | expect(item.collapsed).toBeTruthy();\r | |
215 | };\r | |
216 | \r | |
217 | expectExpanded = function(index){\r | |
218 | var item = ct.items.getAt(index);\r | |
219 | expect(item.collapsed).toBeFalsy();\r | |
220 | };\r | |
221 | });\r | |
222 | \r | |
223 | afterEach(function(){\r | |
224 | Ext.destroy(ct);\r | |
225 | makeCt = ct = expectExpanded = expectCollapsed = null;\r | |
226 | });\r | |
227 | \r | |
228 | var tests = function(fill) {\r | |
229 | describe("single", function(){\r | |
230 | it("should expand the first item by default if none are collapsed: false", function(){\r | |
231 | makeCt([{\r | |
232 | title: 'P1'\r | |
233 | }, {\r | |
234 | title: 'P2'\r | |
235 | }, {\r | |
236 | title: 'P3'\r | |
237 | }], false, fill);\r | |
238 | expectExpanded(0);\r | |
239 | });\r | |
240 | \r | |
241 | it("should expand a collapsed: false item by default", function(){\r | |
242 | makeCt([{\r | |
243 | title: 'P1'\r | |
244 | }, {\r | |
245 | title: 'P2',\r | |
246 | collapsed: false\r | |
247 | }, {\r | |
248 | title: 'P3'\r | |
249 | }], false, fill);\r | |
250 | expectExpanded(1);\r | |
251 | });\r | |
252 | \r | |
253 | it("should expand the first collapsed: false item by default", function(){\r | |
254 | makeCt([{\r | |
255 | title: 'P1'\r | |
256 | }, {\r | |
257 | title: 'P2',\r | |
258 | collapsed: false\r | |
259 | }, {\r | |
260 | title: 'P3'\r | |
261 | }], false, fill);\r | |
262 | expectExpanded(1);\r | |
263 | expectCollapsed(2);\r | |
264 | });\r | |
265 | \r | |
266 | it("should expand the next item when collapsing an item", function(){\r | |
267 | makeCt([{\r | |
268 | title: 'P1'\r | |
269 | }, {\r | |
270 | title: 'P2'\r | |
271 | }, {\r | |
272 | title: 'P3'\r | |
273 | }], false, fill);\r | |
274 | ct.items.first().collapse();\r | |
275 | expectCollapsed(0);\r | |
276 | expectExpanded(1);\r | |
277 | });\r | |
278 | \r | |
279 | it("should expand the previous item when collapsing an item and next is not available", function(){\r | |
280 | makeCt([{\r | |
281 | title: 'P1'\r | |
282 | }, {\r | |
283 | title: 'P2'\r | |
284 | }, {\r | |
285 | title: 'P3',\r | |
286 | collapsed: false\r | |
287 | }], false, fill);\r | |
288 | ct.items.last().collapse();\r | |
289 | expectCollapsed(2);\r | |
290 | expectExpanded(1);\r | |
291 | });\r | |
292 | \r | |
293 | it("should collapse the expanded item when expanding an item", function(){\r | |
294 | makeCt([{\r | |
295 | title: 'P1'\r | |
296 | }, {\r | |
297 | title: 'P2'\r | |
298 | }, {\r | |
299 | title: 'P3'\r | |
300 | }], false, fill);\r | |
301 | ct.items.last().expand();\r | |
302 | expectCollapsed(0);\r | |
303 | expectExpanded(2);\r | |
304 | });\r | |
305 | });\r | |
306 | \r | |
307 | describe("multi", function(){\r | |
308 | it("should have each item expanded unless specified as collapsed", function(){\r | |
309 | makeCt([{\r | |
310 | title: 'P1'\r | |
311 | }, {\r | |
312 | title: 'P2'\r | |
313 | }, {\r | |
314 | title: 'P3'\r | |
315 | }], true, fill);\r | |
316 | expectExpanded(0);\r | |
317 | expectExpanded(1);\r | |
318 | expectExpanded(2);\r | |
319 | });\r | |
320 | \r | |
321 | it("should collapse any items with collapsed: true", function(){\r | |
322 | makeCt([{\r | |
323 | title: 'P1',\r | |
324 | collapsed: true\r | |
325 | }, {\r | |
326 | title: 'P2'\r | |
327 | }, {\r | |
328 | title: 'P3',\r | |
329 | collapsed: true\r | |
330 | }], true, fill);\r | |
331 | expectExpanded(1);\r | |
332 | });\r | |
333 | \r | |
334 | it("should not modify other items when collapsing an item", function(){\r | |
335 | makeCt([{\r | |
336 | title: 'P1'\r | |
337 | }, {\r | |
338 | title: 'P2'\r | |
339 | }, {\r | |
340 | title: 'P3'\r | |
341 | }], true, fill);\r | |
342 | ct.items.getAt(1).collapse();\r | |
343 | expectExpanded(0);\r | |
344 | expectCollapsed(1);\r | |
345 | expectExpanded(2);\r | |
346 | });\r | |
347 | \r | |
348 | it("should not modify other items when expanding an item", function(){\r | |
349 | makeCt([{\r | |
350 | title: 'P1',\r | |
351 | collapsed: true\r | |
352 | }, {\r | |
353 | title: 'P2'\r | |
354 | }, {\r | |
355 | title: 'P3',\r | |
356 | collapsed: true\r | |
357 | }], true, fill);\r | |
358 | ct.items.first().expand();\r | |
359 | expectExpanded(0);\r | |
360 | expectExpanded(1);\r | |
361 | expectCollapsed(2);\r | |
362 | });\r | |
363 | }); \r | |
364 | };\r | |
365 | \r | |
366 | // The behaviour for the accordion should be the same for both fill values\r | |
367 | describe("fill: true", function() {\r | |
368 | tests(true); \r | |
369 | });\r | |
370 | \r | |
371 | describe("fill: false", function(){\r | |
372 | tests(false);\r | |
373 | });\r | |
374 | });\r | |
375 | \r | |
376 | describe("show/hide", function(){\r | |
377 | var ct, makeCt, expectCollapsed, expectExpanded;\r | |
378 | \r | |
379 | beforeEach(function(){\r | |
380 | makeCt = function(items) {\r | |
381 | ct = new Ext.container.Container({\r | |
382 | renderTo: document.body,\r | |
383 | width: 200,\r | |
384 | height: 400,\r | |
385 | layout: {\r | |
386 | type: 'accordion',\r | |
387 | animate: false\r | |
388 | },\r | |
389 | items: items\r | |
390 | }); \r | |
391 | };\r | |
392 | \r | |
393 | expectCollapsed = function(index){\r | |
394 | var item = ct.items.getAt(index);\r | |
395 | \r | |
396 | expect(item.collapsed).toBeTruthy(); \r | |
397 | expect(item.getInherited().collapsed).toBeTruthy();\r | |
398 | };\r | |
399 | \r | |
400 | expectExpanded = function(index){\r | |
401 | var item = ct.items.getAt(index);\r | |
402 | \r | |
403 | expect(item.collapsed).toBeFalsy(); \r | |
404 | expect(item.getInherited().collapsed).toBeFalsy();\r | |
405 | };\r | |
406 | });\r | |
407 | \r | |
408 | afterEach(function(){\r | |
409 | Ext.destroy(ct);\r | |
410 | makeCt = ct = expectExpanded = expectCollapsed = null;\r | |
411 | });\r | |
412 | \r | |
413 | it("should retain the same state when hidden", function(){\r | |
414 | makeCt([{\r | |
415 | title: 'P1'\r | |
416 | }, {\r | |
417 | title: 'P2',\r | |
418 | collapsed: true\r | |
419 | }, {\r | |
420 | title: 'P3',\r | |
421 | collapsed: true\r | |
422 | }]);\r | |
423 | ct.items.first().hide();\r | |
424 | expectExpanded(0);\r | |
425 | \r | |
426 | ct.items.last().hide();\r | |
427 | expectCollapsed(2);\r | |
428 | });\r | |
429 | \r | |
430 | it("should not expand when shown when not the first item", function(){\r | |
431 | makeCt([{\r | |
432 | title: 'P1',\r | |
433 | collapsed: true,\r | |
434 | hidden: true\r | |
435 | }, {\r | |
436 | title: 'P2',\r | |
437 | collapsed: true\r | |
438 | }, {\r | |
439 | title: 'P3',\r | |
440 | hidden: true\r | |
441 | }]);\r | |
442 | ct.items.getAt(1).show();\r | |
443 | expectCollapsed(1);\r | |
444 | \r | |
445 | ct.items.last().show();\r | |
446 | expectCollapsed(2);\r | |
447 | });\r | |
448 | }); \r | |
449 | \r | |
450 | describe("filling", function(){\r | |
451 | \r | |
452 | var ct, h = 300;\r | |
453 | function makeCt(items, multi, fill) {\r | |
454 | ct = new Ext.container.Container({\r | |
455 | width: 100,\r | |
456 | height: h,\r | |
457 | layout: {\r | |
458 | type: 'accordion',\r | |
459 | animate: false,\r | |
460 | multi: multi,\r | |
461 | fill: fill === false ? false : true\r | |
462 | },\r | |
463 | items: items,\r | |
464 | renderTo: Ext.getBody()\r | |
465 | });\r | |
466 | }\r | |
467 | \r | |
468 | afterEach(function() {\r | |
469 | ct.destroy();\r | |
470 | ct = null;\r | |
471 | });\r | |
472 | \r | |
473 | describe("fill: true", function(){\r | |
474 | describe("single", function(){\r | |
475 | it("should stretch the item to the height", function(){\r | |
476 | makeCt([{\r | |
477 | title: 'Item 1',\r | |
478 | html: 'I1'\r | |
479 | }], false, true);\r | |
480 | expect(ct.items.first().getHeight()).toBe(h); \r | |
481 | });\r | |
482 | \r | |
483 | it("should stretch the item to the height - the other panel headers", function(){\r | |
484 | makeCt([{\r | |
485 | title: 'Item 1',\r | |
486 | html: 'I1'\r | |
487 | }, {\r | |
488 | title: 'Item 2',\r | |
489 | html: 'I2'\r | |
490 | }], false, true); \r | |
491 | var left = ct.items.last().getHeight();\r | |
492 | expect(ct.items.first().getHeight()).toBe(h - left);\r | |
493 | }); \r | |
494 | });\r | |
495 | \r | |
496 | describe("multi", function(){\r | |
497 | it("should stretch the item to the height", function(){\r | |
498 | makeCt([{\r | |
499 | title: 'Item 1',\r | |
500 | html: 'I1'\r | |
501 | }], true, true);\r | |
502 | expect(ct.items.first().getHeight()).toBe(h); \r | |
503 | });\r | |
504 | \r | |
505 | it("should stretch the item to the height - the other panel headers", function(){\r | |
506 | makeCt([{\r | |
507 | title: 'Item 1',\r | |
508 | html: 'I1'\r | |
509 | }, {\r | |
510 | title: 'Item 2',\r | |
511 | html: 'I2'\r | |
512 | }], true, true); \r | |
513 | var left = ct.items.last().getHeight();\r | |
514 | expect(ct.items.first().getHeight()).toBe(h - left);\r | |
515 | }); \r | |
516 | \r | |
517 | it("should stretch the both items evenly", function(){\r | |
518 | makeCt([{\r | |
519 | title: 'Item 1',\r | |
520 | html: 'I1',\r | |
521 | collapsed: false\r | |
522 | }, {\r | |
523 | title: 'Item 2',\r | |
524 | html: 'I2',\r | |
525 | collapsed: false\r | |
526 | }], true, true);\r | |
527 | expect(ct.items.first().getHeight()).toBe(h / 2);\r | |
528 | expect(ct.items.last().getHeight()).toBe(h / 2); \r | |
529 | });\r | |
530 | });\r | |
531 | });\r | |
532 | \r | |
533 | describe("fill: false", function(){\r | |
534 | describe("single", function(){\r | |
535 | it("should not stretch the item to the height", function(){\r | |
536 | makeCt([{\r | |
537 | title: 'Item 1',\r | |
538 | html: 'I1'\r | |
539 | }], false, false);\r | |
540 | // We don't know the exact height, but it should be smaller\r | |
541 | expect(ct.items.first().getHeight()).toBeLessThan(100); \r | |
542 | });\r | |
543 | \r | |
544 | it("should not stretch either item height", function(){\r | |
545 | makeCt([{\r | |
546 | title: 'Item 1',\r | |
547 | html: 'I1'\r | |
548 | }, {\r | |
549 | title: 'Item 2',\r | |
550 | html: 'I2'\r | |
551 | }], false, false); \r | |
552 | // We don't know the exact height, but it should be smaller\r | |
553 | expect(ct.items.first().getHeight()).toBeLessThan(100);\r | |
554 | expect(ct.items.last().getHeight()).toBeLessThan(100); \r | |
555 | }); \r | |
556 | });\r | |
557 | \r | |
558 | describe("multi", function(){\r | |
559 | it("should not stretch the item to the height", function(){\r | |
560 | makeCt([{\r | |
561 | title: 'Item 1',\r | |
562 | html: 'I1'\r | |
563 | }], true, false);\r | |
564 | // We don't know the exact height, but it should be smaller\r | |
565 | expect(ct.items.first().getHeight()).toBeLessThan(100); \r | |
566 | });\r | |
567 | \r | |
568 | it("should not stretch either item height", function(){\r | |
569 | makeCt([{\r | |
570 | title: 'Item 1',\r | |
571 | html: 'I1'\r | |
572 | }, {\r | |
573 | title: 'Item 2',\r | |
574 | html: 'I2'\r | |
575 | }], true, false); \r | |
576 | // We don't know the exact height, but it should be smaller\r | |
577 | expect(ct.items.first().getHeight()).toBeLessThan(100);\r | |
578 | expect(ct.items.last().getHeight()).toBeLessThan(100);\r | |
579 | }); \r | |
580 | \r | |
581 | it("should not stretch either item", function(){\r | |
582 | makeCt([{\r | |
583 | title: 'Item 1',\r | |
584 | html: 'I1',\r | |
585 | collapsed: false\r | |
586 | }, {\r | |
587 | title: 'Item 2',\r | |
588 | html: 'I2',\r | |
589 | collapsed: false\r | |
590 | }], true, false);\r | |
591 | expect(ct.items.first().getHeight()).toBeLessThan(100);\r | |
592 | expect(ct.items.last().getHeight()).toBeLessThan(100); \r | |
593 | });\r | |
594 | });\r | |
595 | });\r | |
596 | });\r | |
597 | \r | |
598 | describe("collapseFirst", function(){\r | |
599 | var makePanel, panel, tools = [{\r | |
600 | type: 'print' \r | |
601 | }, {\r | |
602 | type: 'refresh'\r | |
603 | }];\r | |
604 | beforeEach(function(){\r | |
605 | makePanel = function(items, collapseFirst) {\r | |
606 | panel = new Ext.panel.Panel({\r | |
607 | width: 100,\r | |
608 | height: 100,\r | |
609 | layout: {\r | |
610 | type: 'accordion',\r | |
611 | animate: false,\r | |
612 | collapseFirst: collapseFirst\r | |
613 | },\r | |
614 | items: items,\r | |
615 | renderTo: Ext.getBody()\r | |
616 | });\r | |
617 | };\r | |
618 | }); \r | |
619 | \r | |
620 | afterEach(function(){\r | |
621 | Ext.destroy(panel);\r | |
622 | makePanel = panel = null;\r | |
623 | }); \r | |
624 | \r | |
625 | it("should use the collapseFirst option on the child items as a default", function(){\r | |
626 | makePanel([{\r | |
627 | collapseFirst: true,\r | |
628 | title: 'A',\r | |
629 | tools: tools\r | |
630 | }, {\r | |
631 | collapseFirst: false,\r | |
632 | title: 'B',\r | |
633 | tools: tools\r | |
634 | }]); \r | |
635 | var p1 = panel.items.first(),\r | |
636 | p2 = panel.items.last();\r | |
637 | \r | |
638 | expect(p1.tools[0].type).toBe('collapse-top');\r | |
639 | expect(p1.tools[1].type).toBe('print');\r | |
640 | expect(p1.tools[2].type).toBe('refresh');\r | |
641 | \r | |
642 | expect(p2.tools[0].type).toBe('print');\r | |
643 | expect(p2.tools[1].type).toBe('refresh');\r | |
644 | expect(p2.tools[2].type).toBe('expand-bottom');\r | |
645 | });\r | |
646 | \r | |
647 | it("should use the collapseFirst: false on the layout", function(){\r | |
648 | makePanel([{\r | |
649 | title: 'A',\r | |
650 | tools: tools\r | |
651 | }, {\r | |
652 | title: 'B',\r | |
653 | tools: tools\r | |
654 | }], false); \r | |
655 | \r | |
656 | var p1 = panel.items.first(),\r | |
657 | p2 = panel.items.last();\r | |
658 | \r | |
659 | expect(p1.tools[0].type).toBe('print');\r | |
660 | expect(p1.tools[1].type).toBe('refresh');\r | |
661 | expect(p1.tools[2].type).toBe('collapse-top');\r | |
662 | \r | |
663 | expect(p2.tools[0].type).toBe('print');\r | |
664 | expect(p2.tools[1].type).toBe('refresh');\r | |
665 | expect(p2.tools[2].type).toBe('expand-bottom');\r | |
666 | });\r | |
667 | \r | |
668 | it("should use the collapseFirst: true on the layout", function(){\r | |
669 | makePanel([{\r | |
670 | title: 'A',\r | |
671 | tools: tools\r | |
672 | }, {\r | |
673 | title: 'B',\r | |
674 | tools: tools\r | |
675 | }], true); \r | |
676 | \r | |
677 | var p1 = panel.items.first(),\r | |
678 | p2 = panel.items.last();\r | |
679 | \r | |
680 | expect(p1.tools[0].type).toBe('collapse-top');\r | |
681 | expect(p1.tools[1].type).toBe('print');\r | |
682 | expect(p1.tools[2].type).toBe('refresh');\r | |
683 | \r | |
684 | expect(p2.tools[0].type).toBe('expand-bottom');\r | |
685 | expect(p2.tools[1].type).toBe('print');\r | |
686 | expect(p2.tools[2].type).toBe('refresh');\r | |
687 | });\r | |
688 | \r | |
689 | });\r | |
690 | \r | |
691 | describe("activeOnTop", function(){\r | |
692 | \r | |
693 | var makePanel, panel;\r | |
694 | \r | |
695 | beforeEach(function(){\r | |
696 | makePanel = function(items, collapseFirst) {\r | |
697 | panel = new Ext.panel.Panel({\r | |
698 | width: 100,\r | |
699 | height: 100,\r | |
700 | layout: {\r | |
701 | type: 'accordion',\r | |
702 | animate: false,\r | |
703 | activeOnTop: true\r | |
704 | },\r | |
705 | items: items,\r | |
706 | renderTo: Ext.getBody()\r | |
707 | });\r | |
708 | };\r | |
709 | }); \r | |
710 | \r | |
711 | afterEach(function(){\r | |
712 | Ext.destroy(panel);\r | |
713 | makePanel = panel = null;\r | |
714 | }); \r | |
715 | \r | |
716 | it("should move initial active item to the top", function(){\r | |
717 | var c1 = new Ext.panel.Panel({\r | |
718 | title: 'A'\r | |
719 | }),\r | |
720 | c2 = new Ext.panel.Panel({\r | |
721 | title: 'B'\r | |
722 | }),\r | |
723 | c3 = new Ext.panel.Panel({\r | |
724 | title: 'C',\r | |
725 | collapsed: false \r | |
726 | });\r | |
727 | \r | |
728 | makePanel([c1, c2, c3]);\r | |
729 | expect(panel.items.indexOf(c3)).toBe(0);\r | |
730 | });\r | |
731 | \r | |
732 | it("should move the item to the top when expanded", function(){\r | |
733 | var c1 = new Ext.panel.Panel({\r | |
734 | title: 'A'\r | |
735 | }),\r | |
736 | c2 = new Ext.panel.Panel({\r | |
737 | title: 'B'\r | |
738 | }),\r | |
739 | c3 = new Ext.panel.Panel({\r | |
740 | title: 'C'\r | |
741 | });\r | |
742 | \r | |
743 | makePanel([c1, c2, c3]);\r | |
744 | c3.expand();\r | |
745 | expect(panel.items.indexOf(c3)).toBe(0);\r | |
746 | });\r | |
747 | \r | |
748 | it("should move the active item to the top when a new item is inserted above it", function(){\r | |
749 | var c1 = new Ext.panel.Panel({\r | |
750 | title: 'A'\r | |
751 | }),\r | |
752 | c2 = new Ext.panel.Panel({\r | |
753 | title: 'B'\r | |
754 | }),\r | |
755 | c3 = new Ext.panel.Panel({\r | |
756 | title: 'C'\r | |
757 | }), newItem;\r | |
758 | \r | |
759 | makePanel([c1, c2, c3]);\r | |
760 | newItem = panel.insert(0, {});\r | |
761 | expect(panel.items.indexOf(c1)).toBe(0);\r | |
762 | expect(panel.items.indexOf(newItem)).toBe(1);\r | |
763 | });\r | |
764 | \r | |
765 | });\r | |
766 | \r | |
767 | describe("removing items", function(){\r | |
768 | it("should expand the first item with multi: false & removing the expanded item", function(){\r | |
769 | var ct = new Ext.container.Container({\r | |
770 | width: 200,\r | |
771 | height: 200,\r | |
772 | layout: {\r | |
773 | type: 'accordion',\r | |
774 | animate: false\r | |
775 | },\r | |
776 | items: [{\r | |
777 | title: 'A' \r | |
778 | }, {\r | |
779 | title: 'B'\r | |
780 | }, {\r | |
781 | title: 'C'\r | |
782 | }]\r | |
783 | });\r | |
784 | ct.remove(0);\r | |
785 | expect(ct.items.first().collapsed).toBe(false);\r | |
786 | ct.destroy();\r | |
787 | }); \r | |
788 | \r | |
789 | it("should not attempt to expand any items when destroying the container", function() {\r | |
790 | var count = 0;\r | |
791 | var ct = new Ext.container.Container({\r | |
792 | width: 200,\r | |
793 | height: 200,\r | |
794 | layout: {\r | |
795 | type: 'accordion',\r | |
796 | animate: false\r | |
797 | },\r | |
798 | items: [{\r | |
799 | title: 'A' \r | |
800 | }, {\r | |
801 | title: 'B'\r | |
802 | }, {\r | |
803 | title: 'C'\r | |
804 | }]\r | |
805 | });\r | |
806 | \r | |
807 | ct.items.each(function(item) {\r | |
808 | item.on('expand', function() {\r | |
809 | ++count;\r | |
810 | })\r | |
811 | });\r | |
812 | \r | |
813 | ct.destroy();\r | |
814 | expect(count).toBe(0);\r | |
815 | });\r | |
816 | });\r | |
817 | \r | |
818 | describe("misc", function() {\r | |
819 | it("should expand inside a panel", function() {\r | |
820 | var p = new Ext.panel.Panel({\r | |
821 | layout: {\r | |
822 | type: 'accordion',\r | |
823 | animate: false\r | |
824 | },\r | |
825 | items: [{\r | |
826 | title: 'P1'\r | |
827 | }, {\r | |
828 | title: 'P2'\r | |
829 | }, {\r | |
830 | title: 'P3'\r | |
831 | }]\r | |
832 | }); \r | |
833 | \r | |
834 | var outer = new Ext.panel.Panel({\r | |
835 | width: 200,\r | |
836 | height: 200,\r | |
837 | layout: 'fit',\r | |
838 | renderTo: Ext.getBody(),\r | |
839 | items: p\r | |
840 | });\r | |
841 | \r | |
842 | \r | |
843 | p.getComponent(1).expand();\r | |
844 | expect(p.getComponent(0).collapsed).toBe('top');\r | |
845 | outer.destroy();\r | |
846 | }); \r | |
847 | });\r | |
848 | \r | |
849 | describe("ARIA attributes", function() {\r | |
850 | var expectAria = jasmine.expectAriaAttr,\r | |
851 | expectNoAria = jasmine.expectNoAriaAttr;\r | |
852 | \r | |
853 | function makeSuite(name, animate, options) {\r | |
854 | describe(name + ", animate: " + !!animate, function() {\r | |
855 | var ct, foo, bar, pinTool, closeTool,\r | |
856 | collapseSpy, expandSpy;\r | |
857 | \r | |
858 | beforeEach(function() {\r | |
859 | collapseSpy = jasmine.createSpy('collapse');\r | |
860 | expandSpy = jasmine.createSpy('expand');\r | |
861 | \r | |
862 | ct = new Ext.container.Container({\r | |
863 | renderTo: Ext.getBody(),\r | |
864 | width: 400,\r | |
865 | height: 200,\r | |
866 | \r | |
867 | style: {\r | |
868 | border: '1px solid red'\r | |
869 | },\r | |
870 | \r | |
871 | layout: {\r | |
872 | type: 'accordion',\r | |
873 | animate: animate\r | |
874 | },\r | |
875 | items: [{\r | |
876 | title: 'foo',\r | |
877 | collapsible: true,\r | |
878 | animCollapse: animate,\r | |
879 | tools: [{\r | |
880 | type: 'pin'\r | |
881 | }],\r | |
882 | listeners: {\r | |
883 | collapse: collapseSpy,\r | |
884 | expand: expandSpy\r | |
885 | }\r | |
886 | }, {\r | |
887 | title: 'bar',\r | |
888 | collapsible: true,\r | |
889 | animCollapse: animate,\r | |
890 | closable: true\r | |
891 | }]\r | |
892 | });\r | |
893 | \r | |
894 | foo = ct.down('[title=foo]');\r | |
895 | bar = ct.down('[title=bar]');\r | |
896 | \r | |
897 | pinTool = foo.down('tool[type=pin]');\r | |
898 | closeTool = bar.down('tool[type=close]');\r | |
899 | \r | |
900 | if (options && options.collapse) {\r | |
901 | runs(function() {\r | |
902 | foo.collapse();\r | |
903 | });\r | |
904 | \r | |
905 | waitsForSpy(collapseSpy, 'collapse', 1000);\r | |
906 | }\r | |
907 | \r | |
908 | if (options && options.expand) {\r | |
909 | runs(function() {\r | |
910 | foo.expand();\r | |
911 | });\r | |
912 | \r | |
913 | waitsForSpy(expandSpy, 'expand', 1000);\r | |
914 | }\r | |
915 | });\r | |
916 | \r | |
917 | afterEach(function() {\r | |
918 | Ext.destroy(ct);\r | |
919 | ct = foo = bar = pinTool = closeTool = null;\r | |
920 | collapseSpy = expandSpy = null;\r | |
921 | });\r | |
922 | \r | |
923 | describe("container", function() {\r | |
924 | it("should have presentation role", function() {\r | |
925 | expectAria(ct, 'role', 'presentation');\r | |
926 | });\r | |
927 | \r | |
928 | describe("innerCt", function() {\r | |
929 | it("should have tablist role", function() {\r | |
930 | expectAria(ct.layout.innerCt, 'role', 'tablist');\r | |
931 | });\r | |
932 | \r | |
933 | it("should have aria-multiselectable", function() {\r | |
934 | expectAria(ct.layout.innerCt, 'aria-multiselectable', 'true');\r | |
935 | });\r | |
936 | });\r | |
937 | });\r | |
938 | \r | |
939 | describe("foo panel", function() {\r | |
940 | it("should have presentation role on main el", function() {\r | |
941 | expectAria(foo.el, 'role', 'presentation');\r | |
942 | });\r | |
943 | \r | |
944 | describe("header", function() {\r | |
945 | describe("title", function() {\r | |
946 | it("should have tab role", function() {\r | |
947 | expectAria(foo.header.titleCmp, 'role', 'tab');\r | |
948 | });\r | |
949 | \r | |
950 | it("should have tabindex", function() {\r | |
951 | expect(foo.header.titleCmp.ariaEl.isTabbable()).toBe(true);\r | |
952 | });\r | |
953 | \r | |
954 | it("should have aria-expanded", function() {\r | |
955 | expectAria(foo.header.titleCmp, 'aria-expanded', !foo.collapsed + '');\r | |
956 | });\r | |
957 | });\r | |
958 | \r | |
959 | describe("collapse tool", function() {\r | |
960 | it("should have presentation role", function() {\r | |
961 | expectAria(foo.collapseTool, 'role', 'presentation');\r | |
962 | });\r | |
963 | \r | |
964 | it("should not be tabbable", function() {\r | |
965 | expect(foo.collapseTool.el.isTabbable()).toBe(false);\r | |
966 | });\r | |
967 | \r | |
968 | it("should not be focusable, either", function() {\r | |
969 | expect(foo.collapseTool.isFocusable()).toBe(false);\r | |
970 | });\r | |
971 | });\r | |
972 | \r | |
973 | describe("pin tool", function() {\r | |
974 | it("should have button role", function() {\r | |
975 | expectAria(pinTool, 'role', 'button');\r | |
976 | });\r | |
977 | \r | |
978 | it("should be tabbable", function() {\r | |
979 | expect(pinTool.el.isTabbable()).toBe(true);\r | |
980 | })\r | |
981 | });\r | |
982 | });\r | |
983 | \r | |
984 | describe("body", function() {\r | |
985 | it("should have tabpanel role", function() {\r | |
986 | expectAria(foo.body, 'role', 'tabpanel');\r | |
987 | });\r | |
988 | \r | |
989 | it("should be aria-labelledby the header title", function() {\r | |
990 | expectAria(foo.body, 'aria-labelledby', foo.header.titleCmp.id);\r | |
991 | });\r | |
992 | \r | |
993 | it("should have aria-hidden", function() {\r | |
994 | expectAria(foo.body, 'aria-hidden', !!foo.collapsed + '');\r | |
995 | });\r | |
996 | \r | |
997 | it("should not have tabindex", function() {\r | |
998 | expectNoAria(foo.body, 'tabIndex');\r | |
999 | });\r | |
1000 | });\r | |
1001 | });\r | |
1002 | \r | |
1003 | describe("bar panel", function() {\r | |
1004 | it("should have presentation role on main el", function() {\r | |
1005 | expectAria(bar.el, 'role', 'presentation');\r | |
1006 | });\r | |
1007 | \r | |
1008 | describe("header", function() {\r | |
1009 | describe("title", function() {\r | |
1010 | it("should have tab role", function() {\r | |
1011 | expectAria(bar.header.titleCmp, 'role', 'tab');\r | |
1012 | });\r | |
1013 | \r | |
1014 | it("should have tabindex", function() {\r | |
1015 | expect(bar.header.titleCmp.ariaEl.isTabbable()).toBe(true);\r | |
1016 | });\r | |
1017 | \r | |
1018 | it("should have aria-expanded", function() {\r | |
1019 | expectAria(bar.header.titleCmp, 'aria-expanded', !bar.collapsed + '');\r | |
1020 | });\r | |
1021 | });\r | |
1022 | \r | |
1023 | describe("collapse tool", function() {\r | |
1024 | it("should have presentation role", function() {\r | |
1025 | expectAria(bar.collapseTool, 'role', 'presentation');\r | |
1026 | });\r | |
1027 | \r | |
1028 | it("should not be tabbable", function() {\r | |
1029 | expect(bar.collapseTool.el.isTabbable()).toBe(false);\r | |
1030 | });\r | |
1031 | \r | |
1032 | it("should not be focusable, either", function() {\r | |
1033 | expect(bar.collapseTool.isFocusable()).toBe(false);\r | |
1034 | });\r | |
1035 | });\r | |
1036 | \r | |
1037 | describe("close tool", function() {\r | |
1038 | it("should have presentation role", function() {\r | |
1039 | expectAria(closeTool, 'role', 'presentation');\r | |
1040 | });\r | |
1041 | \r | |
1042 | it("should not be tabbable", function() {\r | |
1043 | expect(closeTool.ariaEl.isTabbable()).toBe(false);\r | |
1044 | });\r | |
1045 | \r | |
1046 | it("should not be focusable, either", function() {\r | |
1047 | expect(closeTool.ariaEl.isFocusable()).toBe(false);\r | |
1048 | });\r | |
1049 | });\r | |
1050 | });\r | |
1051 | \r | |
1052 | describe("body", function() {\r | |
1053 | it("should have tabpanel role", function() {\r | |
1054 | expectAria(bar.body, 'role', 'tabpanel');\r | |
1055 | });\r | |
1056 | \r | |
1057 | it("should be aria-labelledby the header title", function() {\r | |
1058 | expectAria(bar.body, 'aria-labelledby', bar.header.titleCmp.id);\r | |
1059 | });\r | |
1060 | \r | |
1061 | it("should have aria-hidden", function() {\r | |
1062 | expectAria(bar.body, 'aria-hidden', !!bar.collapsed + '');\r | |
1063 | });\r | |
1064 | \r | |
1065 | it("should not have tabindex", function() {\r | |
1066 | expectNoAria(bar.body, 'tabIndex');\r | |
1067 | });\r | |
1068 | });\r | |
1069 | });\r | |
1070 | });\r | |
1071 | }\r | |
1072 | \r | |
1073 | makeSuite('rendered', false);\r | |
1074 | makeSuite('collapsed', 100, { collapse: true });\r | |
1075 | makeSuite('collapsed', false, { collapse: true });\r | |
1076 | makeSuite('expanded', 100, { collapse: true, expand: true });\r | |
1077 | makeSuite('expanded', false, { collapse: true, expand: true });\r | |
1078 | });\r | |
1079 | \r | |
1080 | describe("interaction", function() {\r | |
1081 | var focusAndWait = jasmine.focusAndWait,\r | |
1082 | expectFocused = jasmine.expectFocused,\r | |
1083 | asyncPressKey = jasmine.asyncPressKey,\r | |
1084 | asyncPressTab = jasmine.asyncPressTabKey;\r | |
1085 | \r | |
1086 | function makeSuite(animate) {\r | |
1087 | describe("animate: " + !!animate, function() {\r | |
1088 | var ct, foo, bar, fooHdr, barHdr, pinTool, closeTool,\r | |
1089 | beforeInput, afterInput, fooInnerInput, barInnerInput,\r | |
1090 | collapseSpy, expandSpy;\r | |
1091 | \r | |
1092 | beforeEach(function() {\r | |
1093 | collapseSpy = jasmine.createSpy('collapse');\r | |
1094 | expandSpy = jasmine.createSpy('expand');\r | |
1095 | \r | |
1096 | beforeInput = new Ext.form.field.Text({\r | |
1097 | renderTo: Ext.getBody(),\r | |
1098 | fieldLabel: 'before'\r | |
1099 | });\r | |
1100 | \r | |
1101 | ct = new Ext.container.Container({\r | |
1102 | renderTo: Ext.getBody(),\r | |
1103 | width: 400,\r | |
1104 | height: 150,\r | |
1105 | \r | |
1106 | style: {\r | |
1107 | border: '1px solid red'\r | |
1108 | },\r | |
1109 | \r | |
1110 | layout: {\r | |
1111 | type: 'accordion',\r | |
1112 | animate: animate\r | |
1113 | },\r | |
1114 | items: [{\r | |
1115 | title: 'foo',\r | |
1116 | collapsible: true,\r | |
1117 | animCollapse: animate,\r | |
1118 | tools: [{\r | |
1119 | type: 'pin'\r | |
1120 | }],\r | |
1121 | listeners: {\r | |
1122 | collapse: collapseSpy,\r | |
1123 | expand: expandSpy\r | |
1124 | },\r | |
1125 | items: [{\r | |
1126 | xtype: 'textfield',\r | |
1127 | fieldLabel: 'foo inner'\r | |
1128 | }]\r | |
1129 | }, {\r | |
1130 | title: 'bar',\r | |
1131 | collapsible: true,\r | |
1132 | animCollapse: animate,\r | |
1133 | closable: true,\r | |
1134 | items: [{\r | |
1135 | xtype: 'textfield',\r | |
1136 | fieldLabel: 'bar inner'\r | |
1137 | }]\r | |
1138 | }]\r | |
1139 | });\r | |
1140 | \r | |
1141 | afterInput = new Ext.form.field.Text({\r | |
1142 | renderTo: Ext.getBody(),\r | |
1143 | fieldLabel: 'after'\r | |
1144 | });\r | |
1145 | \r | |
1146 | foo = ct.down('[title=foo]');\r | |
1147 | bar = ct.down('[title=bar]');\r | |
1148 | \r | |
1149 | fooHdr = foo.header;\r | |
1150 | barHdr = bar.header;\r | |
1151 | \r | |
1152 | pinTool = foo.down('tool[type=pin]');\r | |
1153 | closeTool = bar.down('tool[type=close]');\r | |
1154 | \r | |
1155 | fooInnerInput = foo.down('textfield');\r | |
1156 | barInnerInput = bar.down('textfield');\r | |
1157 | });\r | |
1158 | \r | |
1159 | afterEach(function() {\r | |
1160 | Ext.destroy(beforeInput, ct, afterInput);\r | |
1161 | ct = foo = bar = pinTool = closeTool = null;\r | |
1162 | beforeInput = afterInput = fooInnerInput = barInnerInput = null;\r | |
1163 | collapseSpy = expandSpy = null;\r | |
1164 | });\r | |
1165 | \r | |
1166 | describe("pointer interaction", function() {\r | |
1167 | describe("title collapse", function() {\r | |
1168 | beforeEach(function() {\r | |
1169 | runs(function() {\r | |
1170 | jasmine.fireMouseEvent(barHdr, 'click');\r | |
1171 | });\r | |
1172 | \r | |
1173 | waitsForSpy(collapseSpy, 'collapse', 1000);\r | |
1174 | });\r | |
1175 | \r | |
1176 | it("should collapse foo", function() {\r | |
1177 | expect(!!foo.collapsed).toBe(true);\r | |
1178 | });\r | |
1179 | \r | |
1180 | it("should expand bar", function() {\r | |
1181 | expect(!!bar.collapsed).toBe(false);\r | |
1182 | });\r | |
1183 | \r | |
1184 | describe("expand", function() {\r | |
1185 | beforeEach(function() {\r | |
1186 | runs(function() {\r | |
1187 | jasmine.fireMouseEvent(barHdr, 'click');\r | |
1188 | });\r | |
1189 | \r | |
1190 | waitsForSpy(expandSpy, 'expand', 1000);\r | |
1191 | });\r | |
1192 | \r | |
1193 | it("should expand foo", function() {\r | |
1194 | expect(!!foo.collapsed).toBe(false);\r | |
1195 | });\r | |
1196 | \r | |
1197 | it("should collapse bar", function() {\r | |
1198 | expect(!!bar.collapsed).toBe(true);\r | |
1199 | });\r | |
1200 | });\r | |
1201 | });\r | |
1202 | \r | |
1203 | describe("tool collapse", function() {\r | |
1204 | beforeEach(function() {\r | |
1205 | runs(function() {\r | |
1206 | jasmine.fireMouseEvent(foo.collapseTool, 'click');\r | |
1207 | });\r | |
1208 | \r | |
1209 | waitsForSpy(collapseSpy, 'collapse', 1000);\r | |
1210 | });\r | |
1211 | \r | |
1212 | it("should collapse foo", function() {\r | |
1213 | expect(!!foo.collapsed).toBe(true);\r | |
1214 | });\r | |
1215 | \r | |
1216 | it("should expand bar", function() {\r | |
1217 | expect(!!bar.collapsed).toBe(false);\r | |
1218 | });\r | |
1219 | });\r | |
1220 | \r | |
1221 | describe("tool close", function() {\r | |
1222 | it("should close bar", function() {\r | |
1223 | jasmine.fireMouseEvent(closeTool, 'click');\r | |
1224 | \r | |
1225 | expect(ct.items.length).toBe(1);\r | |
1226 | });\r | |
1227 | });\r | |
1228 | });\r | |
1229 | \r | |
1230 | describe("keyboard interaction", function() {\r | |
1231 | var fooTitle, barTitle;\r | |
1232 | \r | |
1233 | beforeEach(function() {\r | |
1234 | fooTitle = foo.header.titleCmp;\r | |
1235 | barTitle = bar.header.titleCmp;\r | |
1236 | });\r | |
1237 | \r | |
1238 | afterEach(function() {\r | |
1239 | fooTitle = barTitle = null;\r | |
1240 | });\r | |
1241 | \r | |
1242 | describe("arrow keys", function() {\r | |
1243 | describe("down arrow", function() {\r | |
1244 | it("should go from foo to bar", function() {\r | |
1245 | asyncPressKey(fooTitle, 'down');\r | |
1246 | \r | |
1247 | expectFocused(barTitle);\r | |
1248 | });\r | |
1249 | \r | |
1250 | it("should wrap over from bar to foo", function() {\r | |
1251 | asyncPressKey(barTitle, "down");\r | |
1252 | \r | |
1253 | expectFocused(fooTitle);\r | |
1254 | });\r | |
1255 | });\r | |
1256 | \r | |
1257 | describe("right arrow", function() {\r | |
1258 | it("should go from foo to bar", function() {\r | |
1259 | asyncPressKey(fooTitle, 'right');\r | |
1260 | \r | |
1261 | expectFocused(barTitle);\r | |
1262 | });\r | |
1263 | \r | |
1264 | it("should wrap over from bar to foo", function() {\r | |
1265 | asyncPressKey(barTitle, "right");\r | |
1266 | \r | |
1267 | expectFocused(fooTitle);\r | |
1268 | });\r | |
1269 | });\r | |
1270 | \r | |
1271 | describe("up arrow", function() {\r | |
1272 | it("should go from bar to foo", function() {\r | |
1273 | asyncPressKey(barTitle, 'up');\r | |
1274 | \r | |
1275 | expectFocused(fooTitle);\r | |
1276 | });\r | |
1277 | \r | |
1278 | it("should wrap over from foo to bar", function() {\r | |
1279 | asyncPressKey(fooTitle, 'up');\r | |
1280 | \r | |
1281 | expectFocused(barTitle);\r | |
1282 | });\r | |
1283 | });\r | |
1284 | \r | |
1285 | describe("left arrow", function() {\r | |
1286 | it("should go from bar to foo", function() {\r | |
1287 | asyncPressKey(barTitle, 'left');\r | |
1288 | \r | |
1289 | expectFocused(fooTitle);\r | |
1290 | });\r | |
1291 | \r | |
1292 | it("should wrap over from foo to bar", function() {\r | |
1293 | asyncPressKey(fooTitle, 'left');\r | |
1294 | \r | |
1295 | expectFocused(barTitle);\r | |
1296 | });\r | |
1297 | });\r | |
1298 | });\r | |
1299 | \r | |
1300 | describe("home/end keys", function() {\r | |
1301 | it("should go to foo", function() {\r | |
1302 | asyncPressKey(barTitle, 'home');\r | |
1303 | \r | |
1304 | expectFocused(fooTitle);\r | |
1305 | });\r | |
1306 | \r | |
1307 | it("should stay on foo", function() {\r | |
1308 | asyncPressKey(fooTitle, 'home');\r | |
1309 | \r | |
1310 | expectFocused(fooTitle);\r | |
1311 | });\r | |
1312 | \r | |
1313 | it("should go to bar", function() {\r | |
1314 | asyncPressKey(fooTitle, 'end');\r | |
1315 | \r | |
1316 | expectFocused(barTitle);\r | |
1317 | });\r | |
1318 | \r | |
1319 | it("should stay on bar", function() {\r | |
1320 | asyncPressKey(barTitle, 'end');\r | |
1321 | \r | |
1322 | expectFocused(barTitle);\r | |
1323 | });\r | |
1324 | });\r | |
1325 | \r | |
1326 | describe("del key", function() {\r | |
1327 | // Del with no modifiers should be ignored\r | |
1328 | describe("no modifiers", function() {\r | |
1329 | it("should not close foo", function() {\r | |
1330 | asyncPressKey(fooTitle, 'delete');\r | |
1331 | \r | |
1332 | runs(function() {\r | |
1333 | expect(ct.items.length).toBe(2);\r | |
1334 | expect(foo.destroyed).toBe(false);\r | |
1335 | });\r | |
1336 | });\r | |
1337 | \r | |
1338 | it("should not close bar", function() {\r | |
1339 | asyncPressKey(barTitle, 'delete');\r | |
1340 | \r | |
1341 | runs(function() {\r | |
1342 | expect(ct.items.length).toBe(2);\r | |
1343 | expect(bar.destroyed).toBe(false);\r | |
1344 | });\r | |
1345 | });\r | |
1346 | });\r | |
1347 | \r | |
1348 | describe("alt-del", function() {\r | |
1349 | it("should not close foo", function() {\r | |
1350 | asyncPressKey(fooTitle, 'delete', { alt: true });\r | |
1351 | \r | |
1352 | // foo is not closable, so ignore alt-del\r | |
1353 | runs(function() {\r | |
1354 | expect(ct.items.length).toBe(2);\r | |
1355 | expect(foo.destroyed).toBe(false);\r | |
1356 | });\r | |
1357 | });\r | |
1358 | \r | |
1359 | it("should close bar", function() {\r | |
1360 | asyncPressKey(barTitle, 'delete', { alt: true });\r | |
1361 | \r | |
1362 | runs(function() {\r | |
1363 | expect(ct.items.length).toBe(1);\r | |
1364 | expect(bar.destroyed).toBe(true);\r | |
1365 | });\r | |
1366 | });\r | |
1367 | });\r | |
1368 | });\r | |
1369 | \r | |
1370 | describe("tab key", function() {\r | |
1371 | describe("forward", function() {\r | |
1372 | describe("foo expanded", function() {\r | |
1373 | it("should go from before input to foo title", function() {\r | |
1374 | asyncPressTab(beforeInput, true);\r | |
1375 | \r | |
1376 | expectFocused(fooTitle);\r | |
1377 | });\r | |
1378 | \r | |
1379 | it("should go from foo title to pin tool", function() {\r | |
1380 | asyncPressTab(fooTitle, true);\r | |
1381 | \r | |
1382 | expectFocused(pinTool);\r | |
1383 | });\r | |
1384 | \r | |
1385 | it("should go from pin tool to foo inner input", function() {\r | |
1386 | asyncPressTab(pinTool, true);\r | |
1387 | \r | |
1388 | expectFocused(fooInnerInput);\r | |
1389 | });\r | |
1390 | \r | |
1391 | it("should go from foo inner input to bar title", function() {\r | |
1392 | asyncPressTab(fooInnerInput, true);\r | |
1393 | \r | |
1394 | expectFocused(barTitle);\r | |
1395 | });\r | |
1396 | \r | |
1397 | it("should go from bar title to after input", function() {\r | |
1398 | asyncPressTab(barTitle, true);\r | |
1399 | \r | |
1400 | expectFocused(afterInput);\r | |
1401 | });\r | |
1402 | });\r | |
1403 | \r | |
1404 | describe("foo collapsed", function() {\r | |
1405 | beforeEach(function() {\r | |
1406 | runs(function() {\r | |
1407 | foo.collapse();\r | |
1408 | });\r | |
1409 | \r | |
1410 | waitForSpy(collapseSpy, 'collapse', 1000);\r | |
1411 | });\r | |
1412 | \r | |
1413 | it("should go from before input to foo title", function() {\r | |
1414 | asyncPressTab(beforeInput, true);\r | |
1415 | \r | |
1416 | expectFocused(fooTitle);\r | |
1417 | });\r | |
1418 | \r | |
1419 | it("should go from foo title to pin tool", function() {\r | |
1420 | asyncPressTab(fooTitle, true);\r | |
1421 | \r | |
1422 | expectFocused(pinTool);\r | |
1423 | });\r | |
1424 | \r | |
1425 | it("should go from pin tool to bar title", function() {\r | |
1426 | asyncPressTab(pinTool, true);\r | |
1427 | \r | |
1428 | expectFocused(barTitle);\r | |
1429 | });\r | |
1430 | \r | |
1431 | it("should go from bar title to bar inner input", function() {\r | |
1432 | asyncPressTab(barTitle, true);\r | |
1433 | \r | |
1434 | expectFocused(barInnerInput);\r | |
1435 | });\r | |
1436 | \r | |
1437 | it("should go from bar inner input to after input", function() {\r | |
1438 | asyncPressTab(barInnerInput, true);\r | |
1439 | \r | |
1440 | expectFocused(afterInput);\r | |
1441 | });\r | |
1442 | });\r | |
1443 | });\r | |
1444 | \r | |
1445 | describe("backward", function() {\r | |
1446 | describe("foo expanded", function() {\r | |
1447 | it("should go from after input to bar title", function() {\r | |
1448 | asyncPressTab(afterInput, false);\r | |
1449 | \r | |
1450 | expectFocused(barTitle);\r | |
1451 | });\r | |
1452 | \r | |
1453 | it("should go from bar title to foo inner input", function() {\r | |
1454 | asyncPressTab(barTitle, false);\r | |
1455 | \r | |
1456 | expectFocused(fooInnerInput);\r | |
1457 | });\r | |
1458 | \r | |
1459 | it("should go from foo inner input to pin tool", function() {\r | |
1460 | asyncPressTab(fooInnerInput, false);\r | |
1461 | \r | |
1462 | expectFocused(pinTool);\r | |
1463 | });\r | |
1464 | \r | |
1465 | it("should go from pin tool to foo title", function() {\r | |
1466 | asyncPressTab(pinTool, false);\r | |
1467 | \r | |
1468 | expectFocused(fooTitle);\r | |
1469 | });\r | |
1470 | \r | |
1471 | it("should go from foo title to before input", function() {\r | |
1472 | asyncPressTab(fooTitle, false);\r | |
1473 | \r | |
1474 | expectFocused(beforeInput);\r | |
1475 | });\r | |
1476 | });\r | |
1477 | \r | |
1478 | describe("foo collapsed", function() {\r | |
1479 | beforeEach(function() {\r | |
1480 | runs(function() {\r | |
1481 | foo.collapse();\r | |
1482 | });\r | |
1483 | \r | |
1484 | waitForSpy(collapseSpy, 'collapse', 1000);\r | |
1485 | });\r | |
1486 | \r | |
1487 | it("should go from after input to bar inner input", function() {\r | |
1488 | asyncPressTab(afterInput, false);\r | |
1489 | \r | |
1490 | expectFocused(barInnerInput);\r | |
1491 | });\r | |
1492 | \r | |
1493 | it("should go from bar inner input to bar title", function() {\r | |
1494 | asyncPressTab(barInnerInput, false);\r | |
1495 | \r | |
1496 | expectFocused(barTitle);\r | |
1497 | });\r | |
1498 | \r | |
1499 | it("should go from bar title to pin tool", function() {\r | |
1500 | asyncPressTab(barTitle, false);\r | |
1501 | \r | |
1502 | expectFocused(pinTool);\r | |
1503 | });\r | |
1504 | \r | |
1505 | it("should go from pin tool to foo title", function() {\r | |
1506 | asyncPressTab(pinTool, false);\r | |
1507 | \r | |
1508 | expectFocused(fooTitle);\r | |
1509 | });\r | |
1510 | \r | |
1511 | it("should go from foo title to before input", function() {\r | |
1512 | asyncPressTab(fooTitle, false);\r | |
1513 | \r | |
1514 | expectFocused(beforeInput);\r | |
1515 | });\r | |
1516 | });\r | |
1517 | });\r | |
1518 | });\r | |
1519 | });\r | |
1520 | });\r | |
1521 | }\r | |
1522 | \r | |
1523 | makeSuite(100);\r | |
1524 | makeSuite(false);\r | |
1525 | });\r | |
1526 | });\r |