f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce// copied this from event-key-test.js to add tests for changing value by keyboard
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas GustafssonY.Node.prototype.key = function (keyCode, charCode, mods, type) {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce config.charCode = config.keyCode = config.which = charCode || keyCode;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce config.charCode = config.keyCode = config.which = charCode || keyCode;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce// END copied this from event-key-test.js to add tests for changing value by keyboard
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric LuceY.Node.prototype.simulate = function (type, config) {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce args = [this._node, type].concat(Y.Array(arguments, 1, true));
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce setUp: function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce tearDown: function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce "test default construction": function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.isInstanceOf( Y.Slider, new Y.Slider() );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce "test SliderBase construction": function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.isInstanceOf( Y.SliderBase, new Y.SliderBase() );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce "test render(selector)": function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce '<div class="floated" style="float:left"></div>' + // float
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce (new Y.Slider().render("#testbed > div.floated"));
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.Assert.areEqual( 8, div.all("span,img").size() );
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.Assert.areEqual( 8, fl.all("span,img").size() );
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.Assert.areEqual( 8, p.all("span,img").size() );
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.Assert.areEqual( 8, span.all("span,img").size() );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce "test render( node )": function () {
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson '<div class="floated" style="float:left"></div>' + // float
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.assert( (fl.get("offsetHeight") > 0) );
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.assert( (span.get("offsetWidth") > 0) );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual( 8, div.all("span,img").size() );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual( 8, fl.all("span,img").size() );
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.Assert.areEqual( 8, span.all("span,img").size() );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce "test render: selector attrib in constructor": function () {
6383d77950149e7a94bf59d84f3e51e1aa4b3d95Brian Wellington '<div class="floated" style="float:left"></div>' + // float
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce (new Y.Slider({ render: "#testbed > div.floated" }));
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.assert( (div.get("offsetHeight") > 0) );
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.assert( (fl.get("offsetHeight") > 0) );
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.assert( (span.get("offsetHeight") > 0) );
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.assert( (span.get("offsetWidth") > 0) );
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.Assert.areEqual( 8, div.all("span,img").size() );
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.Assert.areEqual( 8, fl.all("span,img").size() );
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.Assert.areEqual( 8, p.all("span,img").size() );
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.Assert.areEqual( 8, span.all("span,img").size() );
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson "test render: node attrib in constructor": function () {
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson '<div class="floated" style="float:left"></div>' + // float
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.assert( (div.get("offsetHeight") > 0) );
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.assert( (fl.get("offsetHeight") > 0) );
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.assert( (span.get("offsetHeight") > 0) );
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.assert( (span.get("offsetWidth") > 0) );
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.Assert.areEqual( 8, div.all("span,img").size() );
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.Assert.areEqual( 8, fl.all("span,img").size() );
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.Assert.areEqual( 8, p.all("span,img").size() );
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.Assert.areEqual( 8, span.all("span,img").size() );
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson "test render off DOM": function () {
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson var container = Y.Node.create("<div></div>");
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual( 8, container.all("span,img").size() );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce "test destroy() before render": function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce "test destroy() after render off DOM": function () {
f37eb9482057adf62de35e634bfd574e59676950Andreas Gustafsson "test destroy() after render to DOM": function () {
f37eb9482057adf62de35e634bfd574e59676950Andreas Gustafsson Y.Assert.isTrue( slider.get("destroyed") );
f37eb9482057adf62de35e634bfd574e59676950Andreas Gustafsson Y.Assert.isNull( Y.one("#testbed").get("firstChild") );
f37eb9482057adf62de35e634bfd574e59676950Andreas Gustafsson setUp: function () {
f37eb9482057adf62de35e634bfd574e59676950Andreas Gustafsson Y.one('body').append('<div id="testbed"></div>');
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson "test getValue() and setValue(v) before render": function () {
f37eb9482057adf62de35e634bfd574e59676950Andreas Gustafsson // out of range constrained by setter
f37eb9482057adf62de35e634bfd574e59676950Andreas Gustafsson Y.Assert.areEqual( s.get('value'), s.getValue() );
a9f5be43488d374aeb222e8870d6b522f07530bbBrian Wellington Y.Assert.areEqual( s.get('value'), s.getValue() );
a9f5be43488d374aeb222e8870d6b522f07530bbBrian Wellington "test getValue() and setValue(v) after render() to hidden container": function () {
a9f5be43488d374aeb222e8870d6b522f07530bbBrian Wellington var container = Y.Node.create('<div></div>'),
a9f5be43488d374aeb222e8870d6b522f07530bbBrian Wellington Y.Assert.areEqual( s.get('value'), s.getValue() );
f37eb9482057adf62de35e634bfd574e59676950Andreas Gustafsson Y.Assert.areEqual( s.get('value'), s.getValue() );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce "test getValue() and setValue(v) after render() to DOM": function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce var s = this.slider;
7fca810d8735063703afff4208c8e92cf6b5ca6aAndreas Gustafsson Y.Assert.areEqual( s.get('value'), s.getValue() );
7fca810d8735063703afff4208c8e92cf6b5ca6aAndreas Gustafsson Y.Assert.areEqual( s.get('value'), s.getValue() );
7fca810d8735063703afff4208c8e92cf6b5ca6aAndreas Gustafsson "setValue(v) then render() should position thumb": function () {
7fca810d8735063703afff4208c8e92cf6b5ca6aAndreas Gustafsson Y.Assert.areEqual( 27, parseInt(s.thumb.getStyle("left"),10) );
7fca810d8735063703afff4208c8e92cf6b5ca6aAndreas Gustafsson "setValue(v) after render() should move the thumb": function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual( 0, parseInt(s.thumb.getStyle('left'),10) );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual( 27, parseInt(s.thumb.getStyle('left'),10) );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual( 0, parseInt(s.thumb.getStyle('left'),10) );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual( 135, parseInt(s.thumb.getStyle('left'),10) );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce "setValue(v) when hidden should still move the thumb": function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce var s = this.slider;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual( 0, parseInt(s.thumb.getStyle('left'),10) );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual( 27, parseInt(s.thumb.getStyle('left'),10) );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual( 27, parseInt(s.thumb.getStyle('left'),10) );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce // TODO This is a bug. invalid construction value should fallback
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce // to specified attribute default
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce "axis should only accept 'x', 'X', 'y', and 'Y'": true
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce setUp: function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.one('body').append('<span id="testbed"></span>');
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce tearDown: function () {
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson "test axis": function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce slider = new Y.Slider({ axis: 'x' }).render( testbed ),
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.assert( (bb.get("offsetWidth") > 100), "offsetWidth > 100" );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.assert( (bb.get("offsetHeight") < 50), "offsetHeight < 50" );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce slider = new Y.Slider({ axis: 'y' }).render( testbed );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.assert( (bb.get("offsetHeight") > 100), "offsetHeight > 100" );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.assert( (bb.get("offsetWidth") < 50), "offsetWidth < 50" );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce "axis should be writeOnce": function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce "axis should only accept 'x', 'X', 'y', and 'Y'": function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce var attempts = "a b c 1 2 3 yx yy YX YY vertical vert eks".split(/ /);
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce "test length": function () {
56f1285ca5d97d3205b74c32dc4de1ea7b69fea1Michael Sawyer Y.one('#testbed').append('<div id="slider"></div><div id="ref"></div>');
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce delta = bb.get('offsetWidth') - parseInt(slider.get('length'), 10);
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce slider = new Y.Slider({ length: 50 }).render( testbed );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual( (50 + delta), bb.get('offsetWidth') );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual( (300 + delta), bb.get('offsetWidth') );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual( (300 + delta), bb.get('offsetWidth') );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual( (ref.get('offsetWidth') + delta), bb.get('offsetWidth') );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce slider = new Y.Slider({ axis: 'y' }).render( testbed );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce delta = bb.get('offsetHeight') - parseInt(slider.get('length'), 10);
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce slider = new Y.Slider({ axis: 'y', length: 50 }).render( testbed );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual( (50 + delta), bb.get('offsetHeight') );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual( (300 + delta), bb.get('offsetHeight') );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual( (300 + delta), bb.get('offsetHeight') );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual( (ref.get('offsetHeight') + delta), bb.get('offsetHeight') );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce "thumbUrl should default at render()": function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce "thumbUrl should default to sam skin": function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual( Y.config.base + 'slider-base/assets/skins/sam/thumb-x.png', slider.get('thumbUrl') );
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce "thumbUrl should default from the current skin": function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual( Y.config.base + 'slider-base/assets/skins/foo/thumb-x.png', slider.get('thumbUrl') );
b9c96971964d87c2705c8dc29300ff8103479ee6Andreas Gustafsson "test clickableRail": function () {
b9c96971964d87c2705c8dc29300ff8103479ee6Andreas Gustafsson clientX: railRegion.left + Math.floor(railRegion.width / 2),
b9c96971964d87c2705c8dc29300ff8103479ee6Andreas Gustafsson clientY: railRegion.top + Math.floor(railRegion.height / 2)
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.isTrue(fired, "railMouseDown didn't fire for clickableRail: true");
b9c96971964d87c2705c8dc29300ff8103479ee6Andreas Gustafsson slider.rail.simulate('mousedown', where);
b9c96971964d87c2705c8dc29300ff8103479ee6Andreas Gustafsson Y.Assert.isFalse(fired, "railMouseDown fired for clickableRail: false");
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce "test min": function () {
c71787bd6356c92e9c7d0a174cd63ab17fcf34c6Eric Luce "test max": function () {
8e245ec21beee31a780de9b89ba1e8bb2b9f4c9aAndreas Gustafsson "test value": function () {
8e245ec21beee31a780de9b89ba1e8bb2b9f4c9aAndreas Gustafsson var slider = new Y.Slider({ min: 0, max: 100, value: 50 });
8e245ec21beee31a780de9b89ba1e8bb2b9f4c9aAndreas Gustafsson Y.Assert.areSame(0, slider.get('value'));
c71787bd6356c92e9c7d0a174cd63ab17fcf34c6Eric Luce "setting the value outside the min or max should constrain it": function () {
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson var slider = new Y.Slider({ min: 0, max: 100, value: 50 });
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce "setting the min or max should update the value if necessary": function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce var slider = new Y.Slider({ min: 0, max: 100, value: 50 });
c71787bd6356c92e9c7d0a174cd63ab17fcf34c6Eric Luce setUp: function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce tearDown: function () {
8e245ec21beee31a780de9b89ba1e8bb2b9f4c9aAndreas Gustafsson "clicking on the rail should move the thumb": function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce return parseInt(slider.thumb.getStyle('left'), 10);
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce clientX: railRegion.left + Math.floor(railRegion.width / 2),
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce clientY: railRegion.top + Math.floor(railRegion.height / 2)
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce setUp: function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce tearDown: function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce "test keyboard input": function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce thumb.key(33); // pageUp // .key() method is at top of this file
727f5b8846457a33d06f515a10a7e1aa849ddf18Andreas Gustafsson Y.Assert.areEqual(72, slider.get('value'));
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce // beyond max
a9f5be43488d374aeb222e8870d6b522f07530bbBrian Wellington Y.Assert.areEqual(100, slider.get('value'));
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce // min and beyond
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual(0, slider.get('value'), "= pageDown at min");
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce "test focus on thumb by click": function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce // 33 is pageUp. Increase value = init value + majorStep
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce // .key() method is at top of this file
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce thumb.simulate('click'); // Should set focus on thumb
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce * This tests changing the value by one unit
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce * that would not move the slider a full pixel
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce * and because of ticket #2531498, was
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce * changing the value back to previous value
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce * to match the thumb position
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce "test keyboard input and resultant value change, when Slider length is less than max - min": function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce thumb.key(38); // up // .key() method is at top of this file
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual(1, slider.get('value'), "** init at 0, then keyUp");
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce "test ARIA attributes while values change by keyboard input": function () {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual(0, thumb.getAttribute('aria-valuemin'));
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual(100, thumb.getAttribute('aria-valuemax'));
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce thumb.key(38); // up // .key() method is at top of this file
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual(51, thumb.getAttribute('aria-valuenow'));
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual(51, thumb.getAttribute('aria-valuetext'));
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.Assert.areEqual(61, thumb.getAttribute('aria-valuenow'));
a9f5be43488d374aeb222e8870d6b522f07530bbBrian Wellington Y.Assert.areEqual(61, thumb.getAttribute('aria-valuetext'));