test/unit/widgets/layout/VBoxLayout.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 /**
   8  * Tests Ext.data.Store functionality
   9  * @author Ed Spencer
  10  */
  11 (function() {
  12     var suite  = Ext.test.session.getSuite('Ext.layout.VBoxLayout'),
  13         assert = Y.Assert;
  14
  15     function buildFakeChild(config) {
  16         config = config || {};
  17
  18         Ext.applyIf(config, {
  19             getWidth: function() {
  20                 return 10;
  21             },
  22             getHeight: function() {
  23                 return 10;
  24             },
  25             getSize: function() {
  26                 return {
  27                     height: 10,
  28                     width : 10
  29                 };
  30             },
  31             margins: {
  32                 top   : 0,
  33                 right : 0,
  34                 bottom: 0,
  35                 left  : 0
  36             }
  37         });
  38
  39         return config;
  40     }
  41
  42     function buildLayout(config) {
  43         config = config || {};
  44
  45         Ext.applyIf(config, {
  46             padding: {
  47                 top   : 0,
  48                 right : 0,
  49                 bottom: 0,
  50                 left  : 0
  51             }
  52         });
  53
  54         return new Ext.layout.VBoxLayout(config);
  55     };
  56
  57     suite.add(new Y.Test.Case({
  58         name: 'calculating flexed box sizes',
  59
  60         setUp: function() {
  61             this.layout = buildLayout();
  62
  63             this.items = [
  64                 buildFakeChild({flex: 1}),
  65                 buildFakeChild({flex: 1}),
  66                 buildFakeChild({flex: 1}),
  67                 buildFakeChild({flex: 1})
  68             ];
  69
  70             this.targetSize = {
  71                 height: 400,
  72                 width : 100
  73             };
  74         },
  75
  76         testEqualFlexHeights: function() {
  77             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
  78                 boxes = calcs.boxes;
  79
  80             assert.areEqual(100, boxes[0].height);
  81             assert.areEqual(100, boxes[1].height);
  82             assert.areEqual(100, boxes[2].height);
  83             assert.areEqual(100, boxes[3].height);
  84         },
  85
  86         testDifferentFlexWidths: function() {
  87             this.items = [
  88                 buildFakeChild({flex: 1}),
  89                 buildFakeChild({flex: 2}),
  90                 buildFakeChild({flex: 3}),
  91                 buildFakeChild({flex: 4})
  92             ];
  93
  94             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
  95                 boxes = calcs.boxes;
  96
  97             assert.areEqual(40, boxes[0].height);
  98             assert.areEqual(80, boxes[1].height);
  99             assert.areEqual(120, boxes[2].height);
 100             assert.areEqual(160, boxes[3].height);
 101         },
 102
 103         testMarginsAccountedFor: function() {
 104             var items = [
 105                 buildFakeChild({flex: 1, margins: {left: 0, right: 0, top: 10, bottom: 10}}),
 106                 buildFakeChild({flex: 1, margins: {left: 0, right: 0, top: 10, bottom: 10}}),
 107                 buildFakeChild({flex: 1, margins: {left: 0, right: 0, top: 10, bottom: 10}}),
 108                 buildFakeChild({flex: 1, margins: {left: 0, right: 0, top: 10, bottom: 10}})
 109             ];
 110
 111             var calcs = this.layout.calculateChildBoxes(items, this.targetSize),
 112                 boxes = calcs.boxes;
 113
 114             assert.areEqual(80, boxes[0].height);
 115             assert.areEqual(80, boxes[1].height);
 116             assert.areEqual(80, boxes[2].height);
 117             assert.areEqual(80, boxes[3].height);
 118         },
 119
 120         testPaddingAccountedFor: function() {
 121             this.layout = buildLayout({
 122                 padding: {
 123                     top   : 10,
 124                     right : 10,
 125                     bottom: 10,
 126                     left  : 10
 127                 }
 128             });
 129
 130             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 131                 boxes = calcs.boxes;
 132
 133             //400px available internally, minus 20px total left + right padding = 380 / 4
 134             assert.areEqual(95, boxes[0].height);
 135             assert.areEqual(95, boxes[1].height);
 136             assert.areEqual(95, boxes[2].height);
 137             assert.areEqual(95, boxes[3].height);
 138         },
 139
 140         //one of the items is passed both a width and a flex - the flex should be ignored
 141         testHeightDominatesFlex: function() {
 142             var items = [
 143                 buildFakeChild({flex: 1, height: 250, getHeight: function() {return 250;}}),
 144                 buildFakeChild({flex: 1}),
 145                 buildFakeChild({flex: 1}),
 146                 buildFakeChild({flex: 1})
 147             ];
 148
 149             var calcs = this.layout.calculateChildBoxes(items, this.targetSize),
 150                 boxes = calcs.boxes;
 151
 152             assert.areEqual(250, boxes[0].height);
 153             assert.areEqual(50, boxes[1].height);
 154             assert.areEqual(50, boxes[2].height);
 155             assert.areEqual(50, boxes[3].height);
 156         },
 157
 158         testHeightPropertyDominatesGetHeight: function() {
 159             var layout = buildLayout({
 160                 pack : 'start',
 161                 align: 'stretch'
 162             });
 163
 164             var items = [
 165                 {
 166                     title: 'Panel 1',
 167                     flex: 1,
 168                     html: 'flex : 1',
 169                     frame: true,
 170                     margins: {top: 0, left: 0, right: 0, bottom: 0},
 171                     getHeight: function() {return 10;},
 172                     getWidth: function() {return 10;}
 173                 }, {
 174                     title: 'Panel 2',
 175                     height: 100,
 176                     html: 'width : 100',
 177                     frame: true,
 178                     margins: {top: 0, left: 0, right: 0, bottom: 0},
 179                     getWidth: function() {return 10;},
 180
 181                     //NOTE: this should be ignored by HBox because we have a different configured width property
 182                     getHeight: function() {return 10;}
 183                 }, {
 184                     title: 'Panel 3',
 185                     flex: 2,
 186                     html: 'flex : 2',
 187                     frame: true,
 188                     margins: {top: 0, left: 0, right: 0, bottom: 0},
 189                     getHeight: function() {return 10;},
 190                     getWidth: function() {return 10;}
 191                 }
 192             ];
 193
 194             var targetSize = {
 195                 height: 1628,
 196                 width : 630
 197             };
 198
 199             var calcs = layout.calculateChildBoxes(items, targetSize),
 200                 boxes = calcs.boxes;
 201
 202             assert.areEqual(0, boxes[0].top);
 203             assert.areEqual(510, boxes[1].top);
 204             assert.areEqual(610, boxes[2].top);
 205         }
 206     }));
 207
 208     suite.add(new Y.Test.Case({
 209         name: 'minHeight of items',
 210
 211         setUp: function() {
 212             this.layout = buildLayout();
 213
 214             this.layout.beforeCt = {
 215                 getWidth: function() {
 216                     return 0;
 217                 },
 218                 createChild: Ext.emptyFn
 219             };
 220
 221             this.layout.afterCt = {
 222                 getWidth: function() {
 223                     return 0;
 224                 },
 225                 createChild: Ext.emptyFn
 226             };
 227
 228             this.items = [
 229                 buildFakeChild({height: 100, minHeight: 100}),
 230                 buildFakeChild({height: 200, minHeight: 120}),
 231                 buildFakeChild({height: 200, minHeight: 120}),
 232                 buildFakeChild({height: 200, minHeight: 120})
 233             ];
 234         },
 235
 236         testAvailableWidthIsSufficient: function() {
 237             var targetSize = {
 238                 height: 700,
 239                 width : 25
 240             };
 241
 242             var calcs = this.layout.calculateChildBoxes(this.items, targetSize),
 243                 boxes = calcs.boxes;
 244
 245             assert.areEqual(0,   boxes[0].top);
 246             assert.areEqual(100, boxes[1].top);
 247             assert.areEqual(300, boxes[2].top);
 248             assert.areEqual(500, boxes[3].top);
 249
 250             assert.areEqual(100, boxes[0].height);
 251             assert.areEqual(200, boxes[1].height);
 252             assert.areEqual(200, boxes[2].height);
 253             assert.areEqual(200, boxes[3].height);
 254         },
 255
 256         testHasShortfall: function() {
 257             var targetSize = {
 258                 height: 500,
 259                 width : 25
 260             };
 261
 262             var calcs = this.layout.calculateChildBoxes(this.items, targetSize),
 263                 boxes = calcs.boxes;
 264
 265             assert.areEqual(100, boxes[0].height);
 266             assert.areEqual(133, boxes[1].height);
 267             assert.areEqual(133, boxes[2].height);
 268             assert.areEqual(134, boxes[3].height);
 269
 270             assert.areEqual(0,   boxes[0].top);
 271             assert.areEqual(100, boxes[1].top);
 272             assert.areEqual(233, boxes[2].top);
 273             assert.areEqual(366, boxes[3].top);
 274         },
 275
 276         testTooNarrow: function() {
 277             var targetSize = {
 278                 height: 400,
 279                 width : 25
 280             };
 281
 282             var calcs = this.layout.calculateChildBoxes(this.items, targetSize),
 283                 boxes = calcs.boxes;
 284
 285             assert.areEqual(0,   boxes[0].top);
 286             assert.areEqual(100, boxes[1].top);
 287             assert.areEqual(220, boxes[2].top);
 288             assert.areEqual(340, boxes[3].top);
 289
 290             assert.areEqual(100, boxes[0].height);
 291             assert.areEqual(120, boxes[1].height);
 292             assert.areEqual(120, boxes[2].height);
 293             assert.areEqual(120, boxes[3].height);
 294         }
 295     }));
 296
 297     suite.add(new Y.Test.Case({
 298         name: 'aligning',
 299
 300         setUp: function() {
 301             this.items = [
 302                 buildFakeChild({flex: 1, getWidth: function() {return 10;}}),
 303                 buildFakeChild({flex: 1, getWidth: function() {return 20;}}),
 304                 buildFakeChild({flex: 1, getWidth: function() {return 30;}}),
 305                 buildFakeChild({flex: 1, getWidth: function() {return 40;}})
 306             ];
 307
 308             this.targetSize = {
 309                 height: 400,
 310                 width : 100
 311             };
 312         },
 313
 314         testLeft: function() {
 315             this.layout = buildLayout({
 316                 align: 'left'
 317             });
 318
 319             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 320                 boxes = calcs.boxes;
 321
 322             assert.areEqual(0, boxes[0].left);
 323             assert.areEqual(0, boxes[1].left);
 324             assert.areEqual(0, boxes[2].left);
 325             assert.areEqual(0, boxes[3].left);
 326         },
 327
 328         testMiddle: function() {
 329             this.layout = buildLayout({
 330                 align: 'center'
 331             });
 332
 333             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 334                 boxes = calcs.boxes;
 335
 336             assert.areEqual(45, boxes[0].left);
 337             assert.areEqual(40, boxes[1].left);
 338             assert.areEqual(35, boxes[2].left);
 339             assert.areEqual(30, boxes[3].left);
 340         },
 341
 342         testStretch: function() {
 343             this.layout = buildLayout({
 344                 align: 'stretch'
 345             });
 346
 347             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 348                 boxes = calcs.boxes;
 349
 350             assert.areEqual(0, boxes[0].left);
 351             assert.areEqual(0, boxes[1].left);
 352             assert.areEqual(0, boxes[2].left);
 353             assert.areEqual(0, boxes[3].left);
 354
 355             assert.areEqual(100, boxes[0].width);
 356             assert.areEqual(100, boxes[1].width);
 357             assert.areEqual(100, boxes[2].width);
 358             assert.areEqual(100, boxes[3].width);
 359         },
 360
 361         testStretchMax: function() {
 362             this.layout = buildLayout({
 363                 align: 'stretchmax'
 364             });
 365
 366             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 367                 boxes = calcs.boxes;
 368
 369             assert.areEqual(0, boxes[0].left);
 370             assert.areEqual(0, boxes[1].left);
 371             assert.areEqual(0, boxes[2].left);
 372             assert.areEqual(0, boxes[3].left);
 373
 374             assert.areEqual(40, boxes[0].width);
 375             assert.areEqual(40, boxes[1].width);
 376             assert.areEqual(40, boxes[2].width);
 377             assert.areEqual(40, boxes[3].width);
 378         }
 379     }));
 380
 381     suite.add(new Y.Test.Case({
 382         name: 'packing',
 383
 384         setUp: function() {
 385             this.items = [
 386                 buildFakeChild({getSize: function() {return {width: 10, height: 10};}}),
 387                 buildFakeChild({getSize: function() {return {width: 10, height: 20};}}),
 388                 buildFakeChild({getSize: function() {return {width: 10, height: 30};}}),
 389                 buildFakeChild({getSize: function() {return {width: 10, height: 40};}})
 390             ];
 391
 392             this.targetSize = {
 393                 height: 400,
 394                 width : 100
 395             };
 396         },
 397
 398         testPackStart: function() {
 399             this.layout = buildLayout({
 400                 pack: 'start'
 401             });
 402
 403             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 404                 boxes = calcs.boxes;
 405
 406             assert.areEqual(0, boxes[0].top);
 407             assert.areEqual(10, boxes[1].top);
 408             assert.areEqual(30, boxes[2].top);
 409             assert.areEqual(60, boxes[3].top);
 410         },
 411
 412         testPackCenter: function() {
 413             this.layout = buildLayout({
 414                 pack: 'center'
 415             });
 416
 417             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 418                 boxes = calcs.boxes;
 419
 420             assert.areEqual(150, boxes[0].top);
 421             assert.areEqual(160, boxes[1].top);
 422             assert.areEqual(180, boxes[2].top);
 423             assert.areEqual(210, boxes[3].top);
 424         },
 425
 426         testPackEnd: function() {
 427             this.layout = buildLayout({
 428                 pack: 'end'
 429             });
 430
 431             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 432                 boxes = calcs.boxes;
 433
 434             assert.areEqual(300, boxes[0].top);
 435             assert.areEqual(310, boxes[1].top);
 436             assert.areEqual(330, boxes[2].top);
 437             assert.areEqual(360, boxes[3].top);
 438         }
 439     }));
 440
 441     suite.add(new Y.Test.Case({
 442         name: 'meta data from calculated box sizes',
 443
 444         setUp: function() {
 445             this.layout = buildLayout();
 446
 447             this.items = [
 448                 buildFakeChild({getWidth: function() {return 50;}, flex: 1}),
 449                 buildFakeChild({getWidth: function() {return 60;}, flex: 1}),
 450                 buildFakeChild({getWidth: function() {return 10;}, flex: 1}),
 451                 buildFakeChild({getWidth: function() {return 80;}, flex: 1})
 452             ];
 453
 454             this.targetSize = {
 455                 height: 400,
 456                 width : 100
 457             };
 458         },
 459
 460         testMaxHeight: function() {
 461             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 462                 meta  = calcs.meta;
 463
 464             assert.areEqual(80, meta.maxWidth);
 465         }
 466     }));
 467
 468     suite.add(new Y.Test.Case({
 469         name: 'update innerCt size',
 470
 471         setUp: function() {
 472             this.layout = buildLayout({
 473                 align  : 'stretch',
 474                 padding: {
 475                     top   : 0,
 476                     bottom: 0,
 477                     left  : 10,
 478                     right : 20
 479                 }
 480             });
 481
 482             //fake the values that are calculated during onLayout
 483             this.layoutTargetLastSize = {
 484                 width : 100,
 485                 height: 400
 486             };
 487
 488             this.childBoxCache = {
 489                 meta: {
 490                     maxWidth: 150
 491                 }
 492             };
 493         },
 494
 495         testMaintainsWidthForAlignStretch: function() {
 496             var layout = this.layout,
 497                 width, height;
 498
 499             //a fake innerCt element that we can intercept calls to setSize on
 500             layout.innerCt = {
 501                 setSize: function(widthArg, heightArg) {
 502                     width  = widthArg;
 503                     height = heightArg;
 504                 }
 505             };
 506
 507             layout.updateInnerCtSize(this.layoutTargetLastSize, this.childBoxCache);
 508
 509             assert.areSame(100, width);
 510             assert.areSame(400, height);
 511         },
 512
 513         //if aligning middle, increase height to accomodate the tallest child
 514         testIncreasesWidthForAlignMiddle: function() {
 515             this.layout = buildLayout({
 516                 align  : 'middle',
 517                 padding: {
 518                     top   : 0,
 519                     bottom: 0,
 520                     left  : 10,
 521                     right : 20
 522                 }
 523             });
 524
 525             var layout = this.layout,
 526                 width, height;
 527
 528             //a fake innerCt element that we can intercept calls to setSize on
 529             layout.innerCt = {
 530                 setSize: function(widthArg, heightArg) {
 531                     width  = widthArg;
 532                     height = heightArg;
 533                 }
 534             };
 535
 536             layout.updateInnerCtSize(this.layoutTargetLastSize, this.childBoxCache);
 537
 538             assert.areSame(180, width);
 539             assert.areSame(400, height);
 540         }
 541     }));
 542 })();