Context Navigation

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

Line
1	<!DOCTYPE html>
2	<html>
3	<head>
4	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
5	<title>ContentPane DOH test</title>
6	<style type="text/css">
7	@import "../../themes/claro/document.css";
8	@import "../../themes/claro/claro.css";
9	@import "../css/dijitTests.css";
10
11	.box {
12	border: 1px solid black;
13	padding: 8px;
14	}
15
16	.dijitTestWidget {
17	border: 1px dashed red;
18	background-color: #C0E209 ;
19	}
20	</style>
21
22	<script type="text/javascript" src="../../../dojo/dojo.js"
23	data-dojo-config="isDebug: true"></script>
24	<script type="text/javascript">
25	dojo.require("doh.runner");
26
27	dojo.require("dojo.parser");
28	dojo.require("dojo.data.ItemFileReadStore");
29
30	dojo.require("dijit._Widget");
31	dojo.require("dijit._TemplatedMixin");
32	dojo.require("dijit._WidgetsInTemplateMixin");
33	dojo.require("dijit._Container");
34	dojo.require("dijit.layout._LayoutWidget");
35	dojo.require("dijit.layout.StackContainer");
36	dojo.require("dijit.layout.ContentPane");
37	dojo.require("dijit.Dialog");
38
39
40	dojo.ready(function(){
41	// create a do nothing, only for test widget
42	dojo.declare("dijit.TestWidget",
43	[dijit._Widget, dijit._TemplatedMixin], {
44	templateString: "<span class='dijitTestWidget'></span>"
45	});
46
47	doh.register("pane1",
48	[
49	{
50	name: "no_autoparse",
51	runTest: function(t){
52	if(dijit.byId("pane1")){
53	throw doh._AssertFailure("Page got autoparsed when it shouldn't");
54	}
55	}
56	}
57	]
58	);
59
60	var pane2, MyWidget;
61
62	doh.registerGroup("pane2",
63	[
64	{
65	name: "clear_content",
66	setUp: function(t){
67	pane2 = new dijit.layout.ContentPane({
68	preventCache: true
69	}, dojo.byId("pane2"));
70	pane2.set("content", "");// pass undefined on purpose
71	},
72	runTest: function(t){
73	doh.is(0, dijit._Widget.prototype.getChildren.call(pane2).length);
74	doh.is("", pane2.domNode.innerHTML)
75	}
76	},
77	{
78	name: "setContent_String",
79	setUp: function(){
80	pane2.set("content", "");
81	},
82	runTest: function(t){
83	var msg = "<h3>a simple html string</h3>";
84	pane2.set("content", msg);
85	doh.is(msg, pane2.domNode.innerHTML.toLowerCase());
86	}
87	},
88	{
89	name: "setContent_DOMNode",
90	setUp: function(t){
91	var div = dojo.doc.createElement('div');
92	div.innerHTML = "set('content', [DOMNode] )";
93	div.setAttribute('data-dojo-type', 'dijit.TestWidget');
94	pane2.set("content", div);
95	},
96	runTest: function(t){
97	doh.is(1, dijit._Widget.prototype.getChildren.call(pane2).length);
98	},
99	tearDown: function(t){
100	pane2.set("content", ""); // clear content for next test
101	}
102	},
103	{
104	name: "setContent_NodeList",
105	setUp: function(t){
106	var div = dojo.doc.createElement('div');
107	div.innerHTML = "<div data-dojo-type='dijit.TestWidget'>above</div>"
108	+"Testing!<div><p><span><b>Deep nested</b></span></p></div>"
109	+"<div data-dojo-type='dijit.TestWidget'>below</div>";
110
111	var list = div.childNodes;
112	pane2.set("content", div.childNodes);
113	},
114	runTest: function(t){
115	doh.is(2, dijit._Widget.prototype.getChildren.call(pane2).length);
116
117	//regular DOM check
118	var children = pane2.domNode.childNodes;
119	doh.is(4, children.length);
120	doh.is("Testing!", children[1].nodeValue);
121	doh.is("div", children[2].nodeName.toLowerCase());
122	doh.is("<p><span><b>deep nested</b></span></p>", children[2].innerHTML.toLowerCase());
123	}
124	},
125	{
126	name: "setContent_dojo_NodeList",
127	setUp: function(t){
128	pane2.set("content", "");
129	},
130	runTest: function(t){
131	var div = dojo.doc.createElement('div');
132	div.innerHTML = "<div data-dojo-type='dijit.TestWidget'>above</div>"
133	+"Testing!<div><p><span><b>Deep nested</b></span></p></div>"
134	+"<div data-dojo-type='dijit.TestWidget'>below</div>";
135
136	var list = new dojo.NodeList();
137	dojo.forEach(div.childNodes, function(n){
138	list.push(n.cloneNode(true));
139	});
140
141	pane2.set("content", list);
142	doh.is(4, pane2.domNode.childNodes.length);
143	}
144	},
145	{
146	name: "extractContent",
147	runTest: function(t){
148	var def = pane2.extractContent;
149	doh.f(def);
150
151	// test that it's actually working
152	pane2.extractContent = true;
153	pane2.set("content", '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" '
154	+'"http://www.w3.org/TR/html4/strict.dtd">'
155	+'<html><head><style>body{font-weight:bold;}</style></head>'
156	+'<body>extractContent test</body></html>');
157
158	doh.is("extractContent test", pane2.domNode.innerHTML);
159
160	// reset back to default
161	pane2.extractContent = def;
162	}
163	},
164	{
165	name: "setContent_widget", // for #12348
166	setUp: function(t){
167	// declare a widget whose template contains a non-templated widget
168	MyWidget = dojo.declare([dijit._Widget, dijit._TemplatedMixin, dijit._WidgetsInTemplateMixin], {
169	templateString: '<div><div '
170	+ 'data-dojo-type="dijit.layout.StackContainer"></div></div>'
171	});
172	},
173	runTest: function(t){
174	var w = new MyWidget(), dfd = new doh.Deferred();
175	pane2.set("content", w).then(function(){
176	dfd.callback(true);
177	}, function(e){
178	dfd.errback(e);
179	});
180	return dfd;
181	}
182	}
183	]
184	);
185
186	// Tests for doLayout parameter.
187	// When this parameter is true, the single ContentPane child is resized
188	// to match the size of the ContentPane.
189	var pane5;
190	doh.registerGroup("doLayout",
191	[
192	{
193	name: "simple",
194	setUp: function(t){
195	pane5 = new dijit.layout.ContentPane({
196	content:"<div data-dojo-type='dijit.layout.StackContainer'></div>"
197	}, dojo.byId("pane5"));
198	console.log(pane5);
199	},
200	runTest: function(t){
201	// since there's just a single child it should be marked
202	// for layout/resize along w/the ContentPane
203	doh.t(pane5._singleChild);
204	},
205	tearDown: function(t){
206	pane5.destroyRecursive();
207	}
208	},
209	{
210	name: "doLayout=false",
211	setUp: function(t){
212	pane5 = new dijit.layout.ContentPane({
213	content:
214	"<div data-dojo-type='dijit.layout.StackContainer'></div>",
215	doLayout: false
216	}, dojo.byId("pane5"));
217	},
218	runTest: function(t){
219	// since doLayout=false shouldn't try to resize child
220	doh.f(pane5._singleChild);
221	},
222	tearDown: function(t){
223	pane5.destroyRecursive();
224	}
225	},
226	{
227	name: "mixed content",
228	setUp: function(t){
229	pane5 = new dijit.layout.ContentPane({
230	content:
231	"<span>hello world</span>" +
232	"<div data-dojo-type='dijit.layout.StackContainer'></div>"
233	}, dojo.byId("pane5"));
234	},
235	runTest: function(t){
236	// since there's plain HTML along with the widget, ContentPane shouldn't try to adjust
237	// this size of the widget (since that would cover up the other HTML)
238	doh.f(pane5._singleChild);
239	},
240	tearDown: function(t){
241	pane5.destroyRecursive();
242	}
243	},
244	{
245	name: "two widgets",
246	setUp: function(t){
247	pane5 = new dijit.layout.ContentPane({
248	content:
249	"<div data-dojo-type='dijit.layout.StackContainer'></div>" +
250	"<div data-dojo-type='dijit.layout.StackContainer'></div>"
251	}, dojo.byId("pane5"));
252	},
253	runTest: function(t){
254	// since there are multiple children, neither should be marked
255	// for layout/resize along w/the ContentPane
256	doh.f(pane5._singleChild);
257	},
258	tearDown: function(t){
259	pane5.destroyRecursive();
260	}
261	},
262	{
263	name: "dojo.data",
264	setUp: function(t){
265	pane5 = new dijit.layout.ContentPane({
266	content:
267	"<div data-dojo-type='dojo.data.ItemFileReadStore' data-dojo-id='dd'></div>" +
268	"<div data-dojo-type='dijit.layout.StackContainer' id='sc'></div>"
269	}, dojo.byId("pane5"));
270	},
271	runTest: function(t){
272	// there are two children but one is invisible, so the other should be marked
273	// for layout/resize along w/the ContentPane
274	doh.t(dd, "dd exists");
275	doh.t(dijit.byId("sc"), "sc exists");
276	doh.is(dijit.byId("sc"), pane5._singleChild, "pane5._singleChild");
277	},
278	tearDown: function(t){
279	pane5.destroyRecursive();
280	}
281	},
282	{
283	name: "script tags ignored",
284	setUp: function(t){
285	pane5 = new dijit.layout.ContentPane({
286	content:
287	"<scri" + "pt></scri" + "pt>" +
288	"<div data-dojo-type='dijit.layout.StackContainer' id='sc'></div>"
289	}, dojo.byId("pane5"));
290	},
291	runTest: function(t){
292	// script tag should be ignored, should be detected as single child
293	doh.t(pane5._singleChild, "script tag ignored, marked as single child");
294	},
295	tearDown: function(t){
296	pane5.destroyRecursive();
297	}
298	}
299	]
300	);
301
302	dojo.declare("dijit.TestContained",
303	dijit.layout._LayoutWidget, {
304	startup: function(){
305	this.inherited(arguments);
306	this._started = true;
307	},
308	resize: function(){
309	this.inherited(arguments);
310	this._resized = true;
311	}
312	}
313	);
314
315	var container;
316	doh.register("ContentPane as _Container-like widget",
317	[
318	{
319	name: "creation",
320	runTest: function(t){
321	container = new dijit.layout.ContentPane();
322	container.placeAt(dojo.body(), "last");
323	container.startup();
324	t.is(0, container.getChildren().length, "number of children before set('content', ...)");
325	container.set('content',
326	'<span>plain non-widget content</span>' +
327	'<div><span>' +
328	'<div id="zero" data-dojo-type="dijit.TestContained"></div>' +
329	'<div id="one" data-dojo-type="dijit.TestContained"></div>' +
330	'</span></div>' +
331	'<div id="two" data-dojo-type="dijit.TestContained"></div>' +
332	'<div id="three" data-dojo-type="dijit._Widget"></div>'
333	);
334
335	// Since ContentPane is a container it should call startup
336	// on it's children
337	t.t(dijit.byId('two')._started, "started");
338
339	// Also, Layout widgets expect resize() to be
340	// called by their parent
341	t.t(dijit.byId('two')._resized, "resized");
342	}
343	},
344	{
345	name: "getChildren",
346	runTest: function(t){
347	var children = container.getChildren();
348	t.is(4, children.length, "number of children");
349	t.is("zero", children[0].id);
350	t.is("one", children[1].id);
351	t.is("two", children[2].id);
352	t.is("three", children[3].id);
353	}
354	},
355
356	{
357	name: "deferred resize",
358	runTest: function(t){
359	// This tests that startup isn't called on the child widgets
360	// until the contentpane is made visible
361
362	var hiddenCP = new dijit.layout.ContentPane({style: {display: "none"}});
363	hiddenCP.placeAt(dojo.body(), "last");
364	hiddenCP.startup();
365
366	t.is(0, hiddenCP.getChildren().length, "number of children before set('content', ...)");
367	hiddenCP.set('content',
368	'<span>plain non-widget content</span>' +
369	'<div><span>' +
370	'<div id="deferredZero" data-dojo-type="dijit.TestContained"></div>' +
371	'<div id="deferredOne" data-dojo-type="dijit.TestContained"></div>' +
372	'</span></div>' +
373	'<div id="deferredTwo" data-dojo-type="dijit.TestContained"></div>' +
374	'<div id="deferredThree" data-dojo-type="dijit._Widget"></div>'
375	);
376
377	t.f(dijit.byId('deferredTwo')._resized, "not resized yet");
378
379	hiddenCP.set("style", {display: "block"});
380	hiddenCP._onShow();
381
382	t.t(dijit.byId('deferredTwo')._resized, "resized");
383	}
384	}
385
386	/***
387	,
388	{
389	name: "addChild",
390	runTest: function(t){
391	var afterTwo = new dijit.TestContained({id: "twoPointFive"});
392	container.addChild(afterTwo, 3);
393
394	// Make sure child was added and is in order
395	var children = container.getChildren();
396	t.is(5, children.length);
397	t.is("zero", children[0].id);
398	t.is("one", children[1].id);
399	t.is("two", children[2].id);
400	t.is("twoPointFive", children[3].id);
401	t.is("three", children[4].id);
402
403	// Since ContentPane is a container it should call startup
404	// on it's children
405	t.t(afterTwo._started, "started");
406
407	// Also, Layout widgets expect resize() to be
408	// called by their parent
409	t.t(afterTwo._resized, "resized");
410	}
411	},
412	{
413	name: "removeChild",
414	runTest: function(t){
415	var children = container.getChildren();
416	t.is(5, children.length);
417	container.removeChild(dijit.byId("zero"));
418	container.removeChild(1); // should remove "two" - because zero is already removed
419	children = container.getChildren();
420	t.is(3, children.length);
421	t.is("one", children[0].id);
422	t.is("three", children[2].id);
423	}
424	}
425	****/
426	]
427	);
428
429	// Test that popup widgets in a ContentPane are created and deleted correctly
430	doh.register("popup test", [
431	function create(){
432	dojo.parser.parse(dojo.byId("popupTest"));
433	doh.t(dijit.byId("popupPane"), "popup ContentPane created");
434	doh.t(dijit.byId("dialog"), "dialog created");
435	doh.is(dojo.body(), dijit.byId("dialog").domNode.parentNode, "dialog child of <body>");
436	},
437	function destroy(){
438	dijit.byId("popupPane").destroyRecursive();
439	doh.f(dijit.byId("popupPane"), "popup ContentPane destroyed");
440	doh.f(dijit.byId("dialog"), "dialog widget destroyed");
441	doh.f(dojo.byId("dialog"), "dialog DOMNode gone too");
442	}
443	]);
444
445	// Test that startup() on child widgets and plain JS objects is called at the correct time
446
447	var nwStartupCalls = 0;
448	dojo.declare("NonWidget", null, {
449	// summary: doesn't extend _Widget, used to test that startup() is still called
450	startup: function(){
451	if(!this._started){
452	nwStartupCalls++;
453	this._started = true;
454	}
455	}
456	});
457
458	doh.register("startup", [
459	function startupAfter(){
460	var cp1 = new dijit.layout.ContentPane({
461	content: "<div id='startup-c1' data-dojo-type='dijit.TestContained'></div>"
462	}).placeAt(dojo.body());
463
464	var child = dijit.byId("startup-c1");
465	doh.t(child, "child widget created");
466	doh.f(child._started, "child widget not started yet");
467
468	cp1.startup();
469
470	doh.t(child._started, "starting ContentPane starts child widget");
471	},
472	function startupBefore(){
473	var cp2 = new dijit.layout.ContentPane({}).placeAt(dojo.body());
474	cp2.startup();
475
476	cp2.set("content", "<div id='startup-c2' data-dojo-type='dijit.TestContained'></div>");
477	var child = dijit.byId("startup-c2");
478	doh.t(child, "child widget created");
479	doh.t(child._started, "child widget started");
480	},
481
482	function nonWidget(){
483	// even non-widgets inside of ContentPane (like dojo.dnd.Source) should have
484	// startup called on them
485	dojo.parser.parse(dojo.byId("nonWidgetTest"));
486	doh.is(1, nwStartupCalls, "startup() on non-widgets called on parse");
487
488	nwp.set("content", "<div><div data-dojo-type='NonWidget' data-dojo-id='nw2'></div></div>");
489	doh.is(2, nwStartupCalls, "startup() called on non-widgets via set(content, ...)");
490	}
491	]);
492
493	doh.run();
494	});
495	</script>
496	</head>
497	<body class="claro">
498	<h2>dijit.layout.ContentPane DOH test</h2>
499	<h3>Test designed to run on localhost (minimize impact from network latency)</h3>
500
501	<h4>This should NOT be parsed automatically</h4>
502	<div id="pane1" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='"class":"box"'>
503	<div data-dojo-type='dijit.TestWidget'>If this has a different background and a red border, the page parsed when it shouldn't</div>
504	</div>
505	<br/><h3>Testing ContentPane</h3>
506	<div id='pane2' class='box'>
507	Even though the entire page isn't scanned for widgets,
508	any sub widgets of a ContentPane will be created when a ContentPane is created<br/>
509	<span id="2_zero" data-dojo-type='dijit.TestWidget'>This should have a backgroundcolor and a border</span>
510	<div id="2_one" data-dojo-type="dijit._Widget"></div>
511	<div id="2_two" data-dojo-type="dijit._Widget"></div>
512	<div id="2_three" data-dojo-type="dijit._Widget"></div>
513	</div>
514	<br/><br/>
515	<div id="pane5"></div>
516
517	<!-- for container tests -->
518	<div id="container" data-dojo-type="dijit.layout.ContentPane">
519	<div id="zero" data-dojo-type="dijit.TestContained"></div>
520	<div id="one" data-dojo-type="dijit.TestContained"></div>
521	<div id="two" data-dojo-type="dijit.TestContained"></div>
522	<div id="three" data-dojo-type="dijit._Widget"></div>
523	</div>
524	<div id="outside" data-dojo-type="dijit._Widget"></div>
525	<div id="outsideCont" data-dojo-type="dijit.TestContained"></div>
526
527	<!-- for testing popup widgets inside of a content pane -->
528	<div id="popupTest">
529	<div id="popupPane" data-dojo-type="dijit.layout.ContentPane">
530	<div id="dialog" data-dojo-type="dijit.Dialog">
531	hello world
532	</div>
533	</div>
534	</div>
535
536	<!-- for testing non-widgets inside of a content pane -->
537	<div id="nonWidgetTest">
538	<div id="nonWidgetPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-id="nwp">
539	<div data-dojo-type="NonWidget" data-dojo-id="nw1"></div>
540	</div>
541	</div>
542
543	</body>
544	</html>

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

Download in other formats: