dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
403 lines (338 loc) • 15 kB
HTML
<html>
<head>
<title>doh.robot Calendar A11Y Test</title>
<style>
@import "../../../util/doh/robot/robot.css";
</style>
<!-- required: dojo.js -->
<script type="text/javascript" src="../../../dojo/dojo.js"
data-dojo-config="isDebug: true"></script>
<script type="text/javascript">
require([
"doh/runner", "dojo/robotx",
"dojo/_base/array", "dojo/date", "dojo/date/locale", "dojo/dom", "dojo/keys", "dojo/_base/lang",
"dojo/query", "dojo/sniff",
"dijit/tests/helpers", "dojo/domReady!"
], function(doh, robot, array, date, datelocale, dom, keys, lang, query, has, helpers){
robot.initRobot('../test_Calendar.html');
doh.register(function setup(){
// get pointer to registry in the iframe
registry = robot.window.require("dijit/registry");
dfocus = robot.window.require("dijit/focus");
});
// refs to Calendar widgets
var cal1, cal5;
// log of calls to onChange handler
var changes = [];
doh.register("API", [
function noValue(){
// refs to Calendar widget
cal1 = registry.byId('calendar1');
// Although Calendar and DateTextBox prototypes defined value as Date("")
// (so that the parser knows value is a Date rather than a string),
// the convention is to use null to represent a blank DateTextBox or Calendar w/no selection
doh.is(null, registry.byId("calendar1").get("value"), 'initial get("value"), no selection');
cal1.set("value", new Date(2009, 8, 16));
doh.is(0, date.compare(new Date(2009, 8, 16), cal1.get('value')), 'get("value") after set');
cal1.set("value", null);
doh.is(null, cal1.get("value"), 'get("value") after set to null');
},
function initialValue(){
cal5 = registry.byId("calendar5");
var selectedDate = query(".dijitCalendarSelectedDate", cal5.domNode);
doh.is(1, selectedDate.length, "date is selected");
doh.is("14", helpers.innerText(selectedDate[0]), "selected date");
var selectedMonth = query(".dijitCalendarCurrentMonthLabel", cal5.domNode);
doh.is(1, selectedMonth.length, "month is selected");
doh.is("March", helpers.innerText(selectedMonth[0]), "selected month");
var selectedYear = query(".dijitCalendarSelectedYear", cal5.domNode);
doh.is(1, selectedYear.length, "year is selected");
doh.is("2008", helpers.innerText(selectedYear[0]), "selected year");
}
]);
// Test aria roles, etc.
doh.register("aria", function(){
// test all days are loaded correctly
var dateCells = registry.byId("calendar1").dateCells;
array.forEach(dateCells, function(cellNode){
doh.is("false", cellNode.getAttribute("aria-selected"), "aria-selected should be false at startup");
doh.is(undefined, cellNode.getAttribute("aria-disabled should be undefined at startup"), "aria-disabled");
});
// disable weekends
array.forEach(registry.toArray(), function(c){
if(c.isDisabledDate){
c.isDisabledDate = datelocale.isWeekend;
c._populateGrid();
}
});
// select a day
registry.byId("calendar1").set("value", new Date(2009, 8, 15));
array.forEach(dateCells, function(cellNode, index){
var selected = cellNode.getAttribute("aria-selected");
var disabled = cellNode.getAttribute("aria-disabled");
helpers.innerText(cellNode)==="15" ? doh.is("true", selected, "aria-selected should be true: "+helpers.innerText(cellNode))
: doh.is("false", selected, "aria-selected should still be true: "+helpers.innerText(cellNode));
(index%7==0) || (index%7==6) ? doh.is("true", disabled, "aria-disabled should be true for weekends: "+index)
: doh.t((disabled==undefined || disabled=="" || disabled=="false"), "aria-disabled should still be undefined, 'false', or ''. Index was: "+index+" Value was: "+disabled);
});
// enable all again
array.forEach(registry.toArray(), function(c){
if(c.isDisabledDate){
c.isDisabledDate = function(){return false;};
c._populateGrid();
}
});
// select a different day
registry.byId("calendar1").set("value", new Date(2009, 8, 17));
array.forEach(dateCells, function(cellNode, index){
var selected = cellNode.getAttribute("aria-selected");
var disabled = cellNode.getAttribute("aria-disabled");
helpers.innerText(cellNode)==="17" ? doh.is("true", selected, "aria-selected should be true for day 17: "+helpers.innerText(cellNode))
: doh.is("false", selected, "aria-selected should be false again: "+helpers.innerText(cellNode));
doh.t((disabled==undefined || disabled=="" || disabled=="false"), "aria-disabled should be undefined, 'false', or '' again");
});
});
// Tabindex test makes sure that there's exactly one tab stop on the calendar at all times
doh.register("tabindex", [
{
name: "forward",
timeout: 10000,
setUp: function(){
cal1.set("value", new Date(2009, 8, 16));
dom.byId("before").focus();
},
runTest: function(){
var d = new doh.Deferred();
// Tab in
robot.keyPress(keys.TAB, 1000, {});
robot.sequence(d.getTestErrback(lang.hitch(this, function(){
doh.is(16, helpers.innerText(dfocus.curNode), "first tab goes to selected day");
})), 500);
// Move around some
robot.keyPress(keys.RIGHT_ARROW, 0, {});
robot.keyPress(keys.DOWN_ARROW, 500, {});
robot.sequence(d.getTestErrback(lang.hitch(this, function(){
doh.is(24, helpers.innerText(dfocus.curNode), "move around some");
})), 500);
// Tab out
robot.keyPress(keys.TAB, 500, {});
robot.sequence(d.getTestCallback(lang.hitch(this, function(){
doh.is("after", dfocus.curNode.id, "next tab leaves calendar");
})), 500);
return d;
}
},
{
name: "reverse",
timeout: 10000,
runTest: function(){
var d = new doh.Deferred();
// shift-tab back into calendar, should go to previously focused day
robot.keyPress(keys.TAB, 500, {shift: true});
robot.sequence(d.getTestErrback(lang.hitch(this, function(){
doh.is(24, helpers.innerText(dfocus.curNode), "shift-tab returns to previously focused day");
})), 500);
// shift-tab out
robot.keyPress(keys.TAB, 500, {shift: true});
robot.sequence(d.getTestCallback(lang.hitch(this, function(){
doh.is("before", dfocus.curNode.id, "next shift-tab leaves calendar");
})), 500);
return d;
}
},
{
name: "advance a month",
timeout: 10000,
runTest: function(){
var d = new doh.Deferred();
// Tab in
robot.keyPress(keys.TAB, 500, {});
robot.sequence(d.getTestErrback(lang.hitch(this, function(){
doh.is(24, helpers.innerText(dfocus.curNode), "first tab goes to selected day");
})), 500);
// Move to next month
robot.keyPress(keys.PAGE_DOWN, 0, {});
robot.sequence(d.getTestErrback(lang.hitch(this, function(){
doh.is(24, helpers.innerText(dfocus.curNode), "moved to same day, but new month");
})), 500);
// Tab out
robot.keyPress(keys.TAB, 500, {});
robot.sequence(d.getTestCallback(lang.hitch(this, function(){
doh.is("after", dfocus.curNode.id, "next tab leaves calendar");
})), 500);
return d;
}
},
{
name: "reverse again",
timeout: 10000,
runTest: function(){
var d = new doh.Deferred();
// shift-tab back into calendar, should go to previously focused day
robot.keyPress(keys.TAB, 500, {shift: true});
robot.sequence(d.getTestErrback(lang.hitch(this, function(){
doh.is(24, helpers.innerText(dfocus.curNode), "shift-tab returns to previously focused day");
})), 500);
// shift-tab out
robot.keyPress(keys.TAB, 500, {shift: true});
robot.sequence(d.getTestCallback(lang.hitch(this, function(){
doh.is("before", dfocus.curNode.id, "next shift-tab leaves calendar");
})), 500);
return d;
}
}
]);
// Make sure that all the navigation and selection keystrokes work
doh.register("navigation", [
{
name: "arrow navigation",
timeout: 10000,
setUp: function(){
// refs to Calendar widget
cal1 = registry.byId('calendar1');
cal1.set("value", new Date(2009, 8, 16));
// setup onChange handler to monitor onChange calls on cal1
cal1.on("change", function(val){
console.log('onchange w/value: ', val);
changes.push(val);
});
},
runTest: function(){
var d = new doh.Deferred();
robot.sequence(function(){
// monitor onchange events
changes = [];
cal1.focus();
}, 500);
// Initial conditions
robot.sequence(d.getTestErrback(lang.hitch(this, function(){
// 16th is selected
var selected = query(".dijitCalendarSelectedDate", cal1.domNode);
doh.is(1, selected.length, "one selected node");
doh.is("16", helpers.innerText(selected[0]));
// initial focus is on selected value
doh.is("16", helpers.innerText(dfocus.curNode));
// and get("value") working
doh.is(0, date.compare(new Date(2009, 8, 16), cal1.get('value')), 'get("value")');
})), 1000);
// Mouse moves around focus without changing value
robot.keyPress(keys.RIGHT_ARROW, 500, {});
robot.sequence(d.getTestErrback(lang.hitch(this, function(){
// focus moved from 16 to 17
doh.is(17, helpers.innerText(dfocus.curNode));
doh.is(0, date.compare(new Date(2009, 8, 16), cal1.get('value')), 'value unchanged');
// 16th is still selected
var selected = query(".dijitCalendarSelectedDate", cal1.domNode);
doh.is(1, selected.length, "one selected node");
doh.is("16", helpers.innerText(selected[0]));
})), 500);
robot.keyPress(keys.RIGHT_ARROW, 0, {});
robot.sequence(d.getTestErrback(lang.hitch(this, function(){
doh.is(18, helpers.innerText(dfocus.curNode));
})), 500);
robot.keyPress(keys.DOWN_ARROW, 0, {});
robot.sequence(d.getTestErrback(lang.hitch(this, function(){
doh.is(25, helpers.innerText(dfocus.curNode));
})), 500);
robot.keyPress(keys.LEFT_ARROW, 0, {});
robot.sequence(d.getTestErrback(lang.hitch(this, function(){
doh.is(24, helpers.innerText(dfocus.curNode));
})), 500);
robot.keyPress(keys.UP_ARROW, 0, {});
robot.sequence(d.getTestErrback(lang.hitch(this, function(){
doh.is(17, helpers.innerText(dfocus.curNode));
})), 500);
robot.keyPress(keys.UP_ARROW, 0, {});
robot.sequence(d.getTestErrback(lang.hitch(this, function(){
doh.is(10, helpers.innerText(dfocus.curNode));
})), 500);
robot.keyPress(keys.ENTER, 0, {});
robot.sequence(d.getTestCallback(lang.hitch(this, function(){
var value = cal1.get('value');
doh.is(0, date.compare(new Date(2009, 8, 10), value), 'actual value is ' + value);
doh.is(1, changes.length, 'onchange events');
doh.is(0, date.compare(new Date(2009, 8, 10), changes[0]),
'value reported by onchange: ' + changes[0] +
', should be ' + new Date(2009, 8, 10));
})), 1000);
return d;
}
},
{
name: "month navigation",
timeout: 5000,
setUp: function(){
// refs to Calendar widget
cal1 = registry.byId('calendar1');
cal1.set("value", new Date(2008, 0, 31));
},
runTest: function(){
var d = new doh.Deferred();
robot.sequence(function(){
cal1.focus();
}, 500);
robot.keyPress(keys.PAGE_DOWN, 1000, {});
robot.sequence(d.getTestErrback(lang.hitch(this, function(){
// focus moved from jan 31 to feb 29
doh.is(29, helpers.innerText(dfocus.curNode));
doh.is(0, date.compare(new Date(2008, 0, 31), cal1.get('value')), 'value unchanged (first page down)');
// month label should have changed
var monthLabel = query(".dijitCalendarCurrentMonthLabel", cal1.domNode);
doh.is(1, monthLabel.length, "one month label");
doh.is("February", helpers.innerText(monthLabel[0]));
// jan 31 from previous month still visible, should be shown as selected
var selected = query(".dijitCalendarSelectedDate", cal1.domNode);
doh.is(1, selected.length, "no selected node");
})), 500);
robot.keyPress(keys.PAGE_DOWN, 500, {});
robot.sequence(d.getTestErrback(lang.hitch(this, function(){
// focus moved from jan 31 to feb 29
doh.is(29, helpers.innerText(dfocus.curNode));
doh.is(0, date.compare(new Date(2008, 0, 31), cal1.get('value')), 'value unchanged (second page down)');
// since january no longer visible, no selected date should be visible
var selected = query(".dijitCalendarSelectedDate", cal1.domNode);
doh.is(0, selected.length, "no selected node");
})), 500);
robot.keyPress(keys.SPACE, 500, {});
robot.sequence(d.getTestCallback(lang.hitch(this, function(){
var value = cal1.get('value');
doh.is(0, date.compare(new Date(2008, 2, 29), value), 'actual value is ' + value);
})), 1000);
return d;
}
},
{
name: "month+year navigation",
timeout: 5000,
setUp: function(){
// refs to Calendar widget
cal1 = registry.byId('calendar1');
cal1.set("value", new Date(2008, 1, 15));
},
runTest: function(){
var d = new doh.Deferred();
robot.sequence(function(){
cal1.focus();
}, 500);
robot.keyPress(keys.END, 1000, {});
// Chrome switches tabs with ctrl+page up/down (not even a keydown is generated), yet not Safari.
// I don't see a way to do feature-detection since browser window focus is lost.
robot.keyPress(keys.PAGE_DOWN, 500, has("chrome") ? {alt:true} : {ctrl:true});
robot.keyPress(keys.PAGE_UP, 500, has("chrome") ? {alt:true} : {ctrl:true});
robot.keyPress(keys.PAGE_UP, 500, has("chrome") ? {alt:true} : {ctrl:true});
robot.keyPress(keys.ENTER, 500);
robot.sequence(d.getTestCallback(lang.hitch(this, function(){
var value = cal1.get('value');
doh.is(0, date.compare(new Date(2007, 1, 28), value), 'actual value is ' + value);
})), 1000);
return d;
}
}
]);
doh.run();
});
</script>
</head>
</html>