如何在 Jasmine 的 angular 指令中监视 jquery 函数

Question

指令

         link(scope, element, attrs, ctrl) {    

            element.mouseover(function() {
                $(element).tooltip('show');
            });
            $(element).hover(MuiBootstrap.adjustTooltips);
        }

茉莉花测试

       it('should show tooltip on mouseover', function () {
         var spy = spyOn(element, 'mouseover');
         $(element).trigger('mouseover');
         expect(spy).toHaveBeenCalled();
       });

上面的茉莉花测试失败了错误：未捕获预期的间谍工具提示已被调用。

Answer 1

它不会工作，因为你试图监视 mouseover 方法，它在指令 link 函数中只被调用一次，并且你在这个方法已经被调用之后安装监视 - 时刻您安装了 spy spied 函数已经被调用，所以 spy 不知道这一点。
我建议不要测试 mouseover 本身是否被调用但是如果 mouseover 回调在事件被触发时被调用 - 你实际上这样做是因为你监视 tooltip 方法（你的错误消息表明你监视工具提示方法）。因此，只需删除此测试，因为它是 pointles。我假设您想测试是否调用了鼠标悬停回调，而不是是否调用了 mouseover 方法 - 这两个不一样。

答案更新： 要测试鼠标悬停回调，您可以在指令范围内定义此回调：

link(scope, element, attrs, ctrl) {    
    scope.mouseoverCallback = function() {
        $(element).tooltip('show');
    };
    element.mouseover(scope.mouseoverCallback);
}

然后直接在上面安装spy:

 it('should call mouseover callback', function () {
     var yourDirectiveScope = element.scope();
     var spy = spyOn(yourDirectiveScope, 'mouseoverCallback').and.callThrough();
     element.triggerHandler('mouseover');
     expect(yourDirectiveScope.mouseoverCallback).toHaveBeenCalled();
 });

如何在 Jasmine 的 angular 指令中监视 jquery 函数

How to spyon jquery function inside angular directive in Jasmine

javascript

jquery

angularjs

jasmine

jasmine-jquery