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

Question

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

我有一个选择框指令，应该在指令外点击任何东西时关闭。因此，窗口有一个事件监听器，一旦听到点击事件，就会隐藏该框-

$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()

- micah

---

在触发事件后，您是在作用域 $scope 还是根作用域 $rootScope 上调用 $digest 方法？ - Yaron Schwimmer

都不需要。但是在测试中，第一个点击触发器可以在没有 $digest 的情况下工作，因此我认为第二个也可以。它使用的是 DOM 的事件监听器而不是 Angular 的事件监听器。 - micah

Answer 1

试试这个：

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。

- Quest

Answer 2

遇到了类似的情况，试图在 $window 对象上测试点击事件。我尝试了以上所有方法来触发事件，但是无法使事件触发。我的解决方法是在测试中执行下面的代码片段，以便我可以测试监听器函数。虽然还不太满意，但总比没有测试好...

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

- keano