third-party/jquery-ui-1.10.2/tests/unit/slider/slider_options.js

   1 /*
   2  * slider_options.js
   3  */
   4 (function( $ ) {
   5
   6 var element, options;
   7
   8 function handle() {
   9         return element.find( ".ui-slider-handle" );
  10 }
  11
  12 module( "slider: options" );
  13
  14 test( "disabled", function(){
  15         expect( 8 );
  16         var count = 0;
  17
  18         element = $( "#slider1" ).slider();
  19         element.bind( "slidestart", function() {
  20                 count++;
  21         });
  22
  23         // enabled
  24         ok( !element.hasClass( "ui-slider-disabled" ), "no disabled class" );
  25         equal( element.slider( "option", "disabled" ), false , "is not disabled" );
  26
  27         handle().simulate( "drag", { dx: 10 } );
  28         equal( count, 1, "slider moved" );
  29
  30         handle().simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } );
  31         equal( count, 2, "slider moved" );
  32
  33         // disabled
  34         element.slider( "option", "disabled", true );
  35         ok( element.hasClass( "ui-slider-disabled" ), "has disabled class" );
  36         equal( element.slider( "option", "disabled" ), true, "is disabled" );
  37
  38         handle().simulate( "drag", { dx: 10 } );
  39         equal( count, 2, "slider did not move" );
  40
  41         handle().simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } );
  42         equal( count, 2, "slider did not move" );
  43 });
  44
  45 test( "max", function() {
  46         expect( 2 );
  47         element = $( "<div></div>" );
  48
  49         options = {
  50                 max: 37,
  51                 min: 6,
  52                 orientation: "horizontal",
  53                 step: 1,
  54                 value: 50
  55         };
  56
  57         element.slider( options );
  58         ok(element.slider( "option", "value" ) === options.value, "value option is not contained by max" );
  59         ok(element.slider( "value" ) === options.max, "value method is contained by max" );
  60         element.slider( "destroy" );
  61
  62 });
  63
  64 test( "min", function() {
  65         expect( 2 );
  66         element = $( "<div></div>" );
  67
  68         options = {
  69                 max: 37,
  70                 min: 6,
  71                 orientation: "vertical",
  72                 step: 1,
  73                 value: 2
  74         };
  75
  76         element.slider( options );
  77         ok( element.slider( "option", "value" ) === options.value, "value option is not contained by min" );
  78         ok( element.slider( "value" ) === options.min, "value method is contained by min" );
  79         element.slider( "destroy" );
  80
  81 });
  82
  83 test( "orientation", function() {
  84         expect( 6 );
  85         element = $( "#slider1" );
  86
  87         options = {
  88                 max: 2,
  89                 min: -2,
  90                 orientation: "vertical",
  91                 value: 1
  92         };
  93
  94         var percentVal = ( options.value - options.min ) / ( options.max - options.min ) * 100;
  95
  96         element.slider( options ).slider( "option", "orientation", "horizontal" );
  97         ok( element.is( ".ui-slider-horizontal" ), "horizontal slider has class .ui-slider-horizontal" );
  98         ok( !element.is( ".ui-slider-vertical" ), "horizontal slider does not have class .ui-slider-vertical" );
  99         equal( handle()[0].style.left, percentVal + "%", "horizontal slider handle is positioned with left: %" );
 100
 101         element.slider( "destroy" ) ;
 102
 103         options = {
 104                 max: 2,
 105                 min: -2,
 106                 orientation: "horizontal",
 107                 value: -1
 108         };
 109
 110         percentVal = ( options.value - options.min ) / ( options.max - options.min ) * 100;
 111
 112         element.slider( options ).slider( "option", "orientation", "vertical" );
 113         ok( element.is( ".ui-slider-vertical" ), "vertical slider has class .ui-slider-vertical" );
 114         ok( !element.is( ".ui-slider-horizontal" ), "vertical slider does not have class .ui-slider-horizontal" );
 115         equal( handle()[0].style.bottom, percentVal + "%", "vertical slider handle is positioned with bottom: %" );
 116
 117         element.slider( "destroy" );
 118
 119 });
 120
 121 //spec: http://wiki.jqueryui.com/Slider#specs
 122 // value option/method: the value option is not restricted by min/max/step.
 123 // What is returned by the value method is restricted by min (>=), max (<=), and step (even multiple)
 124 test( "step", function() {
 125         expect( 9 );
 126         element = $( "<div></div>" ).slider({
 127                 min: 0,
 128                 value: 0,
 129                 step: 10,
 130                 max: 100
 131         });
 132         equal( element.slider( "value" ), 0 );
 133
 134         element.slider( "value", 1 );
 135         equal( element.slider( "value" ), 0 );
 136
 137         element.slider( "value", 9 );
 138         equal( element.slider( "value" ), 10 );
 139
 140         element.slider( "value", 11 );
 141         equal( element.slider( "value" ), 10 );
 142
 143         element.slider( "value", 19 );
 144         equal( element.slider( "value" ), 20 );
 145
 146         element = $( "<div></div>" ).slider({
 147                 min: 0,
 148                 value: 0,
 149                 step: 20,
 150                 max: 100
 151         });
 152         element.slider( "value", 0 );
 153
 154         element.slider( "option", "value", 1 );
 155         equal( element.slider( "value" ), 0 );
 156
 157         element.slider( "option", "value", 9 );
 158         equal( element.slider( "value" ), 0 );
 159
 160         element.slider( "option", "value", 11 );
 161         equal( element.slider( "value" ), 20 );
 162
 163         element.slider( "option", "value", 19 );
 164         equal( element.slider( "value" ), 20 );
 165
 166         element.slider( "destroy" );
 167 });
 168
 169 //test( "value", function() {
 170 //      ok(false, "missing test - untested code is broken code." );
 171 //});
 172
 173 test( "values", function() {
 174         expect( 2 );
 175
 176         // testing multiple ranges on the same page, the object reference to the values
 177         // property is preserved via multiple range elements, so updating options.values
 178         // of 1 slider updates options.values of all the others
 179         var ranges = $([
 180                 document.createElement( "div" ),
 181                 document.createElement( "div" )
 182         ]).slider({
 183                 range: true,
 184                 values: [ 25, 75 ]
 185         });
 186
 187         notStrictEqual(
 188                 ranges.eq( 0 ).data( "ui-slider" ).options.values,
 189                 ranges.eq( 1 ).data( "ui-slider" ).options.values,
 190                 "multiple range sliders should not have a reference to the same options.values array"
 191         );
 192
 193         ranges.eq( 0 ).slider( "values", 0, 10 );
 194
 195         notEqual(
 196                 ranges.eq( 0 ).slider( "values", 0 ),
 197                 ranges.eq( 1 ).slider( "values", 0 ),
 198                 "the values for multiple sliders should be different"
 199         );
 200 });
 201
 202 test( "range", function() {
 203         expect( 27 );
 204         var range;
 205
 206         // min
 207         element = $( "<div></div>" ).slider({
 208                 range: "min",
 209                 min: 1,
 210                 max: 10,
 211                 step: 1
 212         });
 213
 214         equal( element.find( ".ui-slider-handle" ).length, 1, "range min, one handle" );
 215         equal( element.find( ".ui-slider-range-min" ).length, 1, "range min" );
 216         element.slider( "destroy" );
 217
 218         // max
 219         element = $( "<div></div>" ).slider({
 220                 range: "max",
 221                 min: 1,
 222                 max: 10,
 223                 step: 1
 224         });
 225
 226         equal( element.find( ".ui-slider-handle" ).length, 1, "range max, one handle" );
 227         equal( element.find( ".ui-slider-range-max" ).length, 1, "range max" );
 228         element.slider( "destroy" );
 229
 230         // true
 231         element = $( "<div></div>" ).slider({
 232                 range: true,
 233                 min: 1,
 234                 max: 10,
 235                 step: 1
 236         });
 237
 238         range = element.find( ".ui-slider-range" );
 239         equal( element.find( ".ui-slider-handle" ).length, 2, "range true, two handles" );
 240         ok( !range.is( ".ui-slider-range-min" ), "range true" );
 241         ok( !range.is( ".ui-slider-range-max" ), "range true" );
 242         element.slider( "destroy" );
 243
 244         // Change range from min to max
 245         element = $( "<div></div>" ).slider({
 246                 range: "min",
 247                 min: 1,
 248                 max: 10,
 249                 step: 1
 250         }).slider( "option", "range", "max" );
 251
 252         equal( element.find( ".ui-slider-handle" ).length, 1, "range switch from min to max, one handle" );
 253         equal( element.find( ".ui-slider-range-min" ).length, 0, "range switch from min to max" );
 254         equal( element.find( ".ui-slider-range-max" ).length, 1, "range switch from min to max" );
 255         element.slider( "destroy" );
 256
 257         // Change range from max to min
 258         element = $( "<div></div>" ).slider({
 259                 range: "max",
 260                 min: 1,
 261                 max: 10,
 262                 step: 1
 263         }).slider( "option", "range", "min" );
 264
 265         equal( element.find( ".ui-slider-handle" ).length, 1, "range switch from max to min, one handle" );
 266         equal( element.find( ".ui-slider-range-max" ).length, 0, "range switch from max to min" );
 267         equal( element.find( ".ui-slider-range-min" ).length, 1, "range switch from max to min" );
 268         element.slider( "destroy" );
 269
 270         // Change range from max to true
 271         element = $( "<div></div>" ).slider({
 272                 range: "max",
 273                 min: 1,
 274                 max: 10,
 275                 step: 1
 276         }).slider( "option", "range", true );
 277
 278         equal( element.find( ".ui-slider-handle" ).length, 2, "range switch from max to true, two handles" );
 279         equal( element.find( ".ui-slider-range-max" ).length, 0, "range switch from max to true" );
 280         equal( element.find( ".ui-slider-range-min" ).length, 0, "range switch from max to true" );
 281         equal( element.slider( "option", "value" ), 0 , "option value" );
 282         equal( element.slider( "value" ), 1 , "value" );
 283         deepEqual( element.slider( "option", "values" ), [1, 1], "option values" );
 284         deepEqual( element.slider( "values" ), [1, 1], "values" );
 285         element.slider( "destroy" );
 286
 287         // Change range from true to min
 288         element = $( "<div></div>" ).slider({
 289                 range: true,
 290                 min: 1,
 291                 max: 10,
 292                 step: 1
 293         }).slider( "option", "range", "min" );
 294
 295         equal( element.find( ".ui-slider-handle" ).length, 1, "range switch from true to min, one handle" );
 296         equal( element.find( ".ui-slider-range-max" ).length, 0, "range switch from true to min" );
 297         equal( element.find( ".ui-slider-range-min" ).length, 1, "range switch from true to min" );
 298         equal( element.slider( "option", "value" ), 1, "value" );
 299         equal( element.slider( "value" ), 1 , "value" );
 300         equal( element.slider( "option", "values" ), null, "values" );
 301         deepEqual( element.slider( "values" ), [] , "values" );
 302         element.slider( "destroy" );
 303 });
 304
 305 })( jQuery );