如何在 Angular 中测试窗口点击事件监听器答案

【问题标题】：How to Test Window Click Event Listener in Angular如何在 Angular 中测试窗口点击事件监听器
【发布时间】：2016-02-15 12:03:55
【问题描述】：

我希望这是一个简单的问题。

我有一个选择框指令，当在指令之外单击任何内容时，它应该关闭。所以窗口有一个事件监听器，一旦听到点击事件就隐藏框-

$window.addEventListener('click', function() {
  $scope.expanded = false;
  $scope.$apply();
});

效果很好，没有抱怨。但是我正在尝试为此编写一个单元测试，并且即使在 window 本身上也无法弄清楚如何触发点击。

it('should close the dropdown if the window is clicked', function() {
  toggleButton.trigger('click');

  expect(eleSimpleOptionBox.hasClass('ng-hide')).toBe(false);

  $window.trigger('click');

  expect(eleSimpleOptionBox.hasClass('ng-hide')).toBe(true);
});

我尝试了以下方法-

$window.trigger('click'); // as well as .click()
$window.triggerHandler('click');
angular.element('body').trigger('click'); // as well as .click()
someWrappingElement.trigger('click'); // as well as .click()

【问题讨论】：

你是在你的范围内调用$digest还是在触发事件后调用$rootScope？
两者都不是。但在测试中，第一个点击触发器在没有$digest 的情况下工作，所以我假设第二个会。它使用的是 DOM 事件监听器，而不是 angulars 事件监听器。

标签： javascript angularjs unit-testing karma-jasmine

【解决方案1】：

在尝试测试 $window 对象上的单击事件时遇到了类似的情况。我尝试了以上所有方法来尝试触发事件，但我无法触发事件。我的解决方法是在测试中执行下面的代码 sn-p 之类的操作，以便我可以测试侦听器功能.. 仍然对此不满意，但我猜最好不要测试...

describe('test $window events', ()=> {
   var callbackFn; //variable to capture the callback

    beforeEach(()=> {
        //spy on the addEventListener method and capture the function reference
        spyOn($window, 'addEventListener').and.callFake((event: string, callback: any) => { 
            callbackFn = callback; 
        });
    });

    //trigger the callbackFn in your test
    it('should call the event listener', ()=> {
       callback(); //this will trigger the event.. 
       expect(true).toBe(true);
    );
});

【讨论】：

【解决方案2】：

试试这个：

function triggerMouseEvent(node, eventType, x, y) {
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent(
        eventType,                  // type
        true,                       // canBubble
        eventType != 'mousemove',   // cancelable
        window,                     // view
        0,                          // detail
        x,                          // screenX
        y,                          // screenY
        x,                          // clientX
        y);                         // clientY
    node.dispatchEvent(event);
}
triggerMouseEvent($window, 'click');

initMouseEvent 函数现在已弃用，应该使用MouseEvent，但看起来 IE 还不支持 MouseEvent。

【讨论】：