dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
401 lines (331 loc) • 12.7 kB
HTML
<!--
Test file for Tree against ForestStoreModel.
To be removed in 2.0 in favor of Tree_ObjectStoreModel.html
Put new tests in Tree_ObjectStoreModel.html
--->
<html lang="en">
<head>
<title>dijit.Tree against dijit.tree.ForestStoreModel Automated Tests</title>
<style type="text/css">
@import "../../../dojo/resources/dnd.css";
@import "../../../dojo/tests/dnd/dndDefault.css";
</style>
<script type="text/javascript" src="../boilerplate.js"></script>
<script type="text/javascript">
require([
"doh/runner",
"dojo/data/ItemFileWriteStore",
"dojo/dom",
"dojo/dom-attr",
"dojo/dom-class",
"dijit/Tree",
"dijit/tree/ForestStoreModel",
"dijit/tree/TreeStoreModel",
"dijit/tree/dndSource",
"dijit/tests/helpers",
"dojo/domReady!"
], function(doh, ItemFileWriteStore, dom, domAttr, domClass, Tree, ForestStoreModel, TreeStoreModel, dndSource, helpers){
doh.register("setup", function(){
myStore = new ItemFileWriteStore({url:'../_data/countries.json'});
doh.t(myStore, "store created");
myModel = new ForestStoreModel({
store: myStore,
query: {type:'continent'},
rootId: "earth",
rootLabel: "Earth",
childrenAttrs: ["children"]
});
doh.t(myModel, "model created");
});
doh.register("paths", [
function create(){
var d = new doh.Deferred();
myTree = new Tree({
id: "myTree",
model: myModel,
persist: false, // persist==true is too hard to test
dndController: dndSource
});
doh.t(myTree, "tree created");
dom.byId("container").appendChild(myTree.domNode);
myTree.startup();
myTree.onLoadDeferred.then(d.getTestCallback(function(){
// Give the tree time to load, and the do checks that it
// loaded correctly
doh.t(myTree.rootNode, "root node exists");
doh.t(myTree.rootNode.isExpanded, "root node is expanded");
var children = myTree.rootNode.getChildren();
doh.is(6, children.length, "six children");
doh.is("Africa", children[0].label, "first child");
doh.f(children[0].isExpanded, "first child not expanded");
doh.is("South America", children[5].label, "last child");
// Last child has special CSS for drawing the grid lines
doh.f(domClass.contains(children[3].domNode, "dijitTreeIsLast"), "middle node doesn't have dijitTreeIsLast");
doh.t(domClass.contains(children[5].domNode, "dijitTreeIsLast"), "last node has dijitTreeIsLast");
}));
return d;
},
{
name: "createWithPath",
timeout: 10000,
runTest: function(){
var d = new doh.Deferred();
myTree2 = new Tree({
id: "myTree2",
model: myModel,
persist: false, // persist==true is too hard to test
dndController: dndSource,
path: ["earth", "EU", "IT"]
});
doh.t(myTree2, "myTree2 created");
dom.byId("container2").appendChild(myTree2.domNode);
myTree2.startup();
myTree2.onLoadDeferred.then(d.getTestCallback(function(){
doh.t(myTree2.rootNode, "root node exists");
doh.t(myTree2.rootNode.isExpanded, "root node is expanded");
doh.t(myTree2.rootNode.getChildren()[3].isExpanded, "europe node is expanded");
doh.is(myTree2.rootNode.getChildren()[3].getChildren()[3], myTree2.selectedNode, "selected correct node");
}));
return d;
}
},
function copyPath(){
var d = new doh.Deferred();
myTree.set("path", myTree2.get("path")).then(d.getTestCallback(function(){
doh.t(myTree.rootNode.isExpanded, "root node is expanded");
doh.t(myTree.rootNode.getChildren()[3].isExpanded, "europe node is expanded");
doh.is(myTree.rootNode.getChildren()[3].getChildren()[3], myTree.get("selectedNode"), "selected correct node");
}));
return d;
},
{
name: "copyPathByIds",
timeout: 5000,
runTest: function(){
var d = new doh.Deferred();
myTree.set("path", ["earth", "NA", "CA", "Ottawa"]).then(d.getTestErrback(function(){
var path = dojo.map(myTree.get("path"), function(item){ return myTree.model.getIdentity(item); });
doh.is(["earth", "NA", "CA", "Ottawa"], path, "path got set on myTree");
myTree2.set("path", path).then(d.getTestCallback(function(){
doh.t(myTree2.rootNode.isExpanded, "root node is expanded");
doh.t(myTree2.rootNode.getChildren()[4].isExpanded, "north america node is expanded");
doh.t(myTree2.rootNode.getChildren()[4].getChildren()[1].isExpanded, "canada node is expanded");
doh.is(myTree2.rootNode.getChildren()[4].getChildren()[1].getChildren()[0], myTree2.get("selectedNode"), "selected correct node");
}));
}));
return d;
}
},
function setPathToNull(){
var d = new doh.Deferred();
myTree2.set("path", []).then(d.getTestCallback(function(){
doh.is(null, myTree2.get("selectedNode"), "no selected node");
}));
return d;
},
function setPathToRoot(){
var d = new doh.Deferred();
myTree2.set("path", ["earth"]).then(d.getTestCallback(function(){
doh.is(myTree2.rootNode, myTree2.get("selectedNode"), "selected root node");
}));
return d;
},
{
name: "setPaths",
timeout: 5000,
runTest: function() {
var d = new doh.Deferred();
myTree2.set("paths", [
["earth", "AF", "KE", "Nairobi"],
["earth", "NA", "MX", "Guadalajara"]
]).then(d.getTestCallback(function () {
var ids = dojo.map(myTree2.selectedItems, function (x) {
return myTree2.model.getIdentity(x);
}).sort();
doh.is(["Guadalajara", "Nairobi"], ids);
}));
return d;
}
}
]);
doh.register("data store", [
function itemUpdate(){
// Test that Tree noticed when data store items change, and updates accordingly
var item = myTree.rootNode.getChildren()[3].item;
myStore.setValue(item, "name", "EU");
doh.is("EU", helpers.innerText(myTree.rootNode.getChildren()[3].labelNode), "label changed");
},
function topLevelItemDelete(){
// Delete a top level item. ForestStoreModel needs to realize that the top level
// children have changed and notify Tree
// Remove "South America"
var item = myTree.rootNode.getChildren()[5].item;
myStore.deleteItem(item);
var children = myTree.rootNode.getChildren();
doh.is(5, children.length, "five children");
doh.is("North America", children[4].label, "last child");
doh.t(domClass.contains(children[4].domNode, "dijitTreeIsLast"),
"North america has become the last node so it gets the CSS class for that");
},
function openANode(){
var d = new doh.Deferred();
var asia = myTree.rootNode.getChildren()[1];
doh.is(0, asia.getChildren().length, "no children loaded yet");
myTree._onExpandoClick({node: asia});
setTimeout(d.getTestCallback(function(){
// Give the tree time to load the children, and the do checks that it
// loaded correctly
var children = asia.getChildren();
doh.is(4, children.length, "four children");
doh.is("China", children[0].label, "first child");
doh.is("Mongolia", children[3].label, "last child");
}), 750);
return d;
},
function selectAnItem(){
myTree.set('selectedItem','CN');
doh.is('CN',myTree.model.getIdentity(myTree.get('selectedItem')));
},
function nestedItemDelete(){
// Delete a nested item
// Remove "China"
var asia = myTree.rootNode.getChildren()[1],
china = asia.getChildren()[0];
myStore.deleteItem(china.item);
var children = asia.getChildren();
doh.is(3, children.length, "three children");
},
function topLevelItemInsert(){
// Create a new top level item as last child.
// ForestStoreModel needs to realize that the top level children have changed and notify Tree.
myStore.newItem({
id: 'PA',
name:'Pacifica',
type:'continent',
children: []
});
var children = myTree.rootNode.getChildren();
doh.is(6, children.length, "six children");
doh.is("Pacifica", children[5].label, "last child");
doh.f(domClass.contains(children[4].domNode, "dijitTreeIsLast"),
"North America no longer last child");
doh.t(domClass.contains(children[5].domNode, "dijitTreeIsLast"),
"Pacifica is last child");
},
function topLevelItemModify(){
// Modify a top level item so it's no longer top level.
// ForestStoreModel needs to realize that the top level children have changed and notify Tree.
myStore.fetchItemByIdentity({
identity: 'PA',
onItem: function(item){
// in real life we would need to give the item a parent,
// but this is enough for testing
myStore.setValue(item, 'type', 'country');
}
});
var children = myTree.rootNode.getChildren();
doh.is(5, children.length, "five children again");
},
function nestedItemModify(){
// Modify a nested item so it matches the query for top level items in the tree.
// ForestStoreModel needs to realize that the top level children have changed and notify Tree.
myStore.fetchItemByIdentity({
identity: 'PA',
onItem: function(item){
// in real life we would need to give the item a parent,
// but this is enough for testing
myStore.setValue(item, 'type', 'continent');
}
});
var children = myTree.rootNode.getChildren();
doh.is(6, children.length, "six children again");
},
function destroyTree(){
// Just running this to make sure we don't get an exception
console.log("destroying tree");
myTree.destroy();
myTree2.destroy();
}
]);
doh.register("delete selected node", [
{
name: "create",
timeout: 10000,
runTest: function() {
var d = new doh.Deferred();
myTree = new Tree({
id: "myTree",
model: myModel,
persist: false, // persist==true is too hard to test
path: ["earth", "EU", "IT"]
});
doh.t(myTree, "tree created");
dom.byId("container").appendChild(myTree.domNode);
myTree.startup();
myTree.onLoadDeferred.then(d.getTestCallback(function () {
var item = myTree.get("selectedItem");
doh.is("IT", myStore.getValue(item, "id"));
}));
return d;
}
},
function deleteSelectedItem(){
myStore.deleteItem(myTree.get("selectedItem"));
},
function selectNewItem(){
myTree.set("path", ["earth", "EU", "FR"]);
var item = myTree.get("selectedItem");
doh.is("FR", myStore.getValue(item, "id"));
}
]);
// Make sure that Tree doesn't have spurious lang="" dir="" on nodes
doh.register("nobidi", {
name: "noLangDir",
timeout: 10000,
runTest: function () {
var d = new doh.Deferred();
myStore = new dojo.data.ItemFileWriteStore({url: '../_data/countries.json'});
doh.t(myStore, "store created");
myModel = new ForestStoreModel({
store: myStore,
query: {type: 'continent'},
rootId: "earth",
rootLabel: "Earth",
childrenAttrs: ["children"]
});
doh.t(myModel, "model created");
myTree = new Tree({
id: "noDirTree",
model: myModel,
persist: false, // persist==true is too hard to test
dndController: dndSource
});
doh.t(myTree, "tree created");
dom.byId("container").appendChild(myTree.domNode);
myTree.startup();
myTree.onLoadDeferred.then(d.getTestCallback(function(){
// Give the tree time to load, and the do checks that it
// loaded correctly
doh.t(myTree.rootNode, "root node exists");
doh.t(myTree.rootNode.isExpanded, "root node is expanded");
doh.f(domAttr.has(myTree.rootNode, "lang"), "no (empty) lang attribute on root TreeNode");
doh.f(domAttr.has(myTree.rootNode, "dir"), "no (empty) dir attribute on root TreeNode");
var children = myTree.rootNode.getChildren();
doh.f(domAttr.has(children[2], "lang"), "no (empty) lang attribute on child TreeNode");
doh.f(domAttr.has(children[2], "dir"), "no (empty) dir attribute on child TreeNode");
}));
return d;
}
});
doh.run();
});
</script>
</head>
<body class="claro" role="main">
<h1 class="testTitle">Dijit.Tree / dijit.tree.ForestStoreModel Automated Tests</h1>
<div id="container"> <!-- tree will go here --></div>
<div id="container2"> <!-- tree2 will go here --></div>
</body>
</html>