You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
363 lines
13 KiB
363 lines
13 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<title>Dojo Toolkit - ProgressBar test</title> |
|
|
|
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/> |
|
|
|
<script src="boilerplate.js"></script> |
|
|
|
<style type="text/css"> |
|
body { |
|
margin: 1em; |
|
} |
|
.smallred .dijitProgressBarTile { |
|
background:red; |
|
} |
|
.smallred .dijitProgressBarLabel { |
|
display:none; |
|
} |
|
</style> |
|
|
|
<script type="text/javascript"> |
|
require([ |
|
"doh/runner", |
|
"dojo/Deferred", "dojo/dom", "dojo/dom-class", "dojo/dom-geometry", "dojo/on", "dojo/parser", "dojo/query", "dojo/string", |
|
"dijit/registry", "dijit/ProgressBar", "dojo/domReady!" |
|
], function(doh, Deferred, dom, domClass, domGeometry, on, parser, query, string, registry, ProgressBar){ |
|
|
|
var dir = domGeometry.isBodyLtr() ? "ltr" : "rtl"; |
|
|
|
doh.register("parse", function(){ |
|
return parser.parse(); |
|
}); |
|
|
|
doh.register("other setup", function(){ |
|
// Stuff from the original test file. Not sure if this is needed now that |
|
// the test is automated. |
|
|
|
// note that programmatic instantiation doesn't pull any parameters from the srcNodeRef, not even id |
|
var theBar = new ProgressBar({ |
|
id: "testBar", |
|
width: 400, |
|
maximum: 256, |
|
duration: 2000, |
|
dir: dir, |
|
report: function(percent){ |
|
return string.substitute("${0} out of ${1} max chars", [this.get('value'), this.maximum]); |
|
} |
|
}, dom.byId("testBar")); |
|
|
|
dom.byId("test").value=""; |
|
dom.byId("progressValue").value = registry.byId("setTestBar").value; |
|
dom.byId("maximum").value = registry.byId("setTestBar").maximum; |
|
on(dom.byId("test"), "keyup", keyUpHandler); |
|
on(dom.byId("set"), "click", setParameters); |
|
on(dom.byId("startTimer"), "click", function(){ remoteProgress(registry.byId("timerBar")); } ); |
|
|
|
// test 7 |
|
new ProgressBar({ |
|
style: "width:400px", |
|
indeterminate: true, |
|
dir: dir |
|
}, "pi"); |
|
}); |
|
|
|
doh.register("ProgressBar",[ |
|
{ |
|
name: "set valid value", |
|
runTest: function(){ |
|
var progressBar = registry.byId("setTestBar"); |
|
progressBar.set({maximum: 100, value: 58}); |
|
|
|
doh.is("58", progressBar.progress); |
|
doh.is("58%", dom.byId("setTestBar_label").innerHTML); |
|
var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0]; |
|
|
|
var width = visualProgress.style.width; |
|
width = width.substring(0, width.length-1); |
|
doh.t(57 < width <= 58); //IE thinks the width is 57.99 |
|
} |
|
}, |
|
{ |
|
name: "aria roles and attribute", |
|
runTest: function(){ |
|
var progressBar = registry.byId("setTestBar"); |
|
doh.is("progressbar", progressBar.domNode.getAttribute("role"), "ProgressBar needs role=progressbar"); |
|
doh.is(58, progressBar.domNode.getAttribute("aria-valuenow"), "expect aria-valuenow of 58"); |
|
doh.is(0, progressBar.domNode.getAttribute("aria-valuemin"), "expect aria-valuemin of 0"); |
|
doh.is(100, progressBar.domNode.getAttribute("aria-valuemax"), "expect aria-valuemax of 100"); |
|
doh.is("setTestBar_label", progressBar.domNode.getAttribute("aria-labelledby"), "expect aria-labelledby on progressbar"); |
|
progressBar = registry.byId("pi"); |
|
doh.f(progressBar.domNode.getAttribute("aria-valuenow"), "indeterminate progressbars should not have aria-valuenow"); |
|
} |
|
}, |
|
{ |
|
name: "set value too high", |
|
runTest: function(){ |
|
var d = new doh.Deferred(); |
|
|
|
var progressBar = registry.byId("setTestBar"); |
|
progressBar.set({maximum: 100, value: 101}); |
|
|
|
doh.is("100", progressBar.progress); |
|
doh.is("100%", dom.byId("setTestBar_label").innerHTML); |
|
var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0]; |
|
doh.is("100%", visualProgress.style.width); |
|
} |
|
}, |
|
{ |
|
name: "set zero value", |
|
runTest: function(){ |
|
var d = new doh.Deferred(); |
|
|
|
var progressBar = registry.byId("setTestBar"); |
|
progressBar.set({maximum: 100, value: 0}); |
|
|
|
doh.is("0", progressBar.progress); |
|
doh.is("0%", dom.byId("setTestBar_label").innerHTML); |
|
var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0]; |
|
doh.is("0%", visualProgress.style.width); |
|
} |
|
}, |
|
{ |
|
name: "set max value", |
|
runTest: function(){ |
|
var d = new doh.Deferred(); |
|
|
|
var progressBar = registry.byId("setTestBar"); |
|
progressBar.set({maximum: 100, value: 100}); |
|
|
|
doh.is("100", progressBar.progress); |
|
doh.is("100%", dom.byId("setTestBar_label").innerHTML); |
|
var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0]; |
|
doh.is("100%", visualProgress.style.width); |
|
} |
|
}, |
|
{ |
|
name: "report callback", |
|
runTest: function(){ |
|
var progressBar = registry.byId("testBar"); |
|
progressBar.set({value: 79}); |
|
doh.is("79", progressBar.progress); |
|
doh.is("79 out of 256 max chars", dom.byId("testBar_label").innerHTML); |
|
var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0]; |
|
width = visualProgress.style.width; |
|
doh.is("30.8", width.substring(0,4)); |
|
} |
|
}, |
|
{ |
|
name: "default maximum", |
|
runTest: function(){ |
|
var progressBar = registry.byId("implied1"); |
|
doh.is("50", progressBar.progress); |
|
doh.is("50%", dom.byId("implied1_label").innerHTML); |
|
var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0]; |
|
doh.is("50%", visualProgress.style.width); |
|
|
|
progressBar = registry.byId("implied2"); |
|
doh.is("50", progressBar.progress); |
|
doh.is("50%", dom.byId("implied2_label").innerHTML); |
|
visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0]; |
|
doh.is("50%", visualProgress.style.width); |
|
} |
|
}, |
|
{ |
|
name: "set indeterminate, no label", |
|
runTest: function(){ |
|
var progressBar = registry.byId("indeterminateBar"); |
|
progressBar.set({indeterminate: true, label: ''}); |
|
|
|
var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0]; |
|
doh.is("100%", visualProgress.style.width); |
|
doh.t(domClass.contains(progressBar.domNode, "dijitProgressBarIndeterminate"), "has class dijitProgressBarIndeterminate"); |
|
} |
|
}, |
|
{ |
|
name: "set determinate, no label", |
|
runTest: function(){ |
|
var progressBar = registry.byId("indeterminateBar"); |
|
progressBar.set({indeterminate: false, label: ''}); |
|
doh.is("50%", dom.byId("indeterminateBar_label").innerHTML); |
|
|
|
var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0]; |
|
doh.is("50%", visualProgress.style.width); |
|
doh.f(domClass.contains(progressBar.domNode, "dijitProgressBarIndeterminate"), "doesn't have class dijitProgressBarIndeterminate"); |
|
} |
|
}, |
|
{ |
|
name: "set indeterminate, custom label", |
|
runTest: function(){ |
|
var d = new doh.Deferred(); |
|
|
|
var progressBar = registry.byId("indeterminateBar"); |
|
progressBar.set({indeterminate: true, label: 'Loading...'}); |
|
|
|
doh.is("Loading...", dom.byId("indeterminateBar_label").innerHTML); |
|
var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0]; |
|
doh.is("100%", visualProgress.style.width); |
|
doh.t(domClass.contains(progressBar.domNode, "dijitProgressBarIndeterminate"), "has class dijitProgressBarIndeterminate"); |
|
} |
|
}, |
|
{ |
|
name: "set determinate, custom label", |
|
runTest: function(){ |
|
var progressBar = registry.byId("indeterminateBar"); |
|
progressBar.set({indeterminate: false, label: 'Loading...'}); |
|
|
|
doh.is("Loading...", dom.byId("indeterminateBar_label").innerHTML); |
|
var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0]; |
|
doh.is("50%", visualProgress.style.width); |
|
doh.f(domClass.contains(progressBar.domNode, "dijitProgressBarIndeterminate"), "doesn't have class dijitProgressBarIndeterminate"); |
|
} |
|
}, |
|
{ |
|
name: "programmatic indeterminate", |
|
runTest: function(){ |
|
var progressBar = registry.byId("pi"); |
|
var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0]; |
|
doh.is("100%", visualProgress.style.width); |
|
|
|
doh.t(domClass.contains(progressBar.domNode, "dijitProgressBarIndeterminate"), "has class dijitProgressBarIndeterminate"); |
|
|
|
progressBar = registry.byId("timerBar"); |
|
doh.t(80 < progressBar.progress <= 100, "Timer progress was " + progressBar.progress); |
|
} |
|
}, |
|
{ |
|
name: "set zero maximum", |
|
runTest: function(){ |
|
var d = new doh.Deferred(); |
|
|
|
var progressBar = registry.byId("setTestBar"); |
|
progressBar.set({maximum: 0, value: 0}); |
|
|
|
doh.is("0", progressBar.progress); |
|
doh.is("0%", dom.byId("setTestBar_label").innerHTML); |
|
var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0]; |
|
doh.is("0%", visualProgress.style.width); |
|
} |
|
}, |
|
{ |
|
name: "programmatic instantiation without params", |
|
runTest: function(doh){ |
|
var pb, success; |
|
try{ |
|
pb = new ProgressBar(); |
|
pb.destroyRecursive(); |
|
success = true; |
|
}catch(e){} |
|
doh.t(success, "Instantiation w/o params should not throw"); |
|
} |
|
} |
|
]); |
|
|
|
doh.run(); |
|
|
|
// An example of polling on a separate (heartbeat) server thread. This is useful when the progress |
|
// is entirely server bound and there is no existing interaction with the server to determine status. |
|
|
|
// We don't have a server to run against, but a simple heartbeat implementation might look something |
|
// like this: |
|
|
|
// function getProgressReport(){ |
|
// var dataSource = "http://dojotoolkit.org"; |
|
// return dojo.xhrGet({url: dataSource, handleAs: "json", content: {key: "progress"}}); |
|
// } |
|
|
|
// Instead, we'll just tick off intervals of 10 |
|
|
|
var fakeProgress = 0; |
|
function getProgressReport(){ |
|
var deferred = new Deferred(); |
|
fakeProgress = Math.min(fakeProgress + 10, 100); |
|
deferred.resolve(fakeProgress+"%"); |
|
return deferred; |
|
} |
|
|
|
function remoteProgress(bar){ |
|
var _timer = setInterval(function(){ |
|
var report = getProgressReport(); |
|
report.then(function(response){ |
|
bar.set({value: response}); |
|
if(response == "100%"){ |
|
clearInterval(_timer); |
|
_timer = null; |
|
} |
|
}); |
|
}, 3000); // on 3 second intervals |
|
} |
|
|
|
function setParameters(){ |
|
registry.byId("setTestBar").set({maximum: dom.byId("maximum").value, value: dom.byId("progressValue").value}); |
|
} |
|
|
|
function keyUpHandler(){ |
|
registry.byId("testBar").set({value:dom.byId("test").value.length}); |
|
registry.byId("testBarInt").set({value:dom.byId("test").value.length}); |
|
registry.byId("smallTestBar").set({value:dom.byId("test").value.length}); |
|
} |
|
}); |
|
</script> |
|
</head> |
|
<body class="claro" role="main"> |
|
|
|
<script type=dojo/require> |
|
registry: "dijit/registry" |
|
</script> |
|
|
|
<h1 class="testTitle">Dijit ProgressBar Tests</h1> |
|
|
|
<h3>Test 1</h3> |
|
<label for="progressValue">Progress Value </label><input type="text" name="progressValue" id="progressValue" /> |
|
<br> |
|
<label for="maximum">Max Progress Value </label><input type="text" name="maximum" id="maximum" /> |
|
<br> |
|
<input type="button" name="set" id="set" value="set!" /> |
|
<br> |
|
<div id="setTestBar" data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:400px", |
|
maximum:200, value:"20" '></div> |
|
|
|
<h3>Test 2</h3> |
|
<label for="test">Write here: </label><input type="text" value="" name="test" maxLength="256" id="test" style="width:300px"/> |
|
<br /> |
|
<br /> |
|
<div id="testBar" style='width:300px'></div> |
|
<br /> |
|
Small, without text and background image: |
|
<br /> |
|
<div id="smallTestBar" data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:400px; height:10px", "class":"smallred", maximum:256'></div> |
|
<br /> |
|
Show decimal place: |
|
<div id="testBarInt" data-dojo-type="dijit/ProgressBar" data-dojo-props='places:1, style:"width:400px", |
|
maximum:256'></div> |
|
|
|
<h3>Test 3</h3> |
|
No explicit maximum (both 50%) |
|
<div id="implied1" data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:400px", |
|
value:"50" '></div> |
|
<br /> |
|
<div id="implied2" data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:400px", |
|
value:"50%" '></div> |
|
|
|
<h3>Test 4</h3> |
|
<input type="button" name="startTimer" id="startTimer" value="Start Timer" /> |
|
<div id="timerBar" data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:400px", maximum:100, value:"0" '></div> |
|
|
|
<h3>Test 5 - indeterminate progess</h3> |
|
<input id="indeterminateButton1" type="button" value="Make Indeterminate (default blank label)" |
|
onclick="registry.byId('indeterminateBar').set({indeterminate: true, label: ''});" /> |
|
<input id="labelButton1" type="button" value="Make Determinate (default percentage label)" |
|
onclick="registry.byId('indeterminateBar').set({indeterminate: false, label: ''});" /> |
|
<input id="indeterminateButton2" type="button" value="Make Indeterminate With Label" |
|
onclick="registry.byId('indeterminateBar').set({indeterminate: true, label: 'Loading...'});" /> |
|
<input id="labelButton2" type="button" value="Make Determinate With Label" |
|
onclick="registry.byId('indeterminateBar').set({indeterminate: false, label: 'Loading...'});" /> |
|
|
|
<div id="indeterminateBar" data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:400px", value:"50" '></div> |
|
|
|
<h3>Test 6 - programatic indeterminate</h3> |
|
<div id="pi"></div> |
|
|
|
</body> |
|
</html>
|
|
|