如何在$（window）.on（“ load”，function（）{}）;中测试代码 在茉莉花

Question

我下面有一个JavaScript，它会在页面加载时附加DIV，并在3秒后将其隐藏。

var testObj = {
   initialize: function() {
    var that = this;
    $(window).on("load", function() {  
        (function ($) { //Append Div
            $('body').append("<div>TEST</div>");
        })(jQuery);
        that.hideAppendedDiv();
    });
   },
   hideAppendedDiv: function() {  //Hide appended Div after 3s
    setTimeout(function(){
        $("div").hide();
    }, 3000);
   }
};

//call Initialize method
testObj.initialize();

如何为代码中的方法编写Jasmine测试用例。

Answer 1

您无需测试窗口加载事件，如果将附加代码移出匿名函数调用并将其传递到事件处理程序中，则可以使用与测试其他功能完全相同的方式来测试功能，并且代码将结构更好。

Answer 2

我猜您真的不是要测试$(window).on('load')...等Javascript函数，而是从$（window）.on调用了自己的函数hideAppendedDiv() （'加载'）。 此外，您还要确保函数hideAppendedDiv()正常工作。

IMO，您需要两个期望。

在您设置“ beforeEach函数”之前的某个位置：

beforeEach(function () {
    spyOn(testObj , 'hideAppendedDiv').and.callThrough();
});

期望

it('expects hideAppendedDiv() to have been called', function () {

    // make the call to the initialize function
    testObj.initialize ();

    // Check internal function
    expect(testObj.hideAppendedDiv).toHaveBeenCalled();
});

it('expects hideAppendedDiv() to hide div', function () {

    // make the call to the hideAppendedDiv function
    testObj.hideAppendedDiv();

    // Check behavior
    expect(... check the div ...) 
});

编辑

---

明确一点， 茉莉花按顺序执行所有期望。 现在，如果您有两个函数fn_1()和fn_2()并且想要测试它们是否被调用，则可以设置另一个spi函数，该函数返回一个特定值，或者每次返回一个连续值和增量值集叫做。

beforeEach(function () {
    spyOn(testObj , 'fn_1').and.returnValues(1, 2, 3);
    spyOn(testObj , 'fn_2').and.returnValues(4, 5, 6);
});

第一次调用fn_1时，它将返回1，而fn_2将返回4。

那只是方法之一，但是您必须在测试时发挥创造力。

现在，如果您想测试某个函数在x倍的时间后是否被调用， 这里有一篇已经对其进行了解释的文章。