在this post中,我问如何检查qUnit
图片是否已正确加载。解决方案是使用asyncTest
,因为error
事件处理程序是异步的。
现在,我正在尝试重复使用此代码,通过将其与URLs
循环相结合来检查多个for
,但这根本不顺利。
第一次尝试:for
asyncTest
循环
//stop(); // no difference
asyncTest('image',function() {
//stop(); // no difference
var urls = ['a','b'];
for (var i in urls) {
//stop(); // no difference
var url = urls[i];
var test_image = $('#test-image');
test_image.error(function(e) {
ok(false,'Issue loading image '+url);
start();
});
test_image.load(function() {
ok(true,'Image properly loaded '+url);
start();
});
//stop(); // no difference
test_image.attr('src',url);
}
});
结果:1个测试,4个相同的断言(在最后一个URL上)
第二次尝试:asyncTest
圈内for
var urls = ['c','d'];
for (var i in urls) {
var url = urls[i];
//stop(); // no difference
asyncTest('image-'+url,function() {
var test_image = $('#test-image');
test_image.error(function(e) {
console.log('ERROR',$(this).attr('src'));
ok(false,'Issue loading image '+url);
start();
});
test_image.load(function() {
console.log('OK',$(this).attr('src'));
ok(true,'Image properly loaded '+url);
start();
});
//stop(); // prevents tests from running
test_image.attr('src',url);
});
}
结果:2个单独的测试,首先是1个断言,最后一个断言与for循环中的迭代一样多,并且始终只检查最后一个url。
如何将asyncTest
与for循环结合起来,以便每次迭代有1次测试+断言(使用迭代值进行断言)?
答案 0 :(得分:2)
之所以发生这种情况,是因为JavaScript有Closure之类的内容,它会为与var url = urls[i];
相关联的每个回调设置.load()
更改值,从而使您的错误报告错误的网址
要解决闭包,可以创建一个匿名函数,然后立即执行它。更好的解决方案可能是创建一个单独的函数,在其中将URL作为参数传递,它将分别测试每个图像。
我猜你也不需要在页面上实际显示图像,而只是检查我们是否能够加载它。因此,我们可以在代码中创建动态图像,而不是将它们应用于任何元素。
这是一个有效的代码,小提琴:http://jsfiddle.net/VesQ/JWBhD/1/
var urls = ['http://jquery.com/favicon.ico','http://vesq.net/favicon.ico', 'http://example.com/thisDoesNotExist.jpg'];
test('image', urls.length, function() {
for (var i = 0; i < urls.length; i++) {
var url = urls[i];
stop();
imageAsyncTest(url);
}
});
function imageAsyncTest(url) {
// Create a new dynamic image
var img = new Image();
// Turn it into a jQuery object
var $img = $(img);
// Hook the tests
$img.error(function() {
ok(false,'Issue loading image '+url);
start();
});
$img.load(function() {
ok(true,'Image properly loaded '+url);
start();
});
// Load the image
$img.attr('src', url);
}
编辑:原谅我,没有阅读问题底部的粗体部分。我将很快编辑此代码。
EDIT2:好的,在研究了QUnit API之后,我相信asyncTest
中的第二个参数,称为expected
,是一个数字,说明了多少断言检查应该有。所以我想现在代码应该正常工作了。
EDIT3:好的,既然我能够测试它,我发现asyncTest()
并不是我们所需要的。我们应该将test()
与stop()
和start()
结合使用,将这些结合到一个测试中。我创建了一个工作小提琴并更新了代码。