如何對自定義AJAX事件進行單元測試

我有一個JavaScript應用程序，用戶可以在其中搜索地圖上顯示的位置。搜索位置是通過對服務器應用程序的AJAX調用完成的。有一個組件負責此服務器通信（searchComponent），我想單元測試通信是否正常工作。自定義事件如何對自定義AJAX事件進行單元測試

我的自定義事件的

說明是從http://api.jquery.com/jQuery.Callbacks/採取了簡單的發佈/訂閱的實現：

var topics = {}; jQuery.Topic = function(id) { var callbacks, method, topic = id && topics[ id ]; if (!topic) { callbacks = jQuery.Callbacks(); topic = { publish: callbacks.fire, subscribe: callbacks.add, unsubscribe: callbacks.remove }; if (id) { topics[ id ] = topic; } } return topic; };

最重要的方法是

EVENT.publish(data)
Trigg發生事件並將數據傳遞給所有訂閱者。

EVENT.subscribe(callback) 將回調函數訂閱給EVENT：每當EVENT被觸發時執行回調函數。

使用情況

的基本工作流程是這樣的：

用戶點擊搜索按鈕

應用程序調用searchComponent.doSearch()

searchComponent.doSearch()發送請求到服務器

服務器r esponds

的SearchComponent觸發定製事件任SEARCH_RESULT或SEARCH_FAILED

應用偵聽兩個事件，並從那裏繼續進行（顯示的東西在地圖上或產生錯誤消息）

SEARCH_RESULT和SEARCH_FAILED是如上所述的自定義事件。

var SEARCH_RESULT = jQuery.Topic('SEARCH_RESULT'); var SEARCH_FAILED = jQuery.Topic('SEARCH_FAILED');

我想要做什麼？

我要測試是否SearchComponent的工作：

是對服務器的請求被正確地進行？

來自服務器的響應是否正確處理？

當我撥打無效呼叫時，搜索失敗嗎？

服務器關閉時會發生什麼情況？

通常的東西。;）

問題（最後;））

如何測試這個用例？
（最好使用JS測試驅動程序，雖然我是開放對其他JavaScript測試框架的任何建議）

來源

2013-04-26 Friederike

這是可能使用[AsyncTestCase] [1] JS測試來測試異步行爲-driver。

下面是doSearch（）方法的示例測試用例。我已經添加了評論來解釋測試的每個部分在做什麼。

MyTest = AsyncTestCase("MyTest", { 

testSearchGoodCase : function(queue) { 
    // this flag will only be set to true when SEARCH_RESULT 
    // is triggered (see STEP 1) 
    var resultReceived = false; 

    // STEP 1 
    queue.call('prepare callbacks', function(callbacks) { 

     // add event handler for the desired behaviour 
     var onExpectedBehaviour = callbacks.add(function() { 
      // when this method is called the queue will enter STEP 2 
      resultReceived = true; 
     }); 

     SEARCH_RESULT.subscribe(onExpectedBehaviour); 

     // What if our test-method is not working and an error occurs? 
     // Then the SEARCH_FAILED event is triggered, but for this 
     // test case that is an error. So we can add the onError method 
     // as an errback in js-test-driver. 

     // errbacks cause the test to fail with a custom message. 
     var onError = callbacks.addErrback('Received an error.'); 

     // When SEARCH_FAILED is triggered onError is called 
     // -> that will cause the test to fail 
     // with the error message "Received an error". 
     SEARCH_FAILED.subscribe(onError); 

     // Now everything is set up and we can execute the function 
     // that we want to test. 
     searchComponent.doSearch(); 

     // The test will then run until either SEARCH_RESULT 
     // or SEARCH_FAILED is triggered. Or the test will 
     // timeout (if none of the two events is triggered). 
    }); 

    // STEP 2 
    queue.call('check conditions after asynchronous method completed', function() { 

     // when we get here the doSearch() method completed 
     // its asynchronous task. 
     assertTrue(resultReceived); 

    });   
} 
}

來源

2013-04-26 13:05:22 Friederike

如何對自定義AJAX事件進行單元測試

回答

相關問題