Permalink
Browse files

Slider: Test style and fix tooltip inconsistencies

  • Loading branch information...
gabrielschulhof committed Mar 11, 2015
1 parent ae70733 commit cc4b6a5fa0aef92b299c5d7e447da07228088e9c
@@ -37,7 +37,7 @@ $.widget( "mobile.slider", $.mobile.slider, {
this._setOption( "popupEnabled", this.options.popupEnabled );
this._on( this.handle, { "vmousedown" : "_showPopup" } );
this._on( this.handle.add( this.slider ), { "vmousedown" : "_showPopup" } );
this._on( this.slider.add( this.document ), { "vmouseup" : "_hidePopup" } );
this._refresh();
},
@@ -102,7 +102,6 @@ $.widget( "mobile.slider", $.mobile.slider, {
_showPopup: function() {
if ( this.options.popupEnabled && !this._popupVisible ) {
this.handle.html( "" );
this._popup.show();
this._positionPopup();
this._popupVisible = true;
@@ -0,0 +1,40 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery Mobile Slider Test Suite</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../js/requirejs.config.js"></script>
<script src="../../../js/jquery.tag.inserter.js"></script>
<script src="../../jquery.setNameSpace.js"></script>
<script src="../../../tests/jquery.testHelper.js"></script>
<script src="../../../external/qunit/qunit.js"></script>
<script>
$.testHelper.asyncLoad([
['widgets/page'],
[ "widgets/forms/slider" ],
[ "init" ],
[ "slider_core.js" ]
]);
</script>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
<script src="../../swarminject.js"></script>
</head>
<body>
<div id="qunit"></div>
<div data-nstest-role="page">
<div class="ui-content">
<input type="range" id="test-slider-mini" data-nstest-mini="true" min="0" max="100" value="13" step="1">
<input type="range" id="test-slider-normal" min="0" max="100" value="13" step="1">
</div>
</div>
</body>
</html>
@@ -0,0 +1,28 @@
function testDisjoint( slider ) {
var inputOffset = slider.offset(),
inputRectangle = $.extend( {}, inputOffset, {
right: inputOffset.left + slider.width(),
bottom: inputOffset.top + slider.height()
} ),
track = slider.siblings( ".ui-slider-track" ),
trackOffset = track.offset(),
trackRectangle = $.extend( {}, trackOffset, {
right: trackOffset.left + track.width(),
bottom: trackOffset.top + track.height()
} );
deepEqual(
inputRectangle.left > trackRectangle.right ||
trackRectangle.left > inputRectangle.right ||
inputRectangle.top > trackRectangle.bottom ||
trackRectangle.top > inputRectangle.bottom, true,
"input and track rectangles are disjoint" );
}
test( "mini slider track does not overlap with input", function() {
testDisjoint( $( "#test-slider-mini" ) );
} );
test( "normal slider track does not overlap with input", function() {
testDisjoint( $( "#test-slider-normal" ) );
} );
@@ -0,0 +1,44 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Slider Test Suite</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../js/requirejs.config.js"></script>
<script src="../../../js/jquery.tag.inserter.js"></script>
<script src="../../jquery.setNameSpace.js"></script>
<script src="../../../tests/jquery.testHelper.js"></script>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
<link rel="stylesheet" href="../../jqm-tests.css"/>
<script src="../../../external/qunit/qunit.js"></script>
<script>
$.testHelper.asyncLoad( [
[ "widgets/forms/slider.tooltip" ],
[ "init" ],
[ "slider_core.js" ]
] );
</script>
<script src="../../swarminject.js"></script>
</head>
<body>
<div id="qunit"></div>
<div data-nstest-role="page">
<div class="ui-content">
<input id="basic-slider" type="range" min="0" max="100" value="13" step="1">
<input id="show-value" type="range" min="0" max="100" value="13" step="1" data-nstest-show-value="true">
<input id="popup" type="range" min="0" max="100" value="13" step="1" data-nstest-popup-enabled="true">
<input id="value-and-popup" type="range" min="0" max="100" value="13" step="1" data-nstest-show-value="true" data-nstest-popup-enabled="true">
<input id="mini-basic-slider" type="range" min="0" max="100" value="13" step="1" data-nstest-mini="true">
<input id="mini-show-value" type="range" min="0" max="100" value="13" step="1" data-nstest-mini="true" data-nstest-show-value="true">
<input id="mini-popup" type="range" min="0" max="100" value="13" step="1" data-nstest-mini="true" data-nstest-popup-enabled="true">
<input id="mini-value-and-popup" type="range" min="0" max="100" value="13" step="1" data-nstest-mini="true" data-nstest-show-value="true" data-nstest-popup-enabled="true">
</div>
</div>
</body>
</html>
@@ -0,0 +1,65 @@
function defineTooltipTest( name, slider, hasValue, hasTooltip ) {
test( name, function( assert ) {
var widget = slider.slider( "instance" ),
track = slider.siblings( ".ui-slider-track" ),
handle = track.children( ".ui-slider-handle" ),
popup = slider.siblings( ".ui-slider-popup" ),
assertState = function( condition, popupVisible ) {
var expectedHandleText =
( hasValue ? ( widget.options.mini ? "" : ( "" + slider.val() ) ) : "" );
assert.deepEqual( popup.is( ":visible" ), popupVisible,
"Upon " + condition + " popup is " + ( popupVisible ? "" : "not " ) +
"visible" );
if ( popupVisible ) {
assert.deepEqual( popup.text(), ( "" + slider.val() ),
"Upon " + condition +
" the popup reflects the input value (" + slider.val() + ")" );
}
deepEqual( handle.text(), expectedHandleText,
"Upon " + condition + " the handle text is " + expectedHandleText );
};
assertState( "startup", false );
// Make sure the widget updates correctly when dragging by the handle
handle.trigger( "vmousedown" );
assertState( "handle vmousedown", hasTooltip );
// Move to 89% of the length of the slider
handle.trigger( $.extend( $.Event( "vmousemove" ), {
pageX: track.offset().left + track.width() * 0.89
} ) );
assertState( "handle vmousemove", hasTooltip );
handle.trigger( "vmouseup" );
assertState( "handle vmouseup", false );
// Make sure the widget updates correctly when clicking on the track at 47%
track.trigger( $.extend( $.Event( "vmousedown" ), {
pageX: track.offset().left + track.width() * 0.47
} ) );
assertState( "track vmousedown", hasTooltip );
// Move to 53%
track.trigger( $.extend( $.Event( "vmousemove" ), {
pageX: track.offset().left + track.width() * 0.53
} ) );
assertState( "track vmousemove", hasTooltip );
track.trigger( "vmouseup" );
assertState( "track vmouseup", false );
} );
}
function defineTests( moduleNameSuffix, idPrefix ) {
module( "Slider tooltip - " + moduleNameSuffix );
defineTooltipTest( "Basic slider", $( "#" + idPrefix + "basic-slider" ), false, false );
defineTooltipTest( "Slider showing value", $( "#" + idPrefix + "show-value" ), true, false );
defineTooltipTest( "Slider showing tooltip", $( "#" + idPrefix + "popup" ), false, true );
defineTooltipTest( "Tooltip and value", $( "#" + idPrefix + "value-and-popup" ), true, true );
}
defineTests( "regular size", "" );
defineTests( "mini size", "mini-" );

0 comments on commit cc4b6a5

Please sign in to comment.