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

时间:2013-04-16 21:06:38

标签: javascript jquery jquery-ui qunit

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

背景:

  1. 使用widget factory
  2. 自定义JQuery UI小部件
  3. 在窗口小部件中,某些元素会根据其他数据/选项隐藏或显示。
  4. 创建单元测试以验证它们是否正确显示/隐藏。
  5. 我认为我的单元测试可以在内存中创建自己的元素,类似于this old answer
  6. 从这个例子中删除了实际的小部件:

    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。

1 个答案:

答案 0 :(得分:7)

问题是jQuery足够聪明,知道即使某个特定元素表示它是可见的,如果(例如)它可能实际可见:

  1. 它从未添加到DOM
  2. 附加到的DOM元素(或父/祖父母/等)实际上不可见
  3. 因此,为了使单元测试工作,我需要在测试工具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
    });