指令angularJS中的单元测试鼠标悬停事件答案

【问题标题】：unit testing mouseover event in directive angularJS指令angularJS中的单元测试鼠标悬停事件
【发布时间】：2014-06-18 11:03:35
【问题描述】：

我有一个带有以下链接功能的指令。 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 事件。

【问题讨论】：

标签： angularjs unit-testing

【解决方案1】：

你试过了吗

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

？请让我知道这是否有效。我正在研究如何自己测试 mouseover/out 事件。 =)

如果可行，您可以省略 var mouseOverEvent = jQuery.Event('mouseover'); 行...

【讨论】：

是的 Thom，我尝试了所有版本，但似乎没有触发事件。

【解决方案2】：

我今天也想知道这个，它似乎对我有用。

您的答案中的代码过于精简而无法使用（也许您可以提供 JSFiddle 或类似的东西），但无论如何：

您可能必须在 trigger('mouseover') 起作用之前将元素附加到 DOM。

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

您可能还必须在测试后从 DOM 中删除该元素，因为我认为否则将无法正确清理。

在茉莉花中：

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

【讨论】：