Question

我有一个带有以下链接功能的指令。 setOver和setRating是指令'controller'中的函数。

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（'....'）（范围）; //删节简洁

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

？如果有效，请告诉我。我正在调查如何自己测试鼠标悬停/事件。 =）

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

Answer 2

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

你的答案中的代码有点太过于无法使用（也许你可以提供一个JSFiddle或类似的东西），但无论如何：

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

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

您可能还需要在测试后从DOM中删除该元素，因为我不认为这将被正确清理。

在Jasmine：

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

单元测试指令angularJS中的mouseover事件

2 个答案: