Question

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

我有一个select-box指令，当指令外部点击任何内容时，该指令应该关闭。所以窗口有一个事件监听器，一旦听到点击事件就隐藏盒子 -

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

哪个工作正常，没有投诉。但是我试图为此编写一个单元测试，并且即使在窗口本身上也无法弄清楚如何触发点击。

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

Answer 1

尝试在$ window对象上测试click事件时遇到类似的情况。我尝试了以上所有尝试触发事件，但我无法触发事件。我的解决方法是在测试中执行类似下面的代码片段，以便我可以测试监听器功能..仍然不满意它，但是我认为没有测试它会更好...

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

Answer 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。

如何测试窗口单击角度

2 个答案: