Context Navigation

source: Dev/branches/rest-dojo-ui/client/dijit/tests/robot/Toolbar.html @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago
Reworked project structure based on REST interaction and Dojo library. As soon as this is stable, the old jQueryUI branch can be removed (it's kept for reference).
File size: 11.3 KB

Line
1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2	"http://www.w3.org/TR/html4/strict.dtd">
3	<html>
4	<head>
5	<title>doh.robot Toolbar Test</title>
6
7	<style>
8	@import "../../../util/doh/robot/robot.css";
9	</style>
10
11	<!-- required: dojo.js -->
12	<script type="text/javascript" src="../../../dojo/dojo.js"
13	djConfig="isDebug: true"></script>
14
15	<script type="text/javascript">
16	dojo.require("dijit.robotx");
17
18	dojo.ready(function(){
19	doh.robot.initRobot('../test_Toolbar.html');
20
21	var toolbar1Before, toolbar1After, toolbar1, toolbar2, toolbar3, toolbar4;
22
23	doh.register("initial conditions",[
24	{
25	name: "creation",
26	setUp: function(){
27	toolbar1Before = dojo.byId("toolbar1Before");
28	toolbar1 = dijit.byId("toolbar1");
29	toolbar1After = dojo.byId("toolbar1After");
30	toolbar2 = dijit.byId("toolbar2");
31	toolbar3 = dijit.byId("toolbar3");
32	toolbar4 = dijit.byId("toolbar4");
33	},
34	runTest: function(){
35	// make sure that all the toolbars exist
36	doh.t(toolbar1, "toolbar 1");
37	doh.t(toolbar2, "toolbar 2");
38	doh.t(toolbar3, "toolbar 3");
39	doh.t(toolbar4, "toolbar 4");
40
41	// and that labels are shown except when showLabel==false
42	var cutText = dojo.query(".dijitButtonText", dojo.byId("toolbar1.cut"))[0];
43	doh.is(0, cutText.offsetWidth, "cut button - text hidden");
44
45	var copyText = dojo.query(".dijitButtonText", dojo.byId("toolbar1.copy"))[0];
46	doh.t(copyText.offsetWidth > 0, "copy button - text shown");
47	}
48	}
49	]);
50
51	doh.register("keyboard",[
52	{
53	name: "tab in and out",
54	timeout: 20000,
55	runTest: function(){
56	var d = new doh.Deferred();
57
58	doh.robot.sequence(d.getTestErrback(dojo.hitch(this, function(){
59	toolbar1Before.focus();
60	})), 500);
61
62	doh.robot.keyPress(dojo.keys.TAB, 500, {});
63	doh.robot.sequence(d.getTestErrback(dojo.hitch(this, function(){
64	doh.is("toolbar1.cut", dojo.global.dijit.focus.curNode.id, "cut, first visit");
65	})), 1000);
66
67	doh.robot.keyPress(dojo.keys.TAB, 500, {});
68	doh.robot.sequence(d.getTestErrback(dojo.hitch(this, function(){
69	doh.is("toolbar1After", dojo.global.dijit.focus.curNode.id);
70	})), 1000);
71
72	doh.robot.keyPress(dojo.keys.TAB, 500, {shift: true});
73	doh.robot.sequence(d.getTestErrback(dojo.hitch(this, function(){
74	doh.is("toolbar1.cut", dojo.global.dijit.focus.curNode.id, "cut, second visit");
75	})), 1000);
76
77	doh.robot.keyPress(dojo.keys.TAB, 500, {shift: true});
78	doh.robot.sequence(d.getTestCallback(dojo.hitch(this, function(){
79	doh.is("toolbar1Before", dojo.global.dijit.focus.curNode.id, "back before toolbar1");
80	})), 1000);
81
82	return d;
83	}
84	},
85
86	{
87	name: "left/right arrow keys",
88	timeout: 40000,
89	runTest: function(){
90	var d = new doh.Deferred();
91
92	// Disable a bunch of buttons to make sure that left/right arrow
93	// keys skip over disabled buttons, and also that initial focus
94	// goes to the first enabled button
95	dojo.forEach(["toolbar1.cut", "toolbar1.copy", "toolbar1.bold", "toolbar1.backcolor",
96	"toolbar1.forecolor", "toolbar1.combo2"], function(widgetName){
97	dijit.byId(widgetName).set("disabled", true);
98	});
99
100	// Initial focus (upon tabbing into toolbar) should go to first enabled button
101	toolbar1Before.focus();
102	doh.robot.keyPress(dojo.keys.TAB, 500, {});
103	doh.robot.sequence(d.getTestErrback(dojo.hitch(this, function(){
104	doh.is("toolbar1.italic", dojo.global.dijit.focus.curNode.id, "italic, first visit");
105	})), 1000);
106
107	// Remaining enabled positions that left/right arrow should navigate to (not including the initial leftmost button),
108	var focusPoints = ["toolbar1.dialog", "toolbar1.combo_button", "toolbar1.combo_arrow", "toolbar1.insertorderedlist"];
109
110	// Use right arrow key to visit every enabled button (and for combobutton to hit left and right sides)
111	dojo.forEach(focusPoints, function(str){
112	doh.robot.keyPress(dojo.keys.RIGHT_ARROW, 500, {});
113	doh.robot.sequence(d.getTestErrback(dojo.hitch(this, function(){
114	doh.is(str, dojo.global.dijit.focus.curNode.id, str + ", first visit");
115	})), 1000);
116	});
117
118	// Now go backwards
119	focusPoints.reverse();
120	focusPoints.shift();
121	dojo.forEach(focusPoints, function(str){
122	doh.robot.keyPress(dojo.keys.LEFT_ARROW, 500, {});
123	doh.robot.sequence(d.getTestErrback(dojo.hitch(this, function(){
124	doh.is(str, dojo.global.dijit.focus.curNode.id, str + ", second visit");
125	})), 1000);
126	});
127
128	// Test the TAB key takes us to the <input> after the toolbar.
129	// This confirms that the currently focused toolbar button
130	// is in the correct position in the tab order (ie, the position specified
131	// for the toolbar itself), and that there are no stray tabstops on the toolbar itself
132	// or on the other buttons.
133	doh.robot.keyPress(dojo.keys.TAB, 500, {});
134	doh.robot.sequence(d.getTestErrback(dojo.hitch(this, function(){
135	doh.is("toolbar1After", dojo.global.dijit.focus.curNode.id, "first time past toolbar1");
136	})), 1000);
137
138	// Make sure that we can still shift-tab back to before the toolbar too
139	doh.robot.keyPress(dojo.keys.TAB, 500, {shift: true});
140	doh.robot.sequence(d.getTestErrback(dojo.hitch(this, function(){
141	doh.is("toolbar1.italic", dojo.global.dijit.focus.curNode.id, "italic, after shift-tab back into toolbar");
142	})), 1000);
143
144	doh.robot.keyPress(dojo.keys.TAB, 500, {shift: true});
145	doh.robot.sequence(d.getTestCallback(dojo.hitch(this, function(){
146	doh.is("toolbar1Before", dojo.global.dijit.focus.curNode.id, "back before toolbar1");
147	})), 1000);
148
149	return d;
150	}
151	},
152
153	{
154	name: "home/end keys",
155	timeout: 40000,
156	runTest: function(){
157	var d = new doh.Deferred();
158
159	// Initial focus (upon tabbing into toolbar) should go to first enabled button,
160	// which is "italic", since "cut" and "copy" are disabled
161	toolbar1Before.focus();
162	doh.robot.keyPress(dojo.keys.TAB, 500, {});
163	doh.robot.sequence(d.getTestErrback(dojo.hitch(this, function(){
164	doh.is("toolbar1.italic", dojo.global.dijit.focus.curNode.id, "first button");
165	})), 1000);
166
167	// End key should go to last button
168	doh.robot.keyPress(dojo.keys.END, 500, {});
169	doh.robot.sequence(d.getTestErrback(dojo.hitch(this, function(){
170	doh.is("toolbar1.insertorderedlist", dojo.global.dijit.focus.curNode.id, "last button");
171	})), 1000);
172
173	// Home key should go to first enabled button again
174	// which is "italic", since "cut" and "copy" are disabled
175	doh.robot.keyPress(dojo.keys.HOME, 500, {});
176	doh.robot.sequence(d.getTestCallback(dojo.hitch(this, function(){
177	doh.is("toolbar1.italic", dojo.global.dijit.focus.curNode.id, "first button again");
178	})), 1000);
179
180	return d;
181	}
182	},
183
184	// Test drop down ability. These tests are probably redundant with the Button tests themselves,
185	// so they aren't strictly necessary.
186	{
187	name: "drop downs",
188	timeout: 60000,
189	runTest: function(){
190	var d = new doh.Deferred();
191
192	// Re-enable the ToolipDialog and ColorPalette drop down so that we can test it
193	dijit.byId("toolbar1.dialog").set("disabled", false);
194	dijit.byId("toolbar1.backcolor").set("disabled", false);
195
196	doh.robot.sequence(d.getTestErrback(dojo.hitch(this, function(){
197	toolbar1Before.focus();
198	})), 500);
199
200	// Tab into toolbar and move to tooltip dialog button
201	doh.robot.keyPress(dojo.keys.TAB, 500, {});
202	doh.robot.keyPress(dojo.keys.RIGHT_ARROW, 500, {});
203
204	doh.robot.sequence(d.getTestErrback(dojo.hitch(this, function(){
205	doh.is("toolbar1.dialog", dojo.global.dijit.focus.curNode.id, "dialog button, first visit");
206	})), 1000);
207
208	// Open the dialog, focus should go to first input
209	doh.robot.keyPress(dojo.keys.DOWN_ARROW, 500, {});
210	doh.robot.sequence(d.getTestErrback(dojo.hitch(this, function(){
211	doh.is("user", dojo.global.dijit.focus.curNode.id);
212	})), 1000);
213
214	// ESC should restore focus to toolbar dialog button
215	doh.robot.keyPress(dojo.keys.ESCAPE, 500, {});
216	doh.robot.sequence(d.getTestErrback(dojo.hitch(this, function(){
217	doh.is("toolbar1.dialog", dojo.global.dijit.focus.curNode.id, "dialog button, second visit");
218	})), 1000);
219
220	// Open the dialog again
221	doh.robot.keyPress(dojo.keys.DOWN_ARROW, 500, {});
222	doh.robot.sequence(d.getTestErrback(dojo.hitch(this, function(){
223	doh.is("user", dojo.global.dijit.focus.curNode.id, "user, again");
224	})), 1000);
225
226	// Submit should also restore focus to toolbar dialog button, assuming that it
227	// doesn't reset the focus somewhere else (like into the editor)
228	doh.robot.keyPress(dojo.keys.TAB, 500);
229	doh.robot.keyPress(dojo.keys.TAB, 500);
230	doh.robot.keyPress(dojo.keys.ENTER, 500);
231	doh.robot.sequence(d.getTestErrback(dojo.hitch(this, function(){
232	doh.is("toolbar1.dialog", dojo.global.dijit.focus.curNode.id, "dialog button, third visit");
233	})), 1000);
234
235	// Try the ColorPalette
236	doh.robot.keyPress(dojo.keys.RIGHT_ARROW, 500);
237	doh.robot.keyPress(dojo.keys.DOWN_ARROW, 500);
238	doh.robot.sequence(d.getTestErrback(dojo.hitch(this, function(){
239	doh.t(dojo.isDescendant(dojo.global.dijit.focus.curNode, dijit.byId("toolbar1.colorPalette").domNode),
240	"focus inside colorpalette, actual focus is: " + (dojo.global.dijit.focus.curNode ?
241	(dojo.global.dijit.focus.curNode.id\|\|"no id") : "no focus"));
242	})), 1000);
243	doh.robot.keyPress(dojo.keys.RIGHT_ARROW, 500); // navigation in the ColorPalette
244	doh.robot.keyPress(dojo.keys.DOWN_ARROW, 500); // navigation in the ColorPalette
245	doh.robot.sequence(d.getTestErrback(dojo.hitch(this, function(){
246	doh.t(dojo.isDescendant(dojo.global.dijit.focus.curNode, dijit.byId("toolbar1.colorPalette").domNode),
247	"focus still inside colorpalette, actual focus is: " + (dojo.global.dijit.focus.curNode ?
248	(dojo.global.dijit.focus.curNode.id\|\|"no id") : "no focus"));
249	})), 1000);
250
251	// pressing tab in the colorpalette should move focus back to the toolbar
252	doh.robot.keyPress(dojo.keys.TAB, 500);
253	doh.robot.sequence(d.getTestErrback(dojo.hitch(this, function(){
254	doh.is("toolbar1.backcolor", dojo.global.dijit.focus.curNode.id, "back on colorpalette button");
255	})), 1000);
256
257	// try the ComboButton
258	doh.robot.keyPress(dojo.keys.RIGHT_ARROW, 500);
259	doh.robot.keyPress(dojo.keys.RIGHT_ARROW, 500);
260	doh.robot.keyPress(dojo.keys.DOWN_ARROW, 500);
261	doh.robot.sequence(d.getTestErrback(dojo.hitch(this, function(){
262	// TODO: test that focus is on menu
263	})), 1000);
264	doh.robot.keyPress(dojo.keys.SPACE, 500); // select first menu option
265	doh.robot.sequence(d.getTestCallback(dojo.hitch(this, function(){
266	// TODO: test that focus is returned to button
267	})), 1000);
268
269	return d;
270	}
271	}
272
273	]);
274	// TODO: mouse
275
276
277	doh.run();
278	});
279	</script>
280	</head>
281	</html>

Note: See TracBrowser for help on using the repository browser.

Download in other formats: