單元測試鼠標事件指令angularJS

Question

我有一個指令與下面的鏈接功能。 setOver和setRating是指令控制器中的函數。

function (scope, iElem) { 
      return angular.forEach(iElem.children(), function (ul) { 
       return angular.forEach(ul.children, function (li) { 
        li.addEventListener('mouseover', function() { 
         return scope.setOver(parseInt($(li).attr('data-val'))); 
        }); 
        li.addEventListener('mouseout', function() { 
         return scope.setOver(0); 
        }); 
        return li.addEventListener('click', function() { 
         return scope.setRating(parseInt($(li).attr('data-val')), ul); 
        }); 
       }); 
      }); 
     } 

該指令的模板如下。

<div><ul><li ng-class="{\'glyphicon-star active\':model>0,\'glyphicon-star-empty\':model<=0,\'over\':over>0}" data-val=1>this is a test</li><li ng-class="{\'glyphicon-star active\':model>1,\'glyphicon-star-empty\':model<=1,\'over\':over>1}" data-val=2>this is a test</li></ul></div> 

我有下面，它不工作。

element = compile（'....'）（scope）; //刪節簡潔

angular.forEach(element.children(), function (ul) { 
       angular.forEach(ul.children, function (li) { 
        if (i === 0) { 
         var mouseOverEvent = jQuery.Event('mouseover'); 
         $(li).trigger(mouseOverEvent); 
         console.log(li); 
         expect($(li).hasClass('over')).toBe(true); 
         i++; 
        } 
       }); 
      }); 

我想知道如何在li元素上模擬mouseover，mouseout和click事件。

Answer 1

你嘗試

$(li).trigger('mouseover'); 

？請讓我知道這是否有效。我正在研究如何自己測試mouseover/out事件。 =）

如果這樣的作品，你可以離開了出來var mouseOverEvent = jQuery.Event('mouseover');線...

Answer 2

我在想，今天這個爲好，它似乎是爲我工作。

在你的答案中的代碼是有點太剝離下來（也許你可以提供的jsfiddle或類似的東西）工作，但在任何情況下：

你可能有之前的元素附加到DOM trigger('mouseover')的作品。

angular.element(document).find('body').append(element); 

您可能必須在您的測試之後從DOM中刪除元素，因爲我認爲這不會被正確地清除，否則。

在茉莉花：

afterEach(function() { 
    angular.element(document).find('#some-kind-of-identifier-for-your-element').remove(); 
});