Question

这对其他人来说可能是显而易见的，但我没有通过搜索找到它，所以在这里发布问题和一个可能的答案。

背景：

使用widget factory
在窗口小部件中，某些元素会根据其他数据/选项隐藏或显示。
创建单元测试以验证它们是否正确显示/隐藏。
我认为我的单元测试可以在内存中创建自己的元素，类似于this old answer。

从这个例子中删除了实际的小部件：

test( 'show/hide', 1, function() {
    var somecondition = true;

    var div = $( '<div/>' ).hide();
    if (somecondition) div.show();

    equal( somecondition, div.is( ":visible" ) );
});

测试失败，因为jQuery始终将div.is( ":visible" )报告为false。我认为使用div.css('display') == 'none'将是一种解决方法。不幸的是，这适用于Chrome，但不适用于Firefox。

Answer 1

问题是jQuery足够聪明，知道即使某个特定元素表示它是可见的，如果（例如）它可能实际可见：

它从未添加到DOM
附加到的DOM元素（或父/祖父母/等）实际上不可见

因此，为了使单元测试工作，我需要在测试工具html中有一个真正的div，将小部件附加到它，然后在最后调用destroy。

test( 'show/hide', 1, function() {
    var somecondition = true;

    var div = $( '#someid' ).hide();
    if (somecondition) div.show();

    equal( somecondition, div.is( ":visible" ) );
});

我希望有一种不同的方法（可能有人会出现并提供另一个答案），但我不是很有希望，因为这是JQueryUI在their own QUnit tests中使用的方法：

test( "search, close", function() {
    //SNIP
    // Note the use of a real element here:
    element = $( "#autocomplete" ).autocomplete({
        source: data,
        minLength: 0
    }),
    menu = element.autocomplete( "widget" );
    //SNIP
    ok( menu.is( ":visible" ), "menu is visible after search" );
    //SNIP
});

测试JQueryUI小部件的QUnit测试中是否可见

1 个答案: