r1164 - in branches/dev/slider: tests tests/visual ui
Author: rdworth
Date: Sun Dec 14 21:17:57 2008
New Revision: 1164
Modified:
branches/dev/slider/tests/slider.js
branches/dev/slider/tests/visual/slider.html
branches/dev/slider/ui/ui.slider.js
Log:
/branches/dev/slider: started unit tests in slider refactor branch
Modified: branches/dev/slider/tests/slider.js
==============================================================================
--- branches/dev/slider/tests/slider.js (original)
+++ branches/dev/slider/tests/slider.js Sun Dec 14 21:17:57 2008
@@ -3,54 +3,21 @@
*/
(function($) {
//
-// Selectable Test Helper Functions
+// Slider Test Helper Functions
//
var defaults = {
- animate: false,
- axis: "???",
- disabled: false,
- distance: 1,
- handle: ".ui-slider-handle",
- handles: null,
+ axis: 'horizontal',
max: 100,
min: 0,
- noKeyboard: false,
- range: false,
- realMax: "???",
- round: true,
- startValue: "???",
- stepping: "???",
- steps: 0
+ step: 1,
+ value: 0
};
-var keyCodes = {
- leftArrow: 37,
- upArrow: 38,
- rightArrow: 39,
- downArrow: 40
-};
+var el;
-$.each(keyCodes, function(key, val) {
- $.fn[key] = function() {
- return this.simulate("keydown", { keyCode: val });
- }
-});
-
-function assertChange(stepping, start, result, action) {
- return function() {
- expect(1);
- var slider = $("#slider3").slider({
- stepping: stepping,
- startValue: start,
- min: 0,
- max: 1000,
- change: function(event, ui) {
- equals(ui.value, result, "changed to " + ui.value);
- }
- });
- action.apply(slider);
- }
+function handle() {
+ return el.find(".ui-slider-handle");
}
// Slider Tests
@@ -81,7 +48,7 @@
});
test("destroy", function() {
- expect(6);
+ expect(8);
$("<div></div>").appendTo('body').slider().slider("destroy").remove();
ok(true, '.slider("destroy") called on element');
@@ -89,7 +56,7 @@
$([]).slider().slider("destroy").remove();
ok(true, '.slider("destroy") called on empty collection');
- $('<div></div>').slider().slider("destroy").remove();
+
$('<div></div>').appendTo('body').remove().slider().slider("destroy").remove();
ok(true, '.slider("destroy") called on disconnected DOMElement');
$('<div></div>').slider().slider("destroy").slider("foo").remove();
@@ -98,10 +65,18 @@
el = $('<div></div>').slider();
var foo = el.slider("destroy").data("foo.slider");
el.remove();
- ok(true, 'arbitrary option getter after destroy');
+ ok(true, 'arbitrary option getter (.data) after destroy');
+
+ el = $('<div></div>').slider();
+ var foo = el.slider("destroy").slider("option", "foo");
+ el.remove();
+ ok(true, 'arbitrary option getter (.slider option method) after destroy');
$('<div></div>').slider().slider("destroy").data("foo.slider", "bar").remove();
- ok(true, 'arbitrary option setter after destroy');
+ ok(true, 'arbitrary option setter (.data) after destroy');
+
+
$('<div></div>').slider().slider("destroy").slider("options", "foo", "bar").remove();
+ ok(true, 'arbitrary option setter (.slider option method) after destroy');
});
test("defaults", function() {
@@ -113,85 +88,167 @@
el.remove();
});
-module("slider: single handle");
+module("slider");
-test("change one step via keydown", assertChange(1, undefined, 1,
function() {
- this.find("a").rightArrow();
-}))
-test("change - 10 steps via keydown", assertChange(10, 20, 10, function() {
- this.find("a").leftArrow();
-}))
-test("change +10 steps via keydown", assertChange(10, 20, 30, function() {
- this.find("a").rightArrow();
-}))
-
-test("moveTo, absolute value", assertChange(1, 1, 10, function() {
- this.slider("moveTo", 10);
-}))
-
-test("moveTo, absolute value as string", assertChange(1, 1, 10, function()
{
- this.slider("moveTo", "10");
-}))
-
-test("moveTo, absolute value, below min", assertChange(1, 1, 0, function()
{
- this.slider("moveTo", -10);
-}))
-
-test("moveTo, relative positive value", assertChange(1, 1, 11, function() {
- this.slider("moveTo", "+=10");
-}))
-
-test("moveTo, relative positive value, above max", assertChange(1, 10,
1000, function() {
- this.slider("moveTo", "+=2000");
-}))
-
-test("moveTo, relative negative value", assertChange(1, 20, 10, function()
{
- this.slider("moveTo", "-=10");
-}))
-
-test("options update min/max", function() {
- expect(2);
- var slider = $("#slider3").slider({
- stepping: 1,
- startValue: 1
- });
- slider.slider("moveTo", "-=10");
- equals(slider.slider("value"), 0);
- slider.data("min.slider", -10);
- slider.slider("moveTo", "-=20");
- equals(slider.slider("value"), -10);
-})
-
-module("slider: setup and teardown");
-
-test("destroy and recreate", function() {
- expect(3)
- var slider = $("#slider3").slider();
- slider.slider("moveTo", "+=20");
- equals(slider.slider("value"), 20);
- slider.slider("destroy");
-
- slider.slider("moveTo", "+=30");
- ok(true, "nothing happens after slider is destroyed");
-
- slider.slider().slider("moveTo", "30");
-
- equals(Math.round(slider.slider("value")), 30);
-})
-
-test("handle creation", function() {
- var slider = $("#slider1");
- equals(slider.children().size(), 0);
- slider.slider({
- handles: [
- { start: 0 },
- { start: 10 }
- ]
- });
- equals(slider.children().size(), 2);
- var instance = $.data(slider[0], "slider")
- equals(instance.handle.length, 2);
- ok(instance.handle.jquery, "handle must be a jquery object")
-})
+test("handle.keydown and value - axis: horizontal", function() {
+ el = $('<div></div>');
+
+ var options = {
+ axis: 'horizontal',
+ max: 5,
+ min: -5,
+ step: 1,
+ value: 0
+ };
+
+ el.slider(options);
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.UP });
+ ok(el.slider('value') == options.value, 'keydown UP does not change
value');
+ el.slider('destroy');
+
+ el.slider(options);
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.DOWN });
+ ok(el.slider('value') == options.value, 'keydown DOWN does not change
value');
+ el.slider('destroy');
+
+ el.slider(options);
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.LEFT });
+ ok(el.slider('value') == options.value - options.step, 'keydown LEFT
decreases value by step');
+ el.slider('destroy');
+
+ el.slider(options);
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.RIGHT });
+ ok(el.slider('value') == options.value + options.step, 'keydown RIGHT
increases value by step');
+ el.slider('destroy');
+
+ el.slider(options);
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.HOME });
+ ok(el.slider('value') == options.min, 'keydown HOME sets value to min');
+ el.slider('destroy');
+
+ el.slider(options);
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.END });
+ ok(el.slider('value') == options.max, 'keydown END sets value to max');
+ el.slider('destroy');
+
+});
+
+test("handle.keydown and value - axis: vertical", function() {
+ el = $('<div></div>');
+
+ var options = {
+ axis: 'vertical',
+ max: 5,
+ min: -5,
+ step: 1,
+ value: 0
+ };
+
+ el.slider(options);
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.UP });
+ ok(el.slider('value') == options.value - options.step, 'keydown UP
decreases value by step');
+ el.slider('destroy');
+
+ el.slider(options);
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.DOWN });
+ ok(el.slider('value') == options.value + options.step, 'keydown DOWN
increases value by step');
+ el.slider('destroy');
+
+ el.slider(options);
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.LEFT });
+ ok(el.slider('value') == options.value, 'keydown LEFT does not change
value');
+ el.slider('destroy');
+
+ el.slider(options);
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.RIGHT });
+ ok(el.slider('value') == options.value, 'keydown RIGHT does not change
value');
+ el.slider('destroy');
+
+ el.slider(options);
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.HOME });
+ ok(el.slider('value') == options.min, 'keydown HOME sets value to min');
+ el.slider('destroy');
+
+ el.slider(options);
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.END });
+ ok(el.slider('value') == options.max, 'keydown END sets value to max');
+ el.slider('destroy');
+
+});
+
+module("slider: Options");
+
+test("axis", function() {
+ el = $('<div></div>');
+
+ var options = {
+ axis: 'vertical',
+ max: 2,
+ min: -2,
+ value: 1
+ };
+
+ var percentVal = (options.value - options.min) / (options.max -
options.min) * 100;
+
+ el.slider(options).slider("option", "axis", "horizontal");
+ ok(el.is('.ui-slider-horizontal'), "horizontal slider has
class .ui-slider-horizontal");
+ ok(!el.is('.ui-slider-vertical'), "horizontal slider does not have
class .ui-slider-vertical");
+ equals(handle().css('left'), percentVal + '%', "horizontal slider handle
is positioned with left: %");
+
+ el.slider('destroy');
+
+ var options = {
+ axis: 'horizontal',
+ max: 2,
+ min: -2,
+ value: -1
+ };
+
+ var percentVal = (options.value - options.min) / (options.max -
options.min) * 100;
+
+ el.slider(options).slider("option", "axis", "vertical");
+ ok(el.is('.ui-slider-vertical'), "vertical slider has
class .ui-slider-vertical");
+ ok(!el.is('.ui-slider-horizontal'), "vertical slider does not have
class .ui-slider-horizontal");
+ equals(handle().css('top'), percentVal + '%', "vertical slider handle is
positioned with top: %");
+
+ el.slider('destroy');
+
+});
+
+test("max", function() {
+ el = $('<div></div>');
+
+ var options = {
+ axis: 'horizontal',
+ max: 37,
+ min: 6,
+ step: 1,
+ value: 50
+ };
+
+ el.slider(options);
+ ok(el.slider("option", "value") == options.value, "value option is not
contained by max");
+ ok(el.slider("value") == options.max, "value method is contained by max");
+ el.slider('destroy');
+
+});
+
+test("min", function() {
+ el = $('<div></div>');
+
+ var options = {
+ axis: 'vertical',
+ max: 37,
+ min: 6,
+ step: 1,
+ value: 2
+ };
+
+ el.slider(options);
+ ok(el.slider("option", "value") == options.value, "value option is not
contained by min");
+ ok(el.slider("value") == options.min, "value method is contained by min");
+ el.slider('destroy');
+
+});
})(jQuery);
Modified: branches/dev/slider/tests/visual/slider.html
==============================================================================
--- branches/dev/slider/tests/visual/slider.html (original)
+++ branches/dev/slider/tests/visual/slider.html Sun Dec 14 21:17:57 2008
@@ -10,7 +10,7 @@
<script type="text/javascript">
$(function() {
$("#slider1").slider();
- $("#slider2").slider({ max: 10, step: 2, value: 3, axis: 'vertical'
}).slider('disable');
+ $("#slider2").slider({ max: 10, step: 2, value: 3, axis: 'vertical' });
});
</script>
</head>
Modified: branches/dev/slider/ui/ui.slider.js
==============================================================================
--- branches/dev/slider/ui/ui.slider.js (original)
+++ branches/dev/slider/ui/ui.slider.js Sun Dec 14 21:17:57 2008
@@ -82,10 +82,16 @@
return this._value();
},
- _setData: function(key, value){
+ _setData: function(key, value) {
$.widget.prototype._setData.apply(this, arguments);
switch (key) {
+ case 'axis':
+ this.element
+ .removeClass("ui-slider-horizontal ui-slider-vertical")
+ .addClass("ui-slider-" + this._axis());
+ this._refreshValue();
+ break;
case 'value':
this._refreshValue();
break;
@@ -127,7 +133,7 @@
},
_refreshValue: function() {
- var valPercent = this.value() / this._valueMax() * 100;
+ var valPercent = (this.value() - this._valueMin()) / (this._valueMax() -
this._valueMin()) * 100;
this.handle.css(this.options.axis == 'horizontal' ? 'left' : 'top',
valPercent + '%');
}