Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Add tests for tree auto-expand, both sync and async

  • Loading branch information...
commit 5c8a9bb63ae6e346c4f136748bf3323e00159bc5 1 parent e137998
@kfranqueiro kfranqueiro authored
Showing with 159 additions and 48 deletions.
  1. +59 −48 test/data/base.js
  2. +100 −0 test/tree-expand.html
View
107 test/data/base.js
@@ -147,55 +147,56 @@ function(lang, Deferred, Memory, Observable, QueryResults){
testTypesStore = Observable(new Memory({data: typesData}));
-
+ var testCountryData = [
+ { id: 'AF', name:'Africa', type:'continent', population:'900 million', area: '30,221,532 sq km',
+ timezone: '-1 UTC to +4 UTC'},
+ { id: 'EG', name:'Egypt', type:'country', parent: 'AF' },
+ { id: 'Cairo', name:'Cairo', type:'city', parent: 'EG' },
+ { id: 'KE', name:'Kenya', type:'country', parent: 'AF'},
+ { id: 'Nairobi', name:'Nairobi', type:'city', parent: 'KE' },
+ { id: 'Mombasa', name:'Mombasa', type:'city', parent: 'KE' },
+ { id: 'SD', name:'Sudan', type:'country', parent: 'AF'},
+ { id: 'Khartoum', name:'Khartoum', type:'city', parent: 'SD' },
+ { id: 'AS', name:'Asia', type:'continent', population: '3.2 billion'},
+ { id: 'CN', name:'China', type:'country', parent: 'AS' },
+ { id: 'Shanghai', name:'Shanghai', type:'city', parent: 'CN' },
+ { id: 'IN', name:'India', type:'country', parent: 'AS' },
+ { id: 'Calcutta', name:'Calcutta', type:'city', parent: 'IN' },
+ { id: 'RU', name:'Russia', type:'country', parent: 'AS' },
+ { id: 'Moscow', name:'Moscow', type:'city', parent: 'RU' },
+ { id: 'MN', name:'Mongolia', type:'country', parent: 'AS' },
+ { id: 'UlanBator', name:'Ulan Bator', type:'city', parent: 'MN' },
+ { id: 'OC', name:'Oceania', type:'continent', population:'21 million'},
+ { id: 'AU', name:'Australia', type:'country', population:'21 million', parent: 'OC' },
+ { id: 'Sydney', name:'Sydney', type:'city', parent: 'AU' },
+ { id: 'EU', name:'Europe', type:'continent', population: '774 million' },
+ { id: 'DE', name:'Germany', type:'country', parent: 'EU' },
+ { id: 'Berlin', name:'Berlin', type:'city', parent: 'DE' },
+ { id: 'FR', name:'France', type:'country', parent: 'EU' },
+ { id: 'Paris', name:'Paris', type:'city', parent: 'FR' },
+ { id: 'ES', name:'Spain', type:'country', parent: 'EU' },
+ { id: 'Madrid', name:'Madrid', type:'city', parent: 'ES' },
+ { id: 'IT', name:'Italy', type:'country', parent: 'EU' },
+ { id: 'Rome', name:'Rome', type:'city', parent: 'IT' },
+ { id: 'NA', name:'North America', type:'continent', population: '575 million'},
+ { id: 'MX', name:'Mexico', type:'country', population:'108 million', area:'1,972,550 sq km', parent: 'NA' },
+ { id: 'Mexico City', name:'Mexico City', type:'city', population:'19 million', timezone:'-6 UTC', parent: 'MX'},
+ { id: 'Guadalajara', name:'Guadalajara', type:'city', population:'4 million', timezone:'-6 UTC', parent: 'MX' },
+ { id: 'CA', name:'Canada', type:'country', population:'33 million', area:'9,984,670 sq km', parent: 'NA' },
+ { id: 'Ottawa', name:'Ottawa', type:'city', population:'0.9 million', timezone:'-5 UTC', parent: 'CA'},
+ { id: 'Toronto', name:'Toronto', type:'city', population:'2.5 million', timezone:'-5 UTC', parent: 'CA' },
+ { id: 'US', name:'United States of America', type:'country', parent: 'NA' },
+ { id: 'New York', name:'New York', type:'city', parent: 'US' },
+ { id: 'SA', name:'South America', type:'continent', population: '445 million' },
+ { id: 'BR', name:'Brazil', type:'country', population:'186 million', parent: 'SA' },
+ { id: 'Brasilia', name:'Brasilia', type:'city', parent: 'BR' },
+ { id: 'AR', name:'Argentina', type:'country', population:'40 million', parent: 'SA' },
+ { id: 'BuenosAires', name:'Buenos Aires', type:'city', parent: 'AR' }
+ ];
+
// global var testCountryStore
testCountryStore = Observable(new Memory({
- data: [
- { id: 'AF', name:'Africa', type:'continent', population:'900 million', area: '30,221,532 sq km',
- timezone: '-1 UTC to +4 UTC'},
- { id: 'EG', name:'Egypt', type:'country', parent: 'AF' },
- { id: 'Cairo', name:'Cairo', type:'city', parent: 'EG' },
- { id: 'KE', name:'Kenya', type:'country', parent: 'AF'},
- { id: 'Nairobi', name:'Nairobi', type:'city', parent: 'KE' },
- { id: 'Mombasa', name:'Mombasa', type:'city', parent: 'KE' },
- { id: 'SD', name:'Sudan', type:'country', parent: 'AF'},
- { id: 'Khartoum', name:'Khartoum', type:'city', parent: 'SD' },
- { id: 'AS', name:'Asia', type:'continent', population: '3.2 billion'},
- { id: 'CN', name:'China', type:'country', parent: 'AS' },
- { id: 'Shanghai', name:'Shanghai', type:'city', parent: 'CN' },
- { id: 'IN', name:'India', type:'country', parent: 'AS' },
- { id: 'Calcutta', name:'Calcutta', type:'city', parent: 'IN' },
- { id: 'RU', name:'Russia', type:'country', parent: 'AS' },
- { id: 'Moscow', name:'Moscow', type:'city', parent: 'RU' },
- { id: 'MN', name:'Mongolia', type:'country', parent: 'AS' },
- { id: 'UlanBator', name:'Ulan Bator', type:'city', parent: 'MN' },
- { id: 'OC', name:'Oceania', type:'continent', population:'21 million'},
- { id: 'AU', name:'Australia', type:'country', population:'21 million', parent: 'OC' },
- { id: 'Sydney', name:'Sydney', type:'city', parent: 'AU' },
- { id: 'EU', name:'Europe', type:'continent', population: '774 million' },
- { id: 'DE', name:'Germany', type:'country', parent: 'EU' },
- { id: 'Berlin', name:'Berlin', type:'city', parent: 'DE' },
- { id: 'FR', name:'France', type:'country', parent: 'EU' },
- { id: 'Paris', name:'Paris', type:'city', parent: 'FR' },
- { id: 'ES', name:'Spain', type:'country', parent: 'EU' },
- { id: 'Madrid', name:'Madrid', type:'city', parent: 'ES' },
- { id: 'IT', name:'Italy', type:'country', parent: 'EU' },
- { id: 'Rome', name:'Rome', type:'city', parent: 'IT' },
- { id: 'NA', name:'North America', type:'continent', population: '575 million'},
- { id: 'MX', name:'Mexico', type:'country', population:'108 million', area:'1,972,550 sq km', parent: 'NA' },
- { id: 'Mexico City', name:'Mexico City', type:'city', population:'19 million', timezone:'-6 UTC', parent: 'MX'},
- { id: 'Guadalajara', name:'Guadalajara', type:'city', population:'4 million', timezone:'-6 UTC', parent: 'MX' },
- { id: 'CA', name:'Canada', type:'country', population:'33 million', area:'9,984,670 sq km', parent: 'NA' },
- { id: 'Ottawa', name:'Ottawa', type:'city', population:'0.9 million', timezone:'-5 UTC', parent: 'CA'},
- { id: 'Toronto', name:'Toronto', type:'city', population:'2.5 million', timezone:'-5 UTC', parent: 'CA' },
- { id: 'US', name:'United States of America', type:'country', parent: 'NA' },
- { id: 'New York', name:'New York', type:'city', parent: 'US' },
- { id: 'SA', name:'South America', type:'continent', population: '445 million' },
- { id: 'BR', name:'Brazil', type:'country', population:'186 million', parent: 'SA' },
- { id: 'Brasilia', name:'Brasilia', type:'city', parent: 'BR' },
- { id: 'AR', name:'Argentina', type:'country', population:'40 million', parent: 'SA' },
- { id: 'BuenosAires', name:'Buenos Aires', type:'city', parent: 'AR' }
- ],
+ data: testCountryData,
getChildren: function(parent, options){
return this.query({parent: parent.id}, options);
},
@@ -210,7 +211,17 @@ function(lang, Deferred, Memory, Observable, QueryResults){
}, 200);
var results = QueryResults(def.promise);
return results;
-
+ }
+ }));
+
+ // global var testSyncCountryStore
+ testSyncCountryStore = Observable(new Memory({
+ data: testCountryData,
+ getChildren: function(parent, options){
+ return this.query({parent: parent.id}, options);
+ },
+ mayHaveChildren: function(parent){
+ return parent.type != "city";
}
}));
View
100 test/tree-expand.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test Tree Grid</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+ <meta name="viewport" content="width=570" />
+ <style type="text/css">
+ @import "../../dojo/resources/dojo.css";
+ @import "../css/skins/claro.css";
+ .container {
+ float: left;
+ margin: 10px;
+ width: 45%;
+ }
+ .dgrid {
+ width: 100%;
+ }
+ #tree .field-bool {
+ width: 4em;
+ }
+ #tree .field-type {
+ width: 5em;
+ }
+
+ #treeSelector .selector {
+ width: 2em;
+ }
+ </style>
+ <script>
+ var start= new Date().getTime();
+ </script>
+ <script type="text/javascript" src="../../dojo/dojo.js"
+ data-dojo-config="async: true"></script>
+ <script type="text/javascript">
+ require(["dojo/on", "dgrid/OnDemandGrid","dgrid/tree","dgrid/editor", "dgrid/Keyboard",
+ "dgrid/Selection", "dgrid/selector", "dgrid/ColumnSet",
+ "dojo/_base/declare", "dojo/_base/array", "dgrid/test/data/base", "dojo/domReady!"],
+ function(on, Grid, tree, editor, Keyboard, Selection, selector, ColumnSet, declare, arrayUtil){
+ var count = 0; // for incrementing edits from button under 1st grid
+
+ function nbspFormatter(value){
+ // returns "&nbsp;" for blank content, to prevent cell collapsing
+ return value === undefined || value === "" ? "&nbsp;" : value;
+ }
+
+ var StandardGrid = declare([Grid, Keyboard, Selection]);
+
+ arrayUtil.forEach([{
+ id: "asyncGrid",
+ store: testCountryStore
+ }, {
+ id: "syncGrid",
+ store: testSyncCountryStore
+ }], function(info){
+ var grid = window[info.id] = new StandardGrid({
+ store: info.store,
+ query: {type: "continent"},
+ columns: [
+ tree({label: "Name", field:"name", sortable: false, shouldExpand: function(){ return true; }}),
+ editor({label: "Visited", field: "bool", sortable: false}, "checkbox"),
+ {label:"Type", field:"type", sortable: false},
+ {label:"Population", field:"population"},
+ {label:"Timezone", field:"timezone"}
+ ]
+ }, info.id);
+
+ on(document.getElementById(info.id + "Save"), "click", function(){
+ grid.save();
+ });
+ on(document.getElementById(info.id + "Revert"), "click", function(){
+ grid.revert();
+ });
+ });
+ });
+ </script>
+ </head>
+ <body class="claro">
+ <p>This page tests auto-expansion of tree grids.</p>
+ <p><strong>NOTE:</strong> it is <em>strongly</em> recommended that you <em>only</em>
+ automatically expand for synchronous stores (or at least, stores which aren't
+ going back to the server for each child request); otherwise you are likely
+ to put a significant strain on your server, and the performance of the client
+ will suffer as a result.
+ </p>
+
+ <div class="container">
+ <h2>Auto-expanding tree grid, asynchronous store</h2>
+ <div id="asyncGrid"></div>
+ <button id="asyncGridSave">Save</button>
+ <button id="asyncGridRevert">Revert</button>
+ </div>
+
+ <div class="container">
+ <h2>Auto-expanding tree grid, synchronous store</h2>
+ <div id="syncGrid"></div>
+ <button id="syncGridSave">Save</button>
+ <button id="syncGridRevert">Revert</button>
+ </div>
+ </body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.