从QUnit调用时,调用trigger()并不总是触发

虽然我过去使用过QUnit,但是自从我真正使用它以来已经有一年了,所以我希望这是微不足道的!

我有一堆QUnit测试工作得非常好,除了每次加载页面失败的测试。 如果我刷新,测试工作,但如果我再次刷新它会中断! 它变得可以预测,但我不明白为什么它不起作用。 有问题的测试应该使用trigger('change')事件,但这只会在每隔一段时间触发一次。

我有一个动态填充的select ,我将change事件绑定到。 它所做的就是将值保存到localStorage并且测试我刚刚检查了已经设置的值。

示例HTML:

  Please choose  

示例JS:

 $(document).ready(function() { var data = { 1: 'Option 1', 2: 'Option 2', 3: 'Option 3' } for(var d in data) { $('#options').append($('').val(d).text(data[d])); } $('#options').on('change', function() { $('#result').text(this.value); if(this.value != '') { localStorage.setItem('optionValue') = this.value; } else { throw 'You must choose a team'; } }); }); 

示例QUnit测试:

 test('Test some other stuff', function(assert) { localStorage.removeItem('optionValue'); // some tests to check things have worked correctly }); test('Is value added to localStorage?', 2, function(assert) { throws(function() { throw new $('#chooseTeam').val('').change(); }, 'No option selected'); $('#options').val(1).trigger('change'); equal(localStorage.getItem('optionValue'), 1, 'The first item should be selected'); }); 

但是,QUnit输出中的结果是undefined 。 我将其缩小到第一个测试,然后能够看到它是每次调用的行localStorage.removeItem('optionValue') ,但更改事件仅在每隔一次触发。

我创建了一个JS小提琴,试图演示这个问题: http : //jsfiddle.net/cchana/zqNtU/3/ (该演示展示了它应该如何工作,但不是失败的测试)

有什么明显的东西会导致这种失败吗?

UPDATE

以为我应该更新一些可能有帮助的信息……

在更改方法中,我添加了一个console.log() ,如下所示:

 $('#options').on('change', function() { console.log('here'); }); 

我只想检查更改事件是否实际被触发,但正如测试所示,该方法仅在每隔一次触发。

更新2

为了让我的测试通过,我删除了localStorage.removeItem('optionValue'); 不理想,如果可能的话,我仍然想深究它!

我找到了这篇文章的答案(解决了qunit中交替失败测试背后的谜团)

要解释原因,您可能会有一个回调/插件自动绑定到页面上的现有元素。 因此,当包含插件的文件包含在页面中时,元素会自动绑定。

因此,当您第一次运行测试时,它会失败。 为什么?! 原因是当测试运行时,测试工具中的元素似乎在每次测试运行时重新创建。 因此,当重新创建它们时,由于已经包含JavaScript文件,因此不会发生自动绑定。

如果是这样,为什么它可以在备用调用上工作? 啊……其中就是魔法。 为了提高测试效率,QUnit将在页面刷新后的其他测试之前运行失败的测试。 因此,当在其他测试之前执行失败的测试时,测试工具中已经存在的元素被绑定,因此,测试通过! 但是因为这些测试现在通过,当页面刷新时,它们会恢复到原来的顺序,因此它们现在都失败了!

当然,通过这种实现,它促使我更有效地重写插件。 希望这种自我发现对那里的人有所帮助! 玩得开心测试!

我希望这可以帮助你。