Имитация наведения в JQuery

Question

В настоящее время у меня есть некоторый код jQuery/Javascript, который переключает класс css 'ui-state-hovered', когда пользователь наводит указатель мыши на определенные элементы, и я хочу написать тест в коначе для проверки этого фрагмента кода.

Как бы я написал эту функцию в Javascript с помощью jQuery?

Вернуть true, если когда пользователь наводит курсор на элемент $('. SomeClass li:first'), класс 'ui-state-hovered' существует. Остальное вернуть ложь.

Как бы я смоделировал пользователя, наводящего указатель мыши на этот элемент?

Answer 1

Пытаться mouseenter а также mouseleave

$('.someClass li:first').mouseenter().mouseleave();

Из документов JQuery

призвание $(selector).hover(handlerIn, handlerOut) является сокращением для: $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

ДЕМО: http://jsfiddle.net/skram/wh5N9/

Попробуйте ниже проверить класс, который был бы добавлен в hover

$("#test").mouseenter(function() {
    console.log('Has class hover ' + $(this).hasClass('ui-state-hovered'));
}).mouseleave(function() {
    console.log('Has class hover ' + $(this).hasClass('ui-state-hovered'));
})

Убедитесь, что вышеуказанное зарегистрировано после.hover

ДЕМО: http://jsfiddle.net/skram/wh5N9/2/

Answer 2

Сокращенная установка событий mouseenter/mouseleave

$(".someClass li:first").hover(
  // Mouse Over
  function(){
    $(this).addClass("ui-state-hovered");
  },
  // Mouse Out
  function(){
    $(this).removeClass("ui-state-hovered");
});

РЕДАКТИРОВАТЬ

Установить событие mouseenter

$(".someClass li:first").mouseenter(function(){
    $(this).addClass("ui-state-hovered");
  }

Установить событие mouseleave

$(".someClass li:first").mouseleave(function(){
    $(this).removeClass("ui-state-hovered");
});

Для имитации наведения мыши:

$(".someClass li:first").trigger("mouseenter");

Для симуляции мышки:

$(".someClass li:first").trigger("mouseleave");

Чтобы проверить класс:

$(".someClass li:first").hasClass("ui-state-hovered");

Чтобы вернуть true, если есть класс:

function checkClass(elem, class){
  return $(elem).hasClass(class);
};

РЕДАКТИРОВАТЬ 2

Я никогда не использовал Konacha раньше, но если бы я попробовал его, используя это руководство на solitr.com в качестве руководства, я бы сказал:

HTML

<div id="testDiv" class="foo">Some Text</div>

JQuery

checkClass = function(elem, class){
    return $(elem).hasClass(class);
};

Konacha

describe('checkClass', function() {
    it('should be true if elem has class', function() {
        checkClass("#testDiv", "foo").should.be.true;
        checkClass("#testDiv", "bar").should.be.false;
    });
});

Answer 3

Смотрите здесь

$('someClass li:first').mouseover();

Это должно вызвать событие

Answer 4

Используя консоль, вы можете попробовать $('#yourelement').trigger('mouseover');

Answer 5

Функция записи при наведении

$('.someClass li:first').hover(function(){
      return $(this).attr('class').indexOf('ui-state-hovered') > -1;
});