How to test functions or the code inside $(document).ready() using Jasmine?

Question

I have multiple functions and a lot of code inside $(document).ready(function()). I am using jasmine to test the functions inside the ready function as well as the code inside ready() but when the test cases inside describe are executed it is not able to access the code inside the ready function.

$(document).ready(function () {
    function testMe(){
        testVar = true;
    }
});

Jasmine test suite

describe("test suite", function(){
    beforeEach(function () {
        testme = false
    });
    it("Test Alert Box Message For Change Modal", function() {
        expect(testme).toEqual(true);
    });
});

Kindly suggest what approach needs to be taken for the above approach.

Export the code you have there to a module, test the module instead. Having random code in a random document.ready is not a very testable design to begin with. — Benjamin Gruenbaum, Jul 10 '13 at 20:08
I hate it when people make references to the *test itself* in jasmine identifiers. You're not describing the *test suite*, you're describing the *system!* And the thing you're describing doesn't *test* an alert box, it *creates* one. — Aaronaught, Nov 30 '13 at 18:19

score 6 · Answer 1 · answered Nov 30 '13 at 12:37

in your code, domready calls an annonymous function. If we had a reference to this function, we could call it.

var onReady = function(){
   testVar = true;
}

$(document).ready(onReady);

and in your tests

it("Test Alert Box Message For Change Modal", function() {
    var testVar = false;
    onReady() ;
    expect(testVar).toEqual(true);
});

your code is now testable :) namespacing and modules are recommended to make it even better.

XWormX · Answer 2 · 2013-07-10T20:02:17.360

2

What is inside the ready function is encapsulated in a separate scope from everything globally.

Put your test cases in the same scope to work.

There other approaches to be taken, is to do with closures, wrapping the anonymous function (in the ready event handler), putting it in a variable and then passing it to ready.. And then using that variable to pass to the test suites. It can be complex to explain and implement to someone who doesnt know object oriented javascript..

var testMe;
$(document).ready(function () {
    testMe=function testMe(){
        testVar = true;
    }
});

testMe is now defined. That created a closure. I forgot the names of those techniques, I think i created hoisting..

anyway..an excellent book to read is Effective Javascript, to familiarize your self with good javascript techniques..It isnt like your usual programming language

edited Jul 10 '13 at 20:02

answered Jul 10 '13 at 19:46

XWormX

121
1
7

XWormX, Thanks for your reply, I get it what you are saying but i can not change my source code to test it. document.ready has its own scope and that's why i am getting undefined reference error. – makmak Jul 10 '13 at 19:56
It doesnt see what you have inside the ready function, cause everything inside isnt subjected globally. It is a different scope. Try to do what is in my update – XWormX Jul 10 '13 at 19:58
XWormX, Our Source code is a production source code and we are not allowed to do any modification with our source code. – makmak Jul 10 '13 at 20:05
1

@makmak Then you can not test that code. You will have to refactor that code out into it's own separate module before you can test it. – mortalapeman Jul 11 '13 at 03:09

How to test functions or the code inside $(document).ready() using Jasmine?

2 Answers2