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

   1 describe("Ext.core.Element.insertion", function() {
   2     var proto = Ext.core.Element.prototype,
   3         el, testEl,
   4         span, testSpanEl,
   5         child1, child2, child3;
   6
   7     beforeEach(function() {
   8         testEl = Ext.getBody().createChild({
   9             id: 'ExtElementHelper',
  10             children: [
  11                 {id: 'child1'},
  12                 {id: 'child2'},
  13                 {id: 'child3'}
  14             ]
  15         });
  16
  17         testSpanEl = Ext.getBody().createChild({
  18             id  : 'ExtElementSpanHelper',
  19             tag : 'span'
  20         });
  21
  22         el    = new Ext.core.Element(Ext.getDom(testEl));
  23         span = new Ext.core.Element(Ext.getDom(testSpanEl));
  24
  25         child1 = Ext.get('child1');
  26         child2 = Ext.get('child2');
  27         child3 = Ext.get('child3');
  28     });
  29
  30     afterEach(function() {
  31         testEl.remove();
  32         testSpanEl.remove();
  33     });
  34     describe("appendChild", function() {
  35         it("should append the child", function() {
  36             expect(el.contains(span)).toBeFalsy();
  37
  38             el.appendChild(span);
  39
  40             expect(el.contains(span)).toBeTruthy();
  41         });
  42     });
  43
  44     describe("appendTo", function() {
  45         it("should append the el to the specified el", function() {
  46             expect(span.contains(el)).toBeFalsy();
  47
  48             el.appendTo(span);
  49
  50             expect(span.contains(el)).toBeTruthy();
  51         });
  52     });
  53
  54     describe("insertBefore", function() {
  55         it("should insert the el before the specified el", function() {
  56             var nodes = Ext.getDom(child1).parentNode.childNodes,
  57                 array = Ext.toArray(nodes);
  58
  59
  60             expect(Ext.Array.indexOf(array, Ext.getDom(child2))).toEqual(1);
  61
  62             child2.insertBefore(child1);
  63
  64             nodes = Ext.getDom(child1).parentNode.childNodes;
  65             array = Ext.toArray(nodes);
  66
  67             expect(Ext.Array.indexOf(array, Ext.getDom(child2))).toEqual(0);
  68         });
  69     });
  70
  71     describe("insertAfter", function() {
  72         it("should insert the el after the specified el", function() {
  73             var nodes = Ext.getDom(child1).parentNode.childNodes,
  74                 array = Ext.toArray(nodes);
  75
  76             expect(Ext.Array.indexOf(array, Ext.getDom(child2))).toEqual(1);
  77
  78             child2.insertAfter(child3);
  79
  80             nodes = Ext.getDom(child1).parentNode.childNodes;
  81             array = Ext.toArray(nodes);
  82
  83             expect(Ext.Array.indexOf(array, Ext.getDom(child2))).toEqual(2);
  84         });
  85     });
  86
  87     describe("insertFirst", function() {
  88         it("should insert the el into the specified el", function() {
  89             var nodes = Ext.getDom(child2).childNodes;
  90             expect(nodes.length).toEqual(0);
  91
  92             child2.insertFirst(child1);
  93
  94             nodes = Ext.getDom(child2).childNodes;
  95             expect(nodes.length).toEqual(1);
  96         });
  97     });
  98
  99     describe("insertSibling", function() {
 100         describe("when array", function() {
 101             describe("after", function() {
 102                 it("should create each of the elements and add them to the el parent", function() {
 103                     var nodes = Ext.getDom(el).childNodes;
 104                     expect(nodes.length).toEqual(3);
 105
 106                     child1.insertSibling([
 107                         {id: 'sibling1'},
 108                         {id: 'sibling2'}
 109                     ], 'after');
 110
 111                     nodes = Ext.getDom(el).childNodes;
 112                     expect(nodes.length).toEqual(5);
 113                 });
 114             });
 115
 116             describe("before", function() {
 117                 it("should create each of the elements and add them to the el parent", function() {
 118                     var nodes = Ext.getDom(el).childNodes;
 119                     expect(nodes.length).toEqual(3);
 120
 121                     child1.insertSibling([
 122                         {id: 'sibling1'},
 123                         {id: 'sibling2'}
 124                     ], 'before');
 125
 126                     nodes = Ext.getDom(el).childNodes;
 127                     expect(nodes.length).toEqual(5);
 128                 });
 129             });
 130         });
 131
 132         describe("when Ext.core.Element", function() {
 133             describe("after", function() {
 134                 it("should move the element next to the el", function() {
 135                     var nodes = Ext.getDom(el).childNodes;
 136                     expect(nodes.length).toEqual(3);
 137
 138                     child1.insertSibling(span, 'after');
 139
 140                     nodes = Ext.getDom(el).childNodes;
 141                     expect(nodes.length).toEqual(4);
 142                 });
 143             });
 144
 145             describe("before", function() {
 146                 it("should move the element next to the el", function() {
 147                     var nodes = Ext.getDom(el).childNodes;
 148                     expect(nodes.length).toEqual(3);
 149
 150                     child1.insertSibling(span, 'before');
 151
 152                     nodes = Ext.getDom(el).childNodes;
 153                     expect(nodes.length).toEqual(4);
 154                 });
 155             });
 156         });
 157
 158         describe("other", function() {
 159             describe("after", 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({
 165                         id: 'sibling1'
 166                     }, 'after');
 167
 168                     nodes = Ext.getDom(el).childNodes;
 169                     expect(nodes.length).toEqual(4);
 170                 });
 171
 172                 it("should move the element next to the el", function() {
 173                     var nodes = Ext.getDom(el).childNodes;
 174                     expect(nodes.length).toEqual(3);
 175
 176                     child3.insertSibling({
 177                         id: 'sibling1'
 178                     }, 'after');
 179
 180                     nodes = Ext.getDom(el).childNodes;
 181                     expect(nodes.length).toEqual(4);
 182                 });
 183             });
 184
 185             describe("before", function() {
 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                     child1.insertSibling({
 191                         id: 'sibling1'
 192                     }, 'before');
 193
 194                     nodes = Ext.getDom(el).childNodes;
 195                     expect(nodes.length).toEqual(4);
 196                 });
 197
 198                 describe("return dom", function() {
 199                     it("should move the element next to the el", function() {
 200                         var nodes = Ext.getDom(el).childNodes,
 201                             dom;
 202
 203                         expect(nodes.length).toEqual(3);
 204
 205                         dom = child1.insertSibling({
 206                             id: 'sibling1'
 207                         }, 'before', true);
 208
 209                         nodes = Ext.getDom(el).childNodes;
 210                         expect(nodes.length).toEqual(4);
 211                         expect(dom).toBeDefined();
 212                     });
 213                 });
 214             });
 215         });
 216     });
 217
 218     describe("replace", function() {
 219         it("should replace the passed element with this element", function() {
 220             var nodes = Ext.getDom(el).childNodes;
 221             expect(nodes.length).toEqual(3);
 222
 223             child1.replace(child2);
 224
 225             nodes = Ext.getDom(el).childNodes;
 226             expect(nodes.length).toEqual(2);
 227         });
 228     });
 229
 230     describe("replaceWith", function() {
 231         it("should replace this element with the passed element", function() {
 232             var nodes = Ext.getDom(el).childNodes;
 233             expect(nodes.length).toEqual(3);
 234
 235             child1.replaceWith({tag: "div", cls: "childtestdiv"});
 236
 237             expect(child1.hasCls("childtestdiv"));
 238
 239             nodes = Ext.getDom(el).childNodes;
 240             expect(nodes.length).toEqual(3);
 241         });
 242     });
 243
 244     describe("createChild", function() {
 245         it("should create a child", function() {
 246             var nodes = Ext.getDom(el).childNodes;
 247             expect(nodes.length).toEqual(3);
 248
 249             el.createChild({id: 'child4'});
 250
 251             nodes = Ext.getDom(el).childNodes;
 252             expect(nodes.length).toEqual(4);
 253         });
 254
 255         it("should create a child before an el", function() {
 256             var nodes = Ext.getDom(el).childNodes,
 257                 array = Ext.toArray(nodes);
 258
 259             expect(nodes.length).toEqual(3);
 260             expect(Ext.Array.indexOf(array, Ext.getDom(child2))).toEqual(1);
 261
 262             el.createChild({id: 'child4'}, child2);
 263
 264             nodes = Ext.getDom(el).childNodes;
 265             array = Ext.toArray(nodes);
 266
 267             expect(nodes.length).toEqual(4);
 268             expect(Ext.Array.indexOf(array, Ext.getDom(child2))).toEqual(2);
 269         });
 270     });
 271
 272     describe("wrap", function() {
 273         it("should wrap the element", function() {
 274             var parent = Ext.getDom(child1).parentNode;
 275
 276             child1.wrap({
 277                 cls: 'wrapper'
 278             });
 279
 280             expect(Ext.getDom(child1).parentNode.parentNode).toEqual(parent);
 281             expect(Ext.getDom(child1).parentNode.className).toEqual('wrapper');
 282         });
 283
 284         it("return the el", function() {
 285             var node = child1.wrap({
 286                 cls: 'wrapper'
 287             });
 288
 289             expect(Ext.isElement(node)).toBeFalsy();
 290         });
 291
 292         it("return the dom", function() {
 293             var node = child1.wrap({
 294                 cls: 'wrapper'
 295             }, true);
 296
 297             expect(Ext.isElement(node)).toBeTruthy();
 298         });
 299     });
 300
 301     describe("insertHtml", function() {
 302         describe("beforeBegin", function() {
 303             it("should insert the html", function() {
 304                 expect(Ext.getDom(el).childNodes.length).toEqual(3);
 305
 306                 child1.insertHtml('beforeBegin', '<div></div>');
 307
 308                 expect(Ext.getDom(el).childNodes.length).toEqual(4);
 309             });
 310         });
 311
 312         describe("afterBegin", function() {
 313             it("should insert the html", function() {
 314                 expect(Ext.getDom(child1).childNodes.length).toEqual(0);
 315
 316                 child1.insertHtml('afterBegin', '<div></div>');
 317
 318                 expect(Ext.getDom(child1).childNodes.length).toEqual(1);
 319             });
 320         });
 321
 322         describe("beforeEnd", function() {
 323             it("should insert the html", function() {
 324                 expect(Ext.getDom(child1).childNodes.length).toEqual(0);
 325
 326                 child1.insertHtml('beforeEnd', '<div></div>');
 327
 328                 expect(Ext.getDom(child1).childNodes.length).toEqual(1);
 329             });
 330         });
 331
 332         describe("afterEnd", function() {
 333             it("should insert the html", function() {
 334                 expect(Ext.getDom(el).childNodes.length).toEqual(3);
 335
 336                 child1.insertHtml('afterEnd', '<div></div>');
 337
 338                 expect(Ext.getDom(el).childNodes.length).toEqual(4);
 339             });
 340         });
 341
 342         it("should return a dom", function() {
 343             var node = child1.insertHtml('afterEnd', '<div></div>');
 344
 345             expect(Ext.isElement(node)).toBeTruthy();
 346         });
 347
 348         it("should return an el", function() {
 349             var node = child1.insertHtml('afterEnd', '<div></div>', true);
 350
 351             expect(Ext.isElement(node)).toBeFalsy();
 352         });
 353     });
 354 }, "/src/dom/Element.insertion.js");