0

ユーザーが場所を検索して地図上に表示できる JavaScript アプリケーションがあります。場所の検索は、サーバー アプリケーションへの AJAX 呼び出しで行われます。このサーバー通信 (searchComponent) を担当する 1 つのコンポーネントがあり、通信が機能するかどうかを単体テストしたいと考えています。

カスタム イベントの説明

私のカスタム イベントは、 http://api.jquery.com/jQuery.Callbacks/から取得した単純な Publish/Subscribe 実装です。

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)
    イベントをトリガーし、データをすべてのサブスクライバーに渡します。

  • EVENT.subscribe(callback) コールバック関数を EVENT にサブスクライブします。EVENT がトリガーされるたびに、コールバック関数が実行されます。

使用事例

基本的なワークフローは次のとおりです。

  • ユーザーが検索ボタンをクリックする
  • アプリケーションが呼び出すsearchComponent.doSearch()
  • searchComponent.doSearch()リクエストをサーバーに送信します
  • サーバーが応答する
  • searchComponentは、または_ SEARCH_RESULTSEARCH_FAILED
  • アプリケーションは両方のイベントをリッスンし、そこから続行します (マップ上に物を表示するか、エラー メッセージを生成します)。

SEARCH_RESULTSEARCH_FAILED上記のカスタムイベントです。

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

私は何をしたいですか？

searchComponent が機能しているかどうかをテストしたい:

  • サーバーへのリクエストは正しく行われていますか?
  • サーバーからの応答は正しく処理されていますか?
  • 無効な呼び出しを行った場合、検索は失敗しますか?
  • サーバーがダウンしたときのタイムアウトについてはどうですか?

いつものもの。;)

質問（最後に;））

この使用例をテストするにはどうすればよいですか?
(できれば js-test-driver を使用することをお勧めしますが、他の JavaScript テスト フレームワークに関する提案は受け付けています)

4

1 に答える 1

0

js-test-driver の [AsyncTestCase][1] を使用して、非同期動作をテストすることができます。

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-26T13:05:22.457 に答える