虽然过去我曾经使用过QUnit,但是自从我真正使用过它已经有一年了,所以我希望这是微不足道的!
我有一堆QUnit测试工作得非常好,除了每次加载页面失败的测试。如果我刷新,测试工作,但如果我再次刷新它会中断!它变得可以预测,但我不明白为什么它不起作用。有问题的测试应使用trigger('change')
事件,但这只会每隔一段时间触发一次。
我有一个动态填充的select
我将change
事件绑定到。所有这一切都将值保存到localStorage
并且测试我刚刚检查了值已设置。
示例HTML:
<select id="options">
<option value="">Please choose</option>
</select>
<p id="result"></p>
示例JS:
$(document).ready(function() {
var data = {
1: 'Option 1',
2: 'Option 2',
3: 'Option 3'
}
for(var d in data) {
$('#options').append($('<option>').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/(演示展示了它应该如何工作,但不是失败的测试)
有什么显而易见的事情会导致失败吗?
更新
我想我应该更新一些可能有帮助的信息......
在更改方法中,我添加了console.log()
,如下所示:
$('#options').on('change', function() {
console.log('here');
});
我只想检查更改事件是否实际被触发,但正如测试所示,该方法仅在每隔一次触发。
更新2
为了让我的测试通过,我删除了localStorage.removeItem('optionValue');
行并不理想,如果可能的话,我仍然想要深入了解它!
答案 0 :(得分:2)
我从this article找到了答案(解决了在qunit中交替失败测试背后的谜团)
要解释原因,您可能会有一个回调/插件自动绑定到页面上的现有元素。因此,当包含插件的文件包含在页面中时,元素会自动绑定。
因此,当您第一次运行测试时,它会失败。为什么?!原因是当测试运行时,测试工具中的元素似乎在每次测试运行时都会重新创建。因此,当重新创建它们时,由于已经包含JavaScript文件,因此不会发生自动绑定。
如果是这样,那为什么它可以用于备用调用?啊......其中就是魔法。为了提高测试效率,QUnit将在页面刷新之前的其他测试之前运行失败的测试。因此,当在其他测试之前执行失败的测试时,测试工具中已经存在的元素被绑定,因此,测试通过!但是因为这些测试现在通过,当页面刷新时,它们会恢复到原来的顺序,因此它们现在就失败了!
当然,通过这种实现,它促使我更有效地重写插件。希望这种自我发现对那里的人有所帮助!玩得开心测试!
我希望这会对你有所帮助。