chris clarke
software development that works…or something
Unit Tests In Javascript
January 15, 2007 on 12:40 am | In Testing |Looking around for AJAX libraries to use for storyboard following a retrospective around the initial development, I stumbled across scriptaculous, one of the benefits being that it has it’s own unit test library.
An alternative may be to use jsUnit which has syntax much more familiar to anyone who’s ever used JUnit.
After I wrote the storyboard retrospective, I happened across Joe Walnes blog where I found Building testable AJAX apps (Does my button look big in this?). It was nice to see someone had a similar thoughts to myself as to why you would approach a Javascript project differently than you would any normal project; quoting Joe:
“What’s a bit annoying is that we know all this stuff already. And certainly we do this in any other type of GUI development, but when I came to first doing ajax I thought ‘oh. it’s just javascript, don’t really take it seriously, just wire up a little event in the html’ and it’s almost like we’ve regressed back to the VB days when you built a whole GUI by saying ‘Right, first I’m going to draw a button, then I’m going to put an onclick to the button then I’m going to write 10,000 lines of code on the onclick.’”
There were several other interesting things in Adam and Joes talk. They chose not to use Google Web Toolkit despite working for Google and in fact they did not appear to use any AJAX or Javascript libraries/frameworks apart from JsUnit. The best idea they had was to take a great approach to the application borrowing from ideas that you would use when developing a traditional GUI application (including Michael Feathers’ The Humble Dialog Box). They used a kind of Model View Controller to make the app more testable. In fact they were able to test some code in the controller without requiring a browser using Rhino Engine. The way they tested the view was most interesting: they did it manually - well almost - they had written a small bit of helper code that made all UI functions available to play around with in a sidebar. The sidebar also showed any Javascript events that had been fired (see image).
This seemed like a really logical way to test the UI controls and view of a GUI because often the only way to test usability is to use something. Also, making assertions on pixel widths and things just seems silly and static screen grabs are’nt the same thing as actualling using the app - so why not manually test it - especially nice if you can get some real users.
After speaking to someone in the pub about AJAX development, I was pointed towards two very useful looking tools. Prototype is a JavaScript Framework which provides some useful libraries and also some really useful extensions to the standard DOM. For example, using the extensions you can do cool stuff like this found at Sergio Pereiras site:
function findEmployeeById(emp_id){
var listBox = $('lstEmployees');
var options = listBox.getElementsByTagName('option');
options = $A(options);
var opt = options.find( function(employee){
return (employee.value == emp_id);
});
alert(opt.innerHTML); //displays the employee name
}
The $() operator is just a shortcut for document.getElementById(), and the $A() operator converts an element to an array, you can see how this function works based on the html below:
<select id="lstEmployees" size="10">
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
The other useful tool is Crosscheck which is a cross-browser testing framework which doesn’t actually require any browsers. This seems like a very useful solution for cross-browser compatibility testing of storyboard.
No Comments yet »
RSS feed for comments on this post. TrackBack URI
Leave a comment
Unit Tests In Javascript
January 15, 2007 on 12:40 am | In Testing |Looking around for AJAX libraries to use for storyboard following a retrospective around the initial development, I stumbled across scriptaculous, one of the benefits being that it has it’s own unit test library.
An alternative may be to use jsUnit which has syntax much more familiar to anyone who’s ever used JUnit.
After I wrote the storyboard retrospective, I happened across Joe Walnes blog where I found Building testable AJAX apps (Does my button look big in this?). It was nice to see someone had a similar thoughts to myself as to why you would approach a Javascript project differently than you would any normal project; quoting Joe:
“What’s a bit annoying is that we know all this stuff already. And certainly we do this in any other type of GUI development, but when I came to first doing ajax I thought ‘oh. it’s just javascript, don’t really take it seriously, just wire up a little event in the html’ and it’s almost like we’ve regressed back to the VB days when you built a whole GUI by saying ‘Right, first I’m going to draw a button, then I’m going to put an onclick to the button then I’m going to write 10,000 lines of code on the onclick.’”
There were several other interesting things in Adam and Joes talk. They chose not to use Google Web Toolkit despite working for Google and in fact they did not appear to use any AJAX or Javascript libraries/frameworks apart from JsUnit. The best idea they had was to take a great approach to the application borrowing from ideas that you would use when developing a traditional GUI application (including Michael Feathers’ The Humble Dialog Box). They used a kind of Model View Controller to make the app more testable. In fact they were able to test some code in the controller without requiring a browser using Rhino Engine. The way they tested the view was most interesting: they did it manually - well almost - they had written a small bit of helper code that made all UI functions available to play around with in a sidebar. The sidebar also showed any Javascript events that had been fired (see image).
This seemed like a really logical way to test the UI controls and view of a GUI because often the only way to test usability is to use something. Also, making assertions on pixel widths and things just seems silly and static screen grabs are’nt the same thing as actualling using the app - so why not manually test it - especially nice if you can get some real users.
After speaking to someone in the pub about AJAX development, I was pointed towards two very useful looking tools. Prototype is a JavaScript Framework which provides some useful libraries and also some really useful extensions to the standard DOM. For example, using the extensions you can do cool stuff like this found at Sergio Pereiras site:
function findEmployeeById(emp_id){
var listBox = $('lstEmployees');
var options = listBox.getElementsByTagName('option');
options = $A(options);
var opt = options.find( function(employee){
return (employee.value == emp_id);
});
alert(opt.innerHTML); //displays the employee name
}
The $() operator is just a shortcut for document.getElementById(), and the $A() operator converts an element to an array, you can see how this function works based on the html below:
<select id="lstEmployees" size="10">
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
The other useful tool is Crosscheck which is a cross-browser testing framework which doesn’t actually require any browsers. This seems like a very useful solution for cross-browser compatibility testing of storyboard.
No Comments yet »
RSS feed for comments on this post. TrackBack URI
Leave a comment
Powered by Cheese.
RSS Entries Feed.
RSS Comments Feed
^Top^