src/core/test/unit/spec/dom/Element.insertion.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   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.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 describe("Ext.Element.insertion", function() {
  16     var proto = Ext.Element.prototype,
  17         el, testEl,
  18         span, testSpanEl,
  19         child1, child2, child3;
  20
  21     beforeEach(function() {
  22         testEl = Ext.getBody().createChild({
  23             id: 'ExtElementHelper',
  24             children: [
  25                 {id: 'child1'},
  26                 {id: 'child2'},
  27                 {id: 'child3'}
  28             ]
  29         });
  30
  31         testSpanEl = Ext.getBody().createChild({
  32             id  : 'ExtElementSpanHelper',
  33             tag : 'span'
  34         });
  35
  36         el    = new Ext.Element(Ext.getDom(testEl));
  37         span = new Ext.Element(Ext.getDom(testSpanEl));
  38
  39         child1 = Ext.get('child1');
  40         child2 = Ext.get('child2');
  41         child3 = Ext.get('child3');
  42     });
  43
  44     afterEach(function() {
  45         testEl.remove();
  46         testSpanEl.remove();
  47     });
  48     describe("appendChild", function() {
  49         it("should append the child", function() {
  50             expect(el.contains(span)).toBeFalsy();
  51
  52             el.appendChild(span);
  53
  54             expect(el.contains(span)).toBeTruthy();
  55         });
  56     });
  57
  58     describe("appendTo", function() {
  59         it("should append the el to the specified el", function() {
  60             expect(span.contains(el)).toBeFalsy();
  61
  62             el.appendTo(span);
  63
  64             expect(span.contains(el)).toBeTruthy();
  65         });
  66     });
  67
  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);
  72
  73
  74             expect(Ext.Array.indexOf(array, Ext.getDom(child2))).toEqual(1);
  75
  76             child2.insertBefore(child1);
  77
  78             nodes = Ext.getDom(child1).parentNode.childNodes;
  79             array = Ext.toArray(nodes);
  80
  81             expect(Ext.Array.indexOf(array, Ext.getDom(child2))).toEqual(0);
  82         });
  83     });
  84
  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);
  89
  90             expect(Ext.Array.indexOf(array, Ext.getDom(child2))).toEqual(1);
  91
  92             child2.insertAfter(child3);
  93
  94             nodes = Ext.getDom(child1).parentNode.childNodes;
  95             array = Ext.toArray(nodes);
  96
  97             expect(Ext.Array.indexOf(array, Ext.getDom(child2))).toEqual(2);
  98         });
  99     });
 100
 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);
 105
 106             child2.insertFirst(child1);
 107
 108             nodes = Ext.getDom(child2).childNodes;
 109             expect(nodes.length).toEqual(1);
 110         });
 111     });
 112
 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);
 119
 120                     child1.insertSibling([
 121                         {id: 'sibling1'},
 122                         {id: 'sibling2'}
 123                     ], 'after');
 124
 125                     nodes = Ext.getDom(el).childNodes;
 126                     expect(nodes.length).toEqual(5);
 127                 });
 128             });
 129
 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);
 134
 135                     child1.insertSibling([
 136                         {id: 'sibling1'},
 137                         {id: 'sibling2'}
 138                     ], 'before');
 139
 140                     nodes = Ext.getDom(el).childNodes;
 141                     expect(nodes.length).toEqual(5);
 142                 });
 143             });
 144         });
 145
 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);
 151
 152                     child1.insertSibling(span, 'after');
 153
 154                     nodes = Ext.getDom(el).childNodes;
 155                     expect(nodes.length).toEqual(4);
 156                 });
 157             });
 158
 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);
 163
 164                     child1.insertSibling(span, 'before');
 165
 166                     nodes = Ext.getDom(el).childNodes;
 167                     expect(nodes.length).toEqual(4);
 168                 });
 169             });
 170         });
 171
 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);
 177
 178                     child1.insertSibling({
 179                         id: 'sibling1'
 180                     }, 'after');
 181
 182                     nodes = Ext.getDom(el).childNodes;
 183                     expect(nodes.length).toEqual(4);
 184                 });
 185
 186                 it("should move the element next to the el", function() {
 187                     var nodes = Ext.getDom(el).childNodes;
 188                     expect(nodes.length).toEqual(3);
 189
 190                     child3.insertSibling({
 191                         id: 'sibling1'
 192                     }, 'after');
 193
 194                     nodes = Ext.getDom(el).childNodes;
 195                     expect(nodes.length).toEqual(4);
 196                 });
 197             });
 198
 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);
 203
 204                     child1.insertSibling({
 205                         id: 'sibling1'
 206                     }, 'before');
 207
 208                     nodes = Ext.getDom(el).childNodes;
 209                     expect(nodes.length).toEqual(4);
 210                 });
 211
 212                 describe("return dom", function() {
 213                     it("should move the element next to the el", function() {
 214                         var nodes = Ext.getDom(el).childNodes,
 215                             dom;
 216
 217                         expect(nodes.length).toEqual(3);
 218
 219                         dom = child1.insertSibling({
 220                             id: 'sibling1'
 221                         }, 'before', true);
 222
 223                         nodes = Ext.getDom(el).childNodes;
 224                         expect(nodes.length).toEqual(4);
 225                         expect(dom).toBeDefined();
 226                     });
 227                 });
 228             });
 229         });
 230     });
 231
 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);
 236
 237             child1.replace(child2);
 238
 239             nodes = Ext.getDom(el).childNodes;
 240             expect(nodes.length).toEqual(2);
 241         });
 242     });
 243
 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);
 248
 249             child1.replaceWith({tag: "div", cls: "childtestdiv"});
 250
 251             expect(child1.hasCls("childtestdiv"));
 252
 253             nodes = Ext.getDom(el).childNodes;
 254             expect(nodes.length).toEqual(3);
 255         });
 256     });
 257
 258     describe("createChild", function() {
 259         it("should create a child", function() {
 260             var nodes = Ext.getDom(el).childNodes;
 261             expect(nodes.length).toEqual(3);
 262
 263             el.createChild({id: 'child4'});
 264
 265             nodes = Ext.getDom(el).childNodes;
 266             expect(nodes.length).toEqual(4);
 267         });
 268
 269         it("should create a child before an el", function() {
 270             var nodes = Ext.getDom(el).childNodes,
 271                 array = Ext.toArray(nodes);
 272
 273             expect(nodes.length).toEqual(3);
 274             expect(Ext.Array.indexOf(array, Ext.getDom(child2))).toEqual(1);
 275
 276             el.createChild({id: 'child4'}, child2);
 277
 278             nodes = Ext.getDom(el).childNodes;
 279             array = Ext.toArray(nodes);
 280
 281             expect(nodes.length).toEqual(4);
 282             expect(Ext.Array.indexOf(array, Ext.getDom(child2))).toEqual(2);
 283         });
 284     });
 285
 286     describe("wrap", function() {
 287         it("should wrap the element", function() {
 288             var parent = Ext.getDom(child1).parentNode;
 289
 290             child1.wrap({
 291                 cls: 'wrapper'
 292             });
 293
 294             expect(Ext.getDom(child1).parentNode.parentNode).toEqual(parent);
 295             expect(Ext.getDom(child1).parentNode.className).toEqual('wrapper');
 296         });
 297
 298         it("return the el", function() {
 299             var node = child1.wrap({
 300                 cls: 'wrapper'
 301             });
 302
 303             expect(Ext.isElement(node)).toBeFalsy();
 304         });
 305
 306         it("return the dom", function() {
 307             var node = child1.wrap({
 308                 cls: 'wrapper'
 309             }, true);
 310
 311             expect(Ext.isElement(node)).toBeTruthy();
 312         });
 313     });
 314
 315     describe("insertHtml", function() {
 316         describe("beforeBegin", function() {
 317             it("should insert the html", function() {
 318                 expect(Ext.getDom(el).childNodes.length).toEqual(3);
 319
 320                 child1.insertHtml('beforeBegin', '<div></div>');
 321
 322                 expect(Ext.getDom(el).childNodes.length).toEqual(4);
 323             });
 324         });
 325
 326         describe("afterBegin", function() {
 327             it("should insert the html", function() {
 328                 expect(Ext.getDom(child1).childNodes.length).toEqual(0);
 329
 330                 child1.insertHtml('afterBegin', '<div></div>');
 331
 332                 expect(Ext.getDom(child1).childNodes.length).toEqual(1);
 333             });
 334         });
 335
 336         describe("beforeEnd", function() {
 337             it("should insert the html", function() {
 338                 expect(Ext.getDom(child1).childNodes.length).toEqual(0);
 339
 340                 child1.insertHtml('beforeEnd', '<div></div>');
 341
 342                 expect(Ext.getDom(child1).childNodes.length).toEqual(1);
 343             });
 344         });
 345
 346         describe("afterEnd", function() {
 347             it("should insert the html", function() {
 348                 expect(Ext.getDom(el).childNodes.length).toEqual(3);
 349
 350                 child1.insertHtml('afterEnd', '<div></div>');
 351
 352                 expect(Ext.getDom(el).childNodes.length).toEqual(4);
 353             });
 354         });
 355
 356         it("should return a dom", function() {
 357             var node = child1.insertHtml('afterEnd', '<div></div>');
 358
 359             expect(Ext.isElement(node)).toBeTruthy();
 360         });
 361
 362         it("should return an el", function() {
 363             var node = child1.insertHtml('afterEnd', '<div></div>', true);
 364
 365             expect(Ext.isElement(node)).toBeFalsy();
 366         });
 367     });
 368 }, "/src/dom/Element.insertion.js");
 369