extjs/classic/classic/test/specs/slider/Thumb.js

   1 describe("Ext.slider.Thumb", function() {
   2     var slider, thumb, createSlider, createThumb;
   3
   4     beforeEach(function() {
   5         createSlider = function(config) {
   6             slider = new Ext.slider.Multi(Ext.apply({
   7                 renderTo: Ext.getBody(),
   8                 name: "test",
   9                 width: 219,
  10                 labelWidth: 0,
  11                 hideEmptyLabel: false,
  12                 minValue: 0,
  13                 maxValue: 100,
  14                 animate: false
  15             }, config));
  16         };
  17         createThumb = function(config) {
  18             thumb = new Ext.slider.Thumb(config);
  19         };
  20     });
  21
  22     afterEach(function() {
  23         if (slider) {
  24             slider.destroy();
  25         }
  26         slider = null;
  27
  28         if (thumb) {
  29             thumb.destroy();
  30         }
  31         thumb = null;
  32     });
  33
  34     describe("component initialization", function() {
  35         describe("if slider is vertical", function() {
  36             beforeEach(function() {
  37                 createThumb({
  38                     slider: {
  39                         vertical: true
  40                     }
  41                 });
  42             });
  43
  44             specFor(Ext.slider.Thumb.Vertical, function(key, value) {
  45                 it("should override " + key + " method", function() {
  46                     expect(thumb[key]).toBe(value);
  47                 });
  48             });
  49         });
  50     });
  51
  52     describe("thumb slide", function() {
  53         describe("horizontal", function() {
  54             var thumb0, thumb60, thumb90,
  55                 setupSlider = function(config) {
  56                     createSlider(Ext.apply({
  57                         values: [0, 60, 90]
  58                     }, config));
  59
  60                     thumb0 = slider.thumbs[0];
  61                     thumb60 = slider.thumbs[1];
  62                     thumb90 = slider.thumbs[2];
  63
  64                     spyOn(slider, "fireEvent").andCallThrough();
  65                 };
  66
  67             describe("mouse events", function() {
  68                 describe("on slider mousedown", function() {
  69                     describe("on thumb", function() {
  70                         describe("no drag (mousedown/mouseup)", function() {
  71                             beforeEach(function() {
  72                                 setupSlider();
  73                                 var xy = thumb0.el.getXY();
  74                                 jasmine.fireMouseEvent(thumb0.el, 'mousedown', xy[0], xy[1]);
  75                                 jasmine.fireMouseEvent(thumb0.el, 'mouseup', xy[0], xy[1]);
  76                             });
  77
  78                             it("should not change the thumb value", function() {
  79                                 expect(thumb0.value).toEqual(0);
  80                             });
  81                         });
  82
  83                         var dragConfig = {};
  84
  85                         dragConfig["drag without snapping"] = {
  86                             config: {},
  87                             expected: 3
  88                         };
  89
  90                         dragConfig["drag with snapping"] = {
  91                             config: {
  92                                 increment: 5
  93                             },
  94                             expected: 5
  95                         };
  96
  97                         specFor(dragConfig, function(key, value) {
  98                            describe(key, function() {
  99                                 beforeEach(function() {
 100                                     setupSlider(value.config);
 101                                     var xy = thumb0.el.getXY(),
 102                                         innerEl = slider.innerEl,
 103                                         trackLength = innerEl.getWidth(),
 104                                         // Work out the exact correct mousemove offset based difference between cur value and expected value
 105                                         xOffset = trackLength * (slider.calculateThumbPosition(value.expected - slider.getValue(0)) / 100);
 106
 107                                     // Mousedown on edge of thumb
 108                                     jasmine.fireMouseEvent(thumb0.el, 'mousedown', xy[0], xy[1]);
 109                                     xy[0] += xOffset;
 110                                     jasmine.fireMouseEvent(thumb0.el, 'mousemove', xy[0], xy[1]);
 111                                     jasmine.fireMouseEvent(thumb0.el, 'mouseup', xy[0], xy[1]);
 112                                 });
 113
 114                                 it("should change the thumb value", function() {
 115                                     expect(thumb0.value).toEqual(value.expected);
 116                                 });
 117
 118                                 describe("z-index", function() {
 119                                     it("should increase z-index of dragged thumb", function() {
 120                                         expect(thumb0.el.dom.style.zIndex).toBeGreaterThan(0);
 121                                     });
 122
 123                                     it("should remove z-index of non-dragged thumb", function() {
 124                                         // z-indices will work down from the top one which is at 10000
 125                                         expect(thumb60.el.dom.style.zIndex == 9000).toBe(true);
 126                                         expect(thumb90.el.dom.style.zIndex == 8000).toBe(true);
 127                                     });
 128                                 });
 129                             });
 130                         });
 131                     });
 132
 133                     describe("outside thumbs", function() {
 134                         beforeEach(function() {
 135                             setupSlider();
 136                         });
 137
 138                         describe("if slider enabled", function() {
 139                             beforeEach(function() {
 140                                 var xy = slider.innerEl.getXY();
 141                                 jasmine.fireMouseEvent(slider.el, 'click', xy[0] + 100, xy[1] + 10);
 142                             });
 143
 144                             it("should change the thumb value", function() {
 145                                 expect(thumb60.value).toEqual(50);
 146                             });
 147                         });
 148
 149                         describe("if slider disabled", function() {
 150                             beforeEach(function() {
 151                                 slider.disable();
 152                                 var xy = slider.innerEl.getXY();
 153                                 jasmine.fireMouseEvent(slider.el, 'mousedown', xy[0] + 10, xy[1] + 10);
 154                             });
 155
 156                             it("should not change the thumb value", function() {
 157                                 expect(thumb0.value).toEqual(0);
 158                             });
 159                         });
 160                     });
 161                 });
 162             });
 163         });
 164
 165         describe("vertical", function() {
 166             var thumb0, thumb60, thumb90,
 167                 setupSlider = function(config) {
 168                     createSlider(Ext.apply({
 169                         values: [0, 60, 90],
 170                         height: 214,
 171                         vertical: true
 172                     }, config));
 173
 174                     thumb0 = slider.thumbs[0];
 175                     thumb60 = slider.thumbs[1];
 176                     thumb90 = slider.thumbs[2];
 177
 178                     spyOn(slider, "fireEvent").andCallThrough();
 179                 };
 180
 181             describe("mouse events", function() {
 182                 describe("on slider mousedown", function() {
 183                     describe("on thumb", function() {
 184                         var dragConfig = {};
 185
 186                         dragConfig["drag without snapping"] = {
 187                             config: {},
 188                             expected: 54
 189                         };
 190
 191                         dragConfig["drag with snapping"] = {
 192                             config: {
 193                                 increment: 10
 194                             },
 195                             expected: 50
 196                         };
 197
 198                         specFor(dragConfig, function(key, value) {
 199                            describe(key, function() {
 200                                 beforeEach(function() {
 201                                     setupSlider(value.config);
 202                                     var xy = thumb0.el.getXY(),
 203                                         innerEl = slider.innerEl,
 204                                         trackLength = innerEl.getHeight(),
 205                                         // Work out the exact correct mousemove offset based on new value.
 206                                         yOffset = trackLength * (slider.calculateThumbPosition(slider.getValue(0) - value.expected) / 100);
 207
 208                                     // Mousedown on edge of thumb
 209                                     jasmine.fireMouseEvent(thumb0.el, 'mousedown', xy[0], xy[1]);
 210                                     xy[1] += yOffset;
 211                                     jasmine.fireMouseEvent(thumb0.el, 'mousemove', xy[0], xy[1]);
 212                                     jasmine.fireMouseEvent(thumb0.el, 'mouseup', xy[0], xy[1]);
 213                                 });
 214
 215                                 it("should change the thumb value", function() {
 216                                     expect(thumb0.value).toEqual(value.expected);
 217                                 });
 218
 219                                 describe("z-index", function() {
 220                                     it("should increase z-index of dragged thumb", function() {
 221                                         expect(thumb0.el.dom.style.zIndex).toBeGreaterThan(0);
 222                                     });
 223
 224                                     it("should remove z-index of non-dragged thumb", function() {
 225                                         // z-indices will work down from the top one which is at 10000
 226                                         expect(thumb60.el.dom.style.zIndex == 9000).toBe(true);
 227                                         expect(thumb90.el.dom.style.zIndex == 8000).toBe(true);
 228                                     });
 229                                 });
 230                             });
 231                         });
 232                     });
 233                     describe("outside thumbs", function() {
 234                         beforeEach(function() {
 235                             setupSlider();
 236                         });
 237
 238                         describe("if slider enabled", function() {
 239                             beforeEach(function() {
 240                                 var xy = slider.innerEl.getXY(),
 241                                     offset = Math.floor(slider.innerEl.getHeight() / 2);
 242
 243                                 jasmine.fireMouseEvent(slider.el, 'click', xy[0] + 8, xy[1] + offset);
 244                             });
 245
 246
 247                             it("should change the thumb value", function() {
 248                                 expect(thumb60.value).toEqual(50);
 249                             });
 250                         });
 251
 252                         describe("if slider disabled", function() {
 253                             beforeEach(function() {
 254                                 slider.disable();
 255                                 var xy = slider.innerEl.getXY();
 256                                 jasmine.fireMouseEvent(slider.el, 'mousedown', xy[0] + 10, xy[1] - 10);
 257                             });
 258
 259                             it("should not change the thumb value", function() {
 260                                 expect(thumb0.value).toEqual(0);
 261                             });
 262                         });
 263                     });
 264                 });
 265             });
 266         });
 267     });
 268 });