在JQueryUI小部件的QUnit測試中可見的測試

Question

這對其他人可能是顯而易見的，但我沒有通過搜索找到它，所以在這裏發佈問題和一個可能的答案。

背景：使用widget factory

在窗口小部件

1. 定製JQuery用戶界面窗口小部件，一些元件得到隱藏或基於其他數據/選項所示。
2. 創建單元測試以驗證它們是否正確顯示/隱藏。
3. 我認爲我的單元測試可以在內存中創建自己的元素，類似於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")爲假。我認爲使用div.css('display') == 'none'將是一種解決方法。不幸的是，這在Chrome而不是Firefox中起作用。

Answer 1

的問題是，jQuery是足夠聰明，知道，即使一個特定元素說是可見的，它可能不是實際上可見，如果（例如）：

1. 這是從來沒有添加到DOM
2. 的DOM元素（或父母/祖父母/等）將其附加到實際上不可見

因此，爲了使單元測試工作，I N在測試工具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 
});