source: Dev/trunk/src/client/dijit/tests/ProgressBar.html @ 483

Last change on this file since 483 was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 13.1 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4        <title>Dojo Toolkit - ProgressBar test</title>
5
6        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
7
8        <script src="boilerplate.js"></script>
9
10        <style type="text/css">
11                body {
12                        margin: 1em;
13                }
14                .smallred .dijitProgressBarTile {
15                        background:red;
16                }
17                .smallred .dijitProgressBarLabel {
18                        display:none;
19                }
20        </style>
21
22        <script type="text/javascript">
23                require([
24                        "doh/runner",
25                        "dojo/Deferred", "dojo/dom", "dojo/dom-class", "dojo/dom-geometry", "dojo/on", "dojo/parser", "dojo/query", "dojo/string",
26                        "dijit/registry", "dijit/ProgressBar", "dojo/domReady!"
27                ], function(doh, Deferred, dom, domClass, domGeometry, on, parser, query, string, registry, ProgressBar){
28
29                        var dir = domGeometry.isBodyLtr() ? "ltr" : "rtl";
30
31                        doh.register("parse", function(){
32                                return parser.parse();
33                        });
34
35                        doh.register("other setup", function(){
36                                // Stuff from the original test file.   Not sure if this is needed now that
37                                // the test is automated.
38
39                                // note that programmatic instantiation doesn't pull any parameters from the srcNodeRef, not even id
40                                var theBar = new ProgressBar({
41                                        id: "testBar",
42                                        width: 400,
43                                        maximum: 256,
44                                        duration: 2000,
45                                        dir: dir,
46                                        report: function(percent){
47                                                return string.substitute("${0} out of ${1} max chars", [this.get('value'), this.maximum]);
48                                        }
49                                }, dom.byId("testBar"));
50
51                                dom.byId("test").value="";
52                                dom.byId("progressValue").value = registry.byId("setTestBar").value;
53                                dom.byId("maximum").value = registry.byId("setTestBar").maximum;
54                                on(dom.byId("test"), "keyup", keyUpHandler);
55                                on(dom.byId("set"), "click", setParameters);
56                                on(dom.byId("startTimer"), "click", function(){ remoteProgress(registry.byId("timerBar")); } );
57
58                                // test 7
59                                new ProgressBar({
60                                        style: "width:400px",
61                                        indeterminate: true,
62                                        dir: dir
63                                }, "pi");
64                        });
65
66                        doh.register("ProgressBar",[
67                                {
68                                        name: "set valid value",
69                                        runTest: function(){
70                                                var progressBar = registry.byId("setTestBar");
71                                                progressBar.set({maximum: 100, value: 58});
72
73                                                doh.is("58", progressBar.progress);
74                                                doh.is("58%", dom.byId("setTestBar_label").innerHTML);
75                                                var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
76
77                                                var width = visualProgress.style.width;
78                                                width = width.substring(0, width.length-1);
79                                                doh.t(57 < width <= 58); //IE thinks the width is 57.99
80                                        }
81                                },
82                                {
83                                        name: "aria roles and attribute",
84                                        runTest: function(){
85                                                var progressBar = registry.byId("setTestBar");
86                                                doh.is("progressbar", progressBar.domNode.getAttribute("role"), "ProgressBar needs role=progressbar");
87                                                doh.is(58, progressBar.domNode.getAttribute("aria-valuenow"), "expect aria-valuenow of 58");
88                                                doh.is(0, progressBar.domNode.getAttribute("aria-valuemin"), "expect aria-valuemin of 0");
89                                                doh.is(100, progressBar.domNode.getAttribute("aria-valuemax"), "expect aria-valuemax of 100");
90                                                doh.is("setTestBar_label", progressBar.domNode.getAttribute("aria-labelledby"), "expect aria-labelledby on progressbar");
91                                                progressBar = registry.byId("pi");
92                                                doh.f(progressBar.domNode.getAttribute("aria-valuenow"), "indeterminate progressbars should not have aria-valuenow");
93                                        }
94                                },
95                                {
96                                        name: "set value too high",
97                                        runTest: function(){
98                                                var d = new doh.Deferred();
99
100                                                var progressBar = registry.byId("setTestBar");
101                                                progressBar.set({maximum: 100, value: 101});
102
103                                                doh.is("100", progressBar.progress);
104                                                doh.is("100%", dom.byId("setTestBar_label").innerHTML);
105                                                var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
106                                                doh.is("100%", visualProgress.style.width);
107                                        }
108                                },
109                                {
110                                        name: "set zero value",
111                                        runTest: function(){
112                                                var d = new doh.Deferred();
113
114                                                var progressBar = registry.byId("setTestBar");
115                                                progressBar.set({maximum: 100, value: 0});
116
117                                                doh.is("0", progressBar.progress);
118                                                doh.is("0%", dom.byId("setTestBar_label").innerHTML);
119                                                var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
120                                                doh.is("0%", visualProgress.style.width);
121                                        }
122                                },
123                                {
124                                        name: "set max value",
125                                        runTest: function(){
126                                                var d = new doh.Deferred();
127
128                                                var progressBar = registry.byId("setTestBar");
129                                                progressBar.set({maximum: 100, value: 100});
130
131                                                doh.is("100", progressBar.progress);
132                                                doh.is("100%", dom.byId("setTestBar_label").innerHTML);
133                                                var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
134                                                doh.is("100%", visualProgress.style.width);
135                                        }
136                                },
137                                {
138                                        name: "report callback",
139                                        runTest: function(){
140                                                var progressBar = registry.byId("testBar");
141                                                progressBar.set({value: 79});
142                                                doh.is("79", progressBar.progress);
143                                                doh.is("79 out of 256 max chars", dom.byId("testBar_label").innerHTML);
144                                                var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
145                                                width = visualProgress.style.width;
146                                                doh.is("30.8", width.substring(0,4));
147                                        }
148                                },
149                                {
150                                        name: "default maximum",
151                                        runTest: function(){
152                                                var progressBar = registry.byId("implied1");
153                                                doh.is("50", progressBar.progress);
154                                                doh.is("50%", dom.byId("implied1_label").innerHTML);
155                                                var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
156                                                doh.is("50%", visualProgress.style.width);
157
158                                                progressBar = registry.byId("implied2");
159                                                doh.is("50", progressBar.progress);
160                                                doh.is("50%", dom.byId("implied2_label").innerHTML);
161                                                visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
162                                                doh.is("50%", visualProgress.style.width);
163                                        }
164                                },
165                                {
166                                        name: "set indeterminate, no label",
167                                        runTest: function(){
168                                                var progressBar = registry.byId("indeterminateBar");
169                                                progressBar.set({indeterminate: true, label: ''});
170
171                                                var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
172                                                doh.is("100%", visualProgress.style.width);
173                                                doh.t(domClass.contains(progressBar.domNode, "dijitProgressBarIndeterminate"), "has class dijitProgressBarIndeterminate");
174                                        }
175                                },
176                                {
177                                        name: "set determinate, no label",
178                                        runTest: function(){
179                                                var progressBar = registry.byId("indeterminateBar");
180                                                progressBar.set({indeterminate: false, label: ''});
181                                                doh.is("50%", dom.byId("indeterminateBar_label").innerHTML);
182
183                                                var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
184                                                doh.is("50%", visualProgress.style.width);
185                                                doh.f(domClass.contains(progressBar.domNode, "dijitProgressBarIndeterminate"), "doesn't have class dijitProgressBarIndeterminate");
186                                        }
187                                },
188                                {
189                                        name: "set indeterminate, custom label",
190                                        runTest: function(){
191                                                var d = new doh.Deferred();
192
193                                                var progressBar = registry.byId("indeterminateBar");
194                                                progressBar.set({indeterminate: true, label: 'Loading...'});
195
196                                                doh.is("Loading...", dom.byId("indeterminateBar_label").innerHTML);
197                                                var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
198                                                doh.is("100%", visualProgress.style.width);
199                                                doh.t(domClass.contains(progressBar.domNode, "dijitProgressBarIndeterminate"), "has class dijitProgressBarIndeterminate");
200                                        }
201                                },
202                                {
203                                        name: "set determinate, custom label",
204                                        runTest: function(){
205                                                var progressBar = registry.byId("indeterminateBar");
206                                                progressBar.set({indeterminate: false, label: 'Loading...'});
207
208                                                doh.is("Loading...", dom.byId("indeterminateBar_label").innerHTML);
209                                                var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
210                                                doh.is("50%", visualProgress.style.width);
211                                                doh.f(domClass.contains(progressBar.domNode, "dijitProgressBarIndeterminate"), "doesn't have class dijitProgressBarIndeterminate");
212                                        }
213                                },
214                                {
215                                        name: "programmatic indeterminate",
216                                        runTest: function(){
217                                                var progressBar = registry.byId("pi");
218                                                var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
219                                                doh.is("100%", visualProgress.style.width);
220
221                                                doh.t(domClass.contains(progressBar.domNode, "dijitProgressBarIndeterminate"), "has class dijitProgressBarIndeterminate");
222
223                                                progressBar = registry.byId("timerBar");
224                                                doh.t(80 < progressBar.progress <= 100, "Timer progress was " + progressBar.progress);
225                                        }
226                                },
227                                {
228                                        name: "set zero maximum",
229                                        runTest: function(){
230                                                var d = new doh.Deferred();
231
232                                                var progressBar = registry.byId("setTestBar");
233                                                progressBar.set({maximum: 0, value: 0});
234
235                                                doh.is("0", progressBar.progress);
236                                                doh.is("0%", dom.byId("setTestBar_label").innerHTML);
237                                                var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
238                                                doh.is("0%", visualProgress.style.width);
239                                        }
240                                },
241                                {
242                                        name: "programmatic instantiation without params",
243                                        runTest: function(doh){
244                                                var pb, success;
245                                                try{
246                                                        pb = new ProgressBar();
247                                                        pb.destroyRecursive();
248                                                        success = true;
249                                                }catch(e){}
250                                                doh.t(success, "Instantiation w/o params should not throw");
251                                        }
252                                }
253                        ]);
254
255                        doh.run();
256
257                        // An example of polling on a separate (heartbeat) server thread.  This is useful when the progress
258                        // is entirely server bound and there is no existing interaction with the server to determine status.
259
260                        // We don't have a server to run against, but a simple heartbeat implementation might look something
261                        // like this:
262
263                        // function getProgressReport(){
264                        //      var dataSource = "http://dojotoolkit.org";
265                        //      return dojo.xhrGet({url: dataSource, handleAs: "json", content: {key: "progress"}});
266                        // }
267
268                        // Instead, we'll just tick off intervals of 10
269
270                        var fakeProgress = 0;
271                        function getProgressReport(){
272                                var deferred = new Deferred();
273                                fakeProgress = Math.min(fakeProgress + 10, 100);
274                                deferred.resolve(fakeProgress+"%");
275                                return deferred;
276                        }
277
278                        function remoteProgress(bar){
279                                var _timer = setInterval(function(){
280                                        var report = getProgressReport();
281                                        report.then(function(response){
282                                                bar.set({value: response});
283                                                if(response == "100%"){
284                                                        clearInterval(_timer);
285                                                        _timer = null;
286                                                }
287                                        });
288                                }, 3000); // on 3 second intervals
289                        }
290
291                        function setParameters(){
292                                registry.byId("setTestBar").set({maximum: dom.byId("maximum").value, value: dom.byId("progressValue").value});
293                        }
294
295                        function keyUpHandler(){
296                                registry.byId("testBar").set({value:dom.byId("test").value.length});
297                                registry.byId("testBarInt").set({value:dom.byId("test").value.length});
298                                registry.byId("smallTestBar").set({value:dom.byId("test").value.length});
299                        }
300                });
301        </script>
302</head>
303<body class="claro" role="main">
304
305        <script type=dojo/require>
306                registry: "dijit/registry"
307        </script>
308
309        <h1 class="testTitle">Dijit ProgressBar Tests</h1>
310
311        <h3>Test 1</h3>
312        <label for="progressValue">Progress Value </label><input type="text" name="progressValue" id="progressValue" />
313        <br>
314        <label for="maximum">Max Progress Value </label><input type="text" name="maximum" id="maximum" />
315        <br>
316        <input type="button" name="set" id="set" value="set!" />
317        <br>
318        <div id="setTestBar" data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:400px",
319                maximum:200, value:"20" '></div>
320
321        <h3>Test 2</h3>
322        <label for="test">Write here: </label><input type="text" value="" name="test" maxLength="256" id="test" style="width:300px"/>
323        <br />
324        <br />
325        <div id="testBar" style='width:300px'></div>
326        <br />
327        Small, without text and background image:
328        <br />
329        <div id="smallTestBar" data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:400px; height:10px", "class":"smallred", maximum:256'></div>
330        <br />
331        Show decimal place:
332        <div id="testBarInt" data-dojo-type="dijit/ProgressBar" data-dojo-props='places:1, style:"width:400px",
333                maximum:256'></div>
334
335        <h3>Test 3</h3>
336        No explicit maximum (both 50%)
337        <div id="implied1" data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:400px",
338                value:"50" '></div>
339        <br />
340        <div id="implied2" data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:400px",
341                value:"50%" '></div>
342
343        <h3>Test 4</h3>
344        <input type="button" name="startTimer" id="startTimer" value="Start Timer" />
345        <div id="timerBar" data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:400px", maximum:100, value:"0" '></div>
346
347        <h3>Test 5 - indeterminate progess</h3>
348        <input id="indeterminateButton1" type="button" value="Make Indeterminate (default blank label)"
349                onclick="registry.byId('indeterminateBar').set({indeterminate: true, label: ''});" />
350        <input id="labelButton1" type="button" value="Make Determinate (default percentage label)"
351                onclick="registry.byId('indeterminateBar').set({indeterminate: false, label: ''});" />
352        <input id="indeterminateButton2" type="button" value="Make Indeterminate With Label"
353                onclick="registry.byId('indeterminateBar').set({indeterminate: true, label: 'Loading...'});" />
354        <input  id="labelButton2" type="button" value="Make Determinate With Label"
355                onclick="registry.byId('indeterminateBar').set({indeterminate: false, label: 'Loading...'});" />
356       
357        <div id="indeterminateBar" data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:400px", value:"50" '></div>
358
359        <h3>Test 6 - programatic indeterminate</h3>
360        <div id="pi"></div>
361
362</body>
363</html>
Note: See TracBrowser for help on using the repository browser.