UNPKG

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

281 lines (226 loc) 9.08 kB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>robot ColorPalette 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/dom", "dojo/dom-class", "dojo/keys", "dojo/_base/lang", "dojo/query", "dojo/sniff", "dojo/domReady!" ], function(doh, robot, dom, domClass, keys, lang, query, has){ robot.initRobot('../test_ColorPalette.html'); var big, small, prog; // log of calls to onChange handler var changes = []; 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 ColorPalette widgets big = registry.byId("big"); small = registry.byId("small"); prog = registry.byId("prog"); // setup onChange handler to monitor onChange calls big.on("change", function(val){ console.log('onchange w/value: ', val); changes.push(val); }); }); doh.register("dijit.ColorPalette tests", [ { name: "initial conditions", runTest: function(){ doh.f(big.get('value'), "no value for big"); doh.f(small.get('value'), "no value for small"); doh.f(prog.get('value'), "no value for prog"); } }, { name: "accessibility roles and attributes", runTest: function(){ doh.is(big.domNode.getAttribute("role"), "grid", "domNode role is grid"); var result = big.domNode.getAttribute("aria-label"); doh.t(!!result, "aria-label for big"); var table = query("table", big.domNode)[0]; doh.is(table.getAttribute("role"), "presentation", "table should be presentation"); var row = query("tr", table)[0]; doh.is(row.getAttribute("role"), "row", "tr should be role=row since domNode role=grid"); var td = query("td", row)[0]; doh.is(td.getAttribute("role"), "gridcell", "td role should be gridcell"); } }, // TODO: when attr() is implemented as a setter, add tests like big.set("value", "#ffc0cb") { name: "focus", timeout: 10000, runTest: function(){ var d = new doh.Deferred(); big.focus(); robot.sequence(d.getTestCallback(function(){ doh.is(0, changes.length, "no onchange events yet"); // test that focus is on top left cell var focus = dfocus.curNode; doh.t(focus, "something is focused"); var imgNode = focus.getElementsByTagName("img")[0]; doh.t(imgNode, "found image node"); var dye = big._getDye(focus); doh.is("#ffffff", dye.getValue(), "focused on white"); }), 500); return d; } }, { name: "arrow navigation", timeout: 10000, runTest: function(){ var d = new doh.Deferred(), enterPressed = false; // Move around some robot.keyPress(keys.RIGHT_ARROW, 500, {}); robot.keyPress(keys.RIGHT_ARROW, 500, {}); robot.keyPress(keys.DOWN_ARROW, 500, {}); robot.keyPress(keys.LEFT_ARROW, 500, {}); // Focus should follow the current position for the benefit of screen readers. robot.sequence(d.getTestErrback(lang.hitch(this, function(){ var focus = dfocus.curNode; doh.t(focus, "something is focused"); var imgNode = focus.getElementsByTagName("img")[0]; doh.t(imgNode, "found image node"); var dye = big._getDye(focus); doh.is("#ffc0cb", dye.getValue(), "focused on right color"); })), 1000); // Setup handler to catch onChange event from ENTER keypress below handle = big.on("change", d.getTestCallback(lang.hitch(this, function(val){ handle.remove(); handle = null; doh.is("#ffc0cb", val, "onChange() argument"); doh.is("#ffc0cb", big.get("value"), "get('value')"); doh.is(1, changes.length, 'just one onchange event'); doh.t(enterPressed, "onChange event didn't come until enter key was pressed"); big.set('value', null); doh.is(big.get('value'), null, "value has been cleared"); }))); // Select the current value robot.sequence(function(){ enterPressed = true; }, 0); robot.keyPress(keys.ENTER, 500, {}); return d; }, tearDown: function(){ if(handle){ handle.remove(); } } }, { name: "tab stops", timeout: 10000, runTest: function(){ // After the navigation above, make sure that there's (still) exactly one // tab stop associated w/the color picker var d = new doh.Deferred(); dom.byId("beforeBig").focus(); robot.keyPress(keys.TAB, 500, {}); robot.sequence(d.getTestErrback(function(){ doh.is("pink", dfocus.curNode.title, "tab into colorpalette, focus goes to pink (last focused cell)") }), 1000); robot.keyPress(keys.TAB, 500, {}); robot.sequence(d.getTestErrback(function(){ doh.is("afterBig", dfocus.curNode.id, "another tab, went to input after ColorPalette") }), 1000); robot.keyPress(keys.TAB, 500, {shift: true}); robot.sequence(d.getTestErrback(function(){ doh.is("pink", dfocus.curNode.title, "shift-tab back into colorpalette") }), 1000); robot.keyPress(keys.TAB, 500, {shift: true}); robot.sequence(d.getTestCallback(function(){ doh.is("beforeBig", dfocus.curNode.id, "another shift-tab, to input before ColorPalette") }), 1000); return d; } }, { name: "small palette (keyboard)", timeout: 10000, runTest: function(){ var d = new doh.Deferred(); // go to small colorpalette dom.byId("beforeSmall").focus(); robot.keyPress(keys.TAB, 500, {}); // select a value robot.keyPress(keys.DOWN_ARROW, 500, {}); robot.keyPress(keys.RIGHT_ARROW, 500, {}); robot.keyPress(keys.SPACE, 500, {}); robot.sequence(d.getTestCallback(function(){ var value = small.get('value'); doh.is("#ffff00", value); }), 1000); return d; } }, { name: "small palette (mouse)", timeout: 10000, runTest: function(){ var d = new doh.Deferred(); // Testing nls too... var red = query("td[title=rojo]", small.domNode); doh.is(1, red.length, "found rojo (red)"); robot.mouseMoveAt(red[0], 500); robot.mouseClick({left: true}, 500); if(has("mozilla")){ // workaround robot bug where first mouse click doesn't happen occasionally :-( robot.mouseClick({left: true}, 500); } var green = query("td[title=verde]", small.domNode); doh.is(1, green.length, "found verde (green)"); // Make sure <img> alt and title are translated. Not sure why they are being set at all though. var greenImg = query("img", green[0]); doh.is(1, greenImg.length, "found <img> inside of <td>"); doh.is("verde", greenImg[0].getAttribute("alt"), "img.alt"); doh.is("verde", greenImg[0].getAttribute("title"), "img.title"); robot.mouseMoveAt(green[0], 500); robot.mouseClick({left: true}, 500); if(has("mozilla")){ // workaround robot bug where first mouse click doesn't happen occasionally :-( robot.mouseClick({left: true}, 500); } robot.sequence(d.getTestCallback(function(){ // test that value set var value = small.get('value'); doh.is("#008000", value, "value"); // test that focus also got set var focus = dfocus.curNode; doh.t(focus, "something is focused"); var imgNode = focus.getElementsByTagName("img")[0]; doh.t(imgNode, "found image node"); var dye = small._getDye(focus); doh.is("#008000", dye.getValue(), "focused"); // test that selected style was removed from previously selected cell and added to new selection doh.f(domClass.contains(red[0], "dijitPaletteCellSelected"), "Red swatch should not have selected class, actual class is: " + red[0].className); doh.t(domClass.contains(green[0], "dijitPaletteCellSelected"), "Green swatch should have selected class, actual class is: " + green[0].className); }), 1000); return d; } }, function valuePreselected(){ var cp = registry.byId("valuePreselected"); doh.is("#0000ff", cp.get("value"), "get('value')"); doh.is("blue", query(".dijitPaletteCellSelected img", cp.domNode)[0].alt, "marked"); } ]); doh.run(); }); </script> </head> </html>