3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
15 describe("Ext.Element", function() {
19 afterEach(function() {
24 if (domEl && domEl.parentNode === document.body) {
25 document.body.removeChild(domEl);
29 describe("instantiation", function() {
30 beforeEach(function() {
31 domEl = document.createElement("div");
32 Ext.getBody().appendChild(domEl);
37 it("should set dom element id if it hasn't already one", function() {
38 element = new Ext.Element(domEl);
40 expect(domEl.id).toBeDefined();
43 it("should not set dom element id if it has already one", function() {
47 element = new Ext.Element(domEl);
49 expect(domEl.id).toEqual(id);
52 it("should set dom property to dom element", function() {
53 element = new Ext.Element(domEl);
55 expect(element.dom).toBe(domEl);
58 it("should set id property to dom id", function() {
62 element = new Ext.Element(domEl);
64 expect(element.id).toEqual(id);
67 it("should not set dom or id property if first argument is undefined", function() {
68 element = new Ext.Element();
70 expect(element.id).toBeUndefined();
71 expect(element.dom).toBeUndefined();
74 it("should find a dom element if a string corresponding to it's id is passed as first argument", function() {
79 element = new Ext.Element(id);
81 expect(element.dom).toBe(domEl);
85 describe("methods", function() {
86 beforeEach(function() {
87 element = Ext.getBody().createChild({tag: "div"});
91 describe("set", function() {
92 it("should call Ext.DomHelper.applyStyles if object passed as first argument has style property", function() {
93 var style = {width:'100px'};
95 spyOn(Ext.DomHelper, "applyStyles");
97 element.set({style: style});
99 expect(Ext.DomHelper.applyStyles).toHaveBeenCalledWith(element.dom, style);
102 it("should set dom element className if object passed as first argument has cls property", function() {
103 var cls = "x-test-class";
105 element.set({cls: cls});
107 expect(element.dom.className).toEqual(cls);
110 it("should use setAttribute by default", function() {
111 spyOn(element.dom, "setAttribute");
113 element.set({align: "center"});
115 expect(element.dom.setAttribute).toHaveBeenCalledWith("align", "center");
118 it("should be able to use expandos", function() {
119 spyOn(element.dom, "setAttribute");
121 element.set({align: "center"}, false);
124 expect(element.dom.align).toEqual("center");
129 describe("is", function() {
130 it("Returns true if this element matches the passed simple selector", function() {
131 element.set({cls: "x-test-class"});
133 expect(element.is("div.x-test-class")).toBe(true);
137 describe("focus", function() {
138 it("should focus dom element", function() {
139 spyOn(element.dom, "focus");
143 expect(element.dom.focus).toHaveBeenCalled();
146 it("should be able to defer dom element focus", function() {
147 spyOn(element.dom, "focus");
151 return element.dom.focus.calls.length === 1;
152 }, "element.dom.focus was never called");
155 expect(element.dom.focus).toHaveBeenCalled();
159 it("should ignore any exception", function() {
160 element.dom.focus = function() {
164 expect(element.focus).not.toThrow("error");
168 describe("blur", function() {
169 it("should blur dom element", function() {
170 spyOn(element.dom, "blur");
174 expect(element.dom.blur).toHaveBeenCalled();
178 it("should ignore any exception", function() {
179 element.dom.blur = function() {
183 expect(element.blur).not.toThrow("error");
187 describe("getValue", function() {
188 beforeEach(function() {
189 element.dom.value = "10";
192 it("should return the dom value", function() {
193 expect(element.getValue()).toEqual("10");
196 it("should return the dom value as Number", function() {
197 expect(element.getValue(true)).toEqual(10);
201 describe("listeners", function() {
204 beforeEach(function() {
205 options = {delay: 10};
208 describe("addListener", function() {
209 it("should call Ext.EventManager.on", function() {
210 spyOn(Ext.EventManager, "on");
212 element.addListener("click", Ext.emptyFn, fakeScope, options);
214 expect(Ext.EventManager.on).toHaveBeenCalledWith(element.dom, "click", Ext.emptyFn, fakeScope, options);
218 describe("removeListener", function() {
219 it("should call Ext.EventManager.un", function() {
220 spyOn(Ext.EventManager, "un");
222 element.removeListener("click", Ext.emptyFn, fakeScope);
224 expect(Ext.EventManager.un).toHaveBeenCalledWith(element.dom, "click", Ext.emptyFn, fakeScope);
228 describe("removeAllListener", function() {
229 it("should call Ext.EventManager.removeAll", function() {
230 spyOn(Ext.EventManager, "removeAll");
232 element.removeAllListeners();
234 expect(Ext.EventManager.removeAll).toHaveBeenCalledWith(element.dom);
238 describe("purgeAllListener", function() {
239 it("should call Ext.EventManager.purgeElement", function() {
240 spyOn(Ext.EventManager, "purgeElement");
242 element.purgeAllListeners();
244 expect(Ext.EventManager.purgeElement).toHaveBeenCalledWith(element);
249 describe("addUnits", function() {
250 it("should return an empty string if size passed is an empty string", function() {
251 expect(element.addUnits("")).toEqual("");
254 it("should return auto if size passed is 'auto' string", function() {
255 expect(element.addUnits("auto")).toEqual("auto");
258 it("should return an empty string if size passed is undefined", function() {
259 expect(element.addUnits(undefined)).toEqual("");
262 it("should return an empty string if size passed is null", function() {
263 expect(element.addUnits(null)).toEqual("");
267 describe("remove", function() {
268 beforeEach(function() {
269 spyOn(Ext, "removeNode").andCallThrough();
273 it("should remove dom property", function() {
274 expect(element.dom).toBeUndefined();
277 it("should call Ext.removeNode", function() {
278 expect(Ext.removeNode).toHaveBeenCalledWith(domEl);
282 describe("hover", function() {
283 var overFn, outFn, options;
284 beforeEach(function() {
285 overFn = function() {
297 spyOn(element, "on");
300 describe("mouseenter event", function() {
301 it("should add a listener on mouseenter", function() {
302 element.hover(overFn, outFn, fakeScope, options);
304 expect(element.on).toHaveBeenCalledWith("mouseenter", overFn, fakeScope, options);
307 it("should set scope to element.dom if it is not passed in arguments", function() {
308 element.hover(overFn, outFn, null, options);
310 expect(element.on).toHaveBeenCalledWith("mouseenter", overFn, element.dom, options);
314 describe("mouseleave event", function() {
315 it("should add a listener on mouseleave", function() {
316 element.hover(overFn, outFn, fakeScope, options);
318 expect(element.on).toHaveBeenCalledWith("mouseleave", outFn, fakeScope, options);
321 it("should set scope to element.dom if it is not passed in arguments", function() {
322 element.hover(overFn, outFn, null, options);
324 expect(element.on).toHaveBeenCalledWith("mouseleave", outFn, element.dom, options);
329 describe("contains", function() {
331 * TODO: Removed tests for now, need to reinstate once the refactoring is done.
335 describe("getAttributeNs", function() {
336 it("should call element getAttribute", function() {
337 spyOn(element, "getAttribute");
339 element.getAttributeNS("ns1", "align");
341 expect(element.getAttribute).toHaveBeenCalledWith("align", "ns1");
345 describe("getAttribute", function() {
346 var element2, element3;
347 beforeEach(function() {
348 element2 = Ext.getBody().createChild({tag: "div"});
351 if (element.dom.setAttribute) {
352 element.dom.setAttribute("qtip", "bar");
353 element2.dom.setAttribute("ext:qtip", "foo");
355 element.dom["qtip"] = "bar";
356 element2.dom["ext:qtip"] = "foo";
359 if (element.dom.setAttributeNS) {
360 element3 = Ext.getBody().createChild({tag: "div"});
361 element3.dom.setAttributeNS("ext", "qtip", "foobar");
365 afterEach(function() {
375 describe("without namespace", function() {
376 it("should return the attribute value if it exists", function() {
377 expect(element.getAttribute("qtip")).toEqual("bar");
380 it("should return null if the attribute does not exist", function() {
381 expect(element.getAttribute("nothing")).toBeNull();
385 describe("with namespace", function() {
386 it("should return null on a non-namespaced attribute", function() {
387 expect(element.getAttribute("qtip", "ext")).toBeNull();
390 it("should return null if the attribute belong to another namespace", function() {
391 expect(element2.getAttribute("qtip", "nothing")).toBeNull();
394 it("should return the attribute value if it belongs to the namespace", function() {
396 expect(element3.getAttribute("qtip", "ext")).toEqual("foobar");
400 it("should handle xml namespace", function() {
401 expect(element2.getAttribute("qtip", "ext")).toEqual("foo");
406 describe("update", function() {
407 beforeEach(function() {
408 element.dom.innerHTML = "hello world";
411 it("should update dom element innerHTML", function() {
412 element.update("foobar");
414 expect(element.dom).hasHTML("foobar");
417 it("should return element", function() {
418 expect(element.update("foobar")).toBe(element);
422 describe("prototype aliases", function() {
423 it("should aliases addListener with on", function() {
424 expect(element.on).toBe(element.addListener);
427 it("should aliases removeListener with un", function() {
428 expect(element.un).toBe(element.removeListener);
431 it("should aliases removeAllListeners with clearListeners", function() {
432 expect(element.clearListeners).toBe(element.removeAllListeners);
437 describe("class methods", function() {
438 var element2, domEl2, id;
440 beforeEach(function() {
441 element = Ext.getBody().createChild({tag: "div"});
445 domEl2 = document.createElement("div");
447 document.body.appendChild(domEl2);
449 spyOn(Ext.Element, "addToCache").andCallThrough();
452 afterEach(function() {
456 if (domEl2 && domEl2.parentNode === document.body) {
457 document.body.removeChild(domEl2);
461 describe("get", function() {
462 describe("alias", function() {
463 it("should alias Ext.Element.get with Ext.get", function() {
464 expect(Ext.get).toBe(Ext.Element.get);
468 describe("passing string id as first argument", function() {
469 describe("with a dom element which is not already encapsulated", function() {
470 it("should return a new Ext.Element", function() {
471 element2 = Ext.get(id);
473 expect(element2 instanceof Ext.Element).toBe(true);
476 it("should encapsulate the dom element in the Ext.Element", function() {
477 element2 = Ext.get(id);
479 expect(element2.dom).toBe(domEl2);
482 it("should add element to Ext.cache", function() {
483 element2 = Ext.get(id);
485 expect(Ext.Element.addToCache).toHaveBeenCalledWith(element2);
489 describe("with a dom element which is already encapsulated", function() {
490 it("should return the corresponding Ext.element", function() {
491 expect(Ext.get(domEl)).toBe(element);
494 it("should not add element to Ext.cache if it is already in", function() {
497 expect(Ext.Element.addToCache).not.toHaveBeenCalled();
502 describe("passing dom element as first argument", function() {
503 describe("with a dom element which is not already encapsulated", function() {
504 it("should return a new Ext.Element", function() {
505 element2 = Ext.get(domEl2);
507 expect(element2 instanceof Ext.Element).toBe(true);
510 it("should encapsulate the dom element in the Ext.Element", function() {
511 element2 = Ext.get(domEl2);
513 expect(element2.dom).toBe(domEl2);
516 it("should add element to Ext.cache", function() {
517 element2 = Ext.get(domEl2);
519 expect(Ext.Element.addToCache).toHaveBeenCalledWith(element2);
523 describe("with a dom element which is already encapsulated", function() {
524 it("should return the corresponding Ext.element", function() {
525 expect(Ext.get(domEl.id)).toBe(element);
528 it("should not add element to Ext.cache if it is already in", function() {
531 expect(Ext.Element.addToCache).not.toHaveBeenCalled();
536 describe("passing an Ext.Element as first argument", function() {
537 it("should return Ext.Element", function() {
538 expect(Ext.get(element)).toBe(element);
542 describe("passing a CompositeElement as first argument", function() {
543 var compositeElement;
545 beforeEach(function() {
546 compositeElement = Ext.select("div");
549 it("should return Ext.Element", function() {
550 expect(Ext.get(compositeElement)).toBe(compositeElement);
554 describe("passing an array as first argument", function() {
555 it("should call Ext.Element.select", function() {
556 var arr = [domEl, domEl2];
557 spyOn(Ext.Element, "select");
561 expect(Ext.Element.select).toHaveBeenCalledWith(arr);
565 describe("passing document as first argument", function() {
566 it("should return an Ext.Element", function() {
567 expect(Ext.get(document) instanceof Ext.Element).toBe(true);
570 it("should return a bogus Ext.Element", function() {
571 expect(Ext.get(document).id).not.toBeDefined();
574 it("should return an Ext.Element that encapsulate document", function() {
575 expect(Ext.get(document).dom).toBe(document);
580 xdescribe("garbageCollector", function() {
584 describe("fly", function() {
587 beforeEach(function() {
588 spyOn(Ext, "getDom").andCallThrough();
592 describe("global flyweight", function() {
593 beforeEach(function() {
594 flyWeight = Ext.fly(domEl2);
597 it("should return an Ext.Element.Flyweight", function() {
598 expect(flyWeight instanceof Ext.Element.Flyweight).toBe(true);
601 it("should not cache a dom element", function() {
602 expect(Ext.cache[domEl2.id]).toBeUndefined();
605 it("should call Ext.getDom", function() {
606 expect(Ext.getDom).toHaveBeenCalledWith(domEl2);
609 it("should create a one time reference", function() {
610 expect(Ext.Element._flyweights._global).toEqual(flyWeight);
614 describe("named reusable flyweight", function() {
615 beforeEach(function() {
616 flyWeight = Ext.fly(domEl2, "myflyweight");
619 it("should return an Ext.Element.Flyweight", function() {
620 expect(flyWeight instanceof Ext.Element.Flyweight).toBe(true);
623 it("should not cache a dom element", function() {
624 expect(Ext.cache[domEl2.id]).toBeUndefined();
627 it("should call Ext.getDom", function() {
628 expect(Ext.getDom).toHaveBeenCalledWith(domEl2);
631 it("should create a one time reference", function() {
632 expect(Ext.Element._flyweights.myflyweight).toEqual(flyWeight);
637 describe("aliases", function() {
638 it("should aliases Ext.Element.get with Ext.get", function() {
639 expect(Ext.get).toBe(Ext.Element.get);
642 it("should aliases Ext.element.fly with Ext.fly", function() {
643 expect(Ext.fly).toBe(Ext.Element.fly);
647 }, "/src/dom/Element.js");