diff options
author | Filipp Lepalaan <f@230.to> | 2014-02-19 18:02:09 +0200 |
---|---|---|
committer | Filipp Lepalaan <f@230.to> | 2014-02-19 18:02:09 +0200 |
commit | 75ad7e4bd7d69243e7e5281c2642f00478fb072d (patch) | |
tree | eaaaf360902d369f42d94778aac8803db7973ce0 /apps/it/static/js/ui/tests/unit/slider | |
parent | cfc7c3f52544af8a71d3fa3988a06fee200d2c24 (diff) | |
download | pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.tar.gz pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.tar.bz2 pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.zip |
Added tags, jquery UI
Diffstat (limited to 'apps/it/static/js/ui/tests/unit/slider')
-rw-r--r-- | apps/it/static/js/ui/tests/unit/slider/all.html | 30 | ||||
-rw-r--r-- | apps/it/static/js/ui/tests/unit/slider/slider.html | 48 | ||||
-rw-r--r-- | apps/it/static/js/ui/tests/unit/slider/slider_common.js | 23 | ||||
-rw-r--r-- | apps/it/static/js/ui/tests/unit/slider/slider_core.js | 297 | ||||
-rw-r--r-- | apps/it/static/js/ui/tests/unit/slider/slider_events.js | 152 | ||||
-rw-r--r-- | apps/it/static/js/ui/tests/unit/slider/slider_methods.js | 96 | ||||
-rw-r--r-- | apps/it/static/js/ui/tests/unit/slider/slider_options.js | 317 |
7 files changed, 963 insertions, 0 deletions
diff --git a/apps/it/static/js/ui/tests/unit/slider/all.html b/apps/it/static/js/ui/tests/unit/slider/all.html new file mode 100644 index 0000000..a447b98 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/slider/all.html @@ -0,0 +1,30 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Slider Test Suite</title> + + <script src="../../../jquery-1.10.2.js"></script> + + <link rel="stylesheet" href="../../../external/qunit.css"> + <link rel="stylesheet" href="../qunit-composite.css"> + <script src="../../../external/qunit.js"></script> + <script src="../qunit-composite.js"></script> + <script src="../subsuite.js"></script> + + <script> + testAllVersions( "slider" ); + </script> +</head> +<body> + +<h1 id="qunit-header">jQuery UI Slider Test Suite</h1> +<h2 id="qunit-banner"></h2> +<div id="qunit-testrunner-toolbar"></div> +<h2 id="qunit-userAgent"></h2> +<ol id="qunit-tests"></ol> +<div id="qunit-fixture"> + +</div> +</body> +</html> diff --git a/apps/it/static/js/ui/tests/unit/slider/slider.html b/apps/it/static/js/ui/tests/unit/slider/slider.html new file mode 100644 index 0000000..98adfa3 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/slider/slider.html @@ -0,0 +1,48 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Slider Test Suite</title> + + <script src="../../jquery.js"></script> + <link rel="stylesheet" href="../../../external/qunit.css"> + <script src="../../../external/qunit.js"></script> + <script src="../../jquery.simulate.js"></script> + <script src="../testsuite.js"></script> + <script> + TestHelpers.loadResources({ + css: [ "ui.core", "ui.slider" ], + js: [ + "ui/jquery.ui.core.js", + "ui/jquery.ui.widget.js", + "ui/jquery.ui.mouse.js", + "ui/jquery.ui.slider.js" + ] + }); + </script> + + <script src="slider_common.js"></script> + <script src="slider_core.js"></script> + <script src="slider_events.js"></script> + <script src="slider_methods.js"></script> + <script src="slider_options.js"></script> + + <script src="../swarminject.js"></script> +</head> +<body> + +<h1 id="qunit-header">jQuery UI Slider Test Suite</h1> +<h2 id="qunit-banner"></h2> +<div id="qunit-testrunner-toolbar"></div> +<h2 id="qunit-userAgent"></h2> +<ol id="qunit-tests"></ol> +<div id="qunit-fixture"> + +<div id="slider1"></div> +<div id="slider3" style="position: relative; margin: 40px; width: 217px; height: 28px;"> + <div class="ui-slider-handle" style="position: absolute; height: 21px; left: 0px; bottom: 0px; width: 17px;"></div> +</div> + +</div> +</body> +</html> diff --git a/apps/it/static/js/ui/tests/unit/slider/slider_common.js b/apps/it/static/js/ui/tests/unit/slider/slider_common.js new file mode 100644 index 0000000..6d7278d --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/slider/slider_common.js @@ -0,0 +1,23 @@ +TestHelpers.commonWidgetTests( "slider", { + defaults: { + animate: false, + cancel: "input,textarea,button,select,option", + delay: 0, + disabled: false, + distance: 0, + max: 100, + min: 0, + orientation: "horizontal", + range: false, + step: 1, + value: 0, + values: null, + + // callbacks + create: null, + change: null, + slide: null, + start: null, + stop: null + } +}); diff --git a/apps/it/static/js/ui/tests/unit/slider/slider_core.js b/apps/it/static/js/ui/tests/unit/slider/slider_core.js new file mode 100644 index 0000000..3649bde --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/slider/slider_core.js @@ -0,0 +1,297 @@ +(function( $ ) { +// +// Slider Test Helper Functions +// + +var element, options; + +function handle() { + return element.find( ".ui-slider-handle" ); +} + +// Slider Tests +module( "slider: core" ); + +test( "keydown HOME on handle sets value to min", function() { + expect( 2 ); + element = $( "<div></div>" ); + options = { + max: 5, + min: -5, + orientation: "horizontal", + step: 1 + }; + element.slider( options ); + + element.slider( "value", 0 ); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.HOME } ); + equal(element.slider( "value" ), options.min ); + + element.slider( "destroy" ); + + element = $( "<div></div>" ); + options = { + max: 5, + min: -5, + orientation: "vertical", + step: 1 + }; + element.slider( options ); + + element.slider( "value", 0 ); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.HOME } ); + equal(element.slider( "value" ), options.min) ; + + element.slider( "destroy" ); +}); + +test( "keydown END on handle sets value to max", function() { + expect( 2 ); + element = $( "<div></div>" ); + options = { + max: 5, + min: -5, + orientation: "horizontal", + step: 1 + }; + element.slider( options ); + + element.slider( "value", 0 ); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.END } ); + equal(element.slider( "value" ), options.max) ; + + element.slider( "destroy" ); + + element = $( "<div></div>" ); + options = { + max: 5, + min: -5, + orientation: "vertical", + step: 1 + }; + element.slider( options ); + + element.slider( "value", 0 ); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.END } ); + equal(element.slider( "value" ), options.max ); + + element.slider( "destroy" ); +}); + +test( "keydown PAGE_UP on handle increases value by 1/5 range, not greater than max", function() { + expect( 4 ); + $.each( [ "horizontal", "vertical" ], function( i, orientation ) { + element = $( "<div></div>" ); + options = { + max: 100, + min: 0, + orientation: orientation, + step: 1 + }; + element.slider( options ); + + element.slider( "value", 70); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); + equal(element.slider( "value" ), 90); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); + equal(element.slider( "value" ), 100); + + element.slider( "destroy" ); + }); +}); + +test( "keydown PAGE_DOWN on handle decreases value by 1/5 range, not less than min", function() { + expect( 4 ); + $.each( [ "horizontal", "vertical" ], function( i, orientation ) { + element = $( "<div></div>" ); + options = { + max: 100, + min: 0, + orientation: orientation, + step: 1 + }; + element.slider( options ); + + element.slider( "value", 30); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); + equal(element.slider( "value" ), 10); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); + equal(element.slider( "value" ), 0 ); + + element.slider( "destroy" ); + }); +}); + +test( "keydown UP on handle increases value by step, not greater than max", function() { + expect( 4 ); + element = $( "<div></div>" ); + options = { + max: 5, + min: -5, + orientation: "horizontal", + step: 1 + }; + element.slider(options); + + element.slider( "value", options.max - options.step ); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); + equal(element.slider( "value" ), options.max ); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); + equal(element.slider( "value" ), options.max ); + + element.slider( "destroy" ); + + element = $( "<div></div>" ); + options = { + max: 5, + min: -5, + orientation: "vertical", + step: 1 + }; + element.slider( options ); + + element.slider( "value", options.max - options.step ); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); + equal(element.slider( "value" ), options.max ); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); + equal(element.slider( "value" ), options.max ); + + element.slider( "destroy" ); +}); + +test( "keydown RIGHT on handle increases value by step, not greater than max", function() { + expect( 4 ); + element = $( "<div></div>" ); + options = { + max: 5, + min: -5, + orientation: "horizontal", + step: 1 + }; + element.slider(options); + + element.slider( "value", options.max - options.step ); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); + equal(element.slider( "value" ), options.max); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); + equal(element.slider( "value" ), options.max ); + + element.slider( "destroy" ); + + element = $( "<div></div>" ); + options = { + max: 5, + min: -5, + orientation: "vertical", + step: 1 + }; + element.slider( options ); + + element.slider( "value", options.max - options.step ); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); + equal(element.slider( "value" ), options.max ); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); + equal(element.slider( "value" ), options.max ); + + element.slider( "destroy" ); +}); + +test( "keydown DOWN on handle decreases value by step, not less than min", function() { + expect( 4 ); + element = $( "<div></div>" ); + options = { + max: 5, + min: -5, + orientation: "horizontal", + step: 1 + }; + element.slider( options ); + + element.slider( "value", options.min + options.step ); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + equal(element.slider( "value" ), options.min); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + equal(element.slider( "value" ), options.min ); + + element.slider( "destroy" ); + + element = $( "<div></div>" ); + options = { + max: 5, + min: -5, + orientation: "vertical", + step: 1 + }; + element.slider( options ); + + element.slider( "value", options.min + options.step ); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + equal(element.slider( "value" ), options.min); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + equal(element.slider( "value" ), options.min ); + + element.slider( "destroy" ); +}); + +test( "keydown LEFT on handle decreases value by step, not less than min", function() { + expect( 4 ); + element = $( "<div></div>" ); + options = { + max: 5, + min: -5, + orientation: "horizontal", + step: 1 + }; + element.slider(options); + + element.slider( "value", options.min + options.step ); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ); + equal(element.slider( "value" ), options.min ); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ); + equal(element.slider( "value" ), options.min ); + + element.slider( "destroy" ); + + element = $( "<div></div>" ); + options = { + max: 5, + min: -5, + orientation: "vertical", + step: 1 + }; + element.slider( options ); + + element.slider( "value", options.min + options.step ); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ); + equal(element.slider( "value" ), options.min ); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ); + equal(element.slider( "value" ), options.min ); + + element.slider( "destroy" ); +}); + +})( jQuery ); diff --git a/apps/it/static/js/ui/tests/unit/slider/slider_events.js b/apps/it/static/js/ui/tests/unit/slider/slider_events.js new file mode 100644 index 0000000..ec93a05 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/slider/slider_events.js @@ -0,0 +1,152 @@ +(function( $ ) { + +module( "slider: events" ); + +//Specs from http://wiki.jqueryui.com/Slider#specs +//"change callback: triggers when the slider has stopped moving and has a new +// value (even if same as previous value), via mouse(mouseup) or keyboard(keyup) +// or value method/option" +test( "mouse based interaction", function() { + expect( 4 ); + + var element = $( "#slider1" ) + .slider({ + start: function( event ) { + equal( event.originalEvent.type, "mousedown", "start triggered by mousedown" ); + }, + slide: function( event) { + equal( event.originalEvent.type, "mousemove", "slider triggered by mousemove" ); + }, + stop: function( event ) { + equal( event.originalEvent.type, "mouseup", "stop triggered by mouseup" ); + }, + change: function( event ) { + equal( event.originalEvent.type, "mouseup", "change triggered by mouseup" ); + } + }); + + element.find( ".ui-slider-handle" ).eq( 0 ) + .simulate( "drag", { dx: 10, dy: 10 } ); + +}); +test( "keyboard based interaction", function() { + expect( 3 ); + + // Test keyup at end of handle slide (keyboard) + var element = $( "#slider1" ) + .slider({ + start: function( event ) { + equal( event.originalEvent.type, "keydown", "start triggered by keydown" ); + }, + slide: function() { + ok( false, "Slider never triggered by keys" ); + }, + stop: function( event ) { + equal( event.originalEvent.type, "keyup", "stop triggered by keyup" ); + }, + change: function( event ) { + equal( event.originalEvent.type, "keyup", "change triggered by keyup" ); + } + }); + + element.find( ".ui-slider-handle" ).eq( 0 ) + .simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ) + .simulate( "keypress", { keyCode: $.ui.keyCode.LEFT } ) + .simulate( "keyup", { keyCode: $.ui.keyCode.LEFT } ); + +}); +test( "programmatic event triggers", function() { + expect( 6 ); + + // Test value method + var element = $( "<div></div>" ) + .slider({ + change: function() { + ok( true, "change triggered by value method" ); + } + }) + .slider( "value", 0 ); + + // Test values method + element = $( "<div></div>" ) + .slider({ + values: [ 10, 20 ], + change: function() { + ok( true, "change triggered by values method" ); + } + }) + .slider( "values", [ 80, 90 ] ); + + // Test value option + element = $( "<div></div>" ) + .slider({ + change: function() { + ok( true, "change triggered by value option" ); + } + }) + .slider( "option", "value", 0 ); + + // Test values option + element = $( "<div></div>" ) + .slider({ + values: [ 10, 20 ], + change: function() { + ok( true, "change triggered by values option" ); + } + }) + .slider( "option", "values", [ 80, 90 ] ); + +}); + +test( "mouse based interaction part two: when handles overlap", function() { + expect( 4 ); + + var element = $( "#slider1" ) + .slider({ + values: [ 0, 0, 0 ], + start: function( event, ui ) { + equal( handles.index( ui.handle ), 2, "rightmost handle activated when overlapping at minimum (#3736)" ); + } + }), + handles = element.find( ".ui-slider-handle" ); + handles.eq( 0 ).simulate( "drag", { dx: 10 } ); + element.slider( "destroy" ); + + element = $( "#slider1" ) + .slider({ + values: [ 10, 10, 10 ], + max: 10, + start: function( event, ui ) { + equal( handles.index( ui.handle ), 0, "leftmost handle activated when overlapping at maximum" ); + } + }), + handles = element.find( ".ui-slider-handle" ); + handles.eq( 0 ).simulate( "drag", { dx: -10 } ); + element.slider( "destroy" ); + + element = $( "#slider1" ) + .slider({ + values: [ 19, 20 ] + }), + handles = element.find( ".ui-slider-handle" ); + handles.eq( 0 ).simulate( "drag", { dx: 10 } ); + element.one( "slidestart", function( event, ui ) { + equal( handles.index( ui.handle ), 0, "left handle activated if left was moved last" ); + }); + handles.eq( 0 ).simulate( "drag", { dx: 10 } ); + element.slider( "destroy" ); + + element = $( "#slider1" ) + .slider({ + values: [ 19, 20 ] + }), + handles = element.find( ".ui-slider-handle" ); + handles.eq( 1 ).simulate( "drag", { dx: -10 } ); + element.one( "slidestart", function( event, ui ) { + equal( handles.index( ui.handle ), 1, "right handle activated if right was moved last (#3467)" ); + }); + handles.eq( 0 ).simulate( "drag", { dx: 10 } ); + +}); + +})( jQuery ); diff --git a/apps/it/static/js/ui/tests/unit/slider/slider_methods.js b/apps/it/static/js/ui/tests/unit/slider/slider_methods.js new file mode 100644 index 0000000..e13fbd5 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/slider/slider_methods.js @@ -0,0 +1,96 @@ +(function( $ ) { + +module( "slider: methods" ); + +test( "init", function() { + expect(5); + + $( "<div></div>" ).appendTo( "body" ).slider().remove(); + ok( true, ".slider() called on element" ); + + $( [] ).slider().remove(); + ok( true, ".slider() called on empty collection" ); + + $( "<div></div>" ).slider().remove(); + ok( true, ".slider() called on disconnected DOMElement" ); + + var element = $( "<div></div>" ).slider(); + element.slider( "option", "foo" ); + element.remove(); + ok( true, "arbitrary option getter after init" ); + + $( "<div></div>" ).slider().slider( "option", "foo", "bar" ).remove(); + ok( true, "arbitrary option setter after init" ); +}); + +test( "destroy", function() { + expect( 1 ); + domEqual( "#slider1", function() { + $( "#slider1" ).slider().slider( "destroy" ); + }); +}); + +test( "enable", function() { + expect( 5 ); + var element, + expected = $( "<div></div>" ).slider(), + actual = expected.slider( "enable" ); + equal(actual, expected, "enable is chainable" ); + + element = $( "<div></div>" ).slider({ disabled: true }); + ok( element.hasClass( "ui-state-disabled" ), "slider has ui-state-disabled class before enable method call" ); + ok( element.hasClass( "ui-slider-disabled" ), "slider has ui-slider-disabled class before enable method call" ); + element.slider( "enable" ); + ok( !element.hasClass( "ui-state-disabled" ), "slider does not have ui-state-disabled class after enable method call" ); + ok( !element.hasClass( "ui-slider-disabled" ), "slider does not have ui-slider-disabled class after enable method call" ); +}); + +test( "disable", function() { + expect( 5 ); + var element, + expected = $( "<div></div>" ).slider(), + actual = expected.slider( "disable" ); + equal(actual, expected, "disable is chainable" ); + + element = $( "<div></div>" ).slider({ disabled: false }); + ok( !element.hasClass( "ui-state-disabled" ), "slider does not have ui-state-disabled class before disabled method call" ); + ok( !element.hasClass( "ui-slider-disabled" ), "slider does not have ui-slider-disabled class before disable method call" ); + element.slider( "disable" ); + ok( element.hasClass( "ui-state-disabled" ), "slider has ui-state-disabled class after disable method call" ); + ok( element.hasClass( "ui-slider-disabled" ), "slider has ui-slider-disabled class after disable method call" ); +}); + +test( "value", function() { + expect( 17 ); + $( [ false, "min", "max" ] ).each(function() { + var element = $( "<div></div>" ).slider({ + range: this, + value: 5 + }); + equal( element.slider( "value" ), 5, "range: " + this + " slider method get" ); + equal( element.slider( "value", 10), element, "value method is chainable" ); + equal( element.slider( "value" ), 10, "range: " + this + " slider method set" ); + element.remove(); + }); + var element = $( "<div></div>" ).slider({ + min: -1, value: 0, max: 1 + }); + // min with value option vs value method + element.slider( "option", "value", -2 ); + equal( element.slider( "option", "value" ), -2, "value option does not respect min" ); + equal( element.slider( "value" ), -1, "value method get respects min" ); + equal( element.slider( "value", -2 ), element, "value method is chainable" ); + equal( element.slider( "option", "value" ), -1, "value method set respects min" ); + // max with value option vs value method + element.slider( "option", "value", 2); + equal( element.slider( "option", "value" ), 2, "value option does not respect max" ); + equal( element.slider( "value" ), 1, "value method get respects max" ); + equal( element.slider( "value", 2 ), element, "value method is chainable" ); + equal( element.slider( "option", "value" ), 1, "value method set respects max" ); +}); + +//test( "values", function() { +// ok(false, "missing test - untested code is broken code." ); +//}); + +})( jQuery ); diff --git a/apps/it/static/js/ui/tests/unit/slider/slider_options.js b/apps/it/static/js/ui/tests/unit/slider/slider_options.js new file mode 100644 index 0000000..bd62f5d --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/slider/slider_options.js @@ -0,0 +1,317 @@ +(function( $ ) { + +var element, options; + +function handle() { + return element.find( ".ui-slider-handle" ); +} + +module( "slider: options" ); + +test( "disabled", function(){ + expect( 8 ); + var count = 0; + + element = $( "#slider1" ).slider(); + element.bind( "slidestart", function() { + count++; + }); + + // enabled + ok( !element.hasClass( "ui-slider-disabled" ), "no disabled class" ); + equal( element.slider( "option", "disabled" ), false , "is not disabled" ); + + handle().simulate( "drag", { dx: 10 } ); + equal( count, 1, "slider moved" ); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); + equal( count, 2, "slider moved" ); + + // disabled + element.slider( "option", "disabled", true ); + ok( element.hasClass( "ui-slider-disabled" ), "has disabled class" ); + equal( element.slider( "option", "disabled" ), true, "is disabled" ); + + handle().simulate( "drag", { dx: 10 } ); + equal( count, 2, "slider did not move" ); + + handle().simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); + equal( count, 2, "slider did not move" ); +}); + +test( "max", function() { + expect( 2 ); + element = $( "<div></div>" ); + + options = { + max: 37, + min: 6, + orientation: "horizontal", + step: 1, + value: 50 + }; + + element.slider( options ); + ok(element.slider( "option", "value" ) === options.value, "value option is not contained by max" ); + ok(element.slider( "value" ) === options.max, "value method is contained by max" ); + element.slider( "destroy" ); + +}); + +test( "min", function() { + expect( 2 ); + element = $( "<div></div>" ); + + options = { + max: 37, + min: 6, + orientation: "vertical", + step: 1, + value: 2 + }; + + element.slider( options ); + ok( element.slider( "option", "value" ) === options.value, "value option is not contained by min" ); + ok( element.slider( "value" ) === options.min, "value method is contained by min" ); + element.slider( "destroy" ); + +}); + +test( "orientation", function() { + expect( 6 ); + element = $( "#slider1" ); + + options = { + max: 2, + min: -2, + orientation: "vertical", + value: 1 + }; + + var percentVal = ( options.value - options.min ) / ( options.max - options.min ) * 100; + + element.slider( options ).slider( "option", "orientation", "horizontal" ); + ok( element.is( ".ui-slider-horizontal" ), "horizontal slider has class .ui-slider-horizontal" ); + ok( !element.is( ".ui-slider-vertical" ), "horizontal slider does not have class .ui-slider-vertical" ); + equal( handle()[0].style.left, percentVal + "%", "horizontal slider handle is positioned with left: %" ); + + element.slider( "destroy" ) ; + + options = { + max: 2, + min: -2, + orientation: "horizontal", + value: -1 + }; + + percentVal = ( options.value - options.min ) / ( options.max - options.min ) * 100; + + element.slider( options ).slider( "option", "orientation", "vertical" ); + ok( element.is( ".ui-slider-vertical" ), "vertical slider has class .ui-slider-vertical" ); + ok( !element.is( ".ui-slider-horizontal" ), "vertical slider does not have class .ui-slider-horizontal" ); + equal( handle()[0].style.bottom, percentVal + "%", "vertical slider handle is positioned with bottom: %" ); + + element.slider( "destroy" ); + +}); + +//spec: http://wiki.jqueryui.com/Slider#specs +// value option/method: the value option is not restricted by min/max/step. +// What is returned by the value method is restricted by min (>=), max (<=), and step (even multiple) +test( "step", function() { + expect( 9 ); + element = $( "<div></div>" ).slider({ + min: 0, + value: 0, + step: 10, + max: 100 + }); + equal( element.slider( "value" ), 0 ); + + element.slider( "value", 1 ); + equal( element.slider( "value" ), 0 ); + + element.slider( "value", 9 ); + equal( element.slider( "value" ), 10 ); + + element.slider( "value", 11 ); + equal( element.slider( "value" ), 10 ); + + element.slider( "value", 19 ); + equal( element.slider( "value" ), 20 ); + + element = $( "<div></div>" ).slider({ + min: 0, + value: 0, + step: 20, + max: 100 + }); + element.slider( "value", 0 ); + + element.slider( "option", "value", 1 ); + equal( element.slider( "value" ), 0 ); + + element.slider( "option", "value", 9 ); + equal( element.slider( "value" ), 0 ); + + element.slider( "option", "value", 11 ); + equal( element.slider( "value" ), 20 ); + + element.slider( "option", "value", 19 ); + equal( element.slider( "value" ), 20 ); + + element.slider( "destroy" ); +}); + +//test( "value", function() { +// ok(false, "missing test - untested code is broken code." ); +//}); + +test( "values", function() { + expect( 2 ); + + // testing multiple ranges on the same page, the object reference to the values + // property is preserved via multiple range elements, so updating options.values + // of 1 slider updates options.values of all the others + var ranges = $([ + document.createElement( "div" ), + document.createElement( "div" ) + ]).slider({ + range: true, + values: [ 25, 75 ] + }); + + notStrictEqual( + ranges.eq( 0 ).data( "ui-slider" ).options.values, + ranges.eq( 1 ).data( "ui-slider" ).options.values, + "multiple range sliders should not have a reference to the same options.values array" + ); + + ranges.eq( 0 ).slider( "values", 0, 10 ); + + notEqual( + ranges.eq( 0 ).slider( "values", 0 ), + ranges.eq( 1 ).slider( "values", 0 ), + "the values for multiple sliders should be different" + ); +}); + +test( "range", function() { + expect( 33 ); + var range; + + // min + element = $( "<div></div>" ).slider({ + range: "min", + min: 1, + max: 10, + step: 1 + }); + + equal( element.find( ".ui-slider-handle" ).length, 1, "range min, one handle" ); + equal( element.find( ".ui-slider-range-min" ).length, 1, "range min" ); + element.slider( "destroy" ); + + // max + element = $( "<div></div>" ).slider({ + range: "max", + min: 1, + max: 10, + step: 1 + }); + + equal( element.find( ".ui-slider-handle" ).length, 1, "range max, one handle" ); + equal( element.find( ".ui-slider-range-max" ).length, 1, "range max" ); + element.slider( "destroy" ); + + // true + element = $( "<div></div>" ).slider({ + range: true, + min: 1, + max: 10, + step: 1 + }); + + range = element.find( ".ui-slider-range" ); + equal( element.find( ".ui-slider-handle" ).length, 2, "range true, two handles" ); + ok( !range.is( ".ui-slider-range-min" ), "range true" ); + ok( !range.is( ".ui-slider-range-max" ), "range true" ); + element.slider( "destroy" ); + + // Change range from min to max + element = $( "<div></div>" ).slider({ + range: "min", + min: 1, + max: 10, + step: 1 + }).slider( "option", "range", "max" ); + + equal( element.find( ".ui-slider-handle" ).length, 1, "range switch from min to max, one handle" ); + equal( element.find( ".ui-slider-range-min" ).length, 0, "range switch from min to max" ); + equal( element.find( ".ui-slider-range-max" ).length, 1, "range switch from min to max" ); + element.slider( "destroy" ); + + // Change range from max to min + element = $( "<div></div>" ).slider({ + range: "max", + min: 1, + max: 10, + step: 1 + }).slider( "option", "range", "min" ); + + equal( element.find( ".ui-slider-handle" ).length, 1, "range switch from max to min, one handle" ); + equal( element.find( ".ui-slider-range-max" ).length, 0, "range switch from max to min" ); + equal( element.find( ".ui-slider-range-min" ).length, 1, "range switch from max to min" ); + element.slider( "destroy" ); + + // Change range from max to true + element = $( "<div></div>" ).slider({ + range: "max", + min: 1, + max: 10, + step: 1 + }).slider( "option", "range", true ); + + equal( element.find( ".ui-slider-handle" ).length, 2, "range switch from max to true, two handles" ); + equal( element.find( ".ui-slider-range-max" ).length, 0, "range switch from max to true" ); + equal( element.find( ".ui-slider-range-min" ).length, 0, "range switch from max to true" ); + equal( element.slider( "option", "value" ), 0 , "option value" ); + equal( element.slider( "value" ), 1 , "value" ); + deepEqual( element.slider( "option", "values" ), [1, 1], "option values" ); + deepEqual( element.slider( "values" ), [1, 1], "values" ); + element.slider( "destroy" ); + + // Change range from true to min + element = $( "<div></div>" ).slider({ + range: true, + min: 1, + max: 10, + step: 1 + }).slider( "option", "range", "min" ); + + equal( element.find( ".ui-slider-handle" ).length, 1, "range switch from true to min, one handle" ); + equal( element.find( ".ui-slider-range-max" ).length, 0, "range switch from true to min" ); + equal( element.find( ".ui-slider-range-min" ).length, 1, "range switch from true to min" ); + equal( element.slider( "option", "value" ), 1, "value" ); + equal( element.slider( "value" ), 1 , "value" ); + equal( element.slider( "option", "values" ), null, "values" ); + deepEqual( element.slider( "values" ), [] , "values" ); + element.slider( "destroy" ); + + // Change range from true to false + element = $( "<div></div>" ).slider({ + range: true, + min: 1, + max: 10, + step: 1 + }).slider( "option", "range", false ); + equal( element.find( ".ui-slider-handle" ).length, 2, "range switch from true to false, both handles remain" ); + equal( element.find( ".ui-slider-range" ).length, 0, "range switch from true to false" ); + equal( element.slider( "option", "value" ), 0 , "option value" ); + equal( element.slider( "value" ), 1 , "value" ); + deepEqual( element.slider( "option", "values" ), [1, 1], "option values" ); + deepEqual( element.slider( "values" ), [1, 1], "values" ); + element.slider( "destroy" ); +}); + +})( jQuery ); |