Using YUI Test to unit test Atalasoft WebControls
Yesterday I read an informative article on how to get started using YUI Test to write unit tests for JavaScript, by Nicholas C. Zakas. After reading this article, I decided to give it a try, by testing some functions of the WebImageViewer and the WebThumbnailViewer controls.
It took me all of about 15 minutes to write this demo, while following the instructions, and a few more minutes polishing it up for this post. I am really impressed how easy YUI Test is to work with, and how quickly I was able to get up and running.
Kudos to the YUI team!
Here's a link to my online YUI Test Unit Testing Demo, and here's the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>YUI Test Unit Testing Demo</title>
<!--CSS-->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/logger/assets/logger.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/yuitest/assets/testlogger.css" />
<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/logger/logger-min.js&2.6.0/build/yuitest/yuitest-min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>Using YUI Test to Unit Test Atalasoft WebControls</div>
<div style="height:800px;">
<table border="0" cellpadding="0" cellspacing="2" style="width:100%; height:100%">
<tr><td colspan="2" style="width:100%; height:36px;">
<input type="button" onclick="OpenTestImage(); return false;" value="Open Image and run tests" />
</td></tr>
<tr><td style="width:200px; height:100%; border: 1px solid black; background-color:Silver">
<cc1:WebThumbnailViewer ID="WebThumbnailViewer1" runat="server"
Width="150px"
Height="100%"
TitleBar="Thumbs"
ViewerID="WebImageViewer1"
Centered="true" />
</td><td style="width:100%; height:100%; border: 1px solid black; background-color:Silver">
<cc1:WebImageViewer ID="WebImageViewer1" runat="server"
Width="100%"
Height="100%"
AutoZoom="BestFit"
AntialiasDisplay="ScaleToGray"
TitleBar="Image" />
</td></tr>
</table>
</div>
<script language="javascript" type="text/javascript">
var _testUrl = 'Images/DocCleanMultipage.tif';
var _testIndex = 1;
var _logger = null;
// Runs once the page has finished loading
atalaInitClientScript(Init);
function Init(){
InitEvents();
InitTests();
}
// Bind our event handlers
function InitEvents(){
WebThumbnailViewer1.UrlChanged = UrlLoaded;
WebThumbnailViewer1.SelectedIndexChanged = IndexChanged;
// We use ImageSizeChanged because this event fires when
// a callback is returned from the server, ImageChanged fires immediately
WebImageViewer1.ImageSizeChanged = ImageLoaded;
}
// Set up the test functions
function InitTests(){
var testCase = new YAHOO.tool.TestCase({
name: "Open Image Tests",
testUrlLoaded : function(){
// tests whether the url given is the one that was loaded in the WebThumbnailViewer
YAHOO.util.Assert.areEqual(_testUrl, WebThumbnailViewer1.getUrl());
},
testSelectedIndex : function(){
// tests that the index given is returned as being selected in the WebThumbnailViewer
YAHOO.util.Assert.areEqual(_testIndex, WebThumbnailViewer1.getSelectedIndex());
},
testImageLoaded : function(){
// tests whether the url given is the one that was loaded in the WebImageViewer
YAHOO.util.Assert.areEqual(_testUrl, WebImageViewer1.getImageUrl());
},
testFrameIndex : function(){
// tests that the given selected index was the index loaded into the WebImageViewer
YAHOO.util.Assert.areEqual(_testIndex, WebImageViewer1.getFrameIndex());
}
});
// Add the test case to the test runner
YAHOO.tool.TestRunner.add(testCase);
// Create the logger (shows it too)
_logger = new YAHOO.tool.TestLogger("testLogger");
}
// Select a thumbnail once the image has been loaded into the thumbnailviewer
function UrlLoaded(){
WebThumbnailViewer1.SelectThumb(_testIndex);
}
// Change the test's selected index, so that clicking on a thumb will test that index
function IndexChanged(){
_testIndex = WebThumbnailViewer1.getSelectedIndex();
}
// We want to run the tests after the callback from the server
// If this were an automated test, this should have a time limit
// so we can run the tests even if there is no response from the server
function ImageLoaded(){
RunTests();
}
// Run the tests
function RunTests(){
YAHOO.tool.TestRunner.run();
}
// Open the test image
function OpenTestImage(){
WebThumbnailViewer1.OpenUrl(_testUrl);
}
</script>
</form>
</body>
</html>
