61 tests/unit/rangeslider/index.html
View file
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<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/jquery.tag.inserter.js"></script>
<script src="../jquery.setNameSpace.js"></script>
<script src="../../../external/qunit.js"></script>
<script src="../../../tests/jquery.testHelper.js"></script>
<script>
$.testHelper.asyncLoad([
[
"widgets/forms/slider",
"widgets/forms/rangeslider"
],
[ "rangeslider_core.js" ],
[ "jquery.mobile.init" ]
]);
</script>

<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
<link rel="stylesheet" href="../../../external/qunit.css"/>

<script src="../swarminject.js"></script>
</head>
<body>

<h1 id="qunit-header">jQuery Mobile Rangeslider Test Suite</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests">
</ol>

<div id="foo" data-nstest-role="page">
<form>
<div data-nstest-role="fieldcontain">
<div data-nstest-role="rangeslider" id="rangeslider-highlight">
<input type="range" name="rangeslider-first" id="rangeslider-highlight-first" value="10" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
<input type="range" name="rangeslider-last" id="rangeslider-highlight-last" value="90" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
</div>
</div>
<div data-nstest-role="fieldcontain">
<div data-nstest-role="rangeslider" id="rangeslider-minmax">
<input type="range" name="rangeslider-first" id="rangeslider-minmax-first" value="30" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
<input type="range" name="rangeslider-last" id="rangeslider-minmax-last" value="70" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
</div>
</div>
<div data-nstest-role="fieldcontain">
<div data-nstest-role="rangeslider" id="rangeslider-extreams">
<input type="range" name="rangeslider-first" id="rangeslider-extreams-first" value="45" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
<input type="range" name="rangeslider-last" id="rangeslider-extreams-last" value="55" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
</div>
</div>
</form>
</div>

</body>
</html>
98 tests/unit/rangeslider/rangeslider_core.js
View file
@@ -0,0 +1,98 @@
/*
* mobile slider unit tests
*/
(function($){
module( "jquery.mobile.rangeslider.js core" );

test( "Hightlight has correct margin and width", function() {
expect( 2 );
var rangeslider = $( "#rangeslider-highlight" ),
rangeFirst = $( "#rangeslider-highlight-first" ),
rangeLast = $( "#rangeslider-highlight-last" ),
bg = rangeslider.find( ".ui-slider-bg" ),
width = rangeslider.find( ".ui-slider-track" ).first().width(),
range = rangeFirst.attr( "max" ) - rangeFirst.attr( "min" ),
cssMarginLeft, cssWidth, intWidth, bgMarginLeft, bgWidth;

// Increase first input val with 20
rangeFirst.val( parseInt(rangeFirst.val(), 10) + 20 ).slider( "refresh" );

cssMarginLeft = bg.css( "margin-left" );

// Check if browser returns a pixel or percentage value
if ( cssMarginLeft.indexOf( "%" ) > -1 ) {
bgMarginLeft = ( rangeFirst.val() / range * 100 ) + "%";

deepEqual( cssMarginLeft, bgMarginLeft, "Highlight has correct left margin" );
} else {
var intMarginLeft = parseFloat( cssMarginLeft.replace("px", "") ); console.log(intMarginLeft);

bgMarginLeft = Math.round( rangeFirst.val() / range * width ); console.log(bgMarginLeft);
// Take a rounding difference of max 2px into account
ok( -2 >= ( intMarginLeft - bgMarginLeft ) <= 2, "Highlight has correct left margin" );
}

cssWidth = bg.css( "width" );
intWidth = parseFloat( cssWidth.replace("px", "") ); console.log(intWidth);
bgWidth = Math.round( (rangeLast.val() - rangeFirst.val()) / range * width ); console.log(bgWidth);
// Take a rounding difference of max 2px into account
ok( -2 >= ( intWidth - bgWidth ) <= 2, "Highlight has correct width" );
});

test( "First input value is always lower than last input value and vice versa", function() {
expect( 2 );
var rangeslider = $( "#rangeslider-minmax" ),
rangeFirst = $( "#rangeslider-minmax-first" ),
rangeLast = $( "#rangeslider-minmax-last" );

// Try to set first input val (30) higher than last input val (70)
rangeFirst.val( parseInt(rangeFirst.val(), 10) + 60 ).slider( "refresh" );

equal( rangeFirst.val(), rangeLast.val(), "First input value is equal to last input value" );

// Set first input value back to 30
rangeFirst.val( 30 ).slider( "refresh" );
// Try to set last input val (70) lower than first input val (30)
rangeLast.val( parseInt(rangeLast.val(), 10) - 60 ).slider( "refresh" );

equal( rangeLast.val(), rangeFirst.val(), "Last input value is equal to first input value" );
});

var createEvent = function( name, target, x, y ) {
var event = $.Event( name );
event.target = target;
event.pageX = x;
event.pageY = y;
return event;
};

test( "Clicking on the extreams updates the correct input", function() {
expect( 2 );
var rangeslider = $( "#rangeslider-extreams" ),
rangeFirst = $( "#rangeslider-extreams-first" ),
rangeLast = $( "#rangeslider-extreams-last" ),
track = rangeslider.find( ".ui-slider-track" ).first(),
trackOffset = track.offset(),
trackWidth = track.width();

// Fake a click at the beginning of the track
track.trigger( createEvent( "mousedown", track[0], trackOffset.left + 15, trackOffset.top + 7 ) ).trigger( "mouseup" );
// Check if first input value (45) has decreased
ok(
$( rangeFirst ).on( "change", function() {
rangeLast.val() < 45;
}),
"Clicking at the beginning of the track updates the first input"
);
// Fake a click at the end of the track
track.trigger( createEvent( "mousedown", track[0], ( trackOffset.left + trackWidth ) - 15, trackOffset.top + 7 ) ).trigger( "mouseup" );
// Check if last input value (55) has increased
ok(
$( rangeLast ).on( "change", function() {
rangeLast.val() > 55;
}),
"Clicking at the end of the track updates the last input"
);
});

})( jQuery );
2 tests/unit/reset/reset_core.js
View file
@@ -43,7 +43,7 @@ asyncTest( "Form resets correctly", function() {
}
}

ok( slider.hasClass( "ui-slider" ), prefix + id + "'s immediate succeeding sibling has class ui-slider" );
ok( slider.hasClass( "ui-slider-track" ), prefix + id + "'s immediate succeeding sibling has class ui-slider-track" );
// This assumes an input range of 0-100
ok( style.left === value + "%", prefix + id + "'s button is located appropriately" );
}
26 tests/unit/slider/index.html
View file
@@ -12,10 +12,8 @@
<script src="../../../tests/jquery.testHelper.js"></script>
<script>
$.testHelper.asyncLoad([
[ "settings.js" ],
[
"widgets/forms/slider",
"widgets/forms/textinput"
"widgets/forms/slider"
],
[
"slider_events.js",
@@ -38,17 +36,17 @@ <h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests">
</ol>

<div id="foo" data-nstest-role="page">
<div id="foo" data-nstest-role="page">
<div data-nstest-role="fieldcontain">
<input type="range" name="slider-1" id="range-slider-up" value="0" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
<input type="range" name="slider-1" id="range-slider-up" value="0" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
</div>

<div data-nstest-role="fieldcontain">
<input type="range" name="slider-1" id="range-slider-down" value="10" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
<input type="range" name="slider-1" id="range-slider-down" value="10" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
</div>

<div data-nstest-role="fieldcontain">
<input type="range" name="background-slider" id="background-slider" value="10" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" data-nstest-highlight="true"/>
<input type="range" name="background-slider" id="background-slider" value="10" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" data-nstest-highlight="true"/>
</div>

<div data-nstest-role="fieldcontain">
@@ -69,7 +67,7 @@ <h2 id="qunit-userAgent"></h2>
</div>

<div data-nstest-role="fieldcontain">
<select name="slider" id="slider-switch" data-nstest-role="slider">
<select name="slider" id="slider-switch" data-nstest-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
@@ -113,17 +111,11 @@ <h2 id="qunit-userAgent"></h2>
<label for="remove-events-slider">Input slider:</label>
<input type="range" name="remove-events-slider" id="remove-events-slider" value="25" min="0" max="100"/>
</div>

<div data-role="fieldcontain" class="textinput-test">
<label for="textinput-test">Input slider:</label>
<input type="range" data-clear-btn="true" name="slider" id="textinput-test" value="25" min="0" max="100"/>
</div>

</div>

<div id="enhancetest">
<input type="range" name="slider-enhancetest" id="range-slider-enhancetest" value="75" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
<input type="range" name="slider-enhancetest" id="range-slider-enhancetest" value="75" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
</div>


</body>
</html>
8 tests/unit/slider/slider_core.js
View file
@@ -8,7 +8,7 @@

// not testing the positive case here since's it's obviously tested elsewhere
test( "slider elements in the keepNative set shouldn't be enhanced", function() {
deepEqual( $("input.should-be-native").siblings("div.ui-slider").length, 0 );
deepEqual( $("input.should-be-native").siblings(".ui-slider-track").length, 0 );
});

test( "refresh should force val to nearest step", function() {
@@ -33,17 +33,17 @@
test( "flip toggle switch title should be current selected value attr", function() {
var slider = $( "#slider-switch" );

deepEqual(slider.siblings(".ui-slider").find("a").attr('title'),
deepEqual(slider.siblings(".ui-slider-switch").find("a").attr('title'),
$(slider.find("option")[slider[0].selectedIndex]).text(),
"verify that the link title is set to the selected option text");
});

test( "data-highlight works properly", function() {
var $highlighted = $("#background-slider"), $unhighlighted = $("#no-background-slider");

deepEqual( $highlighted.siblings( ".ui-slider" ).find( ".ui-slider-bg" ).length, 1,
deepEqual( $highlighted.siblings( ".ui-slider-track" ).find( ".ui-slider-bg" ).length, 1,
"highlighted slider should have a div for the track bg" );
deepEqual( $unhighlighted.siblings( ".ui-slider" ).find( ".ui-slider-bg" ).length, 0,
deepEqual( $unhighlighted.siblings( ".ui-slider-track" ).find( ".ui-slider-bg" ).length, 0,
"unhighlighted slider _not_ should have a div for the track bg" );
});

8 tests/unit/slider/slider_events.js
View file
@@ -18,7 +18,7 @@
var keypressTest = function(opts){
var slider = $(opts.selector),
val = window.parseFloat(slider.val()),
handle = slider.siblings('.ui-slider').find('.ui-slider-handle');
handle = slider.siblings('.ui-slider-track').find('.ui-slider-handle');

expect( opts.keyCodes.length );

@@ -113,7 +113,7 @@
// generic switch test function
var sliderSwitchTest = function(opts){
var slider = $("#slider-switch"),
handle = slider.siblings('.ui-slider').find('a'),
handle = slider.siblings('.ui-slider-switch').find('a'),
switchValues = {
'off' : 0,
'on' : 1
@@ -163,8 +163,8 @@
});

test( "slider controls will create when inside a container that receives a 'create' event", function(){
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" );
ok( !$("#enhancetest").appendTo(".ui-page-active").find(".ui-slider-track").length, "did not have enhancements applied" );
ok( $("#enhancetest").trigger("create").find(".ui-slider-track").length, "enhancements applied" );
});

var createEvent = function( name, target, x, y ) {
2 tests/unit/support/support_core.js
View file
@@ -104,7 +104,7 @@ $.testHelper.excludeFileProtocol(function(){
//here we're just comparing our version to what the conditional compilation finds
var ie = !!$.browser.msie, //get a boolean
version = parseInt( $.browser.version, 10),
jqmdetectedver = $.mobile.browser.ie;
jqmdetectedver = $.mobile.browser.oldIE;

if( ie ){
deepEqual(version, jqmdetectedver, "It's IE and the version is correct");