javascript - 如何在单元测试中触发 element.on ('mouseleave' ) 来调用我的 AngularJS 函数

Question

我想调用myFunction。然后我想验证它是通过单元测试调用的。

Javascript:

var self = this;

self.myFunction= function myFunction() {
    // do stuff
};

self.onClickChange = function onClickChange() {
    $('.checkBox').on('mouseleave', function(){
        self.myFunction();
    });
};

我已经尝试过这个测试:

it('should call myFunction', inject(function ($compile, $rootScope) {
    spyOn(this.instance, 'onClickChange').and.callThrough();
    spyOn(this.instance, 'myFunction').and.callThrough();

    this.instance.onClickChange('messageBoard');

    var scope = $rootScope.$new(),
    element = $compile('<md-checkbox class="checkBox"></md-checkbox>')(scope);

    element.triggerHandler('mouseleave');
    scope.$digest();

    expect(this.instance.myFunction).toHaveBeenCalled();
}));

我也尝试过使用

scope.$broadcast('mouseleave');

还有

var event = document.createEvent('MouseEvents');
event.initEvent('mouseleave', true, true);
$('.checkBox').dispatchEvent(event);

这代替了前三行中的最后一行:

document.body.dispatchEvent(event);

如何让 .on('mouseleave') 工作并验证 myFunction 已被调用？

Answer 1

这里有几件事。首先，为了回答您眼前的问题，您需要在创建任何 DOM 之前调用:this.instance.onClickChange('messageBoard');。因此，您将尝试完全不添加点击处理程序。

只有在调用编译时创建 DOM 后，才需要添加点击处理程序。

但是，还有另一个问题。您正在编译该指令并创建一个 DOM 元素，但它并未 Root 于文档，因此在文档上使用 jquery $ 将不起作用。

在 Angular 中使用 jQuery 选择器是一种不好的风格。

您可以执行类似的操作，使用当前范围的 $element 。

var self = this;
var $element = getElement(); // do some magic to get the current element

self.myFunction= function myFunction() {
    // do stuff
};

self.onClickChange = function onClickChange() {
    $element.on('mouseleave', function(){
        self.myFunction();
    });
};

然后您的测试就可以以同样的方式进行。不同之处在于，永远不需要将 $element 添加到 DOM 中以使代码正常工作。

但实际上，我会避免整个方法。你不应该在 Angular 中使用 jQuery。那是一种过时的风格。相反，我建议使用 ng-click 将处理程序直接添加到 DOM。