Module Pattern unit testing

Question

In the following implementation of a hypothetical navigation module the module object returns properties such as isOverBinded or isNavTurnedOff which basically return the consequential value of other methods.

This methods are then utilised in the test cases to check whether a property call has caused its expected consequence.

Should these methods be kept or the original method in question return the consequential values and the same method to be used in the test case?

Currently the code is:

var navModule = (function(element) {

        var nav = {};

        var navHTMLobjs = {

            navList : element,

            listItems : element.find('li'),

            listLinks : element.find('a')

        };

        nav.bindOver = function() {

            navHTMLobjs.navList.on('mouseover mouseout', 'li a', function(e) {

                if (e.type == 'mouseover') {

                    $(this).addClass('over');

                }

                if (e.type == 'mouseout') {

                    $(this).removeClass('over');
                }

            });

        };

        nav.isOverBinded = function(){

            return navHTMLobjs.navList.data('events').hasOwnProperty('mouseover')

                && navHTMLobjs.navList.data('events').hasOwnProperty('mouseout');

        };

        nav.turnOff = function() {

            navHTMLobjs.navList.off('mouseover mouseout');

        };

        nav.isNavTurnedOff = function() {

            return !navHTMLobjs.navList.data.hasOwnProperty('events');

        };

        nav.init = function() {

            this.bindOver();

        };

        return nav;

    });

    var myNav = new navModule($('#nav'));

    /// Test cases:

    module('Navigation module');

    test('Binding total', function() {

        myNav.init();

        equal(myNav.isOverBinded(), true, "Does the init function attach all events?");

    });

    test('Unbinding total', function() {

        myNav.turnOff();

        equal(myNav.isNavTurnedOff(), true, "Does the cancel function correctly unbind events?");

    });

For example should I change nav.bingOver to be:

nav.bindOver = function() {

            navHTMLobjs.navList.on('mouseover mouseout', 'li a', function(e) {

                if (e.type == 'mouseover') {

                    $(this).addClass('over');

                }

                if (e.type == 'mouseout') {

                    $(this).removeClass('over');
                }

            });

            return navHTMLobjs.navList.data('events').hasOwnProperty('mouseover')

                && navHTMLobjs.navList.data('events').hasOwnProperty('mouseout');

        };

...and then use the same method in the test case like below?

test('Binding total', function() {

        myNav.init();

        equal(myNav.bindOver(), true, "Does the init function attach all events?");

    });

What are the differences between the two?

Many thanks

Does it not depend to a large extent on how you intend to use functions? Its good for the functions to return an appropriate value. Its sort of frees you from having to manage state while testing. At the same time, if you have to independently check whether or not the events have been subscribed to, cuz some other parts of the app depend on that info, you would want to expose that as a function. I am not writing this as an answer, as I feel there is no right answer. Maybe someone with more experience might have one. — Amith George
– Amith George, Commented Jul 3, 2012 at 11:16
Thanks Amith for your touch on the subject. I guess the issue in my head came from the occasional complexity of the returned values which is extra code running when the module is running so even though I know having functions always return something is good I was reluctant about having such long lines as a return value every time that sections runs, hence their separation as an individual method. I guess another question is although a function should return something which allows for its testability, to what extent should this be followed — Ali Habibzadeh
– Ali Habibzadeh, Commented Jul 3, 2012 at 11:21
Was the issue having to read such long lines? Or was it that computing the return value takes time? Cuz if its the first, then you could simply choose to return isOverBinded() where isOverBinded is a local private function as opposed to a public one. Personally thats what I do when I have slightly complex or long predicates. Hide away the actual computation behind a function with a self explaining name. — Amith George
– Amith George, Commented Jul 3, 2012 at 11:30
Thinking about this a bit more, the binding methods dont really need to return anything. In actual production code, you arent going to be checking the return value. How to test whether the events were subscribed to? Depends. Instead of using dom elements from the html page, you could inject in memory jquery objects while testing. As is the properties you need are stored only in memory and not in the actual html. That way, in your test you check for side effects in the injected objects and your actual module doesnt have to concern itself with the check. — Amith George
– Amith George, Commented Jul 3, 2012 at 11:47
Would be nice if you could expand on your last comment with some code in the answer section. I think that would be the correct answer for this question. — Ali Habibzadeh
– Ali Habibzadeh, Commented Jul 3, 2012 at 12:29

Amith George · Accepted Answer · 2012-07-03 14:12:29Z

Assuming other parts of the app don't need to independently verify whether the events have been subscribed to, the bindOver() should not return any value. Also, the isOverBinded() doesnt belong to the navigation module. Its existence is purely to help implement the test. In such a case, that function should be within the testing suite.

var navModule = (function(element) {

    var nav = {};

    var navHTMLobjs = {
        navList : element,
        listItems : element.find('li'),
        listLinks : element.find('a')
    };

    nav.bindOver = function() {
        navHTMLobjs.navList.on('mouseover mouseout', 'li a', function(e) {
            if (e.type == 'mouseover') {
                $(this).addClass('over');
            }

            if (e.type == 'mouseout') {
                $(this).removeClass('over');
            }
        });
    };

    nav.turnOff = function() {
        navHTMLobjs.navList.off('mouseover mouseout');
    };

    nav.init = function() {
        this.bindOver();
    };

    return nav;
});

//var myNav = new navModule($('#nav'));

/// Test cases:

module('Navigation module');

// you might already have such a in memory object 
$root = $('<ul></ul>').append('<li><a href="#"></a></li><li><a href="#"></a></li>'); 
var myNav = new navModule($root);

test('Binding total', function() {

    myNav.init();

    equal(isOverBinded(), true, "Does the init function attach all events?");

});

test('Unbinding total', function() {

    myNav.turnOff();

    equal(isNavTurnedOff(), true, "Does the cancel function correctly unbind events?");

});

var isNavTurnedOff = function() {
    return $root.data('events').hasOwnProperty('mouseover') && $root.data('events').hasOwnProperty('mouseout');
}

var isOverBinded = function() {
    return $root.data.hasOwnProperty('events') === false;
}

At the end of the day I feel, whether or not the function ought to return a value should depend on the usage of the function and not for making testing easier.

Good one Amith. I reached more enlightenment from this :) Thanks

Collectives™ on Stack Overflow

Module Pattern unit testing

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related