Up untill now I was used to write all my code inside the ready() function like:
$(document).ready(function() {
// all my code
});
Now I see that with this approach, my code is not "unit testable", e.g. I cannot access the stuff inside ready() from QUnit.
What is the proper way to structure jQuery code that is compatible with using the ready() function and able to be tested?
Is there a good open source code base or project to study and learn from?
Have your code in the ready handler just calling functions outside of the ready handler:
$(document).ready(function() {
// call some functions outside of handler
});
// most of my code
That way, you can call those functions for unit testing as well.
NB, there's a short-cut for $(document).ready:
$(function() {
// call some functions outside of handler
});
// most of my code
$(document).ready(function(){}); is identical to $(function(){}); in terms of functionality. They will both call the handlers either when the dom ready event is fired, or when they are evaluated if the dom ready event has already fired. From the jQuery docs: All three of the following syntaxes are equivalent: $(document).ready(handler), $().ready(handler) (this is not recommended), $(handler).I see two approaches.
Place the QUnit code inside document ready to run after your own code.
Place your code in a module.
Option #2 looks like this:
var MyModule = (function() {
// Your code
}());
$(document).ready(function() {
// Quit tests, referring to MyModule.xxx
});
In option #2 it is true you do not get access to private elements within the module.
Ben Cherry talked about this a while ago in http://www.adequatelygood.com/2010/7/Writing-Testable-JavaScript where he actually made a controversial comment about closure-based privacy because of its impact on unit testing.
$(document).ready(function() { }); - QUnit already does that for you.One of the most effective approaches is to structure your coding using JS "namespaces" and indeed you can get a great example from the jQuery core.
A strange approach that I took with untestable jQuery scripts goes like this:
So start with a browser run to at least sanity check!
