Geek asks and answers

Test for the visible QUnit test of the jQueryUI widget

This may be obvious to everyone else, but I did not find it by doing a search, so I post both the question and one possible answer here.

Background:

  • JQuery user interface widget using factory widget
  • In widgets, some elements are hidden or displayed based on other data / options.
  • Creating unit tests to verify that they are displayed / hidden correctly.
  • I thought that my unit tests could each create their own element in memory, similar to this old answer .

I cut out the actual part of the widget 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" ) false. , div.css('display') == 'none' . , Chrome, Firefox.

+5
1

, jQuery , , , , ():

  • DOM
  • DOM ( /grandparent/etc ), ,

, , , div html, .

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

More articles:


All Articles