Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

handle pixel values from calls to $.fn.css('left') in slider tests

  • Loading branch information...
commit fef4b200a61fea5d0de45e5200ccbeab2d0e1716 1 parent f81888c
@johnbender johnbender authored
Showing with 95 additions and 39 deletions.
  1. +95 −39 tests/unit/slider/slider_events.js
View
134 tests/unit/slider/slider_events.js
@@ -99,7 +99,7 @@
slider.keyup();
same(slider.val(), "200");
});
-
+
test( "input type should degrade to number when slider is created", function(){
same($("#range-slider-up").attr( "type" ), "number");
});
@@ -160,15 +160,15 @@
ok( !$("#enhancetest").appendTo(".ui-page-active").find(".ui-slider").length, "did not have enhancements applied" );
ok( $("#enhancetest").trigger("create").find(".ui-slider").length, "enhancements applied" );
});
-
+
var createEvent = function( name, target, x, y ) {
var event = $.Event( name );
event.target = target;
event.pageX = x;
event.pageY = y;
return event;
- }
-
+ };
+
test( "toggle switch should fire one change event when clicked", function(){
var control = $( "#slider-switch" ),
widget = control.data( "slider" ),
@@ -198,7 +198,26 @@
ok( control[0].selectedIndex !== currentValue, "value did change");
same( changeCount, 1, "change event should be fired once during a click" );
});
-
+
+ var assertLeftCSS = function( obj, opts ) {
+ var integerLeft, compare, css, threshold;
+
+ css = obj.css('left');
+ threshold = opts.pxThreshold || 10;
+
+ if( css.indexOf( "px" ) > -1 ) {
+ // parse the actual pixel value returned by the left css value
+ // and the pixels passed in for comparison
+ integerLeft = parseInt(css.replace("px", ""), 10 ),
+ compare = parseInt( opts.pixels.replace( "px", "" ), 10 );
+
+ // check that the pixel value provided is within a given threshold default is 10px
+ ok( compare > integerLeft - threshold && compare < integerLeft + threshold, opts.message );
+ } else {
+ equal( css, opts.percent, opts.message );
+ }
+ };
+
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() {
var control = $( "#slider-switch" ),
widget = control.data( "slider" ),
@@ -206,33 +225,46 @@
handle = widget.handle,
width = handle.width(),
offset = null;
-
+
$.testHelper.sequence([
function() {
// initialize the switch
control.val('on').slider('refresh');
},
-
+
function() {
- equals(handle.css('left'), '100%', 'handle starts on the right side');
-
+ assertLeftCSS(handle, {
+ percent: '100%',
+ pixels: handle.css('width'),
+ message: 'handle starts on the right side'
+ });
+
// simulate dragging less than a half
offset = handle.offset();
slider.trigger( createEvent( "mousedown", handle[ 0 ], offset.left + width - 10, offset.top + 10 ) );
slider.trigger( createEvent( "mousemove", handle[ 0 ], offset.left + width - 20, offset.top + 10 ) );
slider.trigger( createEvent( "mouseup", handle[ 0 ], offset.left + width - 20, offset.top + 10 ) );
},
-
+
function() {
- equals(handle.css('left'), '100%', 'handle ends on the right side');
-
+ assertLeftCSS(handle, {
+ percent: '100%',
+ pixels: handle.css('width'),
+ message: 'handle ends on the right side'
+ });
+ // equals(handle.css('left'), '100%', 'handle ends on the right side');
+
// initialize the switch
control.val('on').slider('refresh');
},
-
+
function() {
- equals(handle.css('left'), '100%', 'handle starts on the right side');
-
+ assertLeftCSS(handle, {
+ percent: '100%',
+ pixels: handle.css('width'),
+ message: 'handle starts on the right side'
+ });
+
// simulate dragging more than a half
offset = handle.offset();
slider.trigger( createEvent( "mousedown", handle[ 0 ], offset.left + 10, offset.top + 10 ) );
@@ -240,15 +272,19 @@
//slider.trigger( createEvent( "mousemove", handle[ 0 ], offset.left - width + 20, offset.top + 10 ) );
slider.trigger( createEvent( "mouseup", handle[ 0 ], offset.left - ( width / 2 ), offset.top + 10 ) );
},
-
+
function() {
- equals(handle.css('left'), '0%', 'handle ends on the left side');
-
+ assertLeftCSS(handle, {
+ percent: '0%',
+ pixels: '0px',
+ message: 'handle starts on the right side'
+ });
+
start();
}
], 500);
});
-
+
asyncTest( "toggle switch handle should not move if user is dragging and value is changed", function() {
var control = $( "#slider-switch" ),
widget = control.data( "slider" ),
@@ -256,61 +292,81 @@
handle = widget.handle,
width = handle.width(),
offset = null;
-
+
$.testHelper.sequence([
function() {
// initialize the switch
control.val('on').slider('refresh');
},
-
+
function() {
- equals(handle.css('left'), '100%', 'handle starts on the right side');
-
+ assertLeftCSS(handle, {
+ percent: '100%',
+ pixels: handle.css('width'),
+ message: 'handle starts on the right side'
+ });
+
// simulate dragging more than a half
offset = handle.offset();
slider.trigger( createEvent( "mousedown", handle[ 0 ], offset.left + 10, offset.top + 10 ) );
- slider.trigger( createEvent( "mousemove", handle[ 0 ], offset.left - width + 20, offset.top + 10 ) );
+ slider.trigger( createEvent( "mousemove", handle[ 0 ], offset.left - width + 70, offset.top + 10 ) );
},
-
+
function() {
- notEqual(handle.css('left'), '0%', 'handle is not on the left side');
- notEqual(handle.css('left'), '100%', 'handle is not on the right side');
-
+ var min, max;
+ if( handle.css('left').indexOf("%") > -1 ){
+ min = "0%";
+ max = "100%";
+ } else {
+ min = "0px";
+ max = handle.css( 'width' );
+ }
+
+ notEqual(handle.css('left'), min, 'handle is not on the left side');
+ notEqual(handle.css('left'), max, 'handle is not on the right side');
+
// reset slider state so it is ready for other tests
slider.trigger( createEvent( "mouseup", handle[ 0 ], offset.left - width + 20, offset.top + 10 ) );
-
+
start();
}
], 500);
});
-
+
asyncTest( "toggle switch should refresh when disabled", function() {
var control = $( "#slider-switch" ),
handle = control.data( "slider" ).handle;
-
+
$.testHelper.sequence([
function() {
// set the initial value
control.val('off').slider('refresh');
},
-
+
function() {
- equals(handle.css('left'), '0%', 'handle starts on the left side');
-
+ assertLeftCSS(handle, {
+ percent: '0%',
+ pixels: '0px',
+ message: 'handle starts on the left side'
+ });
+
// disable and change value
control.slider('disable');
control.val('on').slider('refresh');
},
-
+
function() {
- equals(handle.css('left'), '100%', 'handle ends on the right side');
-
+ assertLeftCSS(handle, {
+ percent: '100%',
+ pixels: handle.css( 'width' ),
+ message: 'handle ends on the left side'
+ });
+
// reset slider state so it is ready for other tests
control.slider('enable');
-
+
start();
}
], 500);
});
-
})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.