Имитировать Hover в jQuery

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

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

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

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

Ответ 1

Попробуйте mouseenter и mouseleave

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

Из jQuery docs

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

DEMO: 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

DEMO: http://jsfiddle.net/skram/wh5N9/2/

Ответ 2

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

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

ИЗМЕНИТЬ

Установить центр событий

$(".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;
    });
});

Ответ 3

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

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

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

Ответ 4

Запись функции при наведении

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