使用 QUnit 测试 hover CSS 属性

Question

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

假设我有一个 link，CSS 定义为

a:hover {text-decoration: none}

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

这是 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 样式创建一个新的 class，然后在 mouseover/mouseleave 上切换 class。

使用 QUnit 测试 hover CSS 属性

Test hover CSS properties using QUnit

jquery

css

qunit