javascript - 使用 Qunit 检查图像是否正确加载

Question

我正在尝试通过将 URL 设置为测试图像的 src 属性并检查error 事件处理程序是否顺利。到目前为止，我所拥有的是:

test('image',function() {
    var test_image = $('#test-image');
    test_image.error(function(e) { // properly triggered
        console.log(e);             
        is_valid = false;
        // ok(false,'Issue loading image'); breaks qunit
    });
    var is_valid = true;
    test_image.attr('src','doesntexist');
    console.log('checking is_valid');  // occurs before error event handler
    if (is_valid) {  // therefore always evaluates to the same
        ok(true,'Image properly loaded');
    } else {
        ok(false,'Issue loading image');
    }
});

我的问题是虽然 error 事件被正确触发，但它似乎以异步方式发生并且在 is_valid 评估之后发生(因此无论我做什么检查，结果总是一样的)。我尝试在 error 事件处理程序中添加 ok() 断言，但出现以下错误:

Error: ok() assertion outside test context

如何根据在 error 事件处理程序中执行的处理来运行断言？

PS:如果我在检查 is_valid 之前插入 alert('test'); 它工作正常(确认错误处理程序是异步的问题)但是你可以想象是不能接受的。我尝试使用 setTimeout 来延迟 if 语句的执行，但它带来了相同的断言上下文错误。

Answer 1

通过快速浏览 QUnit API，我发现您应该使用 asyncTest为此功能。在为您的 test_image 设置 src 属性之前，将一个函数挂接到 load。事件。这是一个未经测试的代码:

asyncTest('image',function() {
    var test_image = $('#test-image');
    test_image.error(function(e) {
        console.log(e);             
        ok(false,'Issue loading image');
        start();
    });
    test_image.load(function() {
        ok(true,'Image properly loaded');
        start();
    });
    test_image.attr('src','doesntexist');
});