SOURCE CODE: UIZE Unit Tests
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>UIZE Unit Tests | JavaScript Examples | UIZE JavaScript Framework</title>
<meta name="keywords" content="Uize.Test Uize.Widget.Log"/>
<meta name="description" content="See how to run the various unit tests of the UIZE JavaScript Framework. Run a unit test and watch as the test runner chunks through its tests."/>
<link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
<link rel="stylesheet" href="../css/page.css"/>
<link rel="stylesheet" href="../css/page.example.css"/>
<link rel="stylesheet" href="../css/widget.log.css"/>
<style type="text/css">
.testControl {
width:740px;
margin:auto;
padding:10px;
background:#becacd url(../images/page-contents-bg.gif) repeat-x left top;
border:1px solid #899;
}
.testControl .testControlButton {
display:block;
width:70px;
margin:auto;
float:left;
}
.log {
width:756px;
margin:0;
}
.log .logMessages {
height:200px;
}
/*** progress bar ***/
.progressBarShell {
width:729px;
height:35px;
padding:3px;
border:1px solid #bcc;
margin:auto;
margin-top:10px;
background:#fff;
}
.progressBar {
position:relative;
width:100%;
height:100%;
}
.progressBar .progressBarTrack,
.progressBar .progressBarTrack .progressBarTrackBg,
.progressBar .progressBarTrack .progressBarTrackFull,
.progressBar .progressBarTrack .progressBarTrackEmpty,
.progressBar .progressBarTrack .progressBarStatusText
{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.progressBar .progressBarTrack .progressBarTrackBg {
background:#000 url(../images/title-bg.gif) repeat-x left top;
}
.progressBar .progressBarTrack .progressBarTrackFull {
background:#0f0;
opacity:.55;
filter:alpha(opacity=55);
}
.progressBar .progressBarTrack .progressBarTrackEmpty {
background:#ddd;
opacity:.2;
filter:alpha(opacity=20);
}
.progressBar .progressBarTrack .progressBarStatusText {
font-size:16px;
letter-spacing:2px;
color:#fff;
text-shadow:
-1px -1px 0 rgba(0,0,0,.4),
-1px 1px 0 rgba(0,0,0,.4),
1px -1px 0 rgba(0,0,0,.4),
1px 1px 0 rgba(0,0,0,.4)
;
text-align:center;
line-height:30px;
}
</style>
</head>
<body>
<script type="text/javascript" src="../js/Uize.js"></script>
<h1 class="document-title">
<a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
<a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
UIZE Unit Tests
<div id="page-actions" class="pageActions">
<a href="source-code/uize-unit-tests.html" class="buttonLink">SOURCE</a>
</div>
</h1>
<div class="main">
<!-- explanation copy -->
<div class="explanation">
<p>This example lets you select and run any of the tests of the UIZE JavaScript Framework. Use the test selector to choose your test (an asterisk indicates a minimal load-module-and-build-it test that has been dynamically created because no dedicated test exists for a module). On selecting a test, the test will be loaded dynamically, during which time the <b>"START"</b> and <b>"STOP"</b> buttons will be disabled. After it has loaded, the buttons will be enabled again. Use the <b>"START"</b> button to start running the selected test. While the test is being performed, the progress bar will be updated to show how far you are through the test. Also, the log will be written to with details of the test's progress. You can stop the test at any time using the <b>"STOP"</b> button. If the test fails, test execution will be aborted and a synopsis of the failure will be displayed in a dialog. To run the entire test suite for the UIZE JavaScript Framework, select the <b>"RUN ALL MODULE TESTS"</b> option.</p>
</div>
<!-- button -->
<div class="testControl">
<div style="float:left; line-height:22px; margin-right:5px;">SELECT A TEST:</div>
<select id="page-testSelector" style="float:left; margin-right:15px;"></select>
<div id="page_startTests" class="testControlButton button"><span id="page_startTests-text">START</span></div>
<div id="page_stopTests" class="testControlButton button"><span id="page_stopTests-text">STOP</span></div>
<br style="clear:left;"/>
<div id="page_progressBar-shell" class="progressBarShell">
<div id="page_progressBar" class="progressBar">
<div id="page_progressBar-track" class="progressBarTrack">
<div class="progressBarTrackBg"></div>
<div id="page_progressBar-full" class="progressBarTrackFull"></div>
<div id="page_progressBar-empty" class="progressBarTrackEmpty"></div>
<div id="page_progressBar-statusText" class="progressBarStatusText"></div>
</div>
</div>
</div>
</div>
<div style="height:4px;"></div>
<div id="page_log-shell" style="width:762px; margin:0 auto;"></div>
</div>
<!-- JavaScript code to make the HTML "come alive" -->
<script type="text/javascript">
Uize.module ({
required:[
'UizeSite.Page.Example.library',
'UizeSite.Page.Example',
'Uize.Widget.Button',
'Uize.Widget.Bar',
'Uize.Widget.Log',
'Uize.Templates.Log',
'Uize.String',
'UizeSite.ModulesTree',
'Uize.Data.PathsTree',
'Uize.Url',
'Uize.Test'
],
builder:function () {
var
runAllModuleTests = 'RUN ALL MODULE TESTS',
RunAllTests,
testSuiteClass,
testSuite,
totalTests,
currentTestNo
;
/*** prepare list of all modules to test ***/
var
nonTestModulesTree = UizeSite.ModulesTree (),
testsSubTree = nonTestModulesTree.Uize.Test,
testNames = [],
testNamesExcludingLibraries = []
;
delete nonTestModulesTree.Uize.Test;
var testsSubTreeLookup = Uize.lookup (Uize.Data.PathsTree.toList (testsSubTree));
for (
var
testNo = -1,
testNames =
Uize.keys (
Uize.copyInto (
Uize.lookup (Uize.Data.PathsTree.toList (nonTestModulesTree)),
testsSubTreeLookup
)
).sort (),
testNamesLength = testNames.length,
testName
;
++testNo < testNamesLength;
)
(testName = testNames [testNo]) != 'Performance' && // ignore the Uize.Test.Performance namespace module
testName.lastIndexOf ('library') != testName.length - 7 && // ignore .library modules
testNamesExcludingLibraries.push (testName)
;
testNames = testNamesExcludingLibraries;
/*** create the example page widget ***/
var page = window.page = UizeSite.Page.Example ();
/*** add the progress bar widget ***/
var progressBar = page.addChild (
'progressBar',
Uize.Widget.Bar,
{minValue:0,maxValue:1,increments:0,orientation:'horizontal'}
);
/*** add the start and stop buttons ***/
page.addChild ('startTests',Uize.Widget.Button,{enabled:false}).wire (
'Click',
function () {
prepareToRunTests ();
testSuite.run ();
}
);
page.addChild ('stopTests',Uize.Widget.Button,{enabled:false}).wire (
'Click',
function () {testSuite.stop ()}
);
/*** add the log widget ***/
var log = page.addChild ('log',Uize.Widget.Log,{built:false,html:Uize.Templates.Log,title:'TEST LOG'});
/*** wire up the page widget ***/
page.wireUi ();
/*** prepare to run tests ***/
function prepareToRunTests () {
currentTestNo = 0;
updateProgressBar ();
log.clear ();
}
/*** update progress bar status text ***/
function updateProgressBar () {
progressBar.set ({value:currentTestNo / (totalTests || 1)})
page.children.progressBar.setNodeValue (
'statusText',
currentTestNo + ' of ' + (totalTests || 0) + ' tests completed'
);
}
/*** handle selection of test ***/
function setWidgetsEnabled (mustEnable) {
var enabled = mustEnable ? 'inherit' : false;
page.children.startTests.set ({enabled:enabled});
page.children.stopTests.set ({enabled:enabled});
}
function selectTest (callback) {
function instantiateTestSuite (testSuiteClass) {
setWidgetsEnabled (true);
totalTests = (testSuite = new testSuiteClass).getTotalTests ();
prepareToRunTests ();
testSuite.wire ({
Start:
function (e) {
log.log (Uize.String.repeat ('...',e.source.getDepth ()) + e.source.get ('title'));
},
Done:
function (e) {
var
test = e.source,
reasonForFailure = test.get ('reasonForFailure')
;
currentTestNo++;
updateProgressBar ();
log.log (
Uize.String.repeat ('...',test.getDepth () + 1) +
(
test.get ('result')
? ('PASSED!!! (duration: ' + test.get ('duration') + 'ms)')
: ('*** FAILED *** ' + (reasonForFailure || ''))
)
);
reasonForFailure && alert (test.getSynopsis ());
}
});
callback && callback ();
}
testSuite && testSuite.stop ();
setWidgetsEnabled (false);
prepareToRunTests ();
var testName = page.getNodeValue ('testSelector');
if (testName == runAllModuleTests) {
if (!RunAllTests) {
var test = [];
for (var testNo = -1, testNamesLength = testNames.length, testName; ++testNo < testNamesLength;)
/^Performance(\..*)?$/.test (testName = testNames [testNo]) ||
test.push (
testsSubTreeLookup [testName]
? Uize.Test.testModuleTest ('Uize.Test.' + testName)
: Uize.Test.requiredModulesTest (testName)
)
;
RunAllTests = Uize.Test.declare ({title:'UIZE Unit Tests',test:test});
}
instantiateTestSuite (RunAllTests);
} else if (testsSubTreeLookup [testName]) {
var testModuleName = 'Uize.Test.' + testName;
Uize.module ({
required:testModuleName,
builder:function () {instantiateTestSuite (eval (testModuleName))}
});
} else {
instantiateTestSuite (Uize.Test.requiredModulesTest (testName));
}
}
page.wireNode ('testSelector','change',function () {selectTest ()});
/*** initialize ***/
/*** populate test selector ***/
var
testSelector = page.getNode ('testSelector'),
testSelectorOptions = testSelector.options
;
testSelectorOptions [testSelectorOptions.length] = new Option (runAllModuleTests,runAllModuleTests);
for (var testNo = -1, testNamesLength = testNames.length, testName; ++testNo < testNamesLength;)
testSelectorOptions [testSelectorOptions.length] = new Option (
((testName = testNames [testNo])) + (testsSubTreeLookup [testName] ? '' : ' *'),
testName
)
;
/*** initialize test selector, using runtest query param ***/
var runTest = Uize.Url.fromParams (location.href).runtest;
page.setNodeValue ('testSelector',runTest || runAllModuleTests);
selectTest (function () {runTest && testSuite.run ()});
}
});
</script>
</body>
</html>