Wednesday, 18 June 2008

Clicking the buttons in QUnit functional testing with JQuery

I avoided using JQuery in my test pack for as long as I could, to try and learn a little about JavaScript the hard way. But I just could not get my button clicking test working cross browser. But clever JavaScript ninjas invented libraries like JQuery to help with exactly that type of problem so...


I wrote the previous posts in this series over on EvilTester:
  1. Test Driven JavaScript using QUnit
  2. Test Driven JavaScript Code Coverage using JSCoverage
  3. Functional testing JavaScript with QUnit - initial steps
In this post I shall use JQuery to 'click' on a button. So that I can 'functionally test' the button click side-effects. I have a button on my GUI which I want to click and make sure the side-effects of calling the function attached to that button display the results I expect on screen:
The following code only works in IE and generates a click event to trigger my button:
test("process eprime text by clicking on button",function(){
expect(3);
document.getElementById("inputtext").value=
              "Surely and \nIsn't this being" +
      " some bad text or rather Bob's WASn't he's being good";
        
var clickevent=document.createEvent('MouseEvents')
clickevent.initEvent('click', true, true)
document.getElementById("CheckForEPrimeButton").dispatchEvent(clickevent)
 
equals(document.getElementById("wordCount").innerHTML,
       15,"displayed wordCount = 15");
equals(document.getElementById("discouragedWordCount").innerHTML,
       4,"displayed discouragedWordCount = 4");
equals(document.getElementById("possibleViolationCount").innerHTML,
       2,"displayed possibleViolationCount = 2"); 
 
});      
Sadly it fails in FireFox, but when I introduce the JQuery
  
test("process eprime text by clicking on button using JQuery",function(){
expect(3);
document.getElementById("inputtext").value=
         "Surely and \nIsn't this being" +
 " some bad text or rather Bob's WASn't he's being good";
 
$("#CheckForEPrimeButton").click();
         
equals(document.getElementById("wordCount").innerHTML,
       15,"displayed wordCount = 15");
equals(document.getElementById("discouragedWordCount").innerHTML,
       4,"displayed discouragedWordCount = 4");
equals(document.getElementById("possibleViolationCount").innerHTML,
       2,"displayed possibleViolationCount = 2"); 
 
});


Voila, cross-browser functional testing and less code to boot.

Sunday, 8 June 2008

Book Review: Pragmatic Ajax - A Web 2.0 Primer by Gehtland, Galbraithand Almaer

The Ajax world moves really quickly, and has moved on a lot since the publication of this book, so much so that it could really do with a new edition. Fortunately, with the sub title "A Web 2.0 Primer", we should expect an overview, and in some ways it doesn't matter that we don't get the most up to date information.
[amazon.co.uk]
[amazon.com]


As a novice JavaScript programmer I did learn a lot from this book, but after having read it once, I doubt I'll really refer to it again.
The authors start by explaining a little about Ajax architecture. And an example of creating a very simplified Google Maps which I think I would have preferred as an appendix as it didn't really deliver an Ajax app, but I did learn a little about png that I didn't know.
"Chapter 3 - Ajax in Action" and we really start to learn some Ajax as we get to see the XMLHttpRequest in action. A quick overview of cross-browser compatibility opens our eyes to the fact that we should probably find a decent Ajax library and use that.
Chapter 4 provides an 'essentials' guide to JavaScript which I thought provided the basics of JavaScript very quickly and concisely. I learned a bit more about HTML events, and Dom manipulation - although I also learned that I really need to find a good library and use that. The book's age means that it does not cover JQuery.
The next few chapters then cover a few JavaScript frameworks: Dojo Toolkit, JSON-RPC, Prototype. Then a few client-server type frameworks DWR (Java), Ajax.Net, SAJAX. Then a few GUI libraries: Script.aculo.us, Backbase, SmartClient.
Unfortunately for the book, more frameworks exist now, than did at the time of publication, and the ones mentioned have advanced so you can read the coverage in this book as 'libraries do things like this' and then you have to go hunt the web and consult ajaxian.com to find out the new libraries that 'everyone' uses.
The chapter on Debugging helped but, again, the debuggers mentioned have all advanced and new ones have appeared e.g. GreaseMonkey techniques, FireBug. I did not know about Venkman, Mochikit, or View Source Chart, so I did learn something.
Sadly the book has no mention of Test Driven Development techniques or JavaScript unit testing e.g. JSUnit or QUnit.
Degradable Ajax then has a chapter to itself - how to make your apps work with or without JavaScript, and a short discussion of if you should even bother to degrade.
Then an examination of some server-side integration frameworks: JSON-RPC, SAJAX (PHP), Ruby on Rails, DWR (Java), Ajax.Net, and Atlas (.Net).
The book ends with a quick overview of the (then) new Canvas, and SVG.
A pretty quick book to read. Which you immediately want to supplement with some good web searches, but with sadly few follow on links in the book. The book's web page discussion area has very little information but downloading the book's code might prove interesting.
Just in case the above seems overly negative. At the same time as I read Pragmatic Ajax, I also read "Ajax: Your visual blueprint for creating rich internet applications", and I much preferred Pragmatic Ajax.

Related links: