Что такое современный подход к тестированию кода jQuery?

Question

Я новичок в JavaScript. Представьте себе, я следующий кусок кода:

$(document).ready(function() { 
    $('#nights').on('keyup', function() { 
    var nights = +$(this).val(); 
    var dailyPrice = +$(this).closest(".tour").data("daily-price"); 
    $('#total').text(nights * dailyPrice); 
    $('#nights-count').text($(this).val()); 
    }); 
}); 

Как я могу блок-тест, что анонимная функция

1. возвращает значение текущего элемента,
2. извлекает данные из +$(this).closest(".tour").data("daily-price") и
3. затем вызывает text(...) на $('#total') и $('#nights-count')

?

Обратите внимание, что меня интересует блок тестов (поэтому создание полноценного селен-теста, который что-то типа, а затем проверяет значение элементов, не подходит для меня) t требует, чтобы я добавил новый уровень абстракции.

По уровню абстракции Я имею в виду: я мог бы создать класс JQueryAbstraction, а затем 2 подклассов - один, который вызывает реальные методы JQuery и другие, который просто подсчитывает количество вызовов.

Answer 1

Вы можете попробовать введение популярных Unit Testing легкие рамки, как Жасмин, мокко, QUnit

Все эти рамки могут сосуществовать с AngularJS, JQuery .... и т.д.

Из вашего примера, который вам пытаются с помощью анонимной функции, вы можете преобразовать эту функцию в не анонимную функцию и передать ее в инструмент тестирования

, чтобы убедиться, что последняя строка достигнута. Я представляю простую глобальную переменную и присваиваю ей значение, скажем done = true или done = false

Пример:

var done = false; 
var onReady = function() { 
    $('#nights').on('keyup', function() { 
    var nights = +$(this).val(); 
    var dailyPrice = +$(this).closest(".tour").data("daily-price"); 
    $('#total').text(nights * dailyPrice); 
    $('#nights-count').text($(this).val()); 
    }); 
    done = true; 
} 

$(document).ready(onReady); 

Итак, теперь вы можете проверить свои onReady кода модульного тестирования, как и в Jasmine, вы можете прокомментировать фактический документ готового

//$(document).ready(onReady); 

И вызовите функцию с помощью модульного тестирования

describe("Document Ready Unit Testing", function() { 
    it("call the function ", function() { 
    done = false; 
    onReady() ; 
    expect(done).toEqual(true);//this will print the unit testing passed or failed 
    }); 
}); 

Но: Я f вам не интересно объявлять анонимную функцию отдельно, тогда вы можете пропустить объект и получить готовое событие.