jQuery的Ajax測試不起作用

我想測試一個非常簡單的jQuery插件，它只需調用$ .ajax方法並將其內容放入元素中。爲了測試，我正在使用JsTestDriver和Sinon進行嘲諷。jQuery的Ajax測試不起作用

插件文件如下：

(function($) { 
    $.fn.transfer = function() { 

    $.ajax({ 
     url : 'friends', 
    type : 'GET', 
    contentType : 'application/json', 
    dataType : 'json', 
    success : function(html) { 
     console.log("-"+html+"-"); 
     console.log($(this)); 
     $(this).html(html); 
     console.log("+"+$(this).html()+"+") 
    } 
}); 
}; 
})(jQuery);

在理論上很簡單的插件。

然後我寫了一個單元測試嘲諷成功功能：

TestCase("Ajax ", { 
    'test response' : function() { 
     /*:DOC divElement = <div id="container" style="height: 100px;"></div>*/ 
     sinon.stub(jQuery, "ajax").yieldsTo(
      "success", 'alex'); 
     $(this.divElement).transfer(); 
     console.log("*"+$(this.divElement).text()+"*"); 
    } 
});

它似乎是正確的了。然後，如果執行此測試，則通過控制檯打印下一行：

[LOG] -alex- 

[LOG] [object Object] 

[LOG] +null+ 

[LOG] **

因此，成功函數正確接收「alex」字符串。然後打印$（this）引用，使用html（）函數設置消息，當我記錄先前的設置值時，返回null。最後的日誌消息在測試文件中，因爲您可以看到未設置ajax文本。

有人知道我在做什麼錯嗎？因爲我確信我錯過了一些我現在看不到的東西。

來源

2012-03-29 lordofthejars

console.log（$（this））;將引用ajax對象 - 而不是元素傳遞給插件 – mikevoermans 2012-03-29 18:37:35

你正在混合json dataType與字符串在測試中，很難按照你想要的 – charlietfl 2012-03-29 18:55:39

使用同步AJAX

JS測試驅動程序，大多數測試框架，我知道有一點問題的處理異步JavaScript中，基本上異步的脫節性質要求搞砸了測試執行的順序（認爲：測試2在測試1完成之前開始執行）。出於這個原因，請嘗試使用synchornous ajax調用您的測試期間，方法是使用jQuery.ajaxSetup()設置全局異步屬性。

// Use synchronous AJAX 
jQuery.ajaxSetup({async: false}); 

TestCase("Ajax ", { 
    'test1' : function() { 
     // etc... 
    } 
}); 

// Revert to default 
jQuery.ajaxSetup({async: true});

來源

2012-05-10 23:39:17

我不同意。 js-test-driver支持測試異步函數。這不是我所說的簡單，但它是可能的和可以理解的。據我瞭解，線程所有者沒有遇到多個測試用例不同步的問題，但爲使用異步行爲的方法編寫了一個測試用例。 – Friederike 2013-04-19 09:45:45

我推薦你使用由js-test-driver提供的AsyncTestCase。它很好地處理異步處理。

將您的模擬服務器方法添加到隊列中的回調中，以便測試一直等到「服務器」被調用。這樣的事情：

var AjaxTest = AsyncTestCase('AjaxTest'); 

AjaxTest.prototype.testResponse = function(queue) { 
    /*:DOC divElement = <div id="container" style="height: 100px;"></div>*/ 

    queue.call('Set up mocked server', function(callbacks) {   
     var serverStub = sinon.stub(jQuery, "ajax").yieldsTo("success", 'alex'); 
     callbacks.add(serverStub); 

     $(this.divElement).transfer(); 
    }); 

    queue.call('Make assertions here', function() { 
     console.log("*"+$(this.divElement).text()+"*"); 
    }); 
};

注：我還沒有嘗試過的代碼。希望沒有錯別字。 ;）

來源

2013-04-19 09:43:57 Friederike

jQuery的Ajax測試不起作用

回答

相關問題