Geek Answers Handbook

JQuery test function document.ready

I have a question regarding unit testing jQuery document.ready function ().

I currently have 2 scripts in my code:

function myFunction() { $(document).ready(function() { ... }); }

and

 $(document).ready(function() { // some really long setup code here });

I tried to write unit test for the first script, but I just could not get it to work in the document.ready function. As for the second scenario, I still do not have the opportunity to check it (I had problems with the possibility of both checking and syntax).

So, if I cannot change the source code, are there any ways to test these functions? (assuming it's a good idea to check them out)

Thanks.

+4
source share
3 answers

To answer this question, see the posts here and here .

0
source

You do not need to test $(document).ready , as it is part of the structure and is already being tested. When writing unit tests, you need to check two things:

  • Your interaction with the wireframe. This includes things like making sure you call the correct functions with the correct parameters.
  • Your own code - your code does the right thing.

So what you really need to do is make sure that any code called from $(document).ready is correct.

 function myInit(){ //... } function myFunction() { $(document).ready(myInit); }

All you have to do now is the unit test myInit .

What you can also do is mock out $.ready to make sure you call it:

 var readyCalled = false; $.ready = function(func){ readyCalled = (myInit == func); } //Your code containing `myInit` will get executed somewhere here //.... //Then test: test("Should have called ready", function() { ok(readyCalled, "ready should have been called with myInit as a parameter.") });
+6
source

A function that registers a ready-made handler must register another function, not an anonymous code block. You can then test the code that calls $ .ready () separately from the code that runs when ready. So you have:

  • One test to verify the correct function is set as a ready-made handler
  • Another test to test the finished handler makes the right stuff

To test scenario 1, you need to introduce a test double for jQuery. This is tricky, as if you redefined $ or jQuery, the likelihood that you would ruin another code that relies on it for other processing (like a test runner). At the same time, your code may still want to directly call jQuery when it uses utility methods such as array concatenation. Any management call template should address this, though ( http://martinfowler.com/articles/injection.html ).

Anyway, some code is used here using the constructor installation (using JSMock for a mock library and QUnit (jQuery) for a test runner):

 // the code var createComponent = function(_$) { var that = {}; that.OnStart = function() { _$.ready(this.OnReady); }; that.OnReady = function() { }; return that; }; // the test test("OnStart associates the ready handler", function() { var sut; var mock$ = mc.createMock($); mock$.expects().ready(isA.TypeOf(Function)).andStub(function(callback) { equals(callback, sut.OnReady); }); sut = createComponent(mock$); sut.OnStart(); mc.verify(); }); test("OnReady does the right stuff", function() { //etc });

I use this generic template for all event handlers in JS ... You might want to use prototype type classes. When you pass functions as jQuery parameters, you need to know that the "this" value will not be set by jQuery when these callbacks are called. In the test, this is interrupted because equals (callback, sut.OnReady) no longer passes. To solve this problem, you need to make event handlers direct members of each instance. You can imagine when there is a series then good to have a utility that takes their list, but this demonstrates the creation of an “OnReady” member that does not rely on 'this'.

 var Component = function(_$) { this._$ = _$; // repeat for each event handler thats tested this.OnReady = function() { Component.prototype.OnReady.apply(this); } } Component.prototype.Start = function() { this._$.ready(this.OnReady); } Component.prototype.OnReady = function() { }
0
source

More articles:


All Articles