Permalink
Browse files

Slider and Rangeslider: Express module dependency

Both modules have a hard dependency on the "vmouse" module that should
be expressed in AMD.

Re gh-5987
Closes gh-7383
Closes gh-7274

(cherry picked from commit 44e2d98)
  • Loading branch information...
jugglinmike authored and arschmitz committed May 8, 2014
1 parent 54c9777 commit 56dddc68cb9424649f55a733af201692917b1fe7
@@ -9,6 +9,7 @@ define( [ "jquery",
"../../jquery.mobile.core",
"../../jquery.mobile.widget",
"./textinput",
"../../vmouse",
"./reset",
"./slider" ], function( jQuery ) {
//>>excludeEnd("jqmBuildExclude");
@@ -9,6 +9,7 @@ define( [ "jquery",
"../../jquery.mobile.core",
"../../jquery.mobile.widget",
"./textinput",
"../../vmouse",
"./reset" ], function( jQuery ) {
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {
@@ -0,0 +1,38 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile RangeSlider 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="../../../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/rangeslider"
],
[
"rangeslider_core.js"
]
]);
</script>
<script src="../../swarminject.js"></script>
</head>
<body>
<div id="qunit"></div>
<form class="ui-body-a" id="plain">
<input type="range"></input>
<input type="range"></input>
</form>
</body>
</html>
@@ -0,0 +1,40 @@
test( "Rangeslider widget works correctly", function() {
var rangeslider = $( "#plain" ).rangeslider(),
handles = rangeslider.parent().find( ".ui-slider-handle" ),
track = handles.closest( ".ui-slider-track" ),
offset = handles.offset();
deepEqual( rangeslider.rangeslider( "widget" ).hasClass( "ui-rangeslider" ), true,
"Has class ui-rangeslider" );
equal( handles.length, 2, "Contains two handle elements" );
equal( track.length, 1, "Contains one track element" );
function moveHandle( handle, xPos ) {
var trackWidth, trackX,
down = $.Event( "mousedown" ),
move = $.Event( "mousemove" ),
up = $.Event( "mouseup" ),
offset = handle.offset();
down.target = move.target = up.target = handle[ 0 ];
down.pageY = move.pageY = up.pageY = offset.top;
down.pageX = offset.left;
up.pageX = move.pageX = xPos;
handle.trigger( down );
handle.trigger( move );
handle.trigger( up );
}
// GH-7274: Events dependency
// These tests cannot be expressed in the integration tests because the
// "events/touch" module is artificially loaded in that environment.
trackWidth = track.width();
trackX = track.offset().left;
ok( trackWidth > 0, "Track has a non-zero width" );
moveHandle( handles.eq( 0 ), trackX + trackWidth * 0.2 );
moveHandle( handles.eq( 1 ), trackX + trackWidth * 0.8 );
ok( handles.eq( 0 ).offset().left > 0, "Lower handle responds to user interaction" );
ok( handles.eq( 1 ).offset().left > handles.eq( 0 ).offset().left,
"Upper handle responds to user interaction" );
});
@@ -0,0 +1,37 @@
<!doctype html>
<html>
<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="../../../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"
],
[
"slider_core.js"
]
]);
</script>
<script src="../../swarminject.js"></script>
</head>
<body>
<div id="qunit"></div>
<form class="ui-body-a">
<input type="range" id="plain"></input>
</form>
</body>
</html>
@@ -0,0 +1,36 @@
test( "Slider widget works correctly", function() {
var trackWidth, trackX,
slider = $( "#plain" ).slider(),
handle = slider.parent().find( ".ui-slider-handle" ),
track = handle.closest( ".ui-slider-track" ),
offset = handle.offset();
deepEqual( slider.slider( "widget" ).hasClass( "ui-slider-input" ), true,
"Has class ui-slider-input" );
equal( handle.length, 1, "Slider contains a handle element" );
function moveHandle( handle, xPos ) {
var down = $.Event( "mousedown" ),
move = $.Event( "mousemove" ),
up = $.Event( "mouseup" ),
offset = handle.offset();
down.target = move.target = up.target = handle[ 0 ];
down.pageY = move.pageY = up.pageY = offset.top;
down.pageX = offset.left;
up.pageX = move.pageX = xPos;
handle.trigger( down );
handle.trigger( move );
handle.trigger( up );
}
// GH-7274: Events dependency
// This test cannot be expressed in the integration tests because the
// "events/touch" module is artificially loaded in that environment.
trackWidth = track.width();
trackX = track.offset().left;
ok( trackWidth > 0, "Track has a non-zero width" );
moveHandle( handle, trackX + trackWidth * 0.5 );
ok( handle.offset().left > 0, "Handle responds to user interaction" );
});

0 comments on commit 56dddc6

Please sign in to comment.