0

この投稿qUnitでは、画像が正しく読み込まれたかどうかを確認する方法を尋ねていました。イベントハンドラーが非同期だっasyncTestたので、解決策は使用することでした。error

今、このコードを再利用URLsして、ループと組み合わせて複数をチェックしようとしていforますが、これはまったくうまくいきません。

1 回目の試行: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);
    }
});

結果: 4 つの同一のアサーションを含む 1 つのテスト (最後の URL)

ここに画像の説明を入力

2 回目の試行:ループ 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反復ごとに 1 つのテスト + アサーション (反復値をアサーションに使用) にするために、for ループと組み合わせるにはどうすればよいですか?

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: OK、QUnit API をもう少し調べた後、 の 2 番目のパラメーターasyncTestと呼ばれるexpectedは、アサーション チェックの数を示す数値であると思います。したがって、コードは正しく機能するはずです。

EDIT3：わかりました、テストできたasyncTest()ので、結局それは私たちが必要としているものではないことがわかりました. これらを単一のテストに組み合わせて組み合わせる必要がtest()ありますstop()。start()動作するフィドルを作成し、コードを更新しました。

于 2012-08-02T14:27:14.377 に答える