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

   1 /*
   2  * slider_events.js
   3  */
   4 (function( $ ) {
   5
   6 module( "slider: events" );
   7
   8 //Specs from http://wiki.jqueryui.com/Slider#specs
   9 //"change callback: triggers when the slider has stopped moving and has a new
  10 // value (even if same as previous value), via mouse(mouseup) or keyboard(keyup)
  11 // or value method/option"
  12 test( "mouse based interaction", function() {
  13         expect( 4 );
  14
  15         var element = $( "#slider1" )
  16                 .slider({
  17                         start: function( event ) {
  18                                 equal( event.originalEvent.type, "mousedown", "start triggered by mousedown" );
  19                         },
  20                         slide: function( event) {
  21                                 equal( event.originalEvent.type, "mousemove", "slider triggered by mousemove" );
  22                         },
  23                         stop: function( event ) {
  24                                 equal( event.originalEvent.type, "mouseup", "stop triggered by mouseup" );
  25                         },
  26                         change: function( event ) {
  27                                 equal( event.originalEvent.type, "mouseup", "change triggered by mouseup" );
  28                         }
  29                 });
  30
  31         element.find( ".ui-slider-handle" ).eq( 0 )
  32                 .simulate( "drag", { dx: 10, dy: 10 } );
  33
  34 });
  35 test( "keyboard based interaction", function() {
  36         expect( 3 );
  37
  38         // Test keyup at end of handle slide (keyboard)
  39         var element = $( "#slider1" )
  40                 .slider({
  41                         start: function( event ) {
  42                                 equal( event.originalEvent.type, "keydown", "start triggered by keydown" );
  43                         },
  44                         slide: function() {
  45                                 ok( false, "Slider never triggered by keys" );
  46                         },
  47                         stop: function( event ) {
  48                                 equal( event.originalEvent.type, "keyup", "stop triggered by keyup" );
  49                         },
  50                         change: function( event ) {
  51                                 equal( event.originalEvent.type, "keyup", "change triggered by keyup" );
  52                         }
  53                 });
  54
  55         element.find( ".ui-slider-handle" ).eq( 0 )
  56                 .simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } )
  57                 .simulate( "keypress", { keyCode: $.ui.keyCode.LEFT } )
  58                 .simulate( "keyup", { keyCode: $.ui.keyCode.LEFT } );
  59
  60 });
  61 test( "programmatic event triggers", function() {
  62         expect( 6 );
  63
  64         // Test value method
  65         var element = $( "<div></div>" )
  66                 .slider({
  67                         change: function() {
  68                                 ok( true, "change triggered by value method" );
  69                         }
  70                 })
  71                 .slider( "value", 0 );
  72
  73         // Test values method
  74         element = $( "<div></div>" )
  75                 .slider({
  76                         values: [ 10, 20 ],
  77                         change: function() {
  78                                 ok( true, "change triggered by values method" );
  79                         }
  80                 })
  81                 .slider( "values", [ 80, 90 ] );
  82
  83         // Test value option
  84         element = $( "<div></div>" )
  85                 .slider({
  86                         change: function() {
  87                                 ok( true, "change triggered by value option" );
  88                         }
  89                 })
  90                 .slider( "option", "value", 0 );
  91
  92         // Test values option
  93         element = $( "<div></div>" )
  94                 .slider({
  95                         values: [ 10, 20 ],
  96                         change: function() {
  97                                 ok( true, "change triggered by values option" );
  98                         }
  99                 })
 100                 .slider( "option", "values", [ 80, 90 ] );
 101
 102 });
 103
 104 test( "mouse based interaction part two: when handles overlap", function() {
 105         expect( 4 );
 106
 107         var element = $( "#slider1" )
 108                 .slider({
 109                         values: [ 0, 0, 0 ],
 110                         start: function( event, ui ) {
 111                                 equal( handles.index( ui.handle ), 2, "rightmost handle activated when overlapping at minimum (#3736)" );
 112                         }
 113                 }),
 114                 handles = element.find( ".ui-slider-handle" );
 115         handles.eq( 0 ).simulate( "drag", { dx: 10 } );
 116         element.slider( "destroy" );
 117
 118         element = $( "#slider1" )
 119                 .slider({
 120                         values: [ 10, 10, 10 ],
 121                         max: 10,
 122                         start: function( event, ui ) {
 123                                 equal( handles.index( ui.handle ), 0, "leftmost handle activated when overlapping at maximum" );
 124                         }
 125                 }),
 126                 handles = element.find( ".ui-slider-handle" );
 127         handles.eq( 0 ).simulate( "drag", { dx: -10 } );
 128         element.slider( "destroy" );
 129
 130         element = $( "#slider1" )
 131                 .slider({
 132                         values: [ 19, 20 ]
 133                 }),
 134                 handles = element.find( ".ui-slider-handle" );
 135         handles.eq( 0 ).simulate( "drag", { dx: 10 } );
 136         element.one( "slidestart", function( event, ui ) {
 137                 equal( handles.index( ui.handle ), 0, "left handle activated if left was moved last" );
 138         });
 139         handles.eq( 0 ).simulate( "drag", { dx: 10 } );
 140         element.slider( "destroy" );
 141
 142         element = $( "#slider1" )
 143                 .slider({
 144                         values: [ 19, 20 ]
 145                 }),
 146                 handles = element.find( ".ui-slider-handle" );
 147         handles.eq( 1 ).simulate( "drag", { dx: -10 } );
 148         element.one( "slidestart", function( event, ui ) {
 149                 equal( handles.index( ui.handle ), 1, "right handle activated if right was moved last (#3467)" );
 150         });
 151         handles.eq( 0 ).simulate( "drag", { dx: 10 } );
 152
 153 });
 154
 155 })( jQuery );