SwiftLizard Interactive {Design, Development} » jquery

Development with jQuery & Qunit

Chris — Tue, 24 Nov 2009 01:13:30 +0000

Though a friend of mine and myself lately started again with continuous integration projects for the company’s we work for, and we both like test driven development, if it is no overkill, I came across Qunit which is a library provided by jQuery for Unittesting javascript. Until last week I did not even know something like this existed for Javascript, but I am very happy that I came across this . Because I think unittests are a good way to assure that your code works as expected, I´d like to show you how to setup and write jQuery unittests.

First of all you will need to download the following two files from the jQuery Api – Docs Website:

Qunit.js
Qunit.css

Afterwards you will need to create a new html file with the following code:



  
    
    
    
    
  
  
    QUnit example

This Html file will be the page we can view the testresults on.

In this tutorial I only like to give you a brief overview of what can be done how, because most of you will be familiar with writing unittests at other languages, and in the case of javascript and jQuery this will be almost the same.

So lets go write our first unittest:

  $(document).ready(function(){
    module("Basic Unit Test");
    test("Sample test", function()
    {
       expect(1);
       equals(divide(4,2),
        2,
        'Expected 2 as the result, result was: ' + divide(4,2));
    });
  });

If you now open the the html page in your prefered browser you will see something like this:

Your unittest failes, just like one might have expected because we never implemented the divide method into our code. But lets go step by step. You might have recognized several different parts of code in the js – snippet that need a little explanation.

First of all we have a line “module(“Basic Unit Test”);”. By adding this we are able to separate the modules we want to test visually on the test page. If you take a look on that page after running the tests you will read “1. Basic Unit Test module: Sample test (1, 0, 1)” at the moment. So the string we have set by adding “module(“Basic Unit Test”);” to our code is displayed there as well as some more information we have provided by the lines that followed this one.

Next line we have added so far was “test(“Sample test”, function(){});”. This is basically the declaration of a single test that you run. The first parameter is a String that simply gives the test a name(“1. Basic Unit Test module: Sample test (1, 0, 1)”), the second one is a callback function that is called the moment we run the test by loading the page. Lets go on analyzing the code we just tested.

Next thing you might have recognized is “expect(1);”, this is a simple declaration how many assertions we expect at this single test. At the moment we run only one so this is set to one. If we had set this one to two for instance, the result of our test would be that not one assertion has failed but two, because in that case we would also have forgotten to implement the second assertion.

Lets move on to the last line we just implemented “equals(divide(4,2),2,’Expected 2 as the result, result was: ‘ + divide(4,2));”. This is the actual assertion we wanted to make, just to make sure that the method “divide” works properly and returns the mathematical correct result. The Qunit method equals takes three parameters. The first one and the second one are the ones compared, the third is a String, a message you might want to print out. This message is handled by the Qunit.log() method I will show you later.

Besides the method equals there are two more methods provided to you for testing. They are called “ok” and “same”. While “ok” is a simple Boolean check and for this only takes two parameters, the Boolean value that has to be true in order to not make the test fail, and a message, the “same” method is kind of like equal. The only difference between those two is that equal only returns true if both, the first and the second parameter, are 100% equal ( like a === b), and same only compares the variables values vs. each other.

But let me give you some example code:

  var arrayContainer = {a: 'firstElement'};
  equals(arrayContainer, {a: 'firstElement'}, 'Will fail');
  same(arrayContainer, {a: 'firstElement'}, 'Will pass');

After describing the basics to you we can now start to make our test working. This is quite easy just add the following to your code:

  function divide(a,b)
  {
    return a / b;
  }

Your unit test passed, congratulations. But if you are a little bit like me you are missing the message we added to the equals assertion in our test, it is not displayed anywhere at our page, and even if you look at the console there will be nothing. This is because the public method Qunit.log() was indeed declared in the class file, but no code that would display the messages has been implemented. To my mind this was because the developers of Qunit wanted it to be up to your decision whether or not you like to display them.

It is done really easy and in this tutorial I will show you how to display them in the console of the browser (though it has one), just add the following on top of the ready callback :

  QUnit.log = function(result, message)
  {
    if (window.console && window.console.log)
    {
      window.console.log(result +' :: '+ message);
    }
  }

If you now reload the Unittest page, open up Firebug for instance (in prior), and switch to the console view of Firebug you will see this:

By now you should have the gear to develop some unittest for jQuery or any other javascript you use might in your project. I hope this tutorial has given you a good overview and a nice point to start from.

The following link provides a zip file with the summary of this tutorial:
jQunit-tutorial.zip

jQuery sortable with Iframes in FireFox

Chris — Sun, 15 Nov 2009 22:33:32 +0000

I came across this problem a week ago when I tried to develop an interface between an Iframe, or in Detail it’s content, and the iframes parent page. Turns out that the following code wouldn´t work in FireFox although all other browsers, yes even our friend the Internet Explorer, would behave as expected.

   function accessIframeJS(IframeName, methodName, methodParams)
   {
    var  IFrameObj  = window.frames[IframeName];
    var  methodCall = "IFrameObj."+methodName+"("+ methodParams +")";

    try{
       eval(methodCall);
    }catch(error){
       // some code here for error handling
    }
   }

Traced on Firebug it turns out that FireFox loses the IFrameObj on Drag & Drop while rewriting the DOM. Took me quite a while, and a long talk with uncle google until I took a look at bugzilla of mozzilla and the huge amount of iframe Bugs mentioned there. But I found the solution after reading alot of those posts,.. and yes as all ways it is an easy one, if you knew the solution.

function accessIframeJS(iframeId, methodName, methodParams)
 {
  var IFrameObj = document.getElementById(iframeId).contentWindow;
  var methodCall = "IFrameObj."+methodName+"("+ methodParams +")";

  try{
     eval(methodCall);
  }catch(error){
     // some code here for error handling
  }
 }

Ta ta,… this works everywhere,… but it took me a long search, until I found the post in Bugzilla.

How to develop a jQuery plugin

Chris — Sun, 15 Nov 2009 14:15:47 +0000

Lately I started a new project at a German ISP where we (the team and me) have to develop several extensions to jQuery in order to build a framework to work with in this project. I am using jQuery for several years now but never had to develop my own extensions, because most of the plugins available solved problems I came a cross. This time I have to do my own and started questioning uncle google about how to do it. No surprise there are several approaches to do a plugin for jQuery, but none of the tutorials I found answered all my Questions completely, so I decided to write this sum up of what I learned.

First of all you will need the basic wrapping:

(function($){
   // your js code goes here
})(jQuery);

This wrapping adds your code to the jQuery library if you add the js file to your page.
Next thing you will have to do is add the basic functionality to your plugin.

$.fn.yourPlugin = function(options){
}

By adding those lines to your js file within the first code snippet you now can access your plugin by:

$('#yourDomElement').yourPlugin();

Next you need to know the difference between private and public vars within the class you are developing. If you write something like:

   /**
     * default options for plugin
     * private
     * @var array defaultOptions
     */
    var defaultOptions = {
        action:       false,
        debug:        false
    }

This would be a private var witch is only accessible within the class it self. If you need to have a var of your class to be public you have to write something like this:

   /**
     * default options for plugin
     * public
     * @var array defaultOptions
     */
    $.fn.yourPlugin.defaultOptions = {
        action:       false,
        debug:        false
    }

One word has to be said by now, public variables can only be defined after the declaration of the constructor of your plugin, otherwise the compiler will throw a nice little javascript error because “yourPlugin” was not defined yet.
Now that we have learned this we can go on with the possibility of configuration for the plugin. Like in every other language we will need to have some basic properties for the class that can be overwritten by your needs. To do something like that is quite simple:

   /**
     * yourPlugin base constructor
     *
     * @param [] options
     * @return void
     */
    $.fn.yourPlugin = function(options){
        // extend default options with overrides
        var opts = $.extend({}, defaultOptions, options);
    }

So by now you can set the options you need by writing something like this:

   $('#yourDomElement').yourPlugin({
      action:       myAction
    });

In this case you would have set opts.action from “false” to “myAction”.
Next we will go to private and public class methods. It is allmost the same as defining public and private member variables of your class.
Something like this would be private:

   /**
     * private
     * method to do some vodoo
     */
    function yourPrivateClassMethod()
    {
        // the methods code
    }

And something like this is a public method:

   /**
     * public
     * method to do some vodoo
     */
    $.fn.yourPlugin.yourPublicClassMethod = function()
    {
        // the methods code
    }

Same rules like for the public member variables,… they have to be declared after your constructor, otherwise you will get an error. Another word of advise,.. as a developer I thought to access variables and methods within a class I can go by “this”,.. forget “this”,.. private methods and vars are accessed directly by their name, the public one you can access either by $(this).yourPlugin.yourPublicClassMethod() or $.fn.yourPlugin.yourPublicClassMethod().

So by now, if we put together the things we learned, we can do something like this:

(function($){
   /**
     * default options for plugin
     * private
     * @var array defaultOptions
     */
    var defaultOptions = {
        action:       false,
        debug:        false
    }

    /**
     * yourPlugin base constructor
     *
     * @param [] options
     * @return void
     */
    $.fn.yourPlugin = function(options){
        // extend default options with overrides
        var opts = $.extend({}, defaultOptions, options);

        switch(opts.action)
        {
        	case 'private':
        		yourPrivateClassMethod();
        		break;

        	case 'public':
        		$.fn.yourPlugin.yourPublicClassMethod();
        		break;
        }
    }

    /**
     * public
     * method to do some vodoo
     */
    $.fn.yourPlugin.yourPublicClassMethod = function()
    {
    	// should alert 'false', 'false',
    	//because the public vars where not set

        alert($.fn.yourPlugin.defaultOptions.action);
        alert($.fn.yourPlugin.defaultOptions.debug);
    }

    /**
     * default options for plugin
     * public
     * @var array defaultOptions
     */
    $.fn.yourPlugin.defaultOptions = {
        action:       false,
        debug:        false
    }

    /**
     * private
     * method to do some vodoo
     */
    function yourPrivateClassMethod()
    {
        alert('This method is private');
    }

})(jQuery);

I hope this little summary helped a little in understanding how javascript classes and jQuery work.
If you have any suggestion or did see some errors in this tutorial please let me know about it.