JQuery Ajax тест не работает - PullRequest
Новая
       11

JQuery Ajax тест не работает

0 голосов
/ 29 марта 2012

Я пытаюсь протестировать очень простой плагин jQuery, который просто вызывает метод $ .ajax и помещает его содержимое в элемент. Для тестирования я использую JsTestDriver и Sinon для насмешек.

Файл плагина выглядит так: 

(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 (), и когда я записываю предыдущее заданное значение, возвращается ноль. И последнее сообщение журнала находится в тестовом файле, где, как вы можете видеть, текст ajax не установлен.

Кто-нибудь знает, что я делаю неправильно? Потому что я уверен, что упускаю то, чего сейчас не вижу.

Ответы [ 2 ]

0 голосов
/ 19 апреля 2013

Я рекомендую вам использовать AsyncTestCase , предоставляемый js-test-driver.Хорошо обрабатывает асинхронные процессы.

Добавьте ваш метод поддельного сервера к обратным вызовам в очереди, чтобы тест ждал, пока не будет вызван «сервер».Примерно так: 

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()+"*");
    });
};

Примечание: Я не пробовал код.Надеюсь, что нет опечаток.;)

0 голосов
/ 11 мая 2012

Использование синхронного AJAX

Драйвер JS Test и большинство известных мне тестовых сред имеют небольшую проблему с обработкой асинхронного JavaScript, в основном несвязанная природа асинхронных вызовов приводит к нарушению порядкавыполнение теста (подумайте: тест 2 начинает выполняться до завершения теста 1).По этой причине попробуйте использовать синхронные вызовы ajax на время ваших тестов, задав глобальное свойство async с помощью jQuery.ajaxSetup () . 

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

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

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