0

在这篇文章中，我询问如何检查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 个测试+断言（迭代值用于断言）？

4

1 回答 1

2

发生这种情况的原因是 JavaScript 有一个叫做Closure的东西，它也会var url = urls[i];改变与 关联的每个回调的值.load()，从而使你的错误报告一个不正确的 URL。

要解决闭包问题，您可以创建一个匿名函数，然后立即执行它。一个更好的解决方案可能是创建一个单独的函数，在其中您将 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()它们组合成一个测试。我创建了一个工作小提琴并更新了代码。

于 2012-08-02T14:27:14.377 回答