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

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

背景：

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

从此示例中删除了实际的小部件：

test( 'show/hide', 1, function() { var somecondition = true; var 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元素（或父/祖父母/等）实际上不可见

因此，为了使unit testing工作，我需要在测试工具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 });