测试JQueryUI小部件的QUnit测试中是否可见 [英] Test for visible in QUnit test of JQueryUI widget

问题描述

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

背景：

1. 使用小部件工厂


2. 在小部件中，某些元素会根据其他数据/选项隐藏或显示。


3. 创建单元测试以验证它们是否正确显示/隐藏。


4. 我认为我的单元测试可以在内存中创建自己的元素，类似于这个旧答案。

1. Custom JQuery UI widget using widget factory
2. In the widget, some elements get hidden or shown based on other data/options.
3. Creating unit tests to verify they are being shown/hidden correctly.
4. I thought that my unit tests could each create their own element in memory, similar to this old answer.

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

Stripped out the actual widget part from this example:

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 ）为假。我认为使用 div.css（'display'）=='none'将是一种解决方法。不幸的是，这适用于Chrome但不适用于Firefox。

The test fails because jQuery always reports div.is( ":visible" ) as false. I thought that using div.css('display') == 'none' would be a workaround. Unfortunately, this worked in Chrome but not Firefox.

推荐答案

问题是jQuery很聪明，即使特定元素表示它是可见的，如果（例如）它可能不会实际：

The problem was that jQuery is smart enough to know that even if a particular element has said it's visible, it might not actually be visible if (for example):

1. 它从未添加到DOM


2. 它附加的DOM元素（或父/祖父母/等）实际上不可见

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

So in order for the unit tests to work, I need to have a real div in the test harness html, attach the widget to it, and then call a destroy at the end.

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

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

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

我希望采用不同的方法（也许有人会出现并提供另一个答案），但是我不是很有希望，因为这是JQueryUI在他们自己的QUnit测试：

I was hoping for a different approach (and maybe someone will come along and provide another answer), but I'm not very hopeful, seeing as this is the approach that JQueryUI uses in 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测试中是否可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！