QUnit 테스트 AJAX 콜백 결과

Question

새로운 소식입니다. 나는 QUnit과 AJAX에 관한 오래된 글을 읽었지만 아직도 단서를 얻을 수 없었다.

myObj.prototype.getName = function() { 
    $.get('/url/to/server/', {id: this.id}) 
    .done(function(data) { 
     var name = JSON.parse(data); 
     var html = '<p>' + id.toString() + ': ' + name + '</p>'; 
     $('.content').append(html); 
    }); 
}; 

나는이 전체 기능의 성공 여부를 테스트 할 : 나는 결과에 따라 웹 페이지를 Ajax 호출을 수행하고 조작하는 기능을 가지고있다. QUnit 2.X의 cookbook에 따라, 내가 한 :.

QUnit.test('myObj.getName', function(assert) { 
    var done = assert.async(); 
    var obj = new myObj(1); // 1 is the ID 
    obj.getName(); 
    setTimeout(function() { 
    assert.equal($('.content').html(), '<p>1: name-of-1</p>'); 
    done(); 
    }); 
}); 

자체가 작동하고 웹 페이지에 이름을 인쇄하지만, 함수 QUnit 시험에서, $ ('. 내용을') HTML을() 없음입니다. 콜백 함수가 완료되기 전에 테스트가 실행되는 것 같습니다.

이것에 대한 아이디어가 있습니까? 고맙습니다!

Answer 1

setTimeout은 실제로 Ajax 호출이 완료되기를 기다리지 않고 Ajax 호출이 시작될 때까지 대기하므로 JS 엔진을 해제하여 다음 함수 인 setTimeout을 실행해야합니다. 나중에 Ajax 호출이 완료되고 done 콜백이 실행됩니다. 가장 좋은 해결책은 setTimeout에서 사용하지 말고 ... 대신 소스 코드 함수에서 Ajax 호출을 반환 해보십시오.

QUnit.test('myObj.getName', function(assert) { 
    var done = assert.async(); 
    var obj = new myObj(1); // 1 is the ID 
    obj.getName() 
    .done(function() { 
     assert.equal($('.content').html(), '<p>1: name-of-1</p>'); 
     done(); 
    }); 
}); 

:

이

myObj.prototype.getName = function() { 
    // notice the new `return` on the line below! 
    return $.get('/url/to/server/', {id: this.id}) 
    .done(function(data) { 
     var name = JSON.parse(data); 
     var html = '<p>' + id.toString() + ': ' + name + '</p>'; 
     $('.content').append(html); 
    }); 
}; 

그런 다음 테스트 코드에서 반환 된 약속을 사용할 수 있습니다 : 이것은 당신이 테스트의 약속에 훅 수 있도록해야