jquery - 使用 QUnit 测试悬停 CSS 属性

Question

我想使用 QUnit 进行一个简单的测试，以检查元素悬停时的 CSS 属性。

假设我有一个 CSS 定义的链接

a:hover {text-decoration: none}

我试图让 QUnit 触发鼠标悬停事件，然后检查链接的 CSS 是什么，但它不起作用。但是，当我手动悬停链接时，测试给出了正确的结果。

这是 QUnit 代码

QUnit.test('hover test', function() {
    $('a').mouseover(function (){
        QUnit.ok($('a').css('text-decoration') == 'none');
    });

    $('a').mouseover();
}

Answer 1

你不能，因为它不是受信任的事件。

Events that are generated by the user agent, either as a result of user interaction, or as a direct result of changes to the DOM, are trusted by the user agent with privileges that are not afforded to events generated by script through the DocumentEvent.createEvent("Event") method, modified using the Event.initEvent() method, or dispatched via the EventTarget.dispatchEvent() method. The isTrusted attribute of trusted events has a value of true, while untrusted events have a isTrusted attribute value of false.

Most untrusted events should not trigger default actions, with the exception of click or DOMActivate events.

然而，您可以做的是根据您的 :hover 样式创建一个新类，然后在鼠标悬停/鼠标离开时切换该类。