Как выполнить модульное тестирование селектора jQuery? - PullRequest
Новая
       18

Как выполнить модульное тестирование селектора jQuery?

2 голосов
/ 30 октября 2009

Просто быстрый вопрос ... В настоящее время у меня есть следующий код jQuery с селектором в нем. 

var ID = "idControl"
function doesTreeViewExist()
{
    if($('#' + ID).length == 0)
    {
        return false;
    }
    else
    {
        return true;
    }
}

Мне было интересно, как мне написать тест для проверки селектора с помощью QUnit? В частности, у меня возникают проблемы с синтаксисом / кодом.

EDIT:

Хорошо, предположим, теперь я хочу вместо этого смоделировать вызов селектора, потому что не могу получить доступ к реальному веб-сайту. Я использую JsTestDriver в качестве инструмента тестирования, что означает, что я не могу касаться браузера, в котором выполняются тесты (иначе тестовые прогоны будут остановлены). Как насчет такой ситуации? Как я могу проверить код?

Спасибо.

Ответы [ 3 ]

9 голосов
/ 30 октября 2009

Функция, которую вы публикуете, может быть сильно упрощена: 

var ID = "idControl";
function doesTreeViewExist() {
  return !!$('#' + ID).length;
}

Используя конструкцию !! ( двойное побитовое НЕ * ), чтобы преобразовать свойство length в логическое значение, оно вернет false только при нулевой длине.

Говоря о qUnit, вы можете легко настроить простой тест, подобный следующему: 

test("Your selector test", function() {
  ok($('#idControl').length > 0, "idControl exists");
  // or simply
  ok($('#idControl').length, "idControl exists");
});

Функция ok выполняет логическое утверждение , эквивалентное assertTrue JUnit.

4 голосов
/ 30 октября 2009

Я проверяю селекторы вручную, а затем передаю их в код, который их использует. Затем я могу выполнить модульное тестирование кода, который их использует. Если вы хотите просто протестировать селектор, вам нужен доступ к HTML, на который он влияет. Ваш тест может включать в себя целевой HTML, что-то вроде: 

test("selector works", function() {
    var html = $('<input type="select"><option value=0/></input');

    var result = $('option', html);

    ok(result.count() == 1);
});

Но я этого не делаю ... Я ставлю свои селекторы на край кода, чтобы я мог быстро добраться до них и просмотреть их в отладчике. У меня будет простой класс, свойства которого являются теми селекторами. Затем я посмеюсь над этим простым классом, чтобы написать код для всего, что зависит от этих селекторов. Причина, по которой я не проверяю свои селекторы, заключается в том, что целевой HTML-код генерируется кодом ASP.NET, и его трудно получить из теста javascript. Но я могу обернуть их в Humble Object («http://xunitpatterns.com/Humble Object.html»), а затем протестировать код, который зависит от этого скромного объекта. Вот простой класс-обертка, который я могу заменить на тестовые двойники: 

var createSelectWidget = function(rootSelector)
{
    return {
        userText : $('span', rootSelector),
        inputList : $('option', rootSelector),
    };
}

Какой бы шаблон внедрения зависимостей вы не использовали, вы можете затем заглушить его, как показано ниже. Предположим, у моего виджета есть входные данные для выбора значения и диапазон, в который я хочу записать некоторые результаты: 

var createSelectWidgetStub = function()
{
    return {
        userText : { text = function() {}},
        inputList : { val = function() {}},
    };
}

Затем я могу обойти эту заглушку в тестах, где я хочу изолировать зависимость, но не беспокоиться о взаимодействии с этой зависимостью. Когда я хочу проверить взаимодействие с зависимостью, я могу посмеяться над этим с помощью JSMock. Предположим, что я хочу проверить взаимодействие со списком ввода, я бы подготовил заглушку с одним элементом mock'd: 

var selectMock = createSelectWidgetStub();
selectMock.inputList = mc.createMock(selectMock.inputList);
3 голосов
/ 19 ноября 2009

Я использовал Джек, успешно смоделировал вызов jquery и возвратил пользовательскую длину и ожидаемый результат.

Что-то вроде: 

jack (function() {
    jack.expect("$").exactly("1").withArguments("#" + ID).returnValue( {length:0} );
    doesTreeViewExist()
    assertEquals(false, result);
});

Мне также удалось предоставить структуру DOM для удовлетворения вызова jquery, так как я использую одну из встроенных функций JsTestDriver HtmlDoc. Что-то вроде: 

/*:DOC += <span id="idControl"></span> */

или просто создайте структуру DOM без указанного идентификатора, чтобы получить ложное утверждение.

НТН.

...