如何测试 $(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

您不需要测试 window 加载事件，如果您将追加代码从匿名函数调用中移出并将其传递到事件处理程序中，您就可以以完全相同的方式测试功能你会做任何其他事情的方式，你的代码将更好地结构化。

Answer 2

我猜你真的不想测试 Javascript 函数，比如 $(window).on('load')... ，但是你自己的函数 hideAppendedDiv() 是从 $(window).on('load').此外，您要确保函数 hideAppendedDiv() 也能正常工作。

IMO，你需要两个期望值。

在每个函数之前的设置中的某处：

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

编辑

明确一点，Jasmine 按顺序执行所有期望。现在，如果你有两个函数 fn_1() 和 fn_2() 并且你想测试它们是否被调用以便你可以设置另一个 spi 函数 return 是一个特定的值，或者一个顺序每次调用时都会增加一组值。

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

第一次调用fn_1会return1，分别fn_2会return4.

这只是其中一种方法，但您在测试时必须发挥创意。

现在，如果您想测试某个函数在 x 时间后被调用，here 是一个 post，它已经解释过了。

如何测试 $(window).on("load", function() {}); 中的代码在茉莉花

How to test code inside $(window).on("load", function() {}); in Jasmine

javascript

jquery

jasmine

karma-jasmine