libs/js/jquery-mobile-1.0.1pre/tests/unit/slider/slider_events.js

   1 /*
   2  * mobile slider unit tests
   3  */
   4
   5 (function($){
   6         var onChangeCnt = 0;
   7         window.onChangeCounter = function() {
   8                 onChangeCnt++;
   9         }
  10         module('jquery.mobile.slider.js');
  11
  12         var keypressTest = function(opts){
  13                 var slider = $(opts.selector),
  14                     val = window.parseFloat(slider.val()),
  15                                 handle = slider.siblings('.ui-slider').find('.ui-slider-handle');
  16
  17                 expect( opts.keyCodes.length );
  18
  19                 $.each(opts.keyCodes, function(i, elem){
  20
  21                         // stub the keycode value and trigger the keypress
  22                         $.Event.prototype.keyCode = $.mobile.keyCode[elem];
  23                         handle.trigger('keydown');
  24
  25                         val += opts.increment;
  26                         same(val, window.parseFloat(slider.val(), 10), "new value is " + opts.increment + " different");
  27                 });
  28         };
  29
  30         test( "slider should move right with up, right, and page up keypress", function(){
  31                 keypressTest({
  32                         selector: '#range-slider-up',
  33                         keyCodes: ['UP', 'RIGHT', 'PAGE_UP'],
  34                         increment: 1
  35                 });
  36         });
  37
  38         test( "slider should move left with down, left, and page down keypress", function(){
  39                 keypressTest({
  40                         selector: '#range-slider-down',
  41                         keyCodes: ['DOWN', 'LEFT', 'PAGE_DOWN'],
  42                         increment: -1
  43                 });
  44         });
  45
  46         test( "slider should move to range minimum on end keypress", function(){
  47                 var selector = "#range-slider-end",
  48                                 initialVal = window.parseFloat($(selector).val(), 10),
  49                     max = window.parseFloat($(selector).attr('max'), 10);
  50
  51                 keypressTest({
  52                         selector: selector,
  53                         keyCodes: ['END'],
  54                         increment: max - initialVal
  55                 });
  56         });
  57
  58         test( "slider should move to range minimum on end keypress", function(){
  59                 var selector = "#range-slider-home",
  60                                 initialVal = window.parseFloat($(selector).val(), 10);
  61
  62                 keypressTest({
  63                         selector: selector,
  64                         keyCodes: ['HOME'],
  65                         increment: 0 - initialVal
  66                 });
  67         });
  68
  69         test( "slider should move positive by steps on keypress", function(){
  70                 keypressTest({
  71                         selector: "#stepped",
  72                         keyCodes: ['RIGHT'],
  73                         increment: 10
  74                 });
  75         });
  76
  77         test( "slider should move negative by steps on keypress", function(){
  78                 keypressTest({
  79                         selector: "#stepped",
  80                         keyCodes: ['LEFT'],
  81                         increment: -10
  82                 });
  83         });
  84
  85         test( "slider should validate input value on blur", function(){
  86                 var slider = $("#range-slider-up");
  87                 slider.focus();
  88                 slider.val(200);
  89                 same(slider.val(), "200");
  90                 slider.blur();
  91                 same(slider.val(), slider.attr('max'));
  92         });
  93
  94         test( "slider should not validate input on keyup", function(){
  95                 var slider = $("#range-slider-up");
  96                 slider.focus();
  97                 slider.val(200);
  98                 same(slider.val(), "200");
  99                 slider.keyup();
 100                 same(slider.val(), "200");
 101         });
 102
 103         test( "input type should degrade to number when slider is created", function(){
 104                 same($("#range-slider-up").attr( "type" ), "number");
 105         });
 106
 107         // generic switch test function
 108         var sliderSwitchTest = function(opts){
 109                 var slider = $("#slider-switch"),
 110                           handle = slider.siblings('.ui-slider').find('a'),
 111                     switchValues = {
 112                                         'off' : 0,
 113                                         'on' : 1
 114                                 };
 115
 116                 // One for the select and one for the aria-valuenow
 117                 expect( opts.keyCodes.length * 2 );
 118
 119                 $.each(opts.keyCodes, function(i, elem){
 120                         // reset the values
 121                         slider[0].selectedIndex = switchValues[opts.start];
 122                         handle.attr({'aria-valuenow' : opts.start });
 123
 124                         // stub the keycode and trigger the event
 125                         $.Event.prototype.keyCode = $.mobile.keyCode[elem];
 126                         handle.trigger('keydown');
 127
 128                         same(handle.attr('aria-valuenow'), opts.finish, "handle value is " + opts.finish);
 129                         same(slider[0].selectedIndex, switchValues[opts.finish], "select input has correct index");
 130                 });
 131         };
 132
 133         test( "switch should select on with up, right, page up and end", function(){
 134                 sliderSwitchTest({
 135                         start: 'off',
 136                         finish: 'on',
 137                         keyCodes: ['UP', 'RIGHT', 'PAGE_UP', 'END']
 138                 });
 139         });
 140
 141         test( "switch should select off with down, left, page down and home", function(){
 142                 sliderSwitchTest({
 143                         start: 'on',
 144                         finish: 'off',
 145                   keyCodes: ['DOWN', 'LEFT', 'PAGE_DOWN', 'HOME']
 146                 });
 147         });
 148
 149         test( "onchange should not be called on create", function(){
 150                 equals(onChangeCnt, 0, "onChange should not have been called");
 151         });
 152
 153         test( "onchange should be called onchange", function(){
 154                 onChangeCnt = 0;
 155                 $( "#onchange" ).slider( "refresh", 50 );
 156                 equals(onChangeCnt, 1, "onChange should have been called once");
 157         });
 158
 159         test( "slider controls will create when inside a container that receives a 'create' event", function(){
 160                 ok( !$("#enhancetest").appendTo(".ui-page-active").find(".ui-slider").length, "did not have enhancements applied" );
 161                 ok( $("#enhancetest").trigger("create").find(".ui-slider").length, "enhancements applied" );
 162         });
 163
 164         var createEvent = function( name, target, x, y ) {
 165                 var event = $.Event( name );
 166                 event.target = target;
 167                 event.pageX = x;
 168                 event.pageY = y;
 169                 return event;
 170         };
 171
 172         test( "toggle switch should fire one change event when clicked", function(){
 173                 var control = $( "#slider-switch" ),
 174                         widget = control.data( "slider" ),
 175                         slider = widget.slider,
 176                         handle = widget.handle,
 177                         changeCount = 0,
 178                         changeFunc = function( e ) {
 179                                 ok( control[0].selectedIndex !== currentValue, "change event should only be triggered if the value changes");
 180                                 ++changeCount;
 181                         },
 182                         event = null,
 183                         offset = handle.offset(),
 184                         currentValue = control[0].selectedIndex;
 185
 186                 control.bind( "change", changeFunc );
 187
 188                 // The toggle switch actually updates on mousedown and mouseup events, so we go through
 189                 // the motions of generating all the events that happen during a click to make sure that
 190                 // during all of those events, the value only changes once.
 191
 192                 slider.trigger( createEvent( "mousedown", handle[ 0 ], offset.left + 10, offset.top + 10 ) );
 193                 slider.trigger( createEvent( "mouseup", handle[ 0 ], offset.left + 10, offset.top + 10 ) );
 194                 slider.trigger( createEvent( "click", handle[ 0 ], offset.left + 10, offset.top + 10 ) );
 195
 196                 control.unbind( "change", changeFunc );
 197
 198                 ok( control[0].selectedIndex !== currentValue, "value did change");
 199                 same( changeCount, 1, "change event should be fired once during a click" );
 200         });
 201
 202         var assertLeftCSS = function( obj, opts ) {
 203                 var integerLeft, compare, css, threshold;
 204
 205                 css = obj.css('left');
 206                 threshold = opts.pxThreshold || 0;
 207
 208                 if( css.indexOf( "px" ) > -1 ) {
 209                         // parse the actual pixel value returned by the left css value
 210                         // and the pixels passed in for comparison
 211                         integerLeft = Math.round( parseFloat( css.replace("px", "") ) ),
 212                         compare = parseInt( opts.pixels.replace( "px", "" ), 10 );
 213
 214                         // check that the pixel value provided is within a given threshold; default is 0px
 215                         ok( compare >= integerLeft - threshold && compare <= integerLeft + threshold, opts.message );
 216                 } else {
 217                         equal( css, opts.percent, opts.message );
 218                 }
 219         };
 220
 221         asyncTest( "toggle switch handle should snap in the old position if dragged less than half of the slider width, in the new position if dragged more than half of the slider width", function() {
 222                 var control = $( "#slider-switch" ),
 223                         widget = control.data( "slider" ),
 224                         slider = widget.slider,
 225                         handle = widget.handle,
 226                         width = handle.width(),
 227                         offset = null;
 228
 229                 $.testHelper.sequence([
 230                         function() {
 231                                 // initialize the switch
 232                                 control.val('on').slider('refresh');
 233                         },
 234
 235                         function() {
 236                                 assertLeftCSS(handle, {
 237                                         percent: '100%',
 238                                         pixels: handle.parent().css('width'),
 239                                         message: 'handle starts on the right side'
 240                                 });
 241
 242                                 // simulate dragging less than a half
 243                                 offset = handle.offset();
 244                                 slider.trigger( createEvent( "mousedown", handle[ 0 ], offset.left + width - 10, offset.top + 10 ) );
 245                                 slider.trigger( createEvent( "mousemove", handle[ 0 ], offset.left + width - 20, offset.top + 10 ) );
 246                                 slider.trigger( createEvent( "mouseup", handle[ 0 ], offset.left + width - 20, offset.top + 10 ) );
 247                         },
 248
 249                         function() {
 250                                 assertLeftCSS(handle, {
 251                                         percent: '100%',
 252                                         pixels: handle.parent().css('width'),
 253                                         message: 'handle ends on the right side'
 254                                 });
 255
 256                                 // initialize the switch
 257                                 control.val('on').slider('refresh');
 258                         },
 259
 260                         function() {
 261                                 assertLeftCSS(handle, {
 262                                         percent: '100%',
 263                                         pixels: handle.parent().css('width'),
 264                                         message: 'handle starts on the right side'
 265                                 });
 266
 267                                 // simulate dragging more than a half
 268                                 offset = handle.offset();
 269                                 slider.trigger( createEvent( "mousedown", handle[ 0 ], offset.left + 10, offset.top + 10 ) );
 270                                 slider.trigger( createEvent( "mousemove", handle[ 0 ], offset.left - ( width / 2 ), offset.top + 10 ) );
 271                                 slider.trigger( createEvent( "mouseup", handle[ 0 ], offset.left - ( width / 2 ), offset.top + 10 ) );
 272                         },
 273
 274                         function() {
 275                                 assertLeftCSS(handle, {
 276                                         percent: '0%',
 277                                         pixels: '0px',
 278                                         message: 'handle ends on the left side'
 279                                 });
 280
 281                                 start();
 282                         }
 283                 ], 500);
 284         });
 285
 286         asyncTest( "toggle switch handle should not move if user is dragging and value is changed", function() {
 287                 var control = $( "#slider-switch" ),
 288                         widget = control.data( "slider" ),
 289                         slider = widget.slider,
 290                         handle = widget.handle,
 291                         width = handle.width(),
 292                         offset = null;
 293
 294                 $.testHelper.sequence([
 295                         function() {
 296                                 // initialize the switch
 297                                 control.val('on').slider('refresh');
 298                         },
 299
 300                         function() {
 301                                 assertLeftCSS(handle, {
 302                                         percent: '100%',
 303                                         pixels: handle.parent().css('width'),
 304                                         message: 'handle starts on the right side'
 305                                 });
 306
 307                                 // simulate dragging more than a half
 308                                 offset = handle.offset();
 309                                 slider.trigger( createEvent( "mousedown", handle[ 0 ], offset.left + 10, offset.top + 10 ) );
 310                                 slider.trigger( createEvent( "mousemove", handle[ 0 ], offset.left - ( width / 2 ), offset.top + 10 ) );
 311                         },
 312
 313                         function() {
 314                                 var min, max;
 315                                 if( handle.css('left').indexOf("%") > -1 ){
 316                                         min = "0%";
 317                                         max = "100%";
 318                                 } else {
 319                                         min = "0px";
 320                                         max = handle.parent().css( 'width' );
 321                                 }
 322
 323                                 notEqual(handle.css('left'), min, 'handle is not on the left side');
 324                                 notEqual(handle.css('left'), max, 'handle is not on the right side');
 325
 326                                 // reset slider state so it is ready for other tests
 327                                 slider.trigger( createEvent( "mouseup", handle[ 0 ], offset.left - ( width / 2 ), offset.top + 10 ) );
 328
 329                                 start();
 330                         }
 331                 ], 500);
 332         });
 333
 334         asyncTest( "toggle switch should refresh when disabled", function() {
 335                 var control = $( "#slider-switch" ),
 336                         handle = control.data( "slider" ).handle;
 337
 338                 $.testHelper.sequence([
 339                         function() {
 340                                 // set the initial value
 341                                 control.val('off').slider('refresh');
 342                         },
 343
 344                         function() {
 345                                 assertLeftCSS(handle, {
 346                                         percent: '0%',
 347                                         pixels: '0px',
 348                                         message: 'handle starts on the left side'
 349                                 });
 350
 351                                 // disable and change value
 352                                 control.slider('disable');
 353                                 control.val('on').slider('refresh');
 354                         },
 355
 356                         function() {
 357                                 assertLeftCSS(handle, {
 358                                         percent: '100%',
 359                                         pixels: handle.parent().css( 'width' ),
 360                                         message: 'handle ends on the right side'
 361                                 });
 362
 363                                 // reset slider state so it is ready for other tests
 364                                 control.slider('enable');
 365
 366                                 start();
 367                         }
 368                 ], 500);
 369         });
 370 })(jQuery);