QUnit

Question

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

我的意图是：

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

输入元素：

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

在运行之后，我可以清楚地看到 '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." );
});

QUnit - 测试搜索框

QUnit - testing a searchbox

javascript

html