Context Navigation

source: Dev/branches/rest-dojo-ui/client/dijit/tests/tree/Tree.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.5 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>dijit.Tree Automatic Tests</title>
6
7	<style type="text/css">
8	@import "../../themes/claro/document.css";
9	@import "../../../dojo/resources/dnd.css";
10	@import "../../../dojo/tests/dnd/dndDefault.css";
11	@import "../css/dijitTests.css";
12	</style>
13
14	<!-- required: a default dijit theme: -->
15	<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
16
17	<!-- required: dojo.js -->
18	<script type="text/javascript" src="../../../dojo/dojo.js"
19	djConfig="isDebug: true"></script>
20
21	<!-- not needed, for testing alternate themes -->
22	<script type="text/javascript" src="../_testCommon.js"></script>
23
24	<script type="text/javascript" src="../helpers.js"></script>
25
26	<script type="text/javascript">
27	dojo.require("doh.runner");
28	dojo.require("dojo.parser");
29	dojo.require("dijit.dijit"); // optimize: load dijit layer
30	dojo.require("dojo.data.ItemFileWriteStore");
31	dojo.require("dijit.Tree");
32	dojo.require("dijit.tree.ForestStoreModel");
33	dojo.require("dijit.tree.TreeStoreModel");
34	dojo.require("dijit.tree.dndSource");
35
36	function getRowClass(item, isExpanded){
37	if(!item
38	\|\| !treeStore.isItem(item)
39	\|\| treeStore.getValue(item, "type") != "header"){
40	return null;
41	}
42	return "headerRow";
43	}
44
45	dojo.ready(function(){
46	doh.register("parse", function(){
47	dojo.parser.parse();
48	});
49
50	doh.register("paths", [
51	function create(){
52	var d = new doh.Deferred();
53	myStore = new dojo.data.ItemFileWriteStore({url:'../_data/countries.json'});
54	doh.t(myStore, "store created");
55
56	myModel = new dijit.tree.ForestStoreModel({
57	store: myStore,
58	query: {type:'continent'},
59	rootId: "earth",
60	rootLabel: "Earth",
61	childrenAttrs: ["children"]
62	});
63	doh.t(myModel, "model created");
64
65	myTree = new dijit.Tree({
66	id: "myTree",
67	model: myModel,
68	persist: false, // persist==true is too hard to test
69	dndController: "dijit.tree.dndSource"
70	});
71	doh.t(myTree, "tree created");
72
73	dojo.byId("container").appendChild(myTree.domNode);
74	myTree.startup();
75
76	setTimeout(d.getTestCallback(function(){
77	// Give the tree time to load, and the do checks that it
78	// loaded correctly
79	doh.t(myTree.rootNode, "root node exists");
80	doh.t(myTree.rootNode.isExpanded, "root node is expanded");
81
82	var children = myTree.rootNode.getChildren();
83	doh.is(6, children.length, "six children");
84	doh.is("Africa", children[0].label, "first child");
85	doh.f(children[0].isExpanded, "first child not expanded");
86	doh.is("South America", children[5].label, "last child");
87
88	// Last child has special CSS for drawing the grid lines
89	doh.f(dojo.hasClass(children[3].domNode, "dijitTreeIsLast"), "middle node doesn't have dijitTreeIsLast");
90	doh.t(dojo.hasClass(children[5].domNode, "dijitTreeIsLast"), "last node has dijitTreeIsLast");
91	}), 750);
92	return d;
93	},
94
95	{
96	name: "createWithPath",
97	timeout: 5000,
98	runTest: function(){
99	var d = new doh.Deferred();
100	myTree2 = new dijit.Tree({
101	id: "myTree2",
102	model: myModel,
103	persist: false, // persist==true is too hard to test
104	dndController: "dijit.tree.dndSource",
105	path: ["earth", "EU", "IT"]
106	});
107	doh.t(myTree2, "myTree2 created");
108
109	dojo.byId("container2").appendChild(myTree2.domNode);
110	myTree2.startup();
111
112	setTimeout(d.getTestCallback(function(){
113	doh.t(myTree2.rootNode, "root node exists");
114	doh.t(myTree2.rootNode.isExpanded, "root node is expanded");
115	doh.t(myTree2.rootNode.getChildren()[3].isExpanded, "europe node is expanded");
116	doh.is(myTree2.rootNode.getChildren()[3].getChildren()[3], myTree2.selectedNode, "selected correct node");
117	}), 2000);
118
119	return d;
120	}
121	},
122	function copyPath(){
123	var d = new doh.Deferred();
124
125	myTree.set("path", myTree2.get("path")).then(d.getTestCallback(function(){
126	doh.t(myTree.rootNode.isExpanded, "root node is expanded");
127	doh.t(myTree.rootNode.getChildren()[3].isExpanded, "europe node is expanded");
128	doh.is(myTree.rootNode.getChildren()[3].getChildren()[3], myTree.get("selectedNode"), "selected correct node");
129	}));
130
131	return d;
132	},
133
134	{
135	name: "copyPathByIds",
136	timeout: 5000,
137	runTest: function(){
138	var d = new doh.Deferred();
139
140	myTree.set("path", ["earth", "NA", "CA", "Ottawa"]).then(d.getTestErrback(function(){
141	var path = dojo.map(myTree.get("path"), function(item){ return myTree.model.getIdentity(item); });
142	doh.is(["earth", "NA", "CA", "Ottawa"], path, "path got set on myTree");
143
144	myTree2.set("path", path).then(d.getTestCallback(function(){
145	doh.t(myTree2.rootNode.isExpanded, "root node is expanded");
146	doh.t(myTree2.rootNode.getChildren()[4].isExpanded, "north america node is expanded");
147	doh.t(myTree2.rootNode.getChildren()[4].getChildren()[1].isExpanded, "canada node is expanded");
148	doh.is(myTree2.rootNode.getChildren()[4].getChildren()[1].getChildren()[0], myTree2.get("selectedNode"), "selected correct node");
149	}));
150	}));
151
152	return d;
153	}
154	},
155
156	function setPathToNull(){
157	var d = new doh.Deferred();
158
159	myTree2.set("path", []).addCallback(d.getTestCallback(function(){
160	doh.is(null, myTree2.get("selectedNode"), "no selected node");
161	}));
162	return d;
163	},
164
165	function setPathToRoot(){
166	var d = new doh.Deferred();
167
168	myTree2.set("path", ["earth"]).addCallback(d.getTestCallback(function(){
169	doh.is(myTree2.rootNode, myTree2.get("selectedNode"), "selected root node");
170	}));
171	return d;
172	},
173
174	function setPaths(){
175	var d = new doh.Deferred();
176
177	myTree2.set("paths", [["earth","AF","KE","Nairobi"],
178	["earth","NA","MX","Guadalajara"]]).addCallback(d.getTestCallback(function(){
179	var ids = dojo.map(myTree2.selectedItems, function(x){return myTree2.model.getIdentity(x);}).sort();
180	doh.is(["Guadalajara", "Nairobi"], ids);
181	}));
182	return d;
183	}
184	]);
185
186	doh.register("data store", [
187	function itemUpdate(){
188	// Test that Tree noticed when data store items change, and updates accordingly
189
190	var item = myTree.rootNode.getChildren()[3].item;
191	myStore.setValue(item, "name", "EU");
192
193	doh.is("EU", innerText(myTree.rootNode.getChildren()[3].labelNode), "label changed");
194	},
195
196	function topLevelItemDelete(){
197	// Delete a top level item. ForestStoreModel needs to realize that the top level
198	// children have changed and notify Tree
199
200	// Remove "South America"
201	var item = myTree.rootNode.getChildren()[5].item;
202	myStore.deleteItem(item);
203
204	var children = myTree.rootNode.getChildren();
205	doh.is(5, children.length, "five children");
206	doh.is("North America", children[4].label, "last child");
207	doh.t(dojo.hasClass(children[4].domNode, "dijitTreeIsLast"),
208	"North america has become the last node so it gets the CSS class for that");
209	},
210
211	function openANode(){
212	var d = new doh.Deferred();
213
214	var asia = myTree.rootNode.getChildren()[1];
215
216	doh.is(0, asia.getChildren().length, "no children loaded yet");
217
218	myTree._onExpandoClick({node: asia});
219
220	setTimeout(d.getTestCallback(function(){
221	// Give the tree time to load the children, and the do checks that it
222	// loaded correctly
223
224	var children = asia.getChildren();
225	doh.is(4, children.length, "four children");
226	doh.is("China", children[0].label, "first child");
227	doh.is("Mongolia", children[3].label, "last child");
228	}), 750);
229	return d;
230	},
231
232	function selectAnItem(){
233	myTree.set('selectedItem','CN');
234	doh.is('CN',myTree.model.getIdentity(myTree.get('selectedItem')));
235	},
236
237	function nestedItemDelete(){
238	// Delete a nested item
239
240	// Remove "China"
241	var asia = myTree.rootNode.getChildren()[1],
242	china = asia.getChildren()[0];
243	myStore.deleteItem(china.item);
244
245	var children = asia.getChildren();
246	doh.is(3, children.length, "three children");
247	},
248
249	function topLevelItemInsert(){
250	// Create a new top level item as last child.
251	// ForestStoreModel needs to realize that the top level children have changed and notify Tree.
252
253	myStore.newItem({
254	id: 'PA',
255	name:'Pacifica',
256	type:'continent',
257	children: []
258	});
259
260	var children = myTree.rootNode.getChildren();
261	doh.is(6, children.length, "six children");
262	doh.is("Pacifica", children[5].label, "last child");
263	doh.f(dojo.hasClass(children[4].domNode, "dijitTreeIsLast"),
264	"North America no longer last child");
265	doh.t(dojo.hasClass(children[5].domNode, "dijitTreeIsLast"),
266	"Pacifica is last child");
267	},
268
269	function topLevelItemModify(){
270	// Modify a top level item so it's no longer top level.
271	// ForestStoreModel needs to realize that the top level children have changed and notify Tree.
272
273	myStore.fetchItemByIdentity({
274	identity: 'PA',
275	onItem: function(item){
276	// in real life we would need to give the item a parent,
277	// but this is enough for testing
278	myStore.setValue(item, 'type', 'country');
279	}
280	});
281
282	var children = myTree.rootNode.getChildren();
283	doh.is(5, children.length, "five children again");
284	},
285
286	function nestedItemModify(){
287	// Modify a nested item so it matches the query for top level items in the tree.
288	// ForestStoreModel needs to realize that the top level children have changed and notify Tree.
289
290	myStore.fetchItemByIdentity({
291	identity: 'PA',
292	onItem: function(item){
293	// in real life we would need to give the item a parent,
294	// but this is enough for testing
295	myStore.setValue(item, 'type', 'continent');
296	}
297	});
298
299	var children = myTree.rootNode.getChildren();
300	doh.is(6, children.length, "six children again");
301	},
302
303	function destroyTree(){
304	// Just running this to make sure we don't get an exception
305	console.log("destroying tree");
306	myTree.destroy();
307	myTree2.destroy();
308	}
309	]);
310
311	doh.register("delete selected node", [
312	function create(){
313	var d = new doh.Deferred();
314
315	myTree = new dijit.Tree({
316	id: "myTree",
317	model: myModel,
318	persist: false, // persist==true is too hard to test
319	path: ["earth", "EU", "IT"]
320	});
321	doh.t(myTree, "tree created");
322
323	dojo.byId("container").appendChild(myTree.domNode);
324	myTree.startup();
325
326	setTimeout(d.getTestCallback(function(){
327	doh.is("IT", myTree.get("selectedItem").id);
328	}), 500);
329	return d;
330	},
331
332	function deleteSelectedItem(){
333	myStore.deleteItem(myTree.get("selectedItem"));
334	},
335
336	function selectNewItem(){
337	myTree.set("path", ["earth", "EU", "FR"]);
338	doh.is("FR", myTree.get("selectedItem").id);
339	}
340	]);
341
342	doh.register("nobidi", [
343	// Make sure that Tree doesn't have spurious lang="" dir="" on nodes
344	function noLangDir(){
345	var d = new doh.Deferred();
346	myStore = new dojo.data.ItemFileWriteStore({url:'../_data/countries.json'});
347	doh.t(myStore, "store created");
348
349	myModel = new dijit.tree.ForestStoreModel({
350	store: myStore,
351	query: {type:'continent'},
352	rootId: "earth",
353	rootLabel: "Earth",
354	childrenAttrs: ["children"]
355	});
356	doh.t(myModel, "model created");
357
358	myTree = new dijit.Tree({
359	id: "noDirTree",
360	model: myModel,
361	persist: false, // persist==true is too hard to test
362	dndController: "dijit.tree.dndSource"
363	});
364	doh.t(myTree, "tree created");
365
366	dojo.byId("container").appendChild(myTree.domNode);
367	myTree.startup();
368
369	setTimeout(d.getTestCallback(function(){
370	// Give the tree time to load, and the do checks that it
371	// loaded correctly
372	doh.t(myTree.rootNode, "root node exists");
373	doh.t(myTree.rootNode.isExpanded, "root node is expanded");
374	doh.f(dojo.hasAttr(myTree.rootNode, "lang"), "no (empty) lang attribute on root TreeNode");
375	doh.f(dojo.hasAttr(myTree.rootNode, "dir"), "no (empty) dir attribute on root TreeNode");
376
377	var children = myTree.rootNode.getChildren();
378	doh.f(dojo.hasAttr(children[2], "lang"), "no (empty) lang attribute on child TreeNode");
379	doh.f(dojo.hasAttr(children[2], "dir"), "no (empty) dir attribute on child TreeNode");
380	}), 750);
381	return d;
382	}
383	]);
384
385	doh.run();
386	});
387	</script>
388
389	</head>
390	<body class="claro">
391
392	<h1 class="testTitle">Dijit.Tree automated tests</h1>
393	<div id="container"> <!-- tree will go here --></div>
394	<div id="container2"> <!-- tree2 will go here --></div>
395	</body>
396	</html>

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

Download in other formats: