Writing "unit testable" jQuery code?

Question

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?

Answer 1

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