extjs/classic/classic/test/specs/resizer/Resizer.js

   1 describe('Ext.resizer.Resizer', function () {
   2     var resizer, target,
   3     testIt = Ext.isWebKit ? it : xit;
   4
   5     function makeResizer(cfg) {
   6         target = new Ext.Component(Ext.apply({
   7             renderTo: Ext.getBody()
   8         }, cfg));
   9
  10         resizer = new Ext.resizer.Resizer({
  11             target: target,
  12             handles: 'all'
  13         });
  14     }
  15
  16     afterEach(function () {
  17         Ext.destroy(resizer, target);
  18         resizer = target = null;
  19     });
  20
  21     describe('init', function () {
  22         describe('when target el needs to be wrapped', function () {
  23             beforeEach(function () {
  24                 makeResizer({
  25                     autoEl: {
  26                         tag: 'textarea',
  27                         html: 'And any fool knows a dog needs a home, A shelter from pigs on the wing.'
  28                     }
  29                 });
  30             });
  31
  32             it('should be given an `originalTarget` property', function () {
  33                 expect(resizer.originalTarget).toBeDefined();
  34             });
  35
  36             it('should redefine the target to be an element', function () {
  37                 expect(resizer.target.isElement).toBe(true);
  38             });
  39
  40             it('should not set originalTarget equalTo target', function () {
  41                 expect(resizer.originalTarget).not.toBe(resizer.target);
  42             });
  43         });
  44     });
  45
  46     describe('constraining', function() {
  47         // Synthetic event resizing only works on good browsers.
  48         // Code tested is not browser dependent however.
  49         testIt('should not constrain if constrain config !== true', function() {
  50             var window,
  51                 panel = new Ext.panel.Panel({
  52                 height: 200,
  53                 width: 200,
  54                 renderTo: document.body,
  55                 items: [window = new Ext.window.Window({
  56                     height: 100,
  57                     width: 100,
  58                     title: 'Child Window'
  59                 })]
  60             });
  61
  62             window.show();
  63             jasmine.fireMouseEvent(window.resizer.east, 'mousedown');
  64             jasmine.fireMouseEvent(document.body, 'mousemove', 200, 150);
  65             jasmine.fireMouseEvent(document.body, 'mouseup');
  66
  67             // Window must be allowed to resize outside its owning Panel's bounds
  68             expect(window.getWidth()).toBe(300);
  69             Ext.destroy(panel, window);
  70         });
  71         testIt("should constrain to floatParent's targetEl if constrain config == true", function() {
  72             var window,
  73                 panel = new Ext.panel.Panel({
  74                 height: 200,
  75                 width: 200,
  76                 renderTo: document.body,
  77                 items: [window = new Ext.window.Window({
  78                     constrain: true,
  79                     height: 100,
  80                     width: 100,
  81                     title: 'Child Window'
  82                 })]
  83             });
  84
  85             window.show();
  86             jasmine.fireMouseEvent(window.resizer.east, 'mousedown');
  87             jasmine.fireMouseEvent(document.body, 'mousemove', 200, 150);
  88             jasmine.fireMouseEvent(document.body, 'mouseup');
  89
  90             // Window must NOT be allowed to resize outside its owning Panel's bounds
  91             expect(window.getWidth()).toBe(150);
  92             Ext.destroy(panel, window);
  93         });
  94     });
  95
  96     describe('resizing in a layout', function() {
  97         testIt('Should allow layout last word on positioning when sizing using top handle', function() {
  98             var i,
  99                 panels = [],
 100                 macBeth = [
 101                     "The Tragedy of Macbeth - Shakespeare <br>ACT I<br>SCENE I. A desert place.<br><br>Thunder and lightning. Enter three Witches",
 102                     "First Witch: When shall we three meet again In thunder, lightning, or in rain?",
 103                     "Second Witch: When the hurlyburly's done, When the battle's lost and won.",
 104                     "Third Witch: That will be ere the set of sun."
 105                 ],
 106                 outerPanel;
 107
 108             for (i = 0; i < macBeth.length; i++) {
 109                 panels.push(new Ext.panel.Panel({
 110                     margin: "0, 0 10 0",
 111                     title: "I'm Panel #" + (i + 1),
 112                     titleAlign: 'center',
 113                     html: macBeth[i],
 114                     frame: true,
 115                     resizable: true,
 116                     resizeHandles: 's,n'
 117                 }));
 118             }
 119
 120             outerPanel = new Ext.panel.Panel({
 121                 height: 600,
 122                 width: 800,
 123                 layout: {
 124                     type: 'vbox'
 125                 },
 126                 items: panels,
 127                 renderTo: document.body
 128             });
 129
 130             var panel1Top = panels[1].getY();
 131
 132             jasmine.fireMouseEvent(panels[1].resizer.north, 'mousedown');
 133             jasmine.fireMouseEvent(document.body, 'mousemove', 0, -50);
 134             jasmine.fireMouseEvent(document.body, 'mouseup');
 135
 136             // Layout should have correctred the top
 137             expect(panels[1].getY()).toBe(panel1Top);
 138             outerPanel.destroy();
 139         });
 140     });
 141 });