2 * mobile slider unit tests
7 window.onChangeCounter = function() {
10 module('jquery.mobile.slider.js');
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');
17 expect( opts.keyCodes.length );
19 $.each(opts.keyCodes, function(i, elem){
21 // stub the keycode value and trigger the keypress
22 $.Event.prototype.keyCode = $.mobile.keyCode[elem];
23 handle.trigger('keydown');
25 val += opts.increment;
26 same(val, window.parseFloat(slider.val(), 10), "new value is " + opts.increment + " different");
30 test( "slider should move right with up, right, and page up keypress", function(){
32 selector: '#range-slider-up',
33 keyCodes: ['UP', 'RIGHT', 'PAGE_UP'],
38 test( "slider should move left with down, left, and page down keypress", function(){
40 selector: '#range-slider-down',
41 keyCodes: ['DOWN', 'LEFT', 'PAGE_DOWN'],
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);
54 increment: max - initialVal
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);
65 increment: 0 - initialVal
69 test( "slider should move positive by steps on keypress", function(){
77 test( "slider should move negative by steps on keypress", function(){
85 test( "slider should validate input value on blur", function(){
86 var slider = $("#range-slider-up");
89 same(slider.val(), "200");
91 same(slider.val(), slider.attr('max'));
94 test( "slider should not validate input on keyup", function(){
95 var slider = $("#range-slider-up");
98 same(slider.val(), "200");
100 same(slider.val(), "200");
103 test( "input type should degrade to number when slider is created", function(){
104 same($("#range-slider-up").attr( "type" ), "number");
107 // generic switch test function
108 var sliderSwitchTest = function(opts){
109 var slider = $("#slider-switch"),
110 handle = slider.siblings('.ui-slider').find('a'),
116 // One for the select and one for the aria-valuenow
117 expect( opts.keyCodes.length * 2 );
119 $.each(opts.keyCodes, function(i, elem){
121 slider[0].selectedIndex = switchValues[opts.start];
122 handle.attr({'aria-valuenow' : opts.start });
124 // stub the keycode and trigger the event
125 $.Event.prototype.keyCode = $.mobile.keyCode[elem];
126 handle.trigger('keydown');
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");
133 test( "switch should select on with up, right, page up and end", function(){
137 keyCodes: ['UP', 'RIGHT', 'PAGE_UP', 'END']
141 test( "switch should select off with down, left, page down and home", function(){
145 keyCodes: ['DOWN', 'LEFT', 'PAGE_DOWN', 'HOME']
149 test( "onchange should not be called on create", function(){
150 equals(onChangeCnt, 0, "onChange should not have been called");
153 test( "onchange should be called onchange", function(){
155 $( "#onchange" ).slider( "refresh", 50 );
156 equals(onChangeCnt, 1, "onChange should have been called once");
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" );
164 var createEvent = function( name, target, x, y ) {
165 var event = $.Event( name );
166 event.target = target;
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,
178 changeFunc = function( e ) {
179 ok( control[0].selectedIndex !== currentValue, "change event should only be triggered if the value changes");
183 offset = handle.offset(),
184 currentValue = control[0].selectedIndex;
186 control.bind( "change", changeFunc );
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.
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 ) );
196 control.unbind( "change", changeFunc );
198 ok( control[0].selectedIndex !== currentValue, "value did change");
199 same( changeCount, 1, "change event should be fired once during a click" );
202 var assertLeftCSS = function( obj, opts ) {
203 var integerLeft, compare, css, threshold;
205 css = obj.css('left');
206 threshold = opts.pxThreshold || 0;
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 );
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 );
217 equal( css, opts.percent, opts.message );
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(),
229 $.testHelper.sequence([
231 // initialize the switch
232 control.val('on').slider('refresh');
236 assertLeftCSS(handle, {
238 pixels: handle.parent().css('width'),
239 message: 'handle starts on the right side'
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 ) );
250 assertLeftCSS(handle, {
252 pixels: handle.parent().css('width'),
253 message: 'handle ends on the right side'
256 // initialize the switch
257 control.val('on').slider('refresh');
261 assertLeftCSS(handle, {
263 pixels: handle.parent().css('width'),
264 message: 'handle starts on the right side'
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 ) );
275 assertLeftCSS(handle, {
278 message: 'handle ends on the left side'
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(),
294 $.testHelper.sequence([
296 // initialize the switch
297 control.val('on').slider('refresh');
301 assertLeftCSS(handle, {
303 pixels: handle.parent().css('width'),
304 message: 'handle starts on the right side'
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 ) );
315 if( handle.css('left').indexOf("%") > -1 ){
320 max = handle.parent().css( 'width' );
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');
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 ) );
334 asyncTest( "toggle switch should refresh when disabled", function() {
335 var control = $( "#slider-switch" ),
336 handle = control.data( "slider" ).handle;
338 $.testHelper.sequence([
340 // set the initial value
341 control.val('off').slider('refresh');
345 assertLeftCSS(handle, {
348 message: 'handle starts on the left side'
351 // disable and change value
352 control.slider('disable');
353 control.val('on').slider('refresh');
357 assertLeftCSS(handle, {
359 pixels: handle.parent().css( 'width' ),
360 message: 'handle ends on the right side'
363 // reset slider state so it is ready for other tests
364 control.slider('enable');