Модульное тестирование QUnit: проверка щелчка мышью

У меня есть следующий HTML-код:

<div id="main">
  <form Id="search-form" action="/ViewRecord/AllRecord" method="post">
    <div>
        <fieldset>
            <legend>Search</legend>
           <p>
                <label for="username">Staff name</label>
                <input id="username" name="username" type="text" value="" />
                <label for="softype"> software type</label>

                <input type="submit" value="Search" />
            </p>
        </fieldset>
    </div>
  </form>
</div>

И следующий код Javascript (с JQuery в качестве библиотеки):

$(function() {
$("#username").click(function() {
        $.getJSON("ViewRecord/GetSoftwareChoice", {},
    function(data) {
       // use data to manipulate other controls
    });
    });
});

Теперь, как протестировать $("#username").click, чтобы для заданного ввода он

  1. вызывает правильный URL (в данном случае это ViewRecord/GetSoftwareChoice)
  2. И ожидаемый вывод (в данном случае function(data)) ведет себя корректно?

Есть идеи, как это сделать с помощью QUnit?

Изменить: я читал примеры QUnit, но, похоже, они имеют дело с простым сценарием с нет взаимодействия AJAX. И хотя существуют примеры ASP.NET MVC, но я думаю, что они действительно проверяют вывод сервера на вызов AJAX, т. е. он все еще проверяет ответ сервера, а не ответ AJAX. Я хочу, как проверить ответ на стороне клиента.


jquery qunit
person Graviton    schedule 16.06.2009    source источник
comment
Боюсь, немного; Я действительно не знаю, как начать.   -  person Graviton    schedule 16.06.2009

Ответы (3)


arrow_upward
6
arrow_downward

Вы можете заменить свой анонимный обработчик событий вызовом функции, и в своих тестах вы можете просто вызвать эту функцию.

Итак, вместо

$("#username").click(function() {
    $.getJSON("ViewRecord/GetSoftwareChoice", {}, function(data) {
    // use data to manipulate other controls
    });
});

Вы можете сделать что-то вроде

function doSomething() {
    $.getJSON("ViewRecord/GetSoftwareChoice", {}, function(data) {
    // use data to manipulate other controls
    });
}

$("#username").click(doSomething);

И тогда в ваших тестах QUnit вы можете просто вызвать

doSomething();
person RaYell    schedule 15.07.2009
comment
Я думаю, что это лучше всего. Наличие селектора $(...) делает код более хрупким и привязанным к разметке. - person José F. Romaniello; 02.09.2011

arrow_upward
0
arrow_downward

  1. переопределите $.getJSON в своем тесте, чтобы подтвердить правильность переданного URL-адреса. если вам нужно делать это часто, вы можете создать вспомогательную функцию, которая переопределяет getJSON и утверждает URL-адрес. Обязательно вызовите реализацию по умолчанию после вашего assert. Кроме того, после того, как вы подтвердите URL-адрес, остановите () тест.

Оберните переданный обратный вызов функцией, которая запускает тест и вызывает обратный вызов.

Запустите тест.

вызвать щелчок по #username.

Редактировать:

Это может помочь: QUnit с Ajax, QUnit проходит неудачные тесты

person mkoryak    schedule 16.06.2009
comment
Хорошо, есть ли способ вернуть фиктивные данные? - person Graviton; 16.06.2009
comment
что ты имеешь в виду "пройти назад", где? а какие фиктивные данные? - person mkoryak; 16.06.2009
comment
фиктивные данные = данные возвращаются с сервера. - person Graviton; 17.06.2009

arrow_upward
0
arrow_downward

Вы не всегда хотите совершать настоящие вызовы ajax. В этом случае mockjax является отличным решением. Вы можете назначить в своем тесте возвращаемое значение. Таким образом, вы сможете запрашивать информацию, не требуя реализации или других файлов.

В вашем случае это может быть что-то вроде этого:

$.mockjax({
  url: '/ViewRecord/GetSoftwareChoice',
  responseTime: 750,
  responseText: {
    status: 'success',
    result: 'your data can be put here' //in that case it is data.result with value string
  }
});

Вы можете проверить запрос вызова ajax, вы можете проверить щелчок и вы можете проверить другое поведение.

Пс. Вы «отменяете» вызов ajax своим результатом. пс2. Mockjax можно найти здесь: https://github.com/appendto/jquery-mockjax

person eL-Prova    schedule 03.09.2013