javascript - QUnit - 测试搜索框

Question

我正在尝试测试我的自定义 jquery plugin这与 query-ui.autocomplete 非常相似。一旦应用于输入元素，它就能够根据 .input-box 中的内容搜索数据库表中的条目。一旦 JavaScript 在数据库中找到任何匹配项，它就会在 .input-box 下生成另一个元素 .suggestion-box。并使用所有结果填充 .suggestion-box 元素。

我的意图是:

• 手动触发“.input-box”上的点击事件
• 检查“.suggestion-box”中是否有任何“li”元素。

输入元素:

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

搜索功能本身按预期工作，只是我想使用QUnit运行一些测试。

到目前为止我只有这个:

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

运行后，我可以清楚地看到“点击”事件以及搜索功能都被正确触发。即使它返回了一些结果，QUnit 测试仍然报告零结果。

有什么方法可以纯粹使用Qunit来测试这个，还是我需要使用任何其他插件？

Answer 1

我想唯一的方法就是检查 .input-box 元素的事件并查看搜索何时完成。

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