Test widoczny w QUnit test widżetu JQueryUI

Question

Może to być oczywiste dla wszystkich innych osób, ale nie znalazłem go przez wyszukanie, więc zamieszczam tutaj zarówno pytanie, jak i jedną możliwą odpowiedź.

Tło:

1. widget niestandardowe wykorzystaniem jQuery UI widget factory
2. w widgecie, niektóre elementy się ukryte lub pokazane na podstawie innych danych/opcji.
3. Tworzenie testów jednostkowych w celu sprawdzenia, czy są one poprawnie wyświetlane/ukryte.
4. Pomyślałem, że moje testy jednostkowe mogą stworzyć własny element w pamięci, podobny do this old answer.

Stripped się rzeczywisty udział widget z tego przykładu:

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

    var div = $('<div/>').hide(); 
    if (somecondition) div.show(); 

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

test nie powiedzie się, ponieważ jQuery zawsze informuje div.is(":visible") jako fałszywe. Pomyślałem, że używanie div.css('display') == 'none' może być obejściem problemu. Niestety działało to w Chrome, ale nie w Firefoksie.

Answer 1

Problem polegał na tym, że jQuery jest wystarczająco inteligentny, aby wiedzieć, że nawet jeśli dany element ma powiedział to widoczne, nie może faktycznie być widoczne, jeśli (przykładowo):

1. To nigdy nie było dodaje się do
2. elementu DOM DOM (lub rodziców/dziadków/etc) była dodawana, nie jest w rzeczywistości widoczny

tak, aby z testami do pracy, n Aby uzyskać prawdziwy div w html testowym, załóż do niego widget, a następnie wywołaj niszczący na końcu.

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

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

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

miałem nadzieję innego podejścia (a może ktoś przyjść i przedstawić inny odpowiedź), ale nie jestem pełen nadziei, widząc jak jest to podejście, które wykorzystuje w their own QUnit tests jQueryUI:

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