]> git.proxmox.com Git - extjs.git/blame - extjs/packages/core/test/specs/list/TreeItem.js
projects / extjs.git / blame
? search:
summary | shortlog | log | commit | commitdiff | tree
blob | blame (incremental) | history | HEAD
add extjs 6.0.1 sources
[extjs.git] / extjs / packages / core / test / specs / list / TreeItem.js
CommitLineData
6527f429
DM		 1// Tests only the behaviours specific to our default implementation of the list item\r
2describe("Ext.list.TreeItem", function() {\r
3\r
4 var root, list, store, sampleData;\r
5\r
6 var Model = Ext.define(null, {\r
7 extend: 'Ext.data.TreeModel',\r
8 fields: ['customField']\r
9 });\r
10\r
11 function makeList(cfg, noStore) {\r
12 if (!store && !noStore) {\r
13 store = new Ext.data.TreeStore({\r
14 model: Model,\r
15 root: {\r
16 expanded: true,\r
17 children: sampleData\r
18 }\r
19 });\r
20 }\r
21\r
22 list = new Ext.list.Tree(Ext.apply({\r
23 store: store,\r
24 animation: false\r
25 }, cfg));\r
26 list.render(Ext.getBody());\r
27\r
28 if (list.getStore()) {\r
29 root = list.getStore().getRoot();\r
30 }\r
31 }\r
32\r
33 beforeEach(function() {\r
34 sampleData = [{\r
35 id: 'i1',\r
36 text: 'Item 1',\r
37 iconCls: 'iconA',\r
38 children: [{\r
39 id: 'i11',\r
40 text: 'Item 1.1',\r
41 leaf: true\r
42 }, {\r
43 id: 'i12',\r
44 text: 'Item 1.2',\r
45 leaf: true\r
46 }]\r
47 }, {\r
48 id: 'i2',\r
49 text: 'Item 2',\r
50 expandable: false\r
51 }, {\r
52 id: 'i3',\r
53 iconCls: 'iconB',\r
54 text: 'Item 3',\r
55 children: []\r
56 }, {\r
57 id: 'i4',\r
58 text: 'Item 4',\r
59 expanded: true,\r
60 children: [{\r
61 id: 'i41',\r
62 iconCls: 'iconC',\r
63 text: 'Item 4.1'\r
64 }, {\r
65 id: 'i42',\r
66 text: 'Item 4.2',\r
67 iconCls: null\r
68 }, {\r
69 id: 'i43',\r
70 text: 'Item 4.3'\r
71 }]\r
72 }];\r
73 });\r
74\r
75 afterEach(function() {\r
76 root = sampleData = store = list = Ext.destroy(list, store);\r
77 });\r
78\r
79 function byId(id) {\r
80 return store.getNodeById(id);\r
81 }\r
82\r
83 function getItem(id) {\r
84 return list.getItem(byId(id));\r
85 }\r
86\r
87 describe("items", function() {\r
88 beforeEach(function() {\r
89 makeList();\r
90 });\r
91\r
92 describe("at creation", function() {\r
93 it("should render child items in order", function() {\r
94 var item = getItem('i1'),\r
95 itemContainer = item.itemContainer;\r
96\r
97 expect(itemContainer.dom.childNodes[0]).toBe(getItem('i11').el.dom);\r
98 expect(itemContainer.dom.childNodes[1]).toBe(getItem('i12').el.dom);\r
99\r
100 item = getItem('i4');\r
101 itemContainer = item.itemContainer;\r
102\r
103 expect(itemContainer.dom.childNodes[0]).toBe(getItem('i41').el.dom);\r
104 expect(itemContainer.dom.childNodes[1]).toBe(getItem('i42').el.dom);\r
105 expect(itemContainer.dom.childNodes[2]).toBe(getItem('i43').el.dom);\r
106 });\r
107\r
108 it("should set the text on the textElement", function() {\r
109 expect(getItem('i1').textElement.dom).hasHTML('Item 1');\r
110 expect(getItem('i11').textElement.dom).hasHTML('Item 1.1');\r
111 expect(getItem('i12').textElement.dom).hasHTML('Item 1.2');\r
112\r
113 expect(getItem('i2').textElement.dom).hasHTML('Item 2');\r
114\r
115 expect(getItem('i3').textElement.dom).hasHTML('Item 3');\r
116\r
117 expect(getItem('i4').textElement.dom).hasHTML('Item 4');\r
118 expect(getItem('i41').textElement.dom).hasHTML('Item 4.1');\r
119 expect(getItem('i42').textElement.dom).hasHTML('Item 4.2');\r
120 expect(getItem('i43').textElement.dom).hasHTML('Item 4.3');\r
121 });\r
122\r
123 describe("leafCls", function() {\r
124 it("should have the leafCls if an item is a leaf", function() {\r
125 Ext.Array.forEach(['i11', 'i12'], function(id) {\r
126 var item = getItem(id);\r
127 expect(item.element).toHaveCls(item.leafCls);\r
128 });\r
129\r
130 Ext.Array.forEach(['i1', 'i2', 'i3', 'i4', 'i41', 'i42', 'i43'], function(id) {\r
131 var item = getItem(id);\r
132 expect(item.element).not.toHaveCls(item.leafCls);\r
133 });\r
134 });\r
135 });\r
136\r
137 describe("iconCls", function() {\r
138 it("should add the withIconCls and set the iconCls if there is an iconCls", function() {\r
139 var i1 = getItem('i1'),\r
140 i3 = getItem('i3'),\r
141 i41 = getItem('i41');\r
142\r
143 expect(i1.iconElement).toHaveCls('iconA');\r
144 expect(i3.iconElement).toHaveCls('iconB');\r
145 expect(i41.iconElement).toHaveCls('iconC');\r
146\r
147 expect(i1.element).toHaveCls(i1.withIconCls);\r
148 expect(i3.element).toHaveCls(i3.withIconCls);\r
149 expect(i41.element).toHaveCls(i41.withIconCls);\r
150 });\r
151\r
152 it("should not have the withIconCls if there is no iconCls", function() {\r
153 Ext.Array.forEach(['i11', 'i12', 'i2', 'i4', 'i42', 'i43'], function(id) {\r
154 var item = getItem(id);\r
155 expect(item.element).not.toHaveCls(item.withIconCls);\r
156 });\r
157 });\r
158\r
159 it("should have the hideIconCls if the iconCls is null", function() {\r
160 var item = getItem('i42');\r
161 expect(item.element).toHaveCls(item.hideIconCls);\r
162 });\r
163\r
164 it("should not have the hideIconCls if the iconCls is not null", function() {\r
165 Ext.Array.forEach(['i1', 'i11', 'i12', 'i2', 'i3', 'i4', 'i41', 'i43'], function(id) {\r
166 var item = getItem(id);\r
167 expect(item.element).not.toHaveCls(item.hideIconCls);\r
168 });\r
169 });\r
170 });\r
171\r
172 describe("expanded/collapsed", function() {\r
173 it("should add the collapsedCls if the item is collapsed and expandable", function() {\r
174 Ext.Array.forEach(['i1', 'i41', 'i42', 'i43'], function(id) {\r
175 var item = getItem(id);\r
176 expect(item.element).toHaveCls(item.collapsedCls);\r
177 });\r
178\r
179 Ext.Array.forEach(['i11', 'i12', 'i2', 'i3', 'i4'], function(id) {\r
180 var item = getItem(id);\r
181 expect(item.element).not.toHaveCls(item.collapsedCls);\r
182 });\r
183 });\r
184\r
185 it("should add the expandedCls if the item is expanded and expandable", function() {\r
186 Ext.Array.forEach(['i4'], function(id) {\r
187 var item = getItem(id);\r
188 expect(item.element).toHaveCls(item.expandedCls);\r
189 });\r
190\r
191 Ext.Array.forEach(['i1', 'i11', 'i12', 'i2', 'i3', 'i41', 'i42', 'i43'], function(id) {\r
192 var item = getItem(id);\r
193 expect(item.element).not.toHaveCls(item.expandedCls);\r
194 });\r
195 });\r
196 });\r
197\r
198 describe("expandable", function() {\r
199 it("should add the expandableCls if the item is expandable", function() {\r
200 Ext.Array.forEach(['i1', 'i4', 'i41', 'i42', 'i43'], function(id) {\r
201 var item = getItem(id);\r
202 expect(item.element).toHaveCls(item.expandableCls);\r
203 });\r
204\r
205 Ext.Array.forEach(['i11', 'i12', 'i2', 'i3'], function(id) {\r
206 var item = getItem(id);\r
207 expect(item.element).not.toHaveCls(item.expandableCls);\r
208 });\r
209 });\r
210 });\r
211 });\r
212\r
213 describe("dynamic store modifications", function() {\r
214 describe("adding nodes", function() {\r
215 it("should insert nodes in the right position", function() {\r
216 byId('i1').insertBefore({\r
217 id: 'i9'\r
218 }, byId('i12'));\r
219\r
220 var childNodes = getItem('i1').itemContainer.dom.childNodes;\r
221 expect(childNodes[0]).toBe(getItem('i11').el.dom);\r
222 expect(childNodes[1]).toBe(getItem('i9').el.dom);\r
223 expect(childNodes[2]).toBe(getItem('i12').el.dom);\r
224 });\r
225\r
226 it("should append nodes to the right position", function() {\r
227 byId('i1').appendChild({\r
228 id: 'i9'\r
229 });\r
230\r
231 var childNodes = getItem('i1').itemContainer.dom.childNodes;\r
232 expect(childNodes[0]).toBe(getItem('i11').el.dom);\r
233 expect(childNodes[1]).toBe(getItem('i12').el.dom);\r
234 expect(childNodes[2]).toBe(getItem('i9').el.dom);\r
235 });\r
236\r
237 it("should add the expandableCls when adding the first item", function() {\r
238 var item = getItem('i3'),\r
239 el = item.element;\r
240\r
241 expect(el).not.toHaveCls(item.expandableCls);\r
242 byId('i3').appendChild({\r
243 id: 'i9'\r
244 });\r
245 expect(el).toHaveCls(item.expandableCls);\r
246 });\r
247 });\r
248\r
249 describe("removing nodes", function() {\r
250 it("should remove the element from the DOM", function() {\r
251 var item = getItem('i42'),\r
252 itemContainer = getItem('i4').itemContainer;\r
253\r
254 expect(itemContainer.contains(item.el)).toBe(true);\r
255 expect(itemContainer.child('#' + item.id)).toBe(item.el);\r
256 byId('i4').removeChild(byId('i42'));\r
257 expect(item.destroyed).toBe(true);\r
258 expect(itemContainer.child('#' + item.id)).toBeNull();\r
259 });\r
260\r
261 it("should remove the expandableCls when removing the last item", function() {\r
262 var item = getItem('i1'),\r
263 el = item.element;\r
264\r
265 byId('i1').removeChild(byId('i12'));\r
266 expect(el).toHaveCls(item.expandableCls);\r
267 byId('i1').removeChild(byId('i11'));\r
268 expect(el).not.toHaveCls(item.expandableCls);\r
269 });\r
270 });\r
271\r
272 describe("collapse", function() {\r
273 describe("when expanded", function() {\r
274 it("should have the collapsedCls", function() {\r
275 var item = getItem('i4');\r
276 byId('i4').collapse();\r
277 expect(item.element).toHaveCls(item.collapsedCls);\r
278 });\r
279\r
280 it("should not have the expandedCls", function() {\r
281 var item = getItem('i4');\r
282 byId('i4').collapse();\r
283 expect(item.element).not.toHaveCls(item.expandedCls);\r
284 });\r
285\r
286 it("should hide the itemContainer", function() {\r
287 var item = getItem('i4');\r
288 byId('i4').collapse();\r
289 expect(item.itemContainer.isVisible()).toBe(false);\r
290 });\r
291 });\r
292\r
293 describe("when collapsed", function() {\r
294 it("should have the collapsedCls", function() {\r
295 var item = getItem('i1');\r
296 byId('i1').collapse();\r
297 expect(item.element).toHaveCls(item.collapsedCls);\r
298 });\r
299\r
300 it("should not have the expandedCls", function() {\r
301 var item = getItem('i1');\r
302 byId('i1').collapse();\r
303 expect(item.element).not.toHaveCls(item.expandedCls);\r
304 });\r
305\r
306 it("should hide the itemContainer", function() {\r
307 var item = getItem('i1');\r
308 byId('i1').collapse();\r
309 expect(item.itemContainer.isVisible()).toBe(false);\r
310 });\r
311 });\r
312 });\r
313\r
314 describe("expand", function() {\r
315 describe("when collapsed", function() {\r
316 it("should have the expandedCls", function() {\r
317 var item = getItem('i1');\r
318 byId('i1').expand();\r
319 expect(item.element).toHaveCls(item.expandedCls);\r
320 });\r
321\r
322 it("should not have the collapsedCls", function() {\r
323 var item = getItem('i1');\r
324 byId('i1').expand();\r
325 expect(item.element).not.toHaveCls(item.collapsedCls);\r
326 });\r
327\r
328 it("should show the itemContainer", function() {\r
329 var item = getItem('i1');\r
330 byId('i1').expand();\r
331 expect(item.itemContainer.isVisible()).toBe(true);\r
332 });\r
333\r
334 describe("loading", function() {\r
335 it("should have the loadingCls while loading", function() {\r
336 MockAjaxManager.addMethods();\r
337 var item = getItem('i41');\r
338 expect(item.element).not.toHaveCls(item.loadingCls);\r
339 item.expand();\r
340 expect(item.element).toHaveCls(item.loadingCls);\r
341 Ext.Ajax.mockComplete({\r
342 status: 200,\r
343 responseText: '[]'\r
344 });\r
345 expect(item.element).not.toHaveCls(item.loadingCls);\r
346 MockAjaxManager.removeMethods();\r
347 });\r
348 });\r
349 });\r
350\r
351 describe("when expanded", function() {\r
352 it("should have the expandedCls", function() {\r
353 var item = getItem('i4');\r
354 byId('i4').expand();\r
355 expect(item.element).toHaveCls(item.expandedCls);\r
356 });\r
357\r
358 it("should not have the collapsedCls", function() {\r
359 var item = getItem('i4');\r
360 byId('i4').expand();\r
361 expect(item.element).not.toHaveCls(item.collapsedCls);\r
362 });\r
363\r
364 it("should hide the itemContainer", function() {\r
365 var item = getItem('i4');\r
366 byId('i4').expand();\r
367 expect(item.itemContainer.isVisible()).toBe(true);\r
368 });\r
369 });\r
370 });\r
371\r
372 describe("updating node fields", function() {\r
373 it("should update the text when the text is changed", function() {\r
374 byId('i1').set('text', 'Foo');\r
375 expect(getItem('i1').textElement.dom).hasHTML('Foo');\r
376 });\r
377\r
378 describe("with iconCls: null", function() {\r
379 it("should remove hideIconCls when setting to empty", function() {\r
380 var item = getItem('i42');\r
381 expect(item.element).toHaveCls(item.hideIconCls);\r
382 expect(item.element).not.toHaveCls(item.withIconCls);\r
383\r
384 byId('i42').set('iconCls', '');\r
385 expect(item.element).not.toHaveCls(item.hideIconCls);\r
386 expect(item.element).not.toHaveCls(item.withIconCls);\r
387 });\r
388\r
389 it("should remove hideIconCls, add iconCls and add withIconCls when setting a class", function() {\r
390 var item = getItem('i42');\r
391 expect(item.element).toHaveCls(item.hideIconCls);\r
392 expect(item.element).not.toHaveCls(item.withIconCls);\r
393\r
394 byId('i42').set('iconCls', 'foo');\r
395 expect(item.element).not.toHaveCls(item.hideIconCls);\r
396 expect(item.element).toHaveCls(item.withIconCls);\r
397 expect(item.iconElement).toHaveCls('foo');\r
398 });\r
399 });\r
400\r
401 describe("with an empty iconCls", function() {\r
402 it("should add hideIconCls when setting to null", function() {\r
403 var item = getItem('i43');\r
404 expect(item.element).not.toHaveCls(item.hideIconCls);\r
405 expect(item.element).not.toHaveCls(item.withIconCls);\r
406\r
407 byId('i43').set('iconCls', null);\r
408 expect(item.element).toHaveCls(item.hideIconCls);\r
409 expect(item.element).not.toHaveCls(item.withIconCls);\r
410 });\r
411\r
412 it("should add withIconCls and set the icon when setting a class", function() {\r
413 var item = getItem('i43');\r
414 expect(item.element).not.toHaveCls(item.hideIconCls);\r
415 expect(item.element).not.toHaveCls(item.withIconCls);\r
416\r
417 byId('i43').set('iconCls', 'foo');\r
418 expect(item.element).not.toHaveCls(item.hideIconCls);\r
419 expect(item.element).toHaveCls(item.withIconCls);\r
420 expect(item.iconElement).toHaveCls('foo');\r
421 });\r
422 });\r
423\r
424 describe("with an iconCls specified", function() {\r
425 it("should remove withIconCls, clear iconCls and add hideIconCls when setting to null", function() {\r
426 var item = getItem('i41');\r
427 expect(item.element).not.toHaveCls(item.hideIconCls);\r
428 expect(item.element).toHaveCls(item.withIconCls);\r
429 expect(item.iconElement).toHaveCls('iconC');\r
430\r
431 byId('i41').set('iconCls', null);\r
432 expect(item.element).toHaveCls(item.hideIconCls);\r
433 expect(item.element).not.toHaveCls(item.withIconCls);\r
434 expect(item.iconElement).not.toHaveCls('iconC');\r
435 });\r
436\r
437 it("should remove withIconCls and clear iconCls when setting to empty", function() {\r
438 var item = getItem('i41');\r
439 expect(item.element).not.toHaveCls(item.hideIconCls);\r
440 expect(item.element).toHaveCls(item.withIconCls);\r
441 expect(item.iconElement).toHaveCls('iconC');\r
442\r
443 byId('i41').set('iconCls', '');\r
444 expect(item.element).not.toHaveCls(item.hideIconCls);\r
445 expect(item.element).not.toHaveCls(item.withIconCls);\r
446 expect(item.iconElement).not.toHaveCls('iconC');\r
447 });\r
448\r
449 it("should change the iconCls", function() {\r
450 var item = getItem('i1');\r
451\r
452 expect(item.element).toHaveCls(item.withIconCls);\r
453 byId('i1').set('iconCls', 'iconZ');\r
454 expect(item.iconElement).not.toHaveCls('iconA');\r
455 expect(item.iconElement).toHaveCls('iconZ');\r
456 expect(item.element).toHaveCls(item.withIconCls);\r
457 });\r
458 });\r
459\r
460 it("should set the cls and set the withIconCls when setting a iconCls", function() {\r
461 var item = getItem('i2'),\r
462 el = item.iconElement;\r
463\r
464 expect(item.element).not.toHaveCls(item.withIconCls);\r
465 byId('i2').set('iconCls', 'iconZ');\r
466 expect(el).toHaveCls('iconZ');\r
467 expect(item.element).toHaveCls(item.withIconCls);\r
468 });\r
469\r
470 it("should remove the cls and hide the iconElement when clearing a iconCls", function() {\r
471 var item = getItem('i1'),\r
472 el = item.iconElement;\r
473\r
474 expect(item.element).toHaveCls(item.withIconCls);\r
475 byId('i1').set('iconCls', '');\r
476 expect(el).not.toHaveCls('iconA');\r
477 expect(item.element).not.toHaveCls(item.withIconCls);\r
478 });\r
479\r
480 it("should change the class when modifying the iconCls", function() {\r
481 var item = getItem('i1'),\r
482 el = item.iconElement;\r
483\r
484 expect(item.element).toHaveCls(item.withIconCls);\r
485 byId('i1').set('iconCls', 'iconZ');\r
486 expect(el).not.toHaveCls('iconA');\r
487 expect(el).toHaveCls('iconZ');\r
488 expect(item.element).toHaveCls(item.withIconCls);\r
489 });\r
490 });\r
491 });\r
492 });\r
493\r
494 // Disable these for now, they fail on device simulators\r
495 xdescribe("expand/collapse via UI", function() {\r
496 describe("with expanderOnly: false", function() {\r
497 beforeEach(function() {\r
498 sampleData[3].children[0].leaf = true;\r
499 makeList({\r
500 expanderOnly: false\r
501 });\r
502 });\r
503\r
504 it("should expand when clicking the expander of a collapsed item", function() {\r
505 var item = getItem('i1');\r
506 expect(item.isExpanded()).toBe(false);\r
507 jasmine.fireMouseEvent(item.expanderElement.dom, 'click');\r
508 expect(item.isExpanded()).toBe(true);\r
509 });\r
510\r
511 it("should collapse when clicking the expander of a expanded item", function() {\r
512 var item = getItem('i4');\r
513 expect(item.isExpanded()).toBe(true);\r
514 jasmine.fireMouseEvent(item.expanderElement.dom, 'click');\r
515 expect(item.isExpanded()).toBe(false);\r
516 });\r
517\r
518 it("should expand when clicking on the element of a collapsed item", function() {\r
519 var item = getItem('i1');\r
520 expect(item.isExpanded()).toBe(false);\r
521 jasmine.fireMouseEvent(item.textElement.dom, 'click');\r
522 expect(item.isExpanded()).toBe(true);\r
523 });\r
524\r
525 it("should collapse when clicking on the element of an expanded item", function() {\r
526 var item = getItem('i4');\r
527 expect(item.isExpanded()).toBe(true);\r
528 jasmine.fireMouseEvent(item.textElement.dom, 'click');\r
529 expect(item.isExpanded()).toBe(false);\r
530 });\r
531\r
532 it("should not collapse when clicking inside the itemContainer", function() {\r
533 var item = getItem('i4');\r
534 expect(item.isExpanded()).toBe(true);\r
535 jasmine.fireMouseEvent(getItem('i41').textElement.dom, 'click');\r
536 expect(item.isExpanded()).toBe(true);\r
537 });\r
538 });\r
539\r
540 describe("with expanderOnly: true", function() {\r
541 beforeEach(function() {\r
542 makeList({\r
543 expanderOnly: true\r
544 });\r
545 });\r
546\r
547 it("should expand when clicking the expander of a collapsed item", function() {\r
548 var item = getItem('i1');\r
549 expect(item.isExpanded()).toBe(false);\r
550 jasmine.fireMouseEvent(item.expanderElement.dom, 'click');\r
551 expect(item.isExpanded()).toBe(true);\r
552 });\r
553\r
554 it("should collapse when clicking the expander of an expanded item", function() {\r
555 var item = getItem('i4');\r
556 expect(item.isExpanded()).toBe(true);\r
557 jasmine.fireMouseEvent(item.expanderElement.dom, 'click');\r
558 expect(item.isExpanded()).toBe(false);\r
559 });\r
560\r
561 it("should not expand when clicking on the element of a collapsed item", function() {\r
562 var item = getItem('i1');\r
563 expect(item.isExpanded()).toBe(false);\r
564 jasmine.fireMouseEvent(item.iconElement.dom, 'click');\r
565 jasmine.fireMouseEvent(item.textElement.dom, 'click');\r
566 jasmine.fireMouseEvent(item.element.dom, 'click');\r
567 expect(item.isExpanded()).toBe(false);\r
568 });\r
569\r
570 it("should not collapse when clicking on the element of an expanded item", function() {\r
571 var item = getItem('i4');\r
572 expect(item.isExpanded()).toBe(true);\r
573 jasmine.fireMouseEvent(item.iconElement.dom, 'click');\r
574 jasmine.fireMouseEvent(item.textElement.dom, 'click');\r
575 jasmine.fireMouseEvent(item.element.dom, 'click');\r
576 expect(item.isExpanded()).toBe(true);\r
577 });\r
578 });\r
579 });\r
580\r
581});\r
ExtJS JS Framework