CODEWITHSUNDEEP
javascripthtmlqunit
Wracker
Wracker

Reputation: 619

QUnit - testing a searchbox

I'm trying to test out my custom jquery plugin that is very similar to query-ui.autocomplete. Once applied to a input element, it's able to search entries in a db table based on what's in the .input-box. Once the javascript finds any matches in DB,it spawns another element .suggestion-box under the .input-box. And populates the .suggestion-box element with all the results.

My intention is to :

input element:

<input class="widget input-box default" id="" type="text" value="type a car name">

The search functionality itself is working as expected,it's just that I'd like to run couple of tests using QUnit.

So far I only have this: 

QUnit.module( "group B" );
QUnit.test( "a test", function( assert ) {
  assert.expect( 1 );
  var $input_box =  $(".widget.input-box" );
  $input_box.on( "click", function(e) {
    assert.ok( true, "Input-box was clicked" );
    console.log($('ul', $(".suggestion-box")).length);
  });
  $input_box.val('B')
  $input_box.click();
});

After running this, I could clearly see that the 'click' event was triggered properly as well as the search function. And even though it returned some results back, the QUnit test still reporting zero results.

Is there any way to test this purely using Qunit or do I need to use any other plugins?

Upvotes: 1

Views: 200

Answers (1)

Wracker
Wracker

Reputation: 619

I guess the only way is just to check the events of .input-box element and see when the search has finished. 

$input_box.on( "search:complete", function(e){
   assert.ok($('ul', $suggestion_box).length > 0, "The number of entries is greater than 0." );
});

Upvotes: 0

Related Questions