模块模式单元测试

时间:2012-07-03 10:56:58

标签: javascript jquery unit-testing module

在假设导航模块的以下实现中,模块对象返回isOverBindedisNavTurnedOff等属性,这些属性基本上返回其他方法的结果值。

然后在测试用例中使用此方法来检查属性调用是否已导致其预期后果。

是否应保留这些方法或原始方法是否返回测试用例中使用的相应值和相同方法?

目前代码是:

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?");

    });

例如,我应该将nav.bingOver更改为:

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');

        };

...然后在下面的测试用例中使用相同的方法?

test('Binding total', function() {

        myNav.init();

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

    });

两者有什么区别?

非常感谢

1 个答案:

答案 0 :(得分:2)

假设应用程序的其他部分不需要独立验证事件是否已订阅,bindOver()不应返回任何值。此外,isOverBinded()不属于导航模块。它的存在纯粹是为了帮助实施测试。在这种情况下,该功能应该在测试套件中。

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;
}

在一天结束时,我觉得,函数是否应该返回一个值应该取决于函数的用法而不是使测试更容易。