test/unit/widgets/layout/VBoxLayout.js

   1 /*!
   2  * Ext JS Library 3.2.2
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.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: 'aligning',
 210
 211         setUp: function() {
 212             this.items = [
 213                 buildFakeChild({flex: 1, getWidth: function() {return 10;}}),
 214                 buildFakeChild({flex: 1, getWidth: function() {return 20;}}),
 215                 buildFakeChild({flex: 1, getWidth: function() {return 30;}}),
 216                 buildFakeChild({flex: 1, getWidth: function() {return 40;}})
 217             ];
 218
 219             this.targetSize = {
 220                 height: 400,
 221                 width : 100
 222             };
 223         },
 224
 225         testLeft: function() {
 226             this.layout = buildLayout({
 227                 align: 'left'
 228             });
 229
 230             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 231                 boxes = calcs.boxes;
 232
 233             assert.areEqual(0, boxes[0].left);
 234             assert.areEqual(0, boxes[1].left);
 235             assert.areEqual(0, boxes[2].left);
 236             assert.areEqual(0, boxes[3].left);
 237         },
 238
 239         testMiddle: function() {
 240             this.layout = buildLayout({
 241                 align: 'center'
 242             });
 243
 244             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 245                 boxes = calcs.boxes;
 246
 247             assert.areEqual(45, boxes[0].left);
 248             assert.areEqual(40, boxes[1].left);
 249             assert.areEqual(35, boxes[2].left);
 250             assert.areEqual(30, boxes[3].left);
 251         },
 252
 253         testStretch: function() {
 254             this.layout = buildLayout({
 255                 align: 'stretch'
 256             });
 257
 258             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 259                 boxes = calcs.boxes;
 260
 261             assert.areEqual(0, boxes[0].left);
 262             assert.areEqual(0, boxes[1].left);
 263             assert.areEqual(0, boxes[2].left);
 264             assert.areEqual(0, boxes[3].left);
 265
 266             assert.areEqual(100, boxes[0].width);
 267             assert.areEqual(100, boxes[1].width);
 268             assert.areEqual(100, boxes[2].width);
 269             assert.areEqual(100, boxes[3].width);
 270         },
 271
 272         testStretchMax: function() {
 273             this.layout = buildLayout({
 274                 align: 'stretchmax'
 275             });
 276
 277             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 278                 boxes = calcs.boxes;
 279
 280             assert.areEqual(0, boxes[0].left);
 281             assert.areEqual(0, boxes[1].left);
 282             assert.areEqual(0, boxes[2].left);
 283             assert.areEqual(0, boxes[3].left);
 284
 285             assert.areEqual(40, boxes[0].width);
 286             assert.areEqual(40, boxes[1].width);
 287             assert.areEqual(40, boxes[2].width);
 288             assert.areEqual(40, boxes[3].width);
 289         }
 290     }));
 291
 292     suite.add(new Y.Test.Case({
 293         name: 'packing',
 294
 295         setUp: function() {
 296             this.items = [
 297                 buildFakeChild({getSize: function() {return {width: 10, height: 10};}}),
 298                 buildFakeChild({getSize: function() {return {width: 10, height: 20};}}),
 299                 buildFakeChild({getSize: function() {return {width: 10, height: 30};}}),
 300                 buildFakeChild({getSize: function() {return {width: 10, height: 40};}})
 301             ];
 302
 303             this.targetSize = {
 304                 height: 400,
 305                 width : 100
 306             };
 307         },
 308
 309         testPackStart: function() {
 310             this.layout = buildLayout({
 311                 pack: 'start'
 312             });
 313
 314             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 315                 boxes = calcs.boxes;
 316
 317             assert.areEqual(0, boxes[0].top);
 318             assert.areEqual(10, boxes[1].top);
 319             assert.areEqual(30, boxes[2].top);
 320             assert.areEqual(60, boxes[3].top);
 321         },
 322
 323         testPackCenter: function() {
 324             this.layout = buildLayout({
 325                 pack: 'center'
 326             });
 327
 328             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 329                 boxes = calcs.boxes;
 330
 331             assert.areEqual(150, boxes[0].top);
 332             assert.areEqual(160, boxes[1].top);
 333             assert.areEqual(180, boxes[2].top);
 334             assert.areEqual(210, boxes[3].top);
 335         },
 336
 337         testPackEnd: function() {
 338             this.layout = buildLayout({
 339                 pack: 'end'
 340             });
 341
 342             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 343                 boxes = calcs.boxes;
 344
 345             assert.areEqual(300, boxes[0].top);
 346             assert.areEqual(310, boxes[1].top);
 347             assert.areEqual(330, boxes[2].top);
 348             assert.areEqual(360, boxes[3].top);
 349         }
 350     }));
 351
 352     suite.add(new Y.Test.Case({
 353         name: 'meta data from calculated box sizes',
 354
 355         setUp: function() {
 356             this.layout = buildLayout();
 357
 358             this.items = [
 359                 buildFakeChild({getWidth: function() {return 50;}, flex: 1}),
 360                 buildFakeChild({getWidth: function() {return 60;}, flex: 1}),
 361                 buildFakeChild({getWidth: function() {return 10;}, flex: 1}),
 362                 buildFakeChild({getWidth: function() {return 80;}, flex: 1})
 363             ];
 364
 365             this.targetSize = {
 366                 height: 400,
 367                 width : 100
 368             };
 369         },
 370
 371         testMaxHeight: function() {
 372             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 373                 meta  = calcs.meta;
 374
 375             assert.areEqual(80, meta.maxWidth);
 376         }
 377     }));
 378
 379     suite.add(new Y.Test.Case({
 380         name: 'update innerCt size',
 381
 382         setUp: function() {
 383             this.layout = buildLayout({
 384                 align  : 'stretch',
 385                 padding: {
 386                     top   : 0,
 387                     bottom: 0,
 388                     left  : 10,
 389                     right : 20
 390                 }
 391             });
 392
 393             //fake the values that are calculated during onLayout
 394             this.layoutTargetLastSize = {
 395                 width : 100,
 396                 height: 400
 397             };
 398
 399             this.childBoxCache = {
 400                 meta: {
 401                     maxWidth: 150
 402                 }
 403             };
 404         },
 405
 406         testMaintainsWidthForAlignStretch: function() {
 407             var layout = this.layout,
 408                 width, height;
 409
 410             //a fake innerCt element that we can intercept calls to setSize on
 411             layout.innerCt = {
 412                 setSize: function(widthArg, heightArg) {
 413                     width  = widthArg;
 414                     height = heightArg;
 415                 }
 416             };
 417
 418             layout.updateInnerCtSize(this.layoutTargetLastSize, this.childBoxCache);
 419
 420             assert.areSame(100, width);
 421             assert.areSame(400, height);
 422         },
 423
 424         //if aligning middle, increase height to accomodate the tallest child
 425         testIncreasesWidthForAlignMiddle: function() {
 426             this.layout = buildLayout({
 427                 align  : 'middle',
 428                 padding: {
 429                     top   : 0,
 430                     bottom: 0,
 431                     left  : 10,
 432                     right : 20
 433                 }
 434             });
 435
 436             var layout = this.layout,
 437                 width, height;
 438
 439             //a fake innerCt element that we can intercept calls to setSize on
 440             layout.innerCt = {
 441                 setSize: function(widthArg, heightArg) {
 442                     width  = widthArg;
 443                     height = heightArg;
 444                 }
 445             };
 446
 447             layout.updateInnerCtSize(this.layoutTargetLastSize, this.childBoxCache);
 448
 449             assert.areSame(180, width);
 450             assert.areSame(400, height);
 451         }
 452     }));
 453 })();