Context Navigation

source: Dev/branches/rest-dojo-ui/client/dijit/tests/Dialog.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: 12.4 KB

Line
1	<!DOCTYPE html>
2	<html>
3	<head>
4	<title>Dialog Widget Automated (non-robot) Tests</title>
5
6	<style type="text/css">
7	@import "../themes/claro/document.css";
8	@import "css/dijitTests.css";
9	</style>
10
11	<!-- required: a default dijit theme: -->
12	<link id="themeStyles" rel="stylesheet" href="../../dijit/themes/claro/claro.css"/>
13
14	<!-- required: dojo.js -->
15	<script type="text/javascript" src="../../dojo/dojo.js"
16	djConfig="isDebug: true"></script>
17
18	<!-- functions to help test -->
19	<script type="text/javascript" src="helpers.js"></script>
20
21	<!-- not needed, for testing alternate themes -->
22	<script type="text/javascript" src="_testCommon.js"></script>
23
24	<script type="text/javascript">
25	dojo.require("doh.runner");
26	dojo.require("dijit.dijit"); // optimize: load dijit layer
27	dojo.require("dijit.Dialog");
28	dojo.require("dijit.focus");
29
30	dojo.ready(function(){
31	// Non robot tests to see if nested dialogs work correctly
32	// when obscured dialogs are destroyed/hidden, on race conditions of
33	// multiple dialogs fading in/out at once, etc.
34	doh.register("out-of-order dialog hide/destroy", [
35	{
36	name: "open first dialog",
37	timeout: 10000,
38	runTest: function(){
39	var d = new doh.Deferred(),
40	dlg1;
41
42	// Start focus on a button on the page (although we aren't going
43	// to click the button)
44	dojo.byId("button").focus();
45
46	// Create and show first dialog
47	dlg1 = new dijit.Dialog({
48	id: "dlg1",
49	title: "dialog 1",
50	content:
51	"<input id='dlg1_inputA'><br>" +
52	"<input id='dlg1_inputB'><br>" +
53	"<input id='dlg1_inputC'><br>" +
54	"<input id='dlg1_inputD'><br>" +
55	"<input id='dlg1_inputE'><br>" +
56	"<input id='dlg1_inputF'><br>" +
57	"<input id='dlg1_inputG'><br>" +
58	"<input id='dlg1_inputH'><br>"
59	});
60	dlg1.show().then(d.getTestCallback(function(){
61	doh.t(isVisible(dlg1), "dialog 1 is visible");
62
63	var dialog1Z = dojo.style(dlg1.domNode, "zIndex"),
64	underlayZ = dojo.style(dojo.global.dijit._underlay.domNode, "zIndex");
65
66	doh.t(dialog1Z > underlayZ, "dialog1 (zIndex=" + dialog1Z +
67	") above underlay (zIndex=" + underlayZ + ")");
68
69	doh.is("dlg1_inputA", dojo.global.dijit.focus.curNode.id, "focus is on the first field");
70
71	// For back-compat, startup() should be called on children even if Dialog.startup()
72	// isn't called explicitly.
73	doh.t(dlg1._started, "dlg1 started");
74	}));
75
76	return d;
77	}
78	},
79	{
80	name: "open second dialog",
81	timeout: 20000,
82	runTest: function(){
83	var d = new doh.Deferred(),
84	dlg1 = dijit.byId("dlg1"),
85	dlg2;
86
87	// Create and show second dialog
88	dlg2 = new dijit.Dialog({
89	id: "dlg2",
90	title: "dialog 2",
91	content:
92	"<input id='dlg2_inputA'><br>" +
93	"<input id='dlg2_inputB'><br>" +
94	"<input id='dlg2_inputC'><br>" +
95	"<input id='dlg2_inputD'><br>" +
96	"<input id='dlg2_inputE'><br>" +
97	"<input id='dlg2_inputF'><br>"
98	});
99	dlg2.show().then(d.getTestCallback(function(){
100	doh.t(isVisible(dlg2), "dialog 2 is visible");
101
102	var dialog1Z = dojo.style(dlg1.domNode, "zIndex"),
103	dialog2Z = dojo.style(dlg2.domNode, "zIndex"),
104	underlayZ = dojo.style(dojo.global.dijit._underlay.domNode, "zIndex");
105
106	doh.t(underlayZ > dialog1Z, "underlay (zIndex=" + underlayZ +
107	") above dialog1 (zIndex=" + dialog1Z + ")");
108	doh.t(dialog2Z > underlayZ, "dialog2 (zIndex=" + dialog2Z +
109	") above underlay (zIndex=" + underlayZ + ")");
110
111	doh.is("dlg2_inputA", dojo.global.dijit.focus.curNode.id, "focus is on the first field");
112	}));
113
114	return d;
115	}
116	},
117	{
118	name: "destroy first dialog",
119	timeout: 20000,
120	runTest: function(){
121	var d = new doh.Deferred(),
122	dlg1 = dijit.byId("dlg1"),
123	dlg2 = dijit.byId("dlg2");
124
125	dlg1.destroy();
126
127	setTimeout(d.getTestCallback(function(){
128	doh.t(isVisible(dlg2), "dialog 2 is still visible");
129	doh.t(isVisible(dojo.global.dijit._underlay), "underlay is still visible");
130
131	doh.is("dlg2_inputA", dojo.global.dijit.focus.curNode.id, "dialog 2 still has focus");
132
133	var dialog2Z = dojo.style(dlg2.domNode, "zIndex"),
134	underlayZ = dojo.style(dojo.global.dijit._underlay.domNode, "zIndex");
135
136	doh.t(dialog2Z > underlayZ, "dialog2 (zIndex=" + dialog2Z +
137	") above underlay (zIndex=" + underlayZ + ")");
138
139	}), 2000);
140
141	return d;
142	}
143	},
144	{
145	name: "open third dialog",
146	timeout: 20000,
147	runTest: function(){
148	var d = new doh.Deferred(),
149	dlg2 = dijit.byId("dlg2"),
150	dlg3;
151
152	// Create and show third dialog
153	dlg3 = new dijit.Dialog({
154	id: "dlg3",
155	title: "dialog 3",
156	content:
157	"<input id='dlg3_inputA'><br>" +
158	"<input id='dlg3_inputB'><br>" +
159	"<input id='dlg3_inputC'><br>" +
160	"<input id='dlg3_inputD'><br>"
161
162	});
163	dlg3.show().then(d.getTestCallback(function(){
164	doh.t(isVisible(dlg3), "dialog 3 is visible");
165
166	// Even though a dialog was deleted, the zIndex of the dialog 3
167	// should be above dialog 2. This test is to make sure we don't
168	// merely use _dialogStack.length to compute zIndex
169	var dialog2Z = dojo.style(dlg2.domNode, "zIndex"),
170	dialog3Z = dojo.style(dlg3.domNode, "zIndex"),
171	underlayZ = dojo.style(dojo.global.dijit._underlay.domNode, "zIndex");
172	doh.t(underlayZ > dialog2Z, "underlay (zIndex=" + underlayZ +
173	") above dialog2 (zIndex=" + dialog2Z + ")");
174	doh.t(dialog3Z > underlayZ, "dialog3 (zIndex=" + dialog3Z +
175	") above underlay (zIndex=" + underlayZ + ")");
176
177	doh.is("dlg3_inputA", dojo.global.dijit.focus.curNode.id, "focus is on the first field");
178	}));
179
180	return d;
181	}
182	},
183	{
184	name: "open fourth dialog",
185	timeout: 30000,
186	runTest: function(){
187	var d = new doh.Deferred(),
188	dlg3 = dijit.byId("dlg3"),
189	dlg4;
190
191	// Create and show fourth dialog
192	dlg4 = new dijit.Dialog({
193	id: "dlg4",
194	title: "dialog 4",
195	content:
196	"<input id='dlg4_inputA'><br>" +
197	"<input id='dlg4_inputB'>"
198	});
199	dlg4.show().then(d.getTestCallback(function(){
200	doh.t(isVisible(dlg4), "dialog 4 is visible");
201
202	var dialog3Z = dojo.style(dlg3.domNode, "zIndex"),
203	dialog4Z = dojo.style(dlg4.domNode, "zIndex"),
204	underlayZ = dojo.style(dojo.global.dijit._underlay.domNode, "zIndex");
205	doh.t(underlayZ > dialog3Z, "underlay (zIndex=" + underlayZ +
206	") above dialog3 (zIndex=" + dialog3Z + ")");
207	doh.t(dialog4Z > underlayZ, "dialog4 (zIndex=" + dialog4Z +
208	") above underlay (zIndex=" + underlayZ + ")");
209
210	doh.is("dlg4_inputA", dojo.global.dijit.focus.curNode.id, "focus is on the first field");
211	}));
212
213	return d;
214	}
215	},
216	{
217	name: "hide third dialog",
218	timeout: 40000,
219	runTest: function(){
220	var d = new doh.Deferred(),
221	dlg3 = dijit.byId("dlg3"),
222	dlg4 = dijit.byId("dlg4");
223
224	dlg3.hide().then(d.getTestCallback(function(){
225	doh.t(isVisible(dlg4), "dialog 4 is still visible");
226	doh.t(isVisible(dojo.global.dijit._underlay), "underlay is still visible");
227
228	doh.is("dlg4_inputA", dojo.global.dijit.focus.curNode.id, "dialog 4 still has focus");
229
230	var dialog4Z = dojo.style(dlg4.domNode, "zIndex"),
231	underlayZ = dojo.style(dojo.global.dijit._underlay.domNode, "zIndex");
232
233	doh.t(dialog4Z > underlayZ, "dialog4 (zIndex=" + dialog4Z +
234	") above underlay (zIndex=" + underlayZ + ")");
235
236	}));
237
238	return d;
239	}
240	},
241	{
242	name: "close fourth dialog",
243	timeout: 30000,
244	runTest: function(){
245	var d = new doh.Deferred(),
246	dlg2 = dijit.byId("dlg2"),
247	dlg3 = dijit.byId("dlg3"),
248	dlg4 = dijit.byId("dlg4");
249
250	// Closing fourth dialog should move focus to second dialog,
251	// since we already destroyed the third dialog
252	dlg4.hide().then(d.getTestCallback(function(){
253	doh.t(isHidden(dlg4), "dialog 4 is hidden");
254	doh.t(isHidden(dlg3), "dialog 3 is hidden");
255	doh.t(isVisible(dlg2), "dialog 2 is visible");
256
257	var dialog2Z = dojo.style(dlg2.domNode, "zIndex"),
258	underlayZ = dojo.style(dojo.global.dijit._underlay.domNode, "zIndex");
259	doh.t(dialog2Z > underlayZ, "dialog2 (zIndex=" + dialog2Z +
260	") above underlay (zIndex=" + underlayZ + ")");
261
262	doh.is("dlg2_inputA", dojo.global.dijit.focus.curNode.id, "focus is on the first field");
263	}));
264
265	return d;
266	}
267	},
268	{
269	name: "close second dialog",
270	timeout: 30000,
271	runTest: function(){
272	var d = new doh.Deferred(),
273	dlg2 = dijit.byId("dlg2");
274
275	// Since we already destroyed first dialog, closing second dialog should hide underlay and
276	// revert focus to the main page
277	dlg2.hide().then(d.getTestCallback(function(){
278	doh.t(isHidden(dlg2), "dialog 4 is hidden");
279	doh.t(isHidden(dojo.global.dijit._underlay), "underlay hidden");
280
281	doh.is("button", dojo.global.dijit.focus.curNode.id, "focus is on the main page");
282	}));
283
284	return d;
285	}
286	}
287	]);
288
289	var dlgA, dlgB;
290	doh.register("concurrent hide show", {
291	name: "concurrent hide show",
292	timeout: 20000,
293	setUp: function(){
294	// Create and show first dialog
295	dlgA = new dijit.Dialog({
296	id: "dlgA",
297	title: "Dialog A",
298	content:
299	"<button type='button'>OK</button>"
300	});
301	dlgB = new dijit.Dialog({
302	id: "dlgB",
303	title: "dialog B",
304	content:
305	"<button type='button'>OK</button>"
306	});
307	dlgA.show();
308
309	},
310	runTest: function(){
311	var d = new doh.Deferred(),
312	cnt=0;
313
314	handle = setInterval(d.getTestErrback(function(){
315	var hidden = cnt%2 ? dlgA : dlgB,
316	shown = cnt%2 ? dlgB : dlgA;
317
318	if(cnt > 10){
319	clearInterval(handle);
320	handle = null;
321	d.callback(true);
322	return;
323	}
324
325	doh.t(isVisible(shown), shown.title + " visible");
326	doh.t(isHidden(hidden), hidden.title + " hidden");
327	doh.t(isVisible(dojo.global.dijit._underlay), "underlay visible");
328
329	var shownZ = dojo.style(shown.domNode, "zIndex"),
330	underlayZ = dojo.style(dojo.global.dijit._underlay.domNode, "zIndex");
331	doh.t(shownZ > underlayZ, "visible dialog (zIndex=" + shownZ +
332	") above underlay (zIndex=" + underlayZ + ")");
333
334	hidden.show();
335	shown.hide();
336
337	cnt++;
338	}), 1000);
339
340	return d;
341	},
342	tearDown: function(){
343	dlgA.hide();
344	dlgB.hide();
345	if(handle){
346	clearInterval(handle);
347	}
348	}
349	});
350
351	var slow, fast;
352	doh.register("fast double show", [
353	function create(){
354	console.log("creating slow, fast");
355	var d = new doh.Deferred();
356	slow = new dijit.Dialog({
357	id: "slow",
358	title: "Dialog C",
359	content:
360	"Hello world " +
361	"<button type='button' id='slowOK' onfocus='dojo.global.slowFocused=true;'>OK</button>" +
362	"<button type='button' id='slowCancel'>Cancel</button>",
363	duration: 500
364	});
365	fast = new dijit.Dialog({
366	id: "fast",
367	title: "dialog D",
368	content:
369	"<button type='button'>OK</button>",
370	duration: 100
371	});
372
373	},
374	{
375	name: "show Dialog C then show Dialog D before Dialog C fade-in completes",
376	timeout: 20000,
377	runTest: function(){
378	var d = new doh.Deferred();
379
380	slow.show();
381
382	setTimeout(d.getTestErrback(function(){
383	fast.show();
384	}), slow.duration / 2);
385
386	setTimeout(d.getTestCallback(function(){
387	doh.t(isVisible(slow), "dialog C visible");
388	doh.t(isVisible(fast), "dialog D visible");
389	doh.f(dojo.global.slowFocused, "dialog C never got focus")
390	}), slow.duration * 2);
391	return d;
392	}
393	},
394
395	{
396	name: "close dialogD",
397	timeout: 20000,
398	runTest: function(){
399	var d = new doh.Deferred();
400
401	fast.hide();
402
403	setTimeout(d.getTestCallback(function(){
404	doh.is("slowOK", dojo.global.dijit.focus.curNode.id, "focused to dialog C");
405	doh.t(dojo.global.slowFocused, "onfocus handler working");
406	}), fast.duration * 2);
407
408	return d;
409	}
410	}
411	]);
412
413	doh.run();
414	});
415	</script>
416	</head>
417	<body class="claro">
418	<h1 class="testTitle">Dijit Dialog Automated (non-robot) tests</h1>
419	<button id="button">focus point</button>
420	</body>
421	</html>
422
423

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

Download in other formats: