модульное тестирование события наведения курсора мыши в директиве AngularJS

#angularjs #unit-testing

#angularjs #модульное тестирование

Вопрос:

У меня есть директива с приведенной ниже функцией ссылки. 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>
  

У меня есть приведенное ниже, и оно не работает.

элемент = 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.

Ответ №1:

Вы пробовали

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

? Пожалуйста, дайте мне знать, если это сработает. Я изучаю, как самостоятельно протестировать события наведения / вывода курсора мыши. =)

Если это работает, вы можете не указывать var mouseOverEvent = jQuery.Event('mouseover'); строку…

Комментарии:

1. Да, Том, я перепробовал все версии этого, но, похоже, ничто не вызвало событие.

Ответ №2:

Мне тоже было интересно это сегодня, и, похоже, это работает для меня.

Код в вашем ответе слишком урезан для работы (возможно, вы можете предоставить JSFiddle или что-то подобное), но в любом случае:

Возможно, вам придется присоединить элемент к DOM перед началом trigger('mouseover') работы.

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

Вероятно, вам также придется удалить элемент из DOM после ваших тестов, потому что я не думаю, что в противном случае он будет очищен должным образом.

В Jasmine:

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