2017-12-02 9 views
0

Qunitテストを構築して、ajaxのポストコールをテストしようとしています。私はmockajaxを使用して呼び出しを模擬しています。しかし、非同期呼び出しで動作するようにテストを行うことはできません。Qunit ajax async calls with mockajax

source.js:

はここに私のソースコードである

ajaxFunc = function(element){ 
    $.post({ 
    type:'POST', 
    url: '/temp/', 
    dataType:'json', 
    success: function(data){ 
    element.text("changed in func"); 
    }, 
    error: function(data){ 
    //do something 
    }, 
    timeout: 60000 
     }); 
} 

syncFun = function(element){ 
    element.text("changed in func"); 
} 

はここに私のテストコードです:

tests2.js

function mockSuccess(){ 
    $.mockjax({ 
    url: "/temp/", 
    responseText: { success: true } 
    }); 
} 

QUnit.test("test ajax async", function(assert) { 
    mockSuccess(); 
    var done = assert.async(); 
    var element = document.createElement("div"); 
    ajaxFunc($(element)); 
    $(element).text("old"); 
    setTimeout(function() { 
    assert.strictEqual($(element).text(), 'changed in func'); 
    done(); 
    }); 
}); 

QUnit.test("test sync", function(assert) { 
    var element = document.createElement("div"); 
    $(element).text("old"); 
    syncFun($(element)); 
    assert.strictEqual($(element).text(), 'changed in func'); 
}); 

失敗した最初のテストは、第2のものが成功する。成功コールバック内のsource.jsにコメントを付けると、実際には投稿が成功し、要素テキストが変更されていることがわかります。

つまり、投稿の結果をテストする以外はすべて正常に動作します。

私はhttps://qunitjs.com/cookbook/を見ていて、スタックオーバーフローの例は運が無かった。

答えて

1

私は仕事への非同期呼び出しを取得するミリ秒数を追加する必要があるように見えます:

QUnit.test("test ajax async", function(assert) { 
    mockSuccess(); 
    var done = assert.async(); 
    var element = document.createElement("div"); 
    ajaxFunc($(element)); 
    $(element).text("old"); 
    setTimeout(function() { 
    assert.strictEqual($(element).text(), 'changed in func'); 
    done(); 
    }, 800); 
    // ^^^ 
}); 

を、私はqunitためのgithubの中にこのような例を見てきたので、私はこれが正しいと思います時間関数を十分に高く設定しないと問題が発生することがあります。

私はすでに成功した処理をすべて移動しました。エラー:投稿機能の外にあるため、ajax呼び出しとは独立してテストできますが、実際の投稿をさまざまな種類のエラー。