342 lines
12 KiB
HTML
342 lines
12 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>doh.robot Slider Test</title>
|
|
|
|
<style>
|
|
@import "../../../../util/doh/robot/robot.css";
|
|
</style>
|
|
|
|
<!-- required: dojo.js -->
|
|
<script type="text/javascript" src="../../../../dojo/dojo.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
dojo.require("dijit.robotx");
|
|
|
|
// These are all the sliders
|
|
var accessibleSliders = ['slider1','slider2','slider3','programaticSlider'];
|
|
var accessibleSliderInit_min = [0.2,10,2,1200];
|
|
var accessibleSliderInit_max = [99.8,90,2,2800];
|
|
var sliderIds = ["slider1", "slider2", "slider3", "sliderH2", "programaticSlider"];
|
|
var sliderNames = ["horizontal1","vertical1","horizontal2","horizontalH2","programaticSlider"];
|
|
var onChange = {slider1: 'slider1input', slider2: 'slider2input', programaticSlider: 'sliderProgInput'};
|
|
|
|
var a11yBoundaryTest = function(slider, initValue, finalValue){
|
|
// summary:
|
|
// Sets slider to initValue, which should be either one below the
|
|
// max, or one above the min.
|
|
//
|
|
// Use the arrow key once to get to the final value, and
|
|
// then use the arrow key again (value shouldn't change second time)
|
|
|
|
var d = new doh.Deferred();
|
|
var key = initValue < finalValue ? dojo.keys.RIGHT_ARROW : dojo.keys.LEFT_ARROW;
|
|
|
|
// Set slider to initial value, one value away from the min or max
|
|
slider.set('value', initValue, false);
|
|
|
|
// Focus the slider
|
|
slider.focus();
|
|
|
|
// First key press moves to either min or max
|
|
doh.robot.keyPress(key, 500);
|
|
doh.robot.sequence(d.getTestErrback(function(){
|
|
doh.is(Number(finalValue).toFixed(1), Number(slider.get('value')).toFixed(1),
|
|
"value after first " + (key == dojo.keys.RIGHT_ARROW ? "right arrow" : "left arrow"));
|
|
if(onChange[slider.id]){
|
|
doh.is(Number(finalValue).toFixed(1), Number(parseFloat(dojo.byId(onChange[slider.id]).value)).toFixed(1),
|
|
"onchange after first " + (key == dojo.keys.RIGHT_ARROW ? "right arrow" : "left arrow"));
|
|
}
|
|
|
|
// Second key press should have no effect, but confirm it
|
|
doh.robot.keyPress(key, 500);
|
|
doh.robot.sequence(d.getTestCallback(function(){
|
|
doh.is(Number(finalValue).toFixed(1), Number(slider.get('value')).toFixed(1),
|
|
"value after second " + (key == dojo.keys.RIGHT_ARROW ? "right arrow" : "left arrow"));
|
|
if(onChange[slider.id]){
|
|
doh.is(Number(finalValue).toFixed(1), Number(parseFloat(dojo.byId(onChange[slider.id]).value)).toFixed(1),
|
|
"onchange after second " + (key == dojo.keys.RIGHT_ARROW ? "right arrow" : "left arrow"));
|
|
}
|
|
}), 500);
|
|
}), 500);
|
|
return d;
|
|
};
|
|
|
|
// machinery for testing keyboard manipulation of sliders
|
|
var eaVals = []; // array holding expected values and actual values after arrow etc. keypresses
|
|
var strokeIndex = 0;
|
|
var noteChanges;
|
|
|
|
var keyStrokeSetup = function(inSliderId){
|
|
// summary:
|
|
// Populates eaVals[] with expected slider values after each keystroke (in this test),
|
|
// and sets up listener to record actual value into same eaVals[] array.
|
|
|
|
var slider = dijit.byId(inSliderId);
|
|
eaVals = populateExpected(slider);
|
|
strokeIndex = 0;
|
|
noteChanges = dojo.global.dojo.connect(slider, "onChange", function(){
|
|
eaVals[strokeIndex++].actual = slider.get('value');
|
|
});
|
|
};
|
|
|
|
var populateExpected = function(/*Slider Widget*/inSlider){
|
|
// summary:
|
|
// Returns array of expected slider values after each keystroke (in this test)
|
|
|
|
var initVal = inSlider.get('value');
|
|
var eVals = [];
|
|
|
|
// The values expected by pressing HOME, right arrow five times,
|
|
// PgUp twice, PgDn, up arrow twice, down arrow once,
|
|
// left arrow once, and END.
|
|
inSlider.set('value', inSlider.minimum, false);
|
|
eVals.push({stroke: "HOME", expected: inSlider.get('value')});
|
|
for(var i = 0; i < 5; i++){
|
|
inSlider._bumpValue(1, false);
|
|
eVals.push({stroke: "RIGHT", expected: inSlider.get('value')});
|
|
}
|
|
for(i = 0; i < 2; i++){
|
|
inSlider._bumpValue(inSlider.pageIncrement, false);
|
|
eVals.push({stroke: "PgUp", expected: inSlider.get('value')});
|
|
}
|
|
inSlider._bumpValue(-inSlider.pageIncrement, false);
|
|
eVals.push({stroke: "PgDn", expected: inSlider.get('value')});
|
|
for(i = 0; i < 2; i++){
|
|
inSlider._bumpValue(1, false);
|
|
eVals.push({stroke: "UP", expected: inSlider.get('value')});
|
|
}
|
|
inSlider._bumpValue(-1, false);
|
|
eVals.push({stroke: "DOWN", expected: inSlider.get('value')});
|
|
inSlider._bumpValue(-1, false);
|
|
eVals.push({stroke: "LEFT", expected: inSlider.get('value')});
|
|
inSlider.set('value', inSlider.maximum, false);
|
|
eVals.push({stroke: "END", expected: inSlider.get('value')});
|
|
|
|
// reset <inSlider> back to its initial value, and return
|
|
inSlider.set('value', initVal, false);
|
|
return eVals;
|
|
};
|
|
|
|
var a11yTabFocusTest = function(inSliderId){
|
|
var d = new doh.Deferred();
|
|
var slider = dijit.byId(inSliderId);
|
|
var focusCount = 0;
|
|
var blurCount = 0;
|
|
var gotFocus = function(){
|
|
focusCount++;
|
|
};
|
|
var lostFocus = function(){
|
|
blurCount++;
|
|
};
|
|
var focusFunc = dojo.global.dojo.connect(slider.focusNode, "onfocus", gotFocus);
|
|
var blurFunc = dojo.global.dojo.connect(slider.focusNode, "onblur", lostFocus);
|
|
|
|
// insure a known focus starting point -- the slider to test.
|
|
slider.focus();
|
|
|
|
// Shift-tab away, tab to, tab away, shift-tab back.
|
|
doh.robot.keyPress(dojo.keys.TAB, 1000, {
|
|
shift: true
|
|
});
|
|
doh.robot.keyPress(dojo.keys.TAB, 500);
|
|
doh.robot.keyPress(dojo.keys.TAB, 500);
|
|
doh.robot.keyPress(dojo.keys.TAB, 500, {
|
|
shift: true
|
|
});
|
|
var checkGotFocus = function(){
|
|
doh.assertEqual(3, focusCount, slider.id + ": # of times focussed");
|
|
doh.assertEqual(2, blurCount, slider.id + ": # of times lost focus");
|
|
dojo.disconnect(focusFunc);
|
|
dojo.disconnect(blurFunc);
|
|
};
|
|
doh.robot.sequence(d.getTestCallback(checkGotFocus), 1000, 500);
|
|
return d;
|
|
};
|
|
|
|
var a11yKeystrokeTest = function(inSliderId){
|
|
var d = new doh.Deferred();
|
|
var slider = dijit.byId(inSliderId);
|
|
var initVal = slider.get('value');
|
|
// get focus on slider thumb before pressing keys.
|
|
slider.focus();
|
|
doh.robot.sequence(function(){
|
|
strokeIndex = 0;
|
|
}, 1000); // insure onChange events have stopped
|
|
doh.robot.keyPress(dojo.keys.HOME, 200);
|
|
doh.robot.keyPress(dojo.keys.RIGHT_ARROW, 1000);
|
|
doh.robot.keyPress(dojo.keys.RIGHT_ARROW, 200);
|
|
doh.robot.keyPress(dojo.keys.RIGHT_ARROW, 200);
|
|
doh.robot.keyPress(dojo.keys.RIGHT_ARROW, 200);
|
|
doh.robot.keyPress(dojo.keys.RIGHT_ARROW, 200);
|
|
doh.robot.keyPress(dojo.keys.PAGE_UP, 200);
|
|
doh.robot.keyPress(dojo.keys.PAGE_UP, 500);
|
|
doh.robot.keyPress(dojo.keys.PAGE_DOWN, 500);
|
|
doh.robot.keyPress(dojo.keys.UP_ARROW, 500);
|
|
doh.robot.keyPress(dojo.keys.UP_ARROW, 200);
|
|
doh.robot.keyPress(dojo.keys.DOWN_ARROW, 200);
|
|
doh.robot.keyPress(dojo.keys.LEFT_ARROW, 200);
|
|
doh.robot.keyPress(dojo.keys.END, 200);
|
|
var testPresses = function(){
|
|
dojo.disconnect(noteChanges);
|
|
slider.set('value', initVal, false);
|
|
for(var i = 0; i < eaVals.length; i++){
|
|
doh.assertEqual(eaVals[i].expected, eaVals[i].actual, eaVals[i].stroke + " (" + slider.id + ")");
|
|
}
|
|
};
|
|
doh.robot.sequence(d.getTestCallback(testPresses), 1000, 500);
|
|
return d;
|
|
};
|
|
|
|
dojo.ready(function(){
|
|
doh.robot.initRobot('../test_Slider.html');
|
|
|
|
// This tests that Slider is structured so that dojo.query can find the hidden input.
|
|
doh.register("dojo.query() by name",
|
|
function slider1(){
|
|
var slider = dijit.byId("slider1"),
|
|
queried = dojo.query("input[name=horizontal1]"),
|
|
bar = slider.valueNode.parentNode,
|
|
barWidth = bar.offsetWidth;
|
|
accessibleSliderInit_min[0] = 100 / (barWidth-1); // discover slider smallest non min value
|
|
accessibleSliderInit_max[0] = 100 - accessibleSliderInit_min[0]; // discover slider largest non max value
|
|
doh.is(1, queried.length, "Expected 1 slider with name horizontal1");
|
|
doh.is(slider.valueNode, queried[0], "Slider's valueNode did not match the one found by dojo.query.");
|
|
}
|
|
);
|
|
|
|
// This tests that pressing the arrow keys has no effect on a disabled slider
|
|
// TODO: this doesn't make sense, should just be testing that slider can't get
|
|
// focus. (And if it doesn't have focus then testing keystrokes is meaningless)
|
|
doh.register("disabledTest",{
|
|
name: accessibleSliders[0]+'_a11y_min',
|
|
slider: accessibleSliders[0],
|
|
timeout: 30000,
|
|
runTest: function(){
|
|
this.slider = dijit.byId(this.slider);
|
|
this.slider.set('disabled', true);
|
|
var value = accessibleSliderInit_min[0];
|
|
return a11yBoundaryTest(this.slider, value, value);
|
|
}
|
|
});
|
|
|
|
// This tests to make sure that the error keys don't go beyond the min or max values
|
|
doh.register("a11yBoundaryTest - min", {
|
|
name: accessibleSliders[0]+'_a11y_min',
|
|
slider: accessibleSliders[0],
|
|
timeout: 30000,
|
|
runTest: function(){
|
|
this.slider = dijit.byId(this.slider);
|
|
this.slider.set('disabled', false);
|
|
return a11yBoundaryTest(this.slider, accessibleSliderInit_min[0], this.slider.minimum);
|
|
}
|
|
});
|
|
doh.register("a11yBoundaryTest",{
|
|
name: accessibleSliders[0]+'_a11y_max',
|
|
slider: accessibleSliders[0],
|
|
timeout: 30000,
|
|
runTest: function(){
|
|
this.slider = dijit.byId(this.slider);
|
|
return a11yBoundaryTest(this.slider, accessibleSliderInit_max[0], this.slider.maximum);
|
|
}
|
|
});
|
|
|
|
// aria role and properties tests.
|
|
doh.register("a11yAria",
|
|
[
|
|
function ariaRole(){
|
|
var slider = dijit.byId(sliderIds[0]);
|
|
doh.is(slider.focusNode.getAttribute("role"), "slider", "aria role (slider)");
|
|
},
|
|
|
|
// test aria valuemin, valuemax, valuenow.
|
|
function ariaValue(){
|
|
var slider = dijit.byId(sliderIds[0]);
|
|
doh.is(slider.focusNode.getAttribute("aria-valuemin"), slider.minimum, "aria-valuemin");
|
|
doh.is(slider.focusNode.getAttribute("aria-valuemax"), slider.maximum, "aria-valuemax");
|
|
doh.is(slider.focusNode.getAttribute("aria-valuenow"), slider.get('value'), "aria-valuenow");
|
|
}
|
|
]);
|
|
|
|
// keyboard a11y tests (robot) -- tab focus
|
|
doh.register("a11yTabFocus",
|
|
[
|
|
{
|
|
name: "slider2TabFocus",
|
|
timeout: 9000,
|
|
runTest: function(){
|
|
return a11yTabFocusTest("slider2");
|
|
}
|
|
},
|
|
{
|
|
name: "slider3TabFocus",
|
|
timeout: 9000,
|
|
runTest: function(){
|
|
return a11yTabFocusTest("slider3");
|
|
}
|
|
}
|
|
]);
|
|
|
|
// keyboard a11y tests (robot) -- manipulate slider via keystrokes
|
|
doh.register("a11yKeystrokes",
|
|
[
|
|
{
|
|
name: "slider1Keystrokes",
|
|
timeout: 9000,
|
|
setUp: function(){
|
|
keyStrokeSetup("slider1");
|
|
},
|
|
runTest: function(){
|
|
return a11yKeystrokeTest("slider1");
|
|
}
|
|
},
|
|
{
|
|
name: "slider2Keystrokes",
|
|
timeout: 9000,
|
|
setUp: function(){
|
|
keyStrokeSetup("slider2");
|
|
},
|
|
runTest: function(){
|
|
return a11yKeystrokeTest("slider2");
|
|
}
|
|
},
|
|
{
|
|
name: "programaticSliderKeystrokes",
|
|
timeout: 9000,
|
|
setUp: function(){
|
|
keyStrokeSetup("programaticSlider");
|
|
},
|
|
runTest: function(){
|
|
return a11yKeystrokeTest("programaticSlider");
|
|
}
|
|
},
|
|
{
|
|
name: "disabledTabStop",
|
|
timeout: 9000,
|
|
runTest: function(){
|
|
var d = new doh.Deferred();
|
|
var slider = dijit.byId("programaticSlider");
|
|
var target = dijit.byId("slider3");
|
|
target.set('value', 1);
|
|
var initValue = target.get('value');
|
|
// get focus on slider thumb before pressing keys.
|
|
slider.focus();
|
|
// jump to slider3 (hopefully)
|
|
doh.robot.keyPress(dojo.keys.TAB, 1000, {
|
|
shift: true
|
|
});
|
|
doh.robot.keyPress(dojo.keys.END, 1000);
|
|
doh.robot.sequence(d.getTestCallback(function(){
|
|
doh.f(initValue == target.get('value'), "disabled tab stop should be skipped");
|
|
}), 500);
|
|
return d;
|
|
}
|
|
}
|
|
]);
|
|
doh.run();
|
|
});
|
|
</script>
|
|
</head>
|
|
</html>
|