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

Question

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

背景:

1. 使用小部件工厂的自定义JQuery UI小部件
2. 在窗口小部件中,某些元素会根据其他数据/选项隐藏或显示.
3. 创建单元测试以验证它们是否正确显示/隐藏.
4. 我认为我的单元测试可以在内存中创建自己的元素,类似于这个旧答案.

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

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是足够聪明,知道,即使某个特定元素已表示它是可见的,它可能不是真正可见,如果(例如):

1. 它从未添加到DOM中
2. 它附加到的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在他们自己的QUnit测试中使用的方法:

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
});