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.insertion", function() {
16 var proto = Ext.Element.prototype,
19 child1, child2, child3;
21 beforeEach(function() {
22 testEl = Ext.getBody().createChild({
23 id: 'ExtElementHelper',
31 testSpanEl = Ext.getBody().createChild({
32 id : 'ExtElementSpanHelper',
36 el = new Ext.Element(Ext.getDom(testEl));
37 span = new Ext.Element(Ext.getDom(testSpanEl));
39 child1 = Ext.get('child1');
40 child2 = Ext.get('child2');
41 child3 = Ext.get('child3');
44 afterEach(function() {
48 describe("appendChild", function() {
49 it("should append the child", function() {
50 expect(el.contains(span)).toBeFalsy();
54 expect(el.contains(span)).toBeTruthy();
58 describe("appendTo", function() {
59 it("should append the el to the specified el", function() {
60 expect(span.contains(el)).toBeFalsy();
64 expect(span.contains(el)).toBeTruthy();
68 describe("insertBefore", function() {
69 it("should insert the el before the specified el", function() {
70 var nodes = Ext.getDom(child1).parentNode.childNodes,
71 array = Ext.toArray(nodes);
74 expect(Ext.Array.indexOf(array, Ext.getDom(child2))).toEqual(1);
76 child2.insertBefore(child1);
78 nodes = Ext.getDom(child1).parentNode.childNodes;
79 array = Ext.toArray(nodes);
81 expect(Ext.Array.indexOf(array, Ext.getDom(child2))).toEqual(0);
85 describe("insertAfter", function() {
86 it("should insert the el after the specified el", function() {
87 var nodes = Ext.getDom(child1).parentNode.childNodes,
88 array = Ext.toArray(nodes);
90 expect(Ext.Array.indexOf(array, Ext.getDom(child2))).toEqual(1);
92 child2.insertAfter(child3);
94 nodes = Ext.getDom(child1).parentNode.childNodes;
95 array = Ext.toArray(nodes);
97 expect(Ext.Array.indexOf(array, Ext.getDom(child2))).toEqual(2);
101 describe("insertFirst", function() {
102 it("should insert the el into the specified el", function() {
103 var nodes = Ext.getDom(child2).childNodes;
104 expect(nodes.length).toEqual(0);
106 child2.insertFirst(child1);
108 nodes = Ext.getDom(child2).childNodes;
109 expect(nodes.length).toEqual(1);
113 describe("insertSibling", function() {
114 describe("when array", function() {
115 describe("after", function() {
116 it("should create each of the elements and add them to the el parent", function() {
117 var nodes = Ext.getDom(el).childNodes;
118 expect(nodes.length).toEqual(3);
120 child1.insertSibling([
125 nodes = Ext.getDom(el).childNodes;
126 expect(nodes.length).toEqual(5);
130 describe("before", function() {
131 it("should create each of the elements and add them to the el parent", function() {
132 var nodes = Ext.getDom(el).childNodes;
133 expect(nodes.length).toEqual(3);
135 child1.insertSibling([
140 nodes = Ext.getDom(el).childNodes;
141 expect(nodes.length).toEqual(5);
146 describe("when Ext.Element", function() {
147 describe("after", function() {
148 it("should move the element next to the el", function() {
149 var nodes = Ext.getDom(el).childNodes;
150 expect(nodes.length).toEqual(3);
152 child1.insertSibling(span, 'after');
154 nodes = Ext.getDom(el).childNodes;
155 expect(nodes.length).toEqual(4);
159 describe("before", function() {
160 it("should move the element next to the el", function() {
161 var nodes = Ext.getDom(el).childNodes;
162 expect(nodes.length).toEqual(3);
164 child1.insertSibling(span, 'before');
166 nodes = Ext.getDom(el).childNodes;
167 expect(nodes.length).toEqual(4);
172 describe("other", function() {
173 describe("after", function() {
174 it("should move the element next to the el", function() {
175 var nodes = Ext.getDom(el).childNodes;
176 expect(nodes.length).toEqual(3);
178 child1.insertSibling({
182 nodes = Ext.getDom(el).childNodes;
183 expect(nodes.length).toEqual(4);
186 it("should move the element next to the el", function() {
187 var nodes = Ext.getDom(el).childNodes;
188 expect(nodes.length).toEqual(3);
190 child3.insertSibling({
194 nodes = Ext.getDom(el).childNodes;
195 expect(nodes.length).toEqual(4);
199 describe("before", function() {
200 it("should move the element next to the el", function() {
201 var nodes = Ext.getDom(el).childNodes;
202 expect(nodes.length).toEqual(3);
204 child1.insertSibling({
208 nodes = Ext.getDom(el).childNodes;
209 expect(nodes.length).toEqual(4);
212 describe("return dom", function() {
213 it("should move the element next to the el", function() {
214 var nodes = Ext.getDom(el).childNodes,
217 expect(nodes.length).toEqual(3);
219 dom = child1.insertSibling({
223 nodes = Ext.getDom(el).childNodes;
224 expect(nodes.length).toEqual(4);
225 expect(dom).toBeDefined();
232 describe("replace", function() {
233 it("should replace the passed element with this element", function() {
234 var nodes = Ext.getDom(el).childNodes;
235 expect(nodes.length).toEqual(3);
237 child1.replace(child2);
239 nodes = Ext.getDom(el).childNodes;
240 expect(nodes.length).toEqual(2);
244 describe("replaceWith", function() {
245 it("should replace this element with the passed element", function() {
246 var nodes = Ext.getDom(el).childNodes;
247 expect(nodes.length).toEqual(3);
249 child1.replaceWith({tag: "div", cls: "childtestdiv"});
251 expect(child1.hasCls("childtestdiv"));
253 nodes = Ext.getDom(el).childNodes;
254 expect(nodes.length).toEqual(3);
258 describe("createChild", function() {
259 it("should create a child", function() {
260 var nodes = Ext.getDom(el).childNodes;
261 expect(nodes.length).toEqual(3);
263 el.createChild({id: 'child4'});
265 nodes = Ext.getDom(el).childNodes;
266 expect(nodes.length).toEqual(4);
269 it("should create a child before an el", function() {
270 var nodes = Ext.getDom(el).childNodes,
271 array = Ext.toArray(nodes);
273 expect(nodes.length).toEqual(3);
274 expect(Ext.Array.indexOf(array, Ext.getDom(child2))).toEqual(1);
276 el.createChild({id: 'child4'}, child2);
278 nodes = Ext.getDom(el).childNodes;
279 array = Ext.toArray(nodes);
281 expect(nodes.length).toEqual(4);
282 expect(Ext.Array.indexOf(array, Ext.getDom(child2))).toEqual(2);
286 describe("wrap", function() {
287 it("should wrap the element", function() {
288 var parent = Ext.getDom(child1).parentNode;
294 expect(Ext.getDom(child1).parentNode.parentNode).toEqual(parent);
295 expect(Ext.getDom(child1).parentNode.className).toEqual('wrapper');
298 it("return the el", function() {
299 var node = child1.wrap({
303 expect(Ext.isElement(node)).toBeFalsy();
306 it("return the dom", function() {
307 var node = child1.wrap({
311 expect(Ext.isElement(node)).toBeTruthy();
315 describe("insertHtml", function() {
316 describe("beforeBegin", function() {
317 it("should insert the html", function() {
318 expect(Ext.getDom(el).childNodes.length).toEqual(3);
320 child1.insertHtml('beforeBegin', '<div></div>');
322 expect(Ext.getDom(el).childNodes.length).toEqual(4);
326 describe("afterBegin", function() {
327 it("should insert the html", function() {
328 expect(Ext.getDom(child1).childNodes.length).toEqual(0);
330 child1.insertHtml('afterBegin', '<div></div>');
332 expect(Ext.getDom(child1).childNodes.length).toEqual(1);
336 describe("beforeEnd", function() {
337 it("should insert the html", function() {
338 expect(Ext.getDom(child1).childNodes.length).toEqual(0);
340 child1.insertHtml('beforeEnd', '<div></div>');
342 expect(Ext.getDom(child1).childNodes.length).toEqual(1);
346 describe("afterEnd", function() {
347 it("should insert the html", function() {
348 expect(Ext.getDom(el).childNodes.length).toEqual(3);
350 child1.insertHtml('afterEnd', '<div></div>');
352 expect(Ext.getDom(el).childNodes.length).toEqual(4);
356 it("should return a dom", function() {
357 var node = child1.insertHtml('afterEnd', '<div></div>');
359 expect(Ext.isElement(node)).toBeTruthy();
362 it("should return an el", function() {
363 var node = child1.insertHtml('afterEnd', '<div></div>', true);
365 expect(Ext.isElement(node)).toBeFalsy();
368 }, "/src/dom/Element.insertion.js");