javascript - 模块模式单元测试

Question

在假设的导航模块的以下实现中，模块对象返回诸如 isOverBinded 或 isNavTurnedOff 之类的属性，这些属性基本上返回其他方法的结果值。

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

是否应该保留这些方法，或者相关的原始方法返回结果值以及测试用例中使用的相同方法？

当前代码是:

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

    });

两者有什么区别？

非常感谢

Answer 1

假设应用程序的其他部分不需要独立验证事件是否已订阅，则 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;
}

归根结底，我觉得函数是否应该返回值应该取决于函数的用法，而不是为了使测试更容易。