Context Navigation

← Previous Revision
Latest Revision
Next Revision →
Blame
Revision Log

Dialog.html @ 529

Last change on this file since 529 was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
File size: 15.5 KB

Line
1	<!DOCTYPE html>
2	<html>
3	<head>
4	<title>Dialog Widget Automated (non-robot) Tests</title>
5
6	<script src="boilerplate.js"></script>
7
8	<script type="text/javascript">
9	require([
10	"doh/runner",
11	"dojo/dom", "dojo/dom-geometry", "dojo/dom-style", "dojo/window",
12	"dijit/focus", "dijit/registry", "dijit/Dialog", "dijit/DialogUnderlay",
13	"dijit/tests/helpers", "dojo/domReady!"
14	], function(doh, dom, domGeom, domStyle, winUtils, focus, registry, Dialog, DialogUnderlay, helpers){
15	// Non robot tests to see if nested dialogs work correctly
16	// when obscured dialogs are destroyed/hidden, on race conditions of
17	// multiple dialogs fading in/out at once, etc.
18
19	doh.register("setup", function(){
20	// Start focus on a button on the page (although we aren't going
21	// to click the button)
22	var d = new doh.Deferred();
23
24	setTimeout(d.getTestErrback(function(){
25	dom.byId("button").focus();
26
27	setTimeout(d.getTestCallback(function(){
28	doh.is("button", focus.curNode.id, "focus is on the main page");
29	}), 100);
30	}), 300);
31
32	return d;
33	});
34
35	doh.register("out-of-order dialog hide/destroy", [
36	{
37	name: "open first dialog",
38	timeout: 10000,
39	runTest: function(){
40	var d = new doh.Deferred(),
41	dlg1;
42
43	// Create and show first dialog
44	dlg1 = new Dialog({
45	id: "dlg1",
46	title: "dialog 1",
47	content:
48	"<input id='dlg1_inputA'><br>" +
49	"<input id='dlg1_inputB'><br>" +
50	"<input id='dlg1_inputC'><br>" +
51	"<input id='dlg1_inputD'><br>" +
52	"<input id='dlg1_inputE'><br>" +
53	"<input id='dlg1_inputF'><br>" +
54	"<input id='dlg1_inputG'><br>" +
55	"<input id='dlg1_inputH'><br>"
56	});
57	dlg1.show().then(d.getTestCallback(function(){
58	doh.t(helpers.isVisible(dlg1), "dialog 1 is visible");
59
60	var dialog1Z = domStyle.get(dlg1.domNode, "zIndex"),
61	underlayZ = domStyle.get(DialogUnderlay._singleton.domNode, "zIndex");
62
63	doh.t(dialog1Z > underlayZ, "dialog1 (zIndex=" + dialog1Z +
64	") above underlay (zIndex=" + underlayZ + ")");
65
66	doh.is("dlg1_inputA", focus.curNode.id, "focus is on the first field");
67
68	// For back-compat, startup() should be called on children even if Dialog.startup()
69	// isn't called explicitly.
70	doh.t(dlg1._started, "dlg1 started");
71	}));
72
73	return d;
74	}
75	},
76	{
77	name: "open second dialog",
78	timeout: 20000,
79	runTest: function(){
80	var d = new doh.Deferred(),
81	dlg1 = registry.byId("dlg1"),
82	dlg2;
83
84	// Create and show second dialog
85	dlg2 = new Dialog({
86	id: "dlg2",
87	title: "dialog 2",
88	content:
89	"<input id='dlg2_inputA'><br>" +
90	"<input id='dlg2_inputB'><br>" +
91	"<input id='dlg2_inputC'><br>" +
92	"<input id='dlg2_inputD'><br>" +
93	"<input id='dlg2_inputE'><br>" +
94	"<input id='dlg2_inputF'><br>"
95	});
96	dlg2.show().then(d.getTestCallback(function(){
97	doh.t(helpers.isVisible(dlg2), "dialog 2 is visible");
98
99	var dialog1Z = domStyle.get(dlg1.domNode, "zIndex"),
100	dialog2Z = domStyle.get(dlg2.domNode, "zIndex"),
101	underlayZ = domStyle.get(DialogUnderlay._singleton.domNode, "zIndex");
102
103	doh.t(underlayZ > dialog1Z, "underlay (zIndex=" + underlayZ +
104	") above dialog1 (zIndex=" + dialog1Z + ")");
105	doh.t(dialog2Z > underlayZ, "dialog2 (zIndex=" + dialog2Z +
106	") above underlay (zIndex=" + underlayZ + ")");
107
108	doh.is("dlg2_inputA", focus.curNode.id, "focus is on the first field");
109	}));
110
111	return d;
112	}
113	},
114	{
115	name: "destroy first dialog",
116	timeout: 20000,
117	runTest: function(){
118	var d = new doh.Deferred(),
119	dlg1 = registry.byId("dlg1"),
120	dlg2 = registry.byId("dlg2");
121
122	dlg1.destroy();
123
124	setTimeout(d.getTestCallback(function(){
125	doh.t(helpers.isVisible(dlg2), "dialog 2 is still visible");
126	doh.t(helpers.isVisible(DialogUnderlay._singleton), "underlay is still visible");
127
128	doh.is("dlg2_inputA", focus.curNode.id, "dialog 2 still has focus");
129
130	var dialog2Z = domStyle.get(dlg2.domNode, "zIndex"),
131	underlayZ = domStyle.get(DialogUnderlay._singleton.domNode, "zIndex");
132
133	doh.t(dialog2Z > underlayZ, "dialog2 (zIndex=" + dialog2Z +
134	") above underlay (zIndex=" + underlayZ + ")");
135
136	}), 2000);
137
138	return d;
139	}
140	},
141	{
142	name: "open third dialog",
143	timeout: 20000,
144	runTest: function(){
145	var d = new doh.Deferred(),
146	dlg2 = registry.byId("dlg2"),
147	dlg3;
148
149	// Create and show third dialog
150	dlg3 = new Dialog({
151	id: "dlg3",
152	title: "dialog 3",
153	content:
154	"<input id='dlg3_inputA'><br>" +
155	"<input id='dlg3_inputB'><br>" +
156	"<input id='dlg3_inputC'><br>" +
157	"<input id='dlg3_inputD'><br>"
158
159	});
160	dlg3.show().then(d.getTestCallback(function(){
161	doh.t(helpers.isVisible(dlg3), "dialog 3 is visible");
162
163	// Even though a dialog was deleted, the zIndex of the dialog 3
164	// should be above dialog 2. This test is to make sure we don't
165	// merely use _dialogStack.length to compute zIndex
166	var dialog2Z = domStyle.get(dlg2.domNode, "zIndex"),
167	dialog3Z = domStyle.get(dlg3.domNode, "zIndex"),
168	underlayZ = domStyle.get(DialogUnderlay._singleton.domNode, "zIndex");
169	doh.t(underlayZ > dialog2Z, "underlay (zIndex=" + underlayZ +
170	") above dialog2 (zIndex=" + dialog2Z + ")");
171	doh.t(dialog3Z > underlayZ, "dialog3 (zIndex=" + dialog3Z +
172	") above underlay (zIndex=" + underlayZ + ")");
173
174	doh.is("dlg3_inputA", focus.curNode.id, "focus is on the first field");
175	}));
176
177	return d;
178	}
179	},
180	{
181	name: "open fourth dialog",
182	timeout: 30000,
183	runTest: function(){
184	var d = new doh.Deferred(),
185	dlg3 = registry.byId("dlg3"),
186	dlg4;
187
188	// Create and show fourth dialog
189	dlg4 = new Dialog({
190	id: "dlg4",
191	title: "dialog 4",
192	content:
193	"<input id='dlg4_inputA'><br>" +
194	"<input id='dlg4_inputB'>"
195	});
196	dlg4.show().then(d.getTestCallback(function(){
197	doh.t(helpers.isVisible(dlg4), "dialog 4 is visible");
198
199	var dialog3Z = domStyle.get(dlg3.domNode, "zIndex"),
200	dialog4Z = domStyle.get(dlg4.domNode, "zIndex"),
201	underlayZ = domStyle.get(DialogUnderlay._singleton.domNode, "zIndex");
202	doh.t(underlayZ > dialog3Z, "underlay (zIndex=" + underlayZ +
203	") above dialog3 (zIndex=" + dialog3Z + ")");
204	doh.t(dialog4Z > underlayZ, "dialog4 (zIndex=" + dialog4Z +
205	") above underlay (zIndex=" + underlayZ + ")");
206
207	doh.is("dlg4_inputA", focus.curNode.id, "focus is on the first field");
208	}));
209
210	return d;
211	}
212	},
213	{
214	name: "hide third dialog",
215	timeout: 40000,
216	runTest: function(){
217	var d = new doh.Deferred(),
218	dlg3 = registry.byId("dlg3"),
219	dlg4 = registry.byId("dlg4");
220
221	dlg3.hide().then(d.getTestCallback(function(){
222	doh.t(helpers.isVisible(dlg4), "dialog 4 is still visible");
223	doh.t(helpers.isVisible(DialogUnderlay._singleton), "underlay is still visible");
224
225	doh.is("dlg4_inputA", focus.curNode.id, "dialog 4 still has focus");
226
227	var dialog4Z = domStyle.get(dlg4.domNode, "zIndex"),
228	underlayZ = domStyle.get(DialogUnderlay._singleton.domNode, "zIndex");
229
230	doh.t(dialog4Z > underlayZ, "dialog4 (zIndex=" + dialog4Z +
231	") above underlay (zIndex=" + underlayZ + ")");
232
233	}));
234
235	return d;
236	}
237	},
238	{
239	name: "close fourth dialog",
240	timeout: 30000,
241	runTest: function(){
242	var d = new doh.Deferred(),
243	dlg2 = registry.byId("dlg2"),
244	dlg3 = registry.byId("dlg3"),
245	dlg4 = registry.byId("dlg4");
246
247	// Closing fourth dialog should move focus to second dialog, since we already destroyed the
248	// third dialog. Delay needed for IE9+ where focus shift is asynchronous.
249	dlg4.hide().then(function(){
250	setTimeout(d.getTestCallback(function(){
251	doh.t(helpers.isHidden(dlg4), "dialog 4 is hidden");
252	doh.t(helpers.isHidden(dlg3), "dialog 3 is hidden");
253	doh.t(helpers.isVisible(dlg2), "dialog 2 is visible");
254
255	var dialog2Z = domStyle.get(dlg2.domNode, "zIndex"),
256	underlayZ = domStyle.get(DialogUnderlay._singleton.domNode, "zIndex");
257	doh.t(dialog2Z > underlayZ, "dialog2 (zIndex=" + dialog2Z +
258	") above underlay (zIndex=" + underlayZ + ")");
259
260	doh.is("dlg2_inputA", focus.curNode.id, "focus is on the first field");
261	}));
262	});
263
264	return d;
265	}
266	},
267	{
268	name: "close second dialog",
269	timeout: 30000,
270	runTest: function(){
271	var d = new doh.Deferred(),
272	dlg2 = registry.byId("dlg2");
273
274	// Since we already destroyed first dialog, closing second dialog should hide underlay and
275	// revert focus to the main page. Need the setTimeout() for IE9+ where focus change is not
276	// instant.
277	dlg2.hide().then(function(){
278	setTimeout(d.getTestCallback(function(){
279	doh.t(helpers.isHidden(dlg2), "dialog 4 is hidden");
280	doh.t(helpers.isHidden(DialogUnderlay._singleton), "underlay hidden");
281
282	doh.is("button", focus.curNode.id, "focus is on the main page");
283	}));
284	});
285
286	return d;
287	}
288	}
289	]);
290
291	var dlgA, dlgB;
292	doh.register("concurrent hide show (multiple dialogs)", {
293	name: "concurrent hide show",
294	timeout: 20000,
295	setUp: function(){
296	// Create and show first dialog
297	dlgA = new Dialog({
298	id: "dlgA",
299	title: "Dialog A",
300	content:
301	"<button type='button'>OK</button>"
302	});
303	dlgB = new Dialog({
304	id: "dlgB",
305	title: "dialog B",
306	content:
307	"<button type='button'>OK</button>"
308	});
309	dlgA.show();
310
311	},
312	runTest: function(){
313	var d = new doh.Deferred(),
314	cnt=0;
315
316	handle = setInterval(d.getTestErrback(function(){
317	var hidden = cnt%2 ? dlgA : dlgB,
318	shown = cnt%2 ? dlgB : dlgA;
319
320	if(cnt > 10){
321	clearInterval(handle);
322	handle = null;
323	d.callback(true);
324	return;
325	}
326
327	doh.t(helpers.isVisible(shown), shown.title + " visible");
328	doh.t(helpers.isHidden(hidden), hidden.title + " hidden");
329	doh.t(helpers.isVisible(DialogUnderlay._singleton), "underlay visible");
330
331	var shownZ = domStyle.get(shown.domNode, "zIndex"),
332	underlayZ = domStyle.get(DialogUnderlay._singleton.domNode, "zIndex");
333	doh.t(shownZ > underlayZ, "visible dialog (zIndex=" + shownZ +
334	") above underlay (zIndex=" + underlayZ + ")");
335
336	hidden.show();
337	shown.hide();
338
339	cnt++;
340	}), 1000);
341
342	return d;
343	},
344	tearDown: function(){
345	dlgA.hide();
346	dlgB.hide();
347	if(handle){
348	clearInterval(handle);
349	}
350	}
351	});
352
353	var slow, fast;
354	doh.register("fast double show", [
355	function create(){
356	console.log("creating slow, fast");
357	var d = new doh.Deferred();
358	slow = new Dialog({
359	id: "slow",
360	title: "Dialog C",
361	content:
362	"Hello world " +
363	"<button type='button' id='slowOK' onfocus='window.slowFocused=true;'>OK</button>" +
364	"<button type='button' id='slowCancel'>Cancel</button>",
365	duration: 500
366	});
367	fast = new Dialog({
368	id: "fast",
369	title: "dialog D",
370	content:
371	"<button type='button'>OK</button>",
372	duration: 100
373	});
374
375	},
376	{
377	name: "show Dialog C then show Dialog D before Dialog C fade-in completes",
378	timeout: 20000,
379	runTest: function(){
380	var d = new doh.Deferred();
381
382	slow.show();
383
384	setTimeout(d.getTestErrback(function(){
385	fast.show();
386	}), slow.duration / 2);
387
388	setTimeout(d.getTestCallback(function(){
389	doh.t(helpers.isVisible(slow), "dialog C visible");
390	doh.t(helpers.isVisible(fast), "dialog D visible");
391	doh.f(window.slowFocused, "dialog C never got focus")
392	}), slow.duration * 2);
393	return d;
394	}
395	},
396	{
397	name: "close dialogD",
398	timeout: 20000,
399	runTest: function(){
400	var d = new doh.Deferred();
401
402	fast.hide();
403
404	setTimeout(d.getTestCallback(function(){
405	doh.is("slowOK", focus.curNode.id, "focused to dialog C");
406	doh.t(window.slowFocused, "onfocus handler working");
407	}), fast.duration * 2);
408
409	return d;
410	}
411	},
412	{
413	name: "close dialogC",
414	timeout: 20000,
415	runTest: function(){
416	return slow.hide();
417	}
418	}
419	]);
420
421	doh.register("fast double hide", [
422	function create(){
423	var d = new doh.Deferred();
424
425	// Create a test dialog
426	dlg = new Dialog({
427	id: "doubleHide",
428	title: "Double Hide",
429	content: "Hello World",
430	duration: 100
431	});
432
433	// First show it
434	var secondHideCalled;
435	dlg.show().then(d.getTestErrback(function(){
436	// Then call hide(), as though user had clicked close icon.
437	// Return from this test when this hide() call completes.
438	dlg.hide().then(d.getTestCallback(function(){
439	doh.t(secondHideCalled, "hide() was called while hide() in progress and no problems");
440	dlg.hide(); // this should also have no effect
441	}));
442
443	// While first hide() is in progress, call hide() a few more times to make sure it
444	// doesn't break anything
445	dlg.hide(); // should do nothing
446	setTimeout(d.getTestErrback(function(){
447	dlg.hide(); // should also do nothing
448	secondHideCalled = true;
449	}), 10);
450	}));
451	return d;
452	}
453	]);
454
455	doh.register("concurrent show hide (single dialog)", [
456	function show(){
457	var d = new doh.Deferred();
458
459	var onShowCtr = 0,
460	dlg = new Dialog({
461	id: "show",
462	title: "onShow Dialog",
463	content:"Hello world ",
464	onShow: function(){ onShowCtr++; }
465	});
466
467	doh.is(1, Dialog._dialogStack.length, "initially, no dialogs in stack");
468	dlg.show();
469	doh.is(1, onShowCtr, "onShow first time");
470	dlg.hide();
471	doh.is(1, onShowCtr, "onHide first time");
472	dlg.show();
473	doh.is(2, onShowCtr, "onShow second time");
474	dlg.hide().then(d.getTestCallback(function(){
475	doh.is(2, onShowCtr, "onHide second time");
476	doh.is(1, Dialog._dialogStack.length, "at end, no dialogs in stack");
477	}));
478
479	return d;
480	}
481	]);
482
483	doh.register("zero duration", [
484	{
485	name: "open",
486	timeout: 10000,
487	runTest: function(){
488	dlg1 = new Dialog({
489	id: "dlg1",
490	title: "dialog 1",
491	duration: 0,
492	content: "<input id='dlg1_inputA'>"
493	});
494
495	var promise = dlg1.show();
496	doh.t(promise.isResolved(), "resolved");
497	doh.t(helpers.isVisible(dlg1), "dialog visible");
498	}
499	},
500	{
501	name: "close",
502	timeout: 10000,
503	runTest: function(){
504	var promise = dlg1.hide();
505	doh.t(promise.isResolved(), "resolved");
506	doh.t(helpers.isHidden(dlg1), "dialog hidden");
507	}
508	}
509	]);
510
511	doh.register("sizing", [
512	{
513	name: "href",
514	timeout: 10000,
515	runTest: function(){
516	var dlg1 = new Dialog({
517	id: "bigHref",
518	title: "big dialog with href",
519	href: "loremIpsum"
520	});
521
522	return dlg1.show().then(function(){
523	var dlgPos = domGeom.position(dlg1.domNode),
524	viewport = winUtils.getBox();
525	doh.t(dlgPos.h < viewport.h, "viewport height");
526	doh.t(dlgPos.y > 0, "position");
527	});
528	}
529	}
530	]);
531
532	doh.run();
533	});
534	</script>
535	</head>
536	<body class="claro">
537	<h1 class="testTitle">Dijit Dialog Automated (non-robot) tests</h1>
538	<button id="button">focus point</button>
539	</body>
540	</html>
541
542

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

Context Navigation

source: Dev/trunk/src/client/dijit/tests/Dialog.html @ 529

Download in other formats: