How can I test unit test my jQuery-based code?

Question

I have following code in a file named index.js. I want to test some functions in it add , print being the prime one.

(function($){
  "use strict";

  $(function(){

    var add = function(a, b){
    // ...
      },
    print = function(str){
    // ...
      },
      setup = function(){
    // ...
      },
      init = function(){
    // ...
      };

      setup();
      init();
  });
})(jQuery);

How can I do so? Does this way of coding add any security on client side? All I have is code that runs on the client side. No server involvement what-so-ever.

I tried :

var outerObj = (function(greet){
    var innerObj = (function(){
        return {test: function(){ console.log(greet); }}
    })();
    return innerObj;
})("hi");

outerObj.test();

but, in my case, innerObj line has a $ on the right hand of equal sign, making console yell error that shouts $(...) is not a function . Which I agree, it's an array of single document object.

Check out var a = (function(){ var val = $(function(){return 10;})(); })(); in any jquery enabled web-page's console, for the error.

Even if I ditch outer shell and bring $(function() {}); out. How am I gonna test that?

It's still an object, still an error.

What kind of testing can I perform, unit, bdd, etc. and how?

Answer 1

I don't quite see what pattern you're using here - it seems like a bit of an anti-pattern. It's not testable, and doesn't expose any behaviour for real world use. I'd highly recommend reading (or at least skimming) Javascript Design Patterns by Addy Osmani, available for free.

For Unit Testing, I've always found a happy midpoint between the simple constructor pattern and revealing module pattern easiest to work with.

var x = function($){
"use strict";

  var add = function(a, b){
     alert('add');
    },
    print = function(str){
     return 1;
    },
    setup = function(){
      alert('setup');
    },
    init = function(){
      alert('init');
    };

  init();
  setup();

  return {
      add: add,
      print: print
  };
};

var y = new x(jQuery);

In the above example, y will have the add and print methods available. Check out a sample test on this fiddle .

As a side note, I've recently been using the excellent QUnit framework for setting up and running my JS Unit Tests. It's by the jQuery Team, so you know it's gonna be good ;). I'd also suggest checking out BlanketJS for reporting on coverage, and qunit-parameterize for setting up multiple test cases.

For what its worth, BDD isn't a 'test type', but a way of working. For what tests you should have - Unit Tests and Integration Tests are the most important 2, IMO. I use QUnit for Unit Tests, and Selenium with NUnit for Integration Testing.