JavaScript UnitTest：如何在点击函数中测试 Jquery Submit()？答案

【问题标题】：JavaScript UnitTest: How to test a Jquery Submit() in a click function?JavaScript UnitTest：如何在点击函数中测试 Jquery Submit()？
【发布时间】：2013-11-27 09:20:11
【问题描述】：

我对使用 Jasmine 进行 Javascript 单元测试还很陌生。所以我不知道如何模拟 jQuery Submit()。我的所有其他功能都可以在相同的实现下正常工作，但即使使用 SpyOn 仍然会执行 .submit()。

我需要测试的代码是：

submitQuery: function(query) {
    BoseSiteSearch._setQueryTextField(query);
    if (BoseSiteSearch.isMobile) {
        $('#searchbox').submit();
    } else {
        $('#siteSearchForm').submit();
    }

    return false;
}

我的测试代码：

 describe("submitQuery", function () {
    it('should submit the search query for desktop"',function(){
        loadFixtures('JavaScript-V2/Functions/Bose.SiteSearch.specs.html');
        var query = 'testValue';

        spyOn(BoseSiteSearch,'_setQueryTextField');            
        spyOn($('#siteSearchForm'),'submit'); 

        BoseSiteSearch.submitQuery(query);

        expect(BoseSiteSearch._setQueryTextField).toHaveBeenCalled();
        expect($('#siteSearchForm').submit).toHaveBeenCalled();
    });
});

已解决

it('should submit the search query for desktop"',function(){
        loadFixtures('JavaScript-V2/Functions/Bose.SiteSearch.specs.html');
        var query = 'testValue';
        // MOCK THE SUBMIT 
        $.fn.submit = function(){}
        spyOn(BoseSiteSearch,'_setQueryTextField');            
        spyOn( $.fn,'submit');

        BoseSiteSearch.submitQuery(query);

        expect(BoseSiteSearch._setQueryTextField).toHaveBeenCalled();
        expect( $.fn.submit).toHaveBeenCalled();

    });

【问题讨论】：

您不是在编写集成测试，也不想对submit 本身进行单元测试，jQuery 开发人员已经测试过submit 可以工作。因此，您应该模拟出类似于以下内容的依赖项，即：$.submit = function(){} 然后当在您的测试中触发提交时，将调用您的模拟。（不知道是$.submit还是$.fn.submit需要覆盖）
感谢您的评论！我已经像 $.fn.submit 一样实现了现在它可以工作了。谢谢！
我不能 100% 确定这是否可行，因为我无法在当前环境中对其进行测试。尽管我将其添加为答案，但看到它确实如此，因此将来遇到类似问题的用户可以在标记答案时更轻松地看到对您有用的方法。

标签： javascript jquery unit-testing jasmine form-submit

【解决方案1】：

我可能应该将此添加为将来有类似问题的用户的答案。

您不是在编写集成测试，也不想对提交本身进行单元测试，jQuery 开发人员已经测试过提交工作。

因此您可以模拟出类似于以下内容的依赖项：

$.submit = function(){};

// or

$.fn.submit = function(){};

然后当submit 在您的测试中被触发时，您的模拟会被调用，并且您的测试应该能够断言结果。

【讨论】：