]> git.proxmox.com Git - extjs.git/blame - extjs/classic/classic/test/specs/form/field/Tag.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 / classic / classic / test / specs / form / field / Tag.js
CommitLineData
6527f429
DM		 1describe("Ext.form.field.Tag", function() {\r
2 var tagField, store, changeSpy,\r
3 describeNotIE9_10 = Ext.isIE9 || Ext.isIE10 ? xdescribe : describe;\r
4\r
5 var Model = Ext.define(null, {\r
6 extend: 'Ext.data.Model',\r
7 fields: ['display', 'value']\r
8 });\r
9\r
10 // There's no simple way to simulate user typing, so going\r
11 // to reach in too far here to call this method. Not ideal, but\r
12 // the infrastructure to get typing simulation is fairly large\r
13 function doTyping(value, isBackspace) {\r
14 tagField.inputEl.dom.value = value;\r
15 tagField.onFieldMutation({\r
16 type: 'change',\r
17 getKey: function() {\r
18 return isBackspace ? Ext.event.Event.DELETE : 0;\r
19 },\r
20 isSpecialKey: function() {\r
21 return !!isBackspace;\r
22 },\r
23 // Need these two properties so that this object quacks\r
24 // in correct ways to onFieldMutation.\r
25 DELETE: Ext.event.Event.DELETE,\r
26 BACKSPACE: Ext.event.Event.BACKSPACE\r
27 });\r
28 }\r
29\r
30 function fireInputKey(key, shift, ctrl) {\r
31 tagField.inputEl.dom.focus;\r
32 jasmine.fireKeyEvent(tagField.inputEl.dom, 'keydown', key, shift, ctrl);\r
33 }\r
34\r
35 function clickTag(id, isClose) {\r
36 var tag = getTag(id);\r
37 if (isClose) {\r
38 tag = Ext.fly(tag).down(tagField.tagItemCloseSelector, true);\r
39 }\r
40 jasmine.fireMouseEvent(tag, 'click');\r
41 }\r
42\r
43 function makeData(rows) {\r
44 var data = [],\r
45 i;\r
46\r
47 for (i = 1; i <= rows; ++i) {\r
48 data.push({\r
49 display: 'Item' + i,\r
50 value: i\r
51 });\r
52 }\r
53 return data;\r
54 }\r
55\r
56 function makeStore(data, id) {\r
57 if (!data) {\r
58 data = 20;\r
59 }\r
60\r
61 if (Ext.isNumber(data)) {\r
62 data = makeData(data);\r
63 }\r
64 return new Ext.data.Store({\r
65 model: Model,\r
66 data: data,\r
67 storeId: id\r
68 });\r
69 }\r
70\r
71 function makeField(cfg, theStore) {\r
72 if (theStore !== null) {\r
73 store = theStore || makeStore();\r
74 }\r
75 tagField = new Ext.form.field.Tag(Ext.apply({\r
76 store: store,\r
77 renderTo: Ext.getBody(),\r
78 displayField: 'display',\r
79 valueField: 'value',\r
80 queryMode: 'local'\r
81 }, cfg));\r
82 }\r
83\r
84 function makeFieldWithSpy(cfg, theStore) {\r
85 makeField(cfg, theStore);\r
86 setupChangeSpy();\r
87 }\r
88\r
89 function expectValue(values) {\r
90 var tags = tagField.getEl().query(tagField.tagItemSelector);\r
91 expect(tagField.getValue()).toEqual(values);\r
92 expect(tags.length).toBe(values.length);\r
93 Ext.Array.forEach(values, function(value, i) {\r
94 expect(getRecordByTag(tags[i]).get(tagField.valueField)).toBe(value);\r
95 });\r
96 }\r
97\r
98 function getRecordByTag(tag) {\r
99 var internalId = parseInt(tag.getAttribute('data-recordId'), 10);\r
100 return tagField.store.getByInternalId(internalId);\r
101 }\r
102\r
103 function getTag(id) {\r
104 var tags = tagField.getEl().query(tagField.tagItemSelector),\r
105 len = tags.length,\r
106 tag, i, rec;\r
107\r
108 for (i = 0; i < len; ++i) {\r
109 tag = tags[i];\r
110 rec = getRecordByTag(tag);\r
111 if (rec.get(tagField.valueField) === id) {\r
112 return tag;\r
113 }\r
114 }\r
115 }\r
116\r
117 function expectChange(newValue, oldValue, callCount) {\r
118 callCount = callCount || 1;\r
119 oldValue = oldValue || [];\r
120 expect(changeSpy.callCount).toBe(callCount);\r
121 expect(changeSpy.mostRecentCall.args[1]).toEqual(newValue);\r
122 expect(changeSpy.mostRecentCall.args[2]).toEqual(oldValue);\r
123 }\r
124\r
125 function setupChangeSpy() {\r
126 changeSpy = jasmine.createSpy();\r
127 tagField.on('change', changeSpy);\r
128 }\r
129\r
130 function clickListItem(rec) {\r
131 tagField.expand();\r
132 var node = tagField.getPicker().getNode(rec);\r
133 jasmine.fireMouseEvent(node, 'click');\r
134 }\r
135\r
136 afterEach(function() {\r
137 tagField = store = Ext.destroy(tagField, store);\r
138 });\r
139\r
140 describe("the store", function() {\r
141 it("should be able to be created without a store", function() {\r
142 makeField(null, null);\r
143 });\r
144\r
145 it("should accept a store instance", function() {\r
146 var s = makeStore();\r
147 makeField(null, s);\r
148 expect(tagField.getStore()).toBe(s);\r
149 });\r
150\r
151 it("should accept a store config", function() {\r
152 makeField({\r
153 store: {\r
154 model: Model,\r
155 data: [{}]\r
156 }\r
157 }, null);\r
158 expect(tagField.getStore().getCount()).toBe(1);\r
159 // So it gets destroyed\r
160 store = tagField.getStore();\r
161 });\r
162\r
163 it("should accept a store id", function() {\r
164 store = makeStore(1, 'foo');\r
165 makeField({\r
166 store: 'foo'\r
167 }, null);\r
168 expect(tagField.getStore()).toBe(store);\r
169 });\r
170 });\r
171\r
172 describe("setting values", function() {\r
173 describe("configuring with a value", function() {\r
174 it("should return an empty array if no value is configured", function() {\r
175 makeField();\r
176 expectValue([]);\r
177 });\r
178\r
179 it("should return an empty array if value is configured as null", function() {\r
180 makeField({\r
181 value: null\r
182 });\r
183 expectValue([]);\r
184 });\r
185\r
186 it("should accept a single value", function() {\r
187 makeField({\r
188 value: 3\r
189 });\r
190 expectValue([3]);\r
191 });\r
192\r
193 it("should accept an array of values", function() {\r
194 makeField({\r
195 value: [2, 5, 11]\r
196 });\r
197 expectValue([2, 5, 11]);\r
198 });\r
199\r
200 it("should accept a single record", function() {\r
201 var s = makeStore();\r
202 makeField({\r
203 value: s.getAt(9)\r
204 }, s);\r
205 expectValue([10]);\r
206 });\r
207\r
208 it("should accept an array of records", function() {\r
209 var s = makeStore();\r
210 makeField({\r
211 value: [s.getAt(4), s.getAt(8), s.getAt(13)]\r
212 }, s);\r
213 expectValue([5, 9, 14]);\r
214 });\r
215\r
216 it("should retain the order", function() {\r
217 makeField({\r
218 value: [10, 6, 8, 7, 4, 5]\r
219 });\r
220 expectValue([10, 6, 8, 7, 4, 5]);\r
221 });\r
222 });\r
223\r
224 describe("viewmodel", function() {\r
225 it("should be able to set the value via the viewmodel", function() {\r
226 var vm = new Ext.app.ViewModel({\r
227 data: {\r
228 value: [1, 2]\r
229 }\r
230 });\r
231 makeField({\r
232 viewModel: vm,\r
233 bind: '{value}'\r
234 });\r
235 vm.notify();\r
236 expectValue([1, 2]);\r
237 });\r
238 });\r
239\r
240 describe("setValue", function() {\r
241 it("should be empty when setting to null", function() {\r
242 makeFieldWithSpy();\r
243 tagField.setValue(null);\r
244 expectValue([]);\r
245 expect(changeSpy).not.toHaveBeenCalled();\r
246 });\r
247\r
248 it("should clear a value when setting null", function() {\r
249 makeFieldWithSpy({\r
250 value: 3\r
251 });\r
252 tagField.setValue(null);\r
253 expectValue([]);\r
254 expectChange([], [3]);\r
255 });\r
256\r
257 it("should accept a single value", function() {\r
258 makeFieldWithSpy();\r
259 tagField.setValue(3);\r
260 expectValue([3]);\r
261 expectChange([3]);\r
262 });\r
263\r
264 it("should accept an array of values", function() {\r
265 makeFieldWithSpy();\r
266 tagField.setValue([2, 5, 11]);\r
267 expectValue([2, 5, 11]);\r
268 expectChange([2, 5, 11]);\r
269 });\r
270\r
271 it("should accept a single record", function() {\r
272 var s = makeStore();\r
273 makeFieldWithSpy(null, s);\r
274 tagField.setValue(s.getAt(9));\r
275 expectValue([10]);\r
276 expectChange([10]);\r
277 });\r
278\r
279 it("should accept an array of records", function() {\r
280 var s = makeStore();\r
281 makeFieldWithSpy(null, s);\r
282 tagField.setValue([s.getAt(4), s.getAt(8), s.getAt(13)]);\r
283 expectValue([5, 9, 14]);\r
284 expectChange([5, 9, 14]);\r
285 });\r
286\r
287 it("should retain the order", function() {\r
288 makeFieldWithSpy();\r
289 tagField.setValue([10, 6, 8, 7, 4, 5]);\r
290 expectValue([10, 6, 8, 7, 4, 5]);\r
291 expectChange([10, 6, 8, 7, 4, 5]);\r
292 });\r
293\r
294 it("should write over existing values", function() {\r
295 makeFieldWithSpy({\r
296 value: [1, 3, 5, 7]\r
297 });\r
298 tagField.setValue([2, 4, 6, 8]);\r
299 expectValue([2, 4, 6, 8]);\r
300 expectChange([2, 4, 6, 8], [1, 3, 5, 7]);\r
301 });\r
302 });\r
303\r
304 describe("addValue", function() {\r
305 it("should be able to add a value", function() {\r
306 makeFieldWithSpy();\r
307 tagField.addValue(1);\r
308 expectValue([1]);\r
309 expectChange([1]);\r
310 });\r
311\r
312 it("should be able to add an array of values", function() {\r
313 makeFieldWithSpy();\r
314 tagField.addValue([3, 6, 7]);\r
315 expectValue([3, 6, 7]);\r
316 expectChange([3, 6, 7]);\r
317 });\r
318\r
319 it("should accept a single record", function() {\r
320 makeFieldWithSpy();\r
321 tagField.addValue(store.getAt(15));\r
322 expectValue([16]);\r
323 expectChange([16]);\r
324 });\r
325\r
326 it("should accept an array of records", function() {\r
327 makeFieldWithSpy();\r
328 tagField.addValue([store.getAt(1), store.getAt(5)]);\r
329 expectValue([2, 6]);\r
330 expectChange([2, 6]);\r
331 });\r
332\r
333 it("should append to the existing values", function() {\r
334 makeFieldWithSpy({\r
335 value: [7, 4, 12]\r
336 });\r
337 tagField.addValue([3]);\r
338 expectValue([7, 4, 12, 3]);\r
339 expectChange([7, 4, 12, 3], [7, 4, 12]);\r
340 });\r
341\r
342 it("should leave existing values in place", function() {\r
343 makeFieldWithSpy({\r
344 value: [7, 4, 12]\r
345 });\r
346 tagField.addValue([7]);\r
347 expectValue([7, 4, 12]);\r
348 expect(changeSpy).not.toHaveBeenCalled();\r
349 });\r
350\r
351 it("should only append non-existent values", function() {\r
352 makeFieldWithSpy({\r
353 value: [7, 4, 12]\r
354 });\r
355 tagField.addValue([7, 3]);\r
356 expectValue([7, 4, 12, 3]);\r
357 expectChange([7, 4, 12, 3], [7, 4, 12]);\r
358 });\r
359 });\r
360\r
361 describe("removeValue", function() {\r
362 it("should be able to remove a value", function() {\r
363 makeFieldWithSpy({\r
364 value: [1]\r
365 });\r
366 tagField.removeValue(1);\r
367 expectValue([]);\r
368 expectChange([], [1]);\r
369 });\r
370\r
371 it("should be able to remove an array of values", function() {\r
372 makeFieldWithSpy({\r
373 value: [3, 6, 7]\r
374 });\r
375 tagField.removeValue([3, 6, 7]);\r
376 expectValue([]);\r
377 expectChange([], [3, 6, 7]);\r
378 });\r
379\r
380 it("should accept a single record", function() {\r
381 makeFieldWithSpy({\r
382 value: [16]\r
383 });\r
384 tagField.removeValue(store.getAt(15));\r
385 expectValue([]);\r
386 expectChange([], [16]);\r
387 });\r
388\r
389 it("should accept an array of records", function() {\r
390 makeFieldWithSpy({\r
391 value: [2, 6]\r
392 });\r
393 tagField.removeValue([store.getAt(1), store.getAt(5)]);\r
394 expectValue([]);\r
395 expectChange([], [2, 6]);\r
396 });\r
397\r
398 it("should ignore not selected values", function() {\r
399 makeFieldWithSpy({\r
400 value: [18, 3, 14]\r
401 });\r
402 tagField.removeValue(1);\r
403 expectValue([18, 3, 14]);\r
404 expect(changeSpy).not.toHaveBeenCalled();\r
405 });\r
406 });\r
407\r
408 describe("list selection", function() {\r
409 var sm;\r
410\r
411 beforeEach(function() {\r
412 makeField();\r
413 sm = tagField.pickerSelectionModel;\r
414 });\r
415\r
416 afterEach(function() {\r
417 sm = null;\r
418 });\r
419\r
420 describe("changing value with the list collapsed", function() {\r
421 it("should have the value selected and not fire a change event on expand", function() {\r
422 tagField.setValue([1, 3, 5]);\r
423 setupChangeSpy();\r
424 tagField.expand();\r
425 expect(changeSpy).not.toHaveBeenCalled();\r
426 expect(sm.isSelected(store.getAt(0))).toBe(true);\r
427 expect(sm.isSelected(store.getAt(2))).toBe(true);\r
428 expect(sm.isSelected(store.getAt(4))).toBe(true);\r
429 });\r
430 });\r
431\r
432 describe("changing the value with the list expanded", function() {\r
433 it("should select records when setting a value", function() {\r
434 tagField.expand();\r
435 tagField.setValue([1, 10, 13]);\r
436 expect(sm.isSelected(store.getAt(0))).toBe(true);\r
437 expect(sm.isSelected(store.getAt(9))).toBe(true);\r
438 expect(sm.isSelected(store.getAt(12))).toBe(true);\r
439 });\r
440\r
441 it("should deselect records when unsetting a value", function() {\r
442 tagField.setValue([1, 10, 13]);\r
443 tagField.expand();\r
444 tagField.setValue([10]);\r
445 expect(sm.isSelected(store.getAt(0))).toBe(false);\r
446 expect(sm.isSelected(store.getAt(9))).toBe(true);\r
447 expect(sm.isSelected(store.getAt(12))).toBe(false);\r
448 });\r
449 });\r
450\r
451 describe("clicking list items", function() {\r
452 it("should add a value when clicking an unselected item and fire change for each item", function() {\r
453 setupChangeSpy();\r
454 tagField.expand();\r
455 expect(changeSpy).not.toHaveBeenCalled();\r
456 clickListItem(store.getAt(2));\r
457 expectChange([3], [], 1);\r
458 clickListItem(4);\r
459 expectChange([3, 5], [3], 2);\r
460 clickListItem(11);\r
461 expectChange([3, 5, 12], [3, 5], 3);\r
462 });\r
463\r
464 it("should remove a value when clicking a selected item and fire change for each item", function() {\r
465 tagField.setValue([1, 2, 3, 4, 5]);\r
466 setupChangeSpy();\r
467 tagField.expand();\r
468 expect(changeSpy).not.toHaveBeenCalled();\r
469 clickListItem(store.getAt(2));\r
470 expectChange([1, 2, 4, 5], [1, 2, 3, 4, 5], 1);\r
471 clickListItem(store.getAt(0));\r
472 expectChange([2, 4, 5], [1, 2, 4, 5], 2);\r
473 clickListItem(store.getAt(4));\r
474 expectChange([2, 4], [2, 4, 5], 3);\r
475 });\r
476 });\r
477 });\r
478 });\r
479\r
480 describe("tags", function() {\r
481 function expectSelected(id) {\r
482 expect(getTag(id)).toHaveCls(tagField.tagSelectedCls);\r
483 }\r
484\r
485 function expectNotSelected(id) {\r
486 expect(getTag(id)).not.toHaveCls(tagField.tagSelectedCls);\r
487 }\r
488\r
489 describe("rendering", function() {\r
490 describe("tag label", function() {\r
491 function expectContent(id, content) {\r
492 var tag = getTag(id),\r
493 selector = '.' + tagField.tagItemTextCls;\r
494 expect(Ext.fly(tag).down(selector, true)).hasHTML(content);\r
495 }\r
496\r
497 it("should use the the displayField by default", function() {\r
498 makeField({\r
499 value: [1, 4, 6]\r
500 });\r
501 expectContent(1, 'Item1');\r
502 expectContent(4, 'Item4');\r
503 expectContent(6, 'Item6');\r
504 });\r
505\r
506 it("should htmlEncode by default", function() {\r
507 store = new Ext.data.Store({\r
508 model: Model,\r
509 data: [{\r
510 display: 'Foo<div></div>Bar',\r
511 value: 1\r
512 }]\r
513 });\r
514\r
515 makeField({\r
516 value: [1]\r
517 }, store);\r
518 expectContent(1, 'Foo&lt;div&gt;&lt;/div&gt;Bar');\r
519 });\r
520\r
521 it("should accept a custom tpl", function() {\r
522 makeField({\r
523 value: [1],\r
524 labelTpl: 'Prefix{display}{value}'\r
525 });\r
526 expectContent(1, 'PrefixItem11');\r
527 });\r
528\r
529 it("should encode a custom tpl", function() {\r
530 store = new Ext.data.Store({\r
531 model: Model,\r
532 data: [{\r
533 display: 'Foo<div></div>Bar',\r
534 value: 1\r
535 }]\r
536 });\r
537\r
538 makeField({\r
539 value: [1],\r
540 labelTpl: 'Prefix{display}{value}'\r
541 }, store);\r
542 expectContent(1, 'PrefixFoo&lt;div&gt;&lt;/div&gt;Bar1');\r
543 });\r
544 });\r
545\r
546 describe("tag tip", function() {\r
547 function expectTip(id, content) {\r
548 var tip = getTag(id).getAttribute('data-qtip') || '';\r
549 expect(tip).toBe(content);\r
550 }\r
551\r
552 it("should default to nothing", function() {\r
553 makeField({\r
554 value: [1, 4, 6]\r
555 });\r
556 expectTip(1, '');\r
557 expectTip(4, '');\r
558 expectTip(6, '');\r
559 });\r
560\r
561 it("should accept a tpl", function() {\r
562 makeField({\r
563 value: [1],\r
564 tipTpl: 'Prefix{display}{value}'\r
565 });\r
566 expectTip(1, 'PrefixItem11');\r
567 });\r
568\r
569 it("should encode a tpl", function() {\r
570 store = new Ext.data.Store({\r
571 model: Model,\r
572 data: [{\r
573 display: 'Foo<div></div>Bar',\r
574 value: 1\r
575 }]\r
576 });\r
577\r
578 makeField({\r
579 value: [1],\r
580 tipTpl: 'Prefix{display}{value}'\r
581 }, store);\r
582 // The getAttribute call will 'de-encode' this for us\r
583 expectTip(1, 'PrefixFoo<div></div>Bar1');\r
584 });\r
585 });\r
586 });\r
587\r
588 describe("key handling", function() {\r
589 var E = Ext.event.Event;\r
590\r
591 beforeEach(function() {\r
592 makeFieldWithSpy({\r
593 value: [6, 4, 10, 13, 2]\r
594 });\r
595 });\r
596\r
597 // These tests fail unreliable in IE9 and IE10\r
598 describeNotIE9_10("from the input", function() {\r
599 it("should remove a tag when backspace is pressed and the field value is empty", function() {\r
600 fireInputKey(E.BACKSPACE);\r
601 expectValue([6, 4, 10, 13]);\r
602 expectChange([6, 4, 10, 13], [6, 4, 10, 13, 2]);\r
603 });\r
604\r
605 it("should not remove the tag when backspace is pressed and there is text in the field", function() {\r
606 var dom = tagField.inputEl.dom;\r
607 dom.value = 'asdf';\r
608 // Forces the cursor to the end\r
609 tagField.focus([4, 4]);\r
610 fireInputKey(E.BACKSPACE);\r
611 expectValue([6, 4, 10, 13, 2]);\r
612 expect(changeSpy).not.toHaveBeenCalled();\r
613 });\r
614\r
615 it("should remove a tag when delete is pressed and the field value is empty", function() {\r
616 fireInputKey(E.DELETE);\r
617 expectValue([6, 4, 10, 13]);\r
618 expectChange([6, 4, 10, 13], [6, 4, 10, 13, 2]);\r
619 });\r
620\r
621 it("should not remove the tag when delete is pressed and there is text in the field", function() {\r
622 var dom = tagField.inputEl.dom;\r
623 dom.value = 'asdf';\r
624 // Forces the cursor to the end\r
625 tagField.focus([4, 4]);\r
626 fireInputKey(E.DELETE);\r
627 expectValue([6, 4, 10, 13, 2]);\r
628 expect(changeSpy).not.toHaveBeenCalled();\r
629 });\r
630\r
631 it("should select the right most tag when pressing left and the field value is empty", function() {\r
632 fireInputKey(E.LEFT);\r
633 expectSelected(2);\r
634 });\r
635 });\r
636\r
637 describe("navigation of tags", function() {\r
638 beforeEach(function() {\r
639 // Select the first tag\r
640 fireInputKey(E.LEFT);\r
641 });\r
642\r
643 it("should move to the left when using the left key", function() {\r
644 fireInputKey(E.LEFT);\r
645 expectNotSelected(2);\r
646 expectSelected(13);\r
647\r
648 fireInputKey(E.LEFT);\r
649 expectNotSelected(13);\r
650 expectSelected(10);\r
651 });\r
652\r
653 it("should not wrap left", function() {\r
654 for (var i = 0; i <= 20; ++i) {\r
655 fireInputKey(E.LEFT);\r
656 }\r
657 expectSelected(6);\r
658 });\r
659\r
660 it("should keep selections when using the shift key", function() {\r
661 expectSelected(2);\r
662 expectNotSelected(13);\r
663 expectNotSelected(10);\r
664 expectNotSelected(4);\r
665 expectNotSelected(6);\r
666 fireInputKey(E.LEFT, true);\r
667 expectSelected(2);\r
668 expectSelected(13);\r
669 expectNotSelected(10);\r
670 expectNotSelected(4);\r
671 expectNotSelected(6);\r
672 fireInputKey(E.LEFT, true);\r
673 expectSelected(2);\r
674 expectSelected(13);\r
675 expectSelected(10);\r
676 expectNotSelected(4);\r
677 expectNotSelected(6);\r
678 fireInputKey(E.LEFT, true);\r
679 expectSelected(2);\r
680 expectSelected(13);\r
681 expectSelected(10);\r
682 expectSelected(4);\r
683 expectNotSelected(6);\r
684 fireInputKey(E.LEFT, true);\r
685 expectSelected(2);\r
686 expectSelected(13);\r
687 expectSelected(10);\r
688 expectSelected(4);\r
689 expectSelected(6);\r
690 });\r
691\r
692 it("should move to the right when using the right key", function() {\r
693 fireInputKey(E.LEFT);\r
694 fireInputKey(E.LEFT);\r
695 fireInputKey(E.LEFT);\r
696 fireInputKey(E.LEFT);\r
697 fireInputKey(E.LEFT);\r
698 expectSelected(6);\r
699 // At left edge\r
700 fireInputKey(E.RIGHT);\r
701 expectNotSelected(6);\r
702 expectSelected(4);\r
703 fireInputKey(E.RIGHT);\r
704 expectNotSelected(4);\r
705 expectSelected(10);\r
706 });\r
707\r
708 it("shouldnot keep selections when going off the right edge", function() {\r
709 fireInputKey(E.LEFT);\r
710 expectSelected(13);\r
711 fireInputKey(E.RIGHT);\r
712 expectNotSelected(13);\r
713 expectSelected(2);\r
714 fireInputKey(E.RIGHT);\r
715 expectNotSelected(2);\r
716 expectNotSelected(6);\r
717 });\r
718\r
719 it("should keep selections when using the shift key", function() {\r
720 fireInputKey(E.LEFT);\r
721 fireInputKey(E.LEFT);\r
722 fireInputKey(E.LEFT);\r
723 fireInputKey(E.LEFT);\r
724 fireInputKey(E.LEFT);\r
725 // At the start\r
726 expectNotSelected(2);\r
727 expectNotSelected(13);\r
728 expectNotSelected(10);\r
729 expectNotSelected(4);\r
730 expectSelected(6);\r
731 fireInputKey(E.RIGHT, true);\r
732 expectNotSelected(2);\r
733 expectNotSelected(13);\r
734 expectNotSelected(10);\r
735 expectSelected(4);\r
736 expectSelected(6);\r
737 fireInputKey(E.RIGHT, true);\r
738 expectNotSelected(2);\r
739 expectNotSelected(13);\r
740 expectSelected(10);\r
741 expectSelected(4);\r
742 expectSelected(6);\r
743 fireInputKey(E.RIGHT, true);\r
744 expectNotSelected(2);\r
745 expectSelected(13);\r
746 expectSelected(10);\r
747 expectSelected(4);\r
748 expectSelected(6);\r
749 fireInputKey(E.RIGHT, true);\r
750 expectSelected(2);\r
751 expectSelected(13);\r
752 expectSelected(10);\r
753 expectSelected(4);\r
754 expectSelected(6);\r
755 });\r
756\r
757 it("should select all when pressing ctrl+A", function() {\r
758 fireInputKey(E.A, false, true);\r
759 expectSelected(6);\r
760 expectSelected(4);\r
761 expectSelected(10);\r
762 expectSelected(13);\r
763 expectSelected(2);\r
764 });\r
765 });\r
766\r
767 describe("modifying tags", function() {\r
768 beforeEach(function() {\r
769 // Select the first tag\r
770 fireInputKey(E.LEFT);\r
771 });\r
772\r
773 it("should remove the selected item when pressing backspace", function() {\r
774 fireInputKey(E.LEFT);\r
775 fireInputKey(E.LEFT);\r
776 fireInputKey(E.BACKSPACE);\r
777 expectValue([6, 4, 13, 2]);\r
778 expectChange([6, 4, 13, 2], [6, 4, 10, 13, 2]);\r
779 });\r
780\r
781 it("should remove the selected item when pressing delete", function() {\r
782 fireInputKey(E.LEFT);\r
783 fireInputKey(E.LEFT);\r
784 fireInputKey(E.DELETE);\r
785 expectValue([6, 4, 13, 2]);\r
786 expectChange([6, 4, 13, 2], [6, 4, 10, 13, 2]);\r
787 });\r
788\r
789 it("should select the previous item after deleting", function() {\r
790 fireInputKey(E.DELETE);\r
791 expectValue([6, 4, 10, 13]);\r
792 expectChange([6, 4, 10, 13], [6, 4, 10, 13, 2]);\r
793 expectSelected(13);\r
794 fireInputKey(E.DELETE);\r
795 expectValue([6, 4, 10]);\r
796 expectChange([6, 4, 10], [6, 4, 10, 13], 2);\r
797 expectSelected(10);\r
798 });\r
799\r
800 it("should select the last item when deleting the first", function() {\r
801 fireInputKey(E.LEFT);\r
802 fireInputKey(E.LEFT);\r
803 fireInputKey(E.LEFT);\r
804 fireInputKey(E.LEFT);\r
805 fireInputKey(E.DELETE);\r
806 expectValue([4, 10, 13, 2]);\r
807 expectChange([4, 10, 13, 2], [6, 4, 10, 13, 2]);\r
808 expectSelected(2);\r
809 });\r
810\r
811 it("should remove all selected items", function() {\r
812 fireInputKey(E.LEFT, true);\r
813 fireInputKey(E.LEFT, true);\r
814 fireInputKey(E.DELETE);\r
815 expectValue([6, 4]);\r
816 expectChange([6, 4], [6, 4, 10, 13, 2]);\r
817 });\r
818\r
819 it("should be able to remove all items", function() {\r
820 fireInputKey(E.A, false, true);\r
821 fireInputKey(E.DELETE);\r
822 expectValue([]);\r
823 expectChange([], [6, 4, 10, 13, 2]);\r
824 });\r
825 });\r
826 });\r
827\r
828 describe("mouse interaction", function() {\r
829 beforeEach(function() {\r
830 makeFieldWithSpy({\r
831 value: [6, 4, 10, 13, 2]\r
832 });\r
833 });\r
834\r
835 it("should select a tag when clicking", function() {\r
836 clickTag(4);\r
837 fireInputKey(Ext.event.Event.DELETE);\r
838 expectValue([6, 10, 13, 2]);\r
839 expectChange([6, 10, 13, 2], [6, 4, 10, 13, 2]);\r
840 });\r
841\r
842 describe('clicking the close icon', function () {\r
843 it('should remove an item', function () {\r
844 clickTag(4, true);\r
845 expectValue([6, 10, 13, 2]);\r
846 expectChange([6, 10, 13, 2], [6, 4, 10, 13, 2]);\r
847 clickTag(13, true);\r
848 expectValue([6, 10, 2]);\r
849 expectChange([6, 10, 2], [6, 10, 13, 2], 2);\r
850 });\r
851\r
852 it('should remove an item when used as an editor', function () {\r
853 // See EXTJS-17686.\r
854 var grid, tag;\r
855\r
856 tagField = store = Ext.destroy(tagField, store);\r
857\r
858 makeField({\r
859 store: {\r
860 model: Model,\r
861 data: makeData(10)\r
862 },\r
863 displayField: 'display',\r
864 valueField: 'display',\r
865 queryMode: 'local'\r
866 });\r
867\r
868 store = new Ext.data.Store({\r
869 model: Model,\r
870 data: makeData(10)\r
871 });\r
872\r
873 grid = Ext.widget('grid', {\r
874 title: 'Simpsons',\r
875 store: store,\r
876 columns: [{\r
877 dataIndex: 'value'\r
878 }, {\r
879 dataIndex: 'display',\r
880 width: 150,\r
881 editor: tagField\r
882 }],\r
883 selModel: 'cellmodel',\r
884 plugins: {\r
885 ptype: 'cellediting',\r
886 clicksToEdit: 1\r
887 },\r
888 height: 200,\r
889 width: 500,\r
890 renderTo: Ext.getBody()\r
891 });\r
892\r
893 grid.editingPlugin.startEdit(store.getAt(4), grid.columns[1]);\r
894 tag = tagField.getEl().query(tagField.tagItemSelector)[0]\r
895 tag = Ext.fly(tag).down(tagField.tagItemCloseSelector, true);\r
896 jasmine.fireMouseEvent(tag, 'click');\r
897\r
898 expectValue([]);\r
899\r
900 grid = Ext.destroy(grid);\r
901 });\r
902 });\r
903 });\r
904 });\r
905\r
906 describe("pinList", function() {\r
907 it("should keep the list open when selecting from the list with pinList: true", function() {\r
908 makeField({\r
909 pinList: true\r
910 });\r
911 tagField.expand();\r
912 tagField.getPicker().select(0);\r
913 expect(tagField.isExpanded).toBe(true);\r
914 });\r
915\r
916 it("should collapse the list when selecting from the list with pinList: false", function() {\r
917 makeField({\r
918 pinList: false\r
919 });\r
920 tagField.expand();\r
921 tagField.getPicker().select(0);\r
922 expect(tagField.isExpanded).toBe(false);\r
923 });\r
924 });\r
925\r
926 describe("triggerOnClick", function() {\r
927 describe("with triggerOnClick: true", function() {\r
928 it("should not expand when clicking on an item", function() {\r
929 makeField({\r
930 triggerOnClick: true,\r
931 value: [1]\r
932 });\r
933 clickTag(1);\r
934 expect(tagField.isExpanded).toBe(false);\r
935 });\r
936\r
937 it("should expand when clicking on an empty area", function() {\r
938 makeField({\r
939 triggerOnClick: true,\r
940 value: [1]\r
941 });\r
942 jasmine.fireMouseEvent(tagField.inputEl, 'click');\r
943 expect(tagField.isExpanded).toBe(true);\r
944 });\r
945 });\r
946\r
947 describe("with triggerOnClick: false", function() {\r
948 it("should not expand when clicking on an item", function() {\r
949 makeField({\r
950 triggerOnClick: false,\r
951 value: [1]\r
952 });\r
953 clickTag(1);\r
954 expect(tagField.isExpanded).toBe(false);\r
955 });\r
956\r
957 it("should not expand when clicking on an empty area", function() {\r
958 makeField({\r
959 triggerOnClick: false,\r
960 value: [1]\r
961 });\r
962 jasmine.fireMouseEvent(tagField.inputEl, 'click');\r
963 expect(tagField.isExpanded).toBe(false);\r
964 });\r
965 });\r
966 });\r
967\r
968 describe("stacked", function() {\r
969 describe("with stacked: true", function() {\r
970 it("should put each item on a new line", function() {\r
971 makeField({\r
972 value: 1,\r
973 stacked: true\r
974 });\r
975 var height = tagField.getHeight();\r
976 tagField.addValue(2);\r
977 expect(tagField.getHeight()).toBeGreaterThan(height);\r
978\r
979 height = tagField.getHeight();\r
980 tagField.addValue(3);\r
981 expect(tagField.getHeight()).toBeGreaterThan(height);\r
982\r
983 height = tagField.getHeight();\r
984 tagField.addValue(4);\r
985 expect(tagField.getHeight()).toBeGreaterThan(height);\r
986\r
987 height = tagField.getHeight();\r
988 tagField.addValue(5);\r
989 expect(tagField.getHeight()).toBeGreaterThan(height);\r
990 });\r
991\r
992 it("should decrease the height when removing items", function() {\r
993 makeField({\r
994 value: [1, 2, 3, 4, 5],\r
995 stacked: true\r
996 });\r
997\r
998 var height = tagField.getHeight();\r
999 tagField.removeValue(1);\r
1000 expect(tagField.getHeight()).toBeLessThan(height);\r
1001\r
1002 height = tagField.getHeight();\r
1003 tagField.removeValue(2);\r
1004 expect(tagField.getHeight()).toBeLessThan(height);\r
1005\r
1006 height = tagField.getHeight();\r
1007 tagField.removeValue(3);\r
1008 expect(tagField.getHeight()).toBeLessThan(height);\r
1009\r
1010 height = tagField.getHeight();\r
1011 tagField.removeValue(4);\r
1012 expect(tagField.getHeight()).toBeLessThan(height);\r
1013 });\r
1014 });\r
1015\r
1016 describe("with stacked: false", function() {\r
1017 it("should put multiple items per rows", function() {\r
1018 makeField({\r
1019 value: 1,\r
1020 stacked: false\r
1021 });\r
1022 var height = tagField.getHeight();\r
1023 tagField.addValue([2, 3]);\r
1024 expect(tagField.getHeight()).toBe(height);\r
1025 });\r
1026\r
1027 it("should wrap when required", function() {\r
1028 makeField({\r
1029 value: 1,\r
1030 stacked: false,\r
1031 width: 400\r
1032 });\r
1033 var tagWidth = Ext.fly(getTag(1)).getWidth(),\r
1034 toWrap = Math.floor((tagField.itemList.getWidth() - tagWidth) / tagWidth),\r
1035 height = tagField.getHeight(),\r
1036 i;\r
1037\r
1038 for (i = 0; i < toWrap; ++i) {\r
1039 tagField.addValue(i + 2);\r
1040 }\r
1041 expect(tagField.getHeight()).toBeGreaterThan(height);\r
1042\r
1043\r
1044 });\r
1045 });\r
1046 });\r
1047\r
1048 describe("filterPickList", function() {\r
1049 it("should filter the list when configured with values", function() {\r
1050 makeField({\r
1051 filterPickList: true,\r
1052 value: [1, 4, 7]\r
1053 });\r
1054 tagField.expand();\r
1055 var valueStore = tagField.valueStore,\r
1056 rec0 = valueStore.getAt(0),\r
1057 rec3 = valueStore.getAt(1),\r
1058 rec6 = valueStore.getAt(2);\r
1059\r
1060 expect(store.getCount()).toBe(17);\r
1061 \r
1062 // The three picked values should not be found in the filtered store\r
1063 expect(store.indexOf(rec0)).toBe(-1);\r
1064 expect(store.indexOf(rec3)).toBe(-1);\r
1065 expect(store.indexOf(rec6)).toBe(-1);\r
1066 });\r
1067\r
1068 it("should filter the list when setting the value", function() {\r
1069 makeField({\r
1070 filterPickList: true\r
1071 });\r
1072 tagField.expand();\r
1073 var rec16 = store.getAt(16);\r
1074\r
1075 expect(store.getCount()).toBe(20);\r
1076 tagField.setValue(17);\r
1077\r
1078 // The record for value 17, rec16 should be filtered out of the store\r
1079 expect(store.getCount()).toBe(19);\r
1080 expect(store.indexOf(rec16)).toBe(-1);\r
1081 });\r
1082\r
1083 it("should filter the list when adding a value", function() {\r
1084 makeField({\r
1085 filterPickList: true,\r
1086 value: [1, 4, 7]\r
1087 });\r
1088 tagField.expand();\r
1089 var valueStore = tagField.valueStore,\r
1090 rec0 = valueStore.getAt(0),\r
1091 rec3 = valueStore.getAt(1),\r
1092 rec6 = valueStore.getAt(2),\r
1093 rec1 = store.getAt(0);\r
1094\r
1095 expect(store.getCount()).toBe(17);\r
1096 \r
1097 // The tree picked values should not be found in the filtered store\r
1098 expect(store.indexOf(rec0)).toBe(-1);\r
1099 expect(store.indexOf(rec3)).toBe(-1);\r
1100 expect(store.indexOf(rec6)).toBe(-1);\r
1101\r
1102 tagField.addValue(2);\r
1103\r
1104 // The record for value 2, rec1 should be filtered out of the store\r
1105 expect(store.getCount()).toBe(16);\r
1106 expect(store.indexOf(rec1)).toBe(-1);\r
1107 });\r
1108\r
1109 it("should filter the list when removing a value", function() {\r
1110 makeField({\r
1111 filterPickList: true,\r
1112 value: [1, 4, 7]\r
1113 });\r
1114 tagField.expand();\r
1115 var rec0 = tagField.valueStore.getAt(0);\r
1116\r
1117 expect(store.getCount()).toBe(17);\r
1118 expect(store.indexOf(rec0)).toBe(-1);\r
1119 tagField.removeValue(1);\r
1120\r
1121 // The record for value 1, rec0 should filtered back into the store\r
1122 expect(store.getCount()).toBe(18);\r
1123 expect(store.indexOf(rec0)).toBe(0);\r
1124 });\r
1125\r
1126 it('should preserve the scroll position of the bould list when selecting a value', function() {\r
1127 var picker;\r
1128\r
1129 makeField({\r
1130 filterPickList: true\r
1131 });\r
1132 tagField.expand();\r
1133 picker = tagField.getPicker();\r
1134 picker.scrollBy(0, 1000);\r
1135\r
1136 // For the test to work, there must be scroll available.\r
1137 expect(picker.getScrollY()).not.toBe(0);\r
1138\r
1139 // Pick the last item\r
1140 clickListItem(store.getAt(19));\r
1141\r
1142 // Picker MUST preserve scroll position\r
1143 expect(picker.getScrollY()).not.toBe(0);\r
1144 });\r
1145 });\r
1146\r
1147 // These tests fails unreliably on IE9 and 10 on a VM\r
1148 describeNotIE9_10('creating new values', function() {\r
1149 it('should add a new record when ENTER is pressed if createNewOnEnter', function() {\r
1150 makeField({\r
1151 createNewOnEnter: true,\r
1152 value: [1, 4, 7]\r
1153 });\r
1154 tagField.inputEl.dom.value = '200';\r
1155 jasmine.fireKeyEvent(tagField.inputEl.dom, 'keyup', Ext.event.Event.ENTER);\r
1156 var v = tagField.getValue();\r
1157\r
1158 // The new value should have been added to the value list.\r
1159 expect(v.length).toBe(4);\r
1160 expect(v[3]).toBe('200');\r
1161 });\r
1162\r
1163 it('should add a new record on blur if createNewOnBlur', function() {\r
1164 makeField({\r
1165 createNewOnBlur: true,\r
1166 value: [1, 4, 7]\r
1167 });\r
1168 tagField.focus();\r
1169 jasmine.waitForFocus(tagField);\r
1170 runs(function() {\r
1171 tagField.inputEl.dom.value = '200';\r
1172\r
1173 // Programmatic blur fails on IEs. Focus then remove an input field\r
1174 Ext.getBody().createChild({tag: 'input', type: 'text'}).focus().remove();\r
1175 });\r
1176 jasmine.waitAWhile();\r
1177 runs(function() {\r
1178 var v = tagField.getValue();\r
1179 // The new value should have been added to the value list.\r
1180 expect(v.length).toBe(4);\r
1181 expect(v[3]).toBe('200');\r
1182 });\r
1183 });\r
1184 });\r
1185\r
1186 describe("allowBlank: false", function() {\r
1187 beforeEach(function () {\r
1188 makeField({\r
1189 allowBlank: false\r
1190 });\r
1191 });\r
1192\r
1193 it("should be invalid when blank, and valid when a value is selected", function() {\r
1194 expect(tagField.isValid()).toBe(false);\r
1195 tagField.setValue(1);\r
1196 expect(tagField.isValid()).toBe(true);\r
1197 });\r
1198\r
1199 it('should not show in the errors list', function () {\r
1200 clickListItem(0);\r
1201 expect(tagField.getErrors().length).toBe(0);\r
1202 });\r
1203 });\r
1204\r
1205 describe('Erasing back to zero length input', function() {\r
1206 it('should not clear the value on erase back to zero length with no query', function() {\r
1207 var value;\r
1208\r
1209 makeField({\r
1210 value: [1, 4, 7]\r
1211 });\r
1212 doTyping('foo');\r
1213\r
1214 // This is an erase back to zero length\r
1215 doTyping('', true);\r
1216\r
1217 value = tagField.getValue();\r
1218 expect(value.length).toBe(3);\r
1219 expect(value[0]).toBe(1);\r
1220 expect(value[1]).toBe(4);\r
1221 expect(value[2]).toBe(7);\r
1222 });\r
1223 it('should not clear the value on erase back to zero length after a query', function() {\r
1224 var value;\r
1225\r
1226 makeField({\r
1227 value: [1, 4, 7]\r
1228 });\r
1229 doTyping('I');\r
1230\r
1231 // We must wait until the query has happened\r
1232 waitsFor(function() {\r
1233 return tagField.picker && tagField.picker.isVisible();\r
1234 });\r
1235\r
1236 runs(function() {\r
1237 // This is an erase back to zero length\r
1238 doTyping('', true);\r
1239\r
1240 value = tagField.getValue();\r
1241 expect(value.length).toBe(3);\r
1242 expect(value[0]).toBe(1);\r
1243 expect(value[1]).toBe(4);\r
1244 expect(value[2]).toBe(7);\r
1245 });\r
1246 });\r
1247 });\r
1248\r
1249 describe("sizing", function() {\r
1250 it("should publish the height correctly when the set width in the container will cause wrapping while collapsed", function() {\r
1251 makeField({\r
1252 renderTo: null,\r
1253 flex: 1\r
1254 });\r
1255\r
1256 var p = new Ext.panel.Panel({\r
1257 width: 200,\r
1258 border: false,\r
1259 bodyStyle: 'border: 0',\r
1260 collapsed: true,\r
1261 renderTo: Ext.getBody(),\r
1262 layout: 'hbox',\r
1263 items: tagField\r
1264 });\r
1265 tagField.setValue([1, 4, 7, 9]);\r
1266 p.expand(false);\r
1267 expect(p.getHeight()).toBe(tagField.getHeight());\r
1268 p.destroy();\r
1269 });\r
1270 });\r
1271\r
1272 describe("picker position", function() {\r
1273 it("should realign the picker when adding a value causing the field to grow in height", function() {\r
1274 makeField({\r
1275 width: 100\r
1276 });\r
1277\r
1278 var picker = tagField.getPicker();\r
1279\r
1280 // Need to use the triggerWrap here, in IE9 the height of the triggerWrap\r
1281 // is 1px smaller than the el for some reason\r
1282\r
1283 tagField.expand();\r
1284 var beforeTop = picker.getBox().top;\r
1285 expect(beforeTop).toBe(tagField.triggerWrap.getBox().bottom);\r
1286 clickListItem(store.getAt(0));\r
1287 var afterTop = picker.getBox().top;\r
1288 expect(afterTop).toBe(tagField.triggerWrap.getBox().bottom);\r
1289 expect(afterTop).toBeGreaterThan(beforeTop);\r
1290 });\r
1291\r
1292 it("should realign the picker when removing a value causing the field to shrink in height", function() {\r
1293 makeField({\r
1294 width: 100,\r
1295 value: [1, 2]\r
1296 });\r
1297\r
1298 var picker = tagField.getPicker();\r
1299\r
1300 // Need to use the triggerWrap here, in IE9 the height of the triggerWrap\r
1301 // is 1px smaller than the el for some reason\r
1302\r
1303 tagField.expand();\r
1304 var beforeTop = picker.getBox().top;\r
1305 expect(beforeTop).toBe(tagField.triggerWrap.getBox().bottom);\r
1306 tagField.setValue([1]);\r
1307 var afterTop = picker.getBox().top;\r
1308 expect(afterTop).toBe(tagField.triggerWrap.getBox().bottom);\r
1309 expect(afterTop).toBeLessThan(beforeTop);\r
1310 });\r
1311 });\r
1312\r
1313 describe("destruction", function() {\r
1314 it("should not throw an exception when destroying with an autoCreated store and filterPickList: true", function() {\r
1315 makeField({\r
1316 filterPickList: true,\r
1317 store: [\r
1318 [1, 'Foo'],\r
1319 [2, 'Bar']\r
1320 ]\r
1321 }, null);\r
1322 clickListItem(tagField.getStore().getAt(0));\r
1323 expect(function() {\r
1324 tagField.destroy();\r
1325 }).not.toThrow();\r
1326 });\r
1327 });\r
1328\r
1329 describe('emptyText', function () {\r
1330 var emptyCls, emptyEl, emptyInputCls;\r
1331\r
1332 describe('elements and classes', function () {\r
1333 beforeEach(function () {\r
1334 makeField({\r
1335 emptyText: 'little Roo',\r
1336 store: [\r
1337 [1, 'Foo'],\r
1338 [2, 'Bar']\r
1339 ]\r
1340 }, null);\r
1341\r
1342 emptyCls = tagField.emptyCls;\r
1343 emptyEl = tagField.emptyEl;\r
1344 emptyInputCls = tagField.emptyInputCls;\r
1345 });\r
1346\r
1347 afterEach(function () {\r
1348 emptyCls = emptyEl = emptyInputCls = null;\r
1349 });\r
1350\r
1351 it('should apply the emptyText when configured', function () {\r
1352 expect(tagField.emptyEl.dom.innerHTML).toBe('little Roo');\r
1353 });\r
1354\r
1355 it('should hide the emptyText when an item is selected', function () {\r
1356 clickListItem(tagField.getStore().getAt(0));\r
1357\r
1358 expect(emptyEl.getStyle('display')).toBe('none');\r
1359 });\r
1360\r
1361 it('should add the emptyText classes to the appropriate elements', function () {\r
1362 expect(emptyEl.hasCls(emptyInputCls)).toBe(false);\r
1363 expect(emptyEl.hasCls(emptyCls)).toBe(true);\r
1364\r
1365 expect(tagField.inputEl.hasCls(emptyInputCls)).toBe(true);\r
1366 expect(tagField.listWrapper.hasCls(emptyCls)).toBe(true);\r
1367 });\r
1368\r
1369 describe('on value selection/deselection', function () {\r
1370 it('should remove the emptyText classes when selected', function () {\r
1371 clickListItem(tagField.getStore().getAt(0));\r
1372\r
1373 expect(emptyEl.hasCls(emptyInputCls)).toBe(true);\r
1374 expect(emptyEl.hasCls(emptyCls)).toBe(false);\r
1375\r
1376 expect(tagField.inputEl.hasCls(emptyInputCls)).toBe(false);\r
1377 expect(tagField.listWrapper.hasCls(emptyCls)).toBe(false);\r
1378 });\r
1379\r
1380 it('should add the emptyText classes when emptied of selections', function () {\r
1381 // Add a selection and then immediately remove it.\r
1382 clickListItem(tagField.getStore().getAt(0));\r
1383 tagField.removeValue(1);\r
1384\r
1385 expect(emptyEl.hasCls(emptyInputCls)).toBe(false);\r
1386 expect(emptyEl.hasCls(emptyCls)).toBe(true);\r
1387\r
1388 expect(tagField.inputEl.hasCls(emptyInputCls)).toBe(true);\r
1389 expect(tagField.listWrapper.hasCls(emptyCls)).toBe(true);\r
1390 });\r
1391 });\r
1392 });\r
1393\r
1394 describe('placeholder', function () {\r
1395 var emptyText = "The Owl's Nest Farm";\r
1396\r
1397 function checkPlaceholderText(text) {\r
1398 var inputEl = tagField.inputEl,\r
1399 emptyEl = tagField.emptyEl,\r
1400 emptyInputCl = tagField.emptyInputCls,\r
1401 emptyCls = tagField.emptyCls;\r
1402\r
1403 if (!text) {\r
1404 expect(inputEl.hasCls(emptyInputCls)).toBe(false);\r
1405 expect(inputEl.dom.value).toBe('');\r
1406 } else {\r
1407 expect(inputEl.hasCls(emptyCls)).toBe(false);\r
1408 expect(emptyEl.dom.innerHTML).toBe(text);\r
1409 }\r
1410 }\r
1411\r
1412 beforeEach(function () {\r
1413 makeField({\r
1414 emptyText: emptyText\r
1415 });\r
1416 });\r
1417\r
1418 it('should work', function () {\r
1419 checkPlaceholderText(emptyText);\r
1420 });\r
1421\r
1422 it('should remove the emptyText when a selection is made', function () {\r
1423 clickListItem(store.getAt(5));\r
1424 checkPlaceholderText();\r
1425 });\r
1426\r
1427 it('should reapply the emptyText when all selections are removed', function () {\r
1428 clickListItem(store.getAt(5));\r
1429 clickListItem(store.getAt(2));\r
1430 checkPlaceholderText();\r
1431\r
1432 // Remove selected tags.\r
1433 clickTag(6, true);\r
1434 clickTag(3, true);\r
1435 checkPlaceholderText(emptyText);\r
1436 });\r
1437 });\r
1438 });\r
1439\r
1440 describe('grow', function () {\r
1441 describe('growMax', function () {\r
1442 it('should work', function () {\r
1443 var i;\r
1444\r
1445 makeField({\r
1446 growMax: 90,\r
1447 store: [\r
1448 [0, 'Foo'],\r
1449 [1, 'Bar'],\r
1450 [2, 'Baz'],\r
1451 [3, 'Cat'],\r
1452 [4, 'Dog'],\r
1453 [5, 'Owl'],\r
1454 [6, 'Roo'],\r
1455 [7, 'Utz'],\r
1456 [8, 'Grr'],\r
1457 [9, 'Pff']\r
1458 ],\r
1459 width: 100\r
1460 }, null);\r
1461\r
1462 for (i = 0; i < 10; i++) {\r
1463 clickListItem(i);\r
1464 }\r
1465\r
1466 expect(tagField.getHeight()).toBeApprox(90, 5);\r
1467 });\r
1468 });\r
1469 });\r
1470});\r
ExtJS JS Framework