我有一段时间试图通过Jasmine进行测试。它位于一个有10行的页面上。有一个按钮可以切换显示/隐藏行4-10。在手动测试时,该功能可以100%正常工作。但是,当我运行下面的Jasmine测试(它可以显示总共10行)时,它有时在Firefox上失败,并且在Chrome上工作的次数最多(尽管有时Chrome检查器打开会改变测试行为)
以下是测试:
describe('Show / Hide feature', function() {
beforeEach(function(){
loadFixtures('tools_generate__codes.html');
GenerateCodes.bind();
GenerateCodesFunctions.hideExtraRows();
GenerateCodesFunctions.toggleShowHideMore();
});
it('defaults to showing 3 rows', function() {
expect($('.filenames >tbody > tr:visible').length === 3).toBeTruthy();
});
it('can show 10 total rows', function() {
$('.show_more').click();
expect($('.filenames >tbody > tr:visible').length === 10).toBeTruthy();
});
});
和代码:
GenerateCodesFunctions = {
toggleShowHideMore: function() {
$('.show_more').click(function(event) {
event.preventDefault();
if ($('.show_more').html() === 'Show More') {
alert("WTF");
GenerateCodesFunctions.showExtraRows();
} else {
GenerateCodesFunctions.hideExtraRows();
}
});
},
hideExtraRows: function() {
for (var i = 4; i <= 10; i++) {
$("#generate__codes_filename" + i).val('');
$("#generate__codes_filename" + i + "_count").val('');
$("#generate__codes_filename" + i + "_prefix").val('');
$("#generate__codes_filename" + i).parent().parent().hide();
}
$('.show_more').html("Show More");
},
showExtraRows: function() {
for (var i = 4; i <= 10; i++) {
$("#generate__codes_filename" + i).parent().parent().show();
}
alert('showed extra rows');
$('.show_more').html("Show Less");
}
};
似乎正在发生的事情是单击.show_more按钮2-3次(警告'wtf'多次显示)。 $('。show_more')。点击代码仅在测试中出现一次。在两者上,看起来第一次单击不会将按钮的文本更改为“显示更少”。在Chrome上,第二次点击会将文字更改为“显示更少”,而在Firefox上却没有,我认为这会导致问题。
为什么多次单击按钮,为什么不更改按钮的文本。另外,为什么这种行为在Firefox和Chrome上有所不同?
答案 0 :(得分:1)
找出造成问题的原因。我愚蠢地只是将我的页面中的直接html复制到夹具中,这可能导致加载夹具重新加载所有的javascript文件。我认为.js文件的重新加载导致错误,或者加载速度慢的事实导致单击事件处理错误并不总是在期望之前完成(设置期望超时导致测试通过)。