jquery-rescope: DOM Mocking Made Easy

It’s easy to declare a technique to be correct, but it’s another thing to try and make it practical.

So after writing about Oreo Testing, I decided to convert the getJqueryMockDocument function from my sample into something that could be distributed and used by others.  Given its nature, a  jQuery plugin seemed like the most natural option.

It should surprise no one who's read this far that I rewrote it using TDD to ensure that it:

• follows AMD conventions
• follows jQuery’s basic and advanced guidelines for plugin creation
• performs its expected functions across all common, current browsers (of course)

Usage: Updating the Façade Example

Its usage should be straight-forward enough: invoke the plugin to separate a selected (or created) node from the current DOM and isolate it into a new one.  

Using our earlier façade example as a demonstration, it would be changed by:

1. Adding a reference to the rescope plugin:
   

   <script src="sampleViewFacade.js" type="text/javascript"></script>
   <script src="sampleViewFacade.tests.js" type="text/javascript"></script>
   <script src="jquery.min.js" type="text/javascript"></script>
   <script src="jquery-rescope.js" type="text/javascript"></script>
   

   HTML script tags including test JavaScript as well as jQuery and rescope plugin

2. Removing the getJqueryMockDocument function and replace all calls to it with $(...).rescope():

   $mock = $('<div class="sample"><input id="correctElement" type="checkbox" /></div>').rescope();
   …
   $mock = $('').rescope();
   …
   $mock = $('<button id="clickme">').rescope();
   

   Replacement lines for calls to getJqueryMockDocument using rescope

In my opinion, not only is this obviously much easier to incorporate into other projects, this is much more concise and readable.

Set it Free(ly licensed on GitHub)! 

The last step in distributing software is making it available! I have done so, not through some run-of-the-mill lazy link on my blog!  Oh no!

I tried something new (and long overdue) and created a repository for jquery-rescope on GitHub. I cordially invite you to browse the code, download it, submit pull requests, write up issues and otherwise make me feel like a real open sourcerer!

More to Come? 

For all the pixels I've spilled on this topic, I doubt this will be the last time that I write about it.

For example I stumbled into the interesting practice of wrapping each test modules in an IIFE so that I could run them all from a single HTML page without corrupting each test's namespace.

Most importantly, I haven’t found or heard any feedback that this combination of black-box and white-box testing is widely known or practiced.  Given all of its advantages, I can imagine myself continuing to advocate it as the Right Way to do TDD from now on.

jquery-rescope plugin on GitHub

Download my updated code from this article
Browse the source from this article on GitHub