Как мне проверить плагин JQuery с жасмином?

Question

Как лучше всего тестировать код JQuery с помощью Jasmine?

У меня есть это простое тестовое приложение jQuery:

<div id='log'>log goes here</div>
<button id='btnClearLog'>Clear log</button>
<button id='btnAddLog'>Add log</button>

<script>
$(document).ready(function () {

    $('#log').empty(); 

    $('#btnClearLog').click(function () {
        $('#log').empty();  
    }); 

    $('#btnAddLog').click(function() {
        $('#log').append("<br />something");    
    }); 
});
</script>

Это работает, как и ожидалось - div # log пуст при загрузке документа, добавляется в #log и очищает #log при нажатии.

Но я не думаю, что это возможно для модульного тестирования, так как код JQuery находится внутри HTML-страницы.

Итак, я переписал это так:

<div id='log'>log goes here</div>
<button id='btnClearLog'>Clear log</button>
<button id='btnAddLog'>Add log</button>

<script>
$(document).ready(function () {

    $('#log').tester(); 

});
</script> 

и перенес код JQuery в отдельный файл, например, на основе сгенерированного кода плагина jQuery из http://starter.pixelgraphics.us/

(function($){

    $.Tester = function(el){

    var base = this;

            base.init = function(){

        $('#log').empty();

        $('#btnClearLog').click(function() {
            base.clear();
        });

        $('#btnAddLog').click(function() {
            base.add();
        });
            };

    base.clear = function(){
        $('#log').empty();
            };

    base.add = function(){
        $('#log').append("<br />something"); 
            };

            base.init();
    };

    $.fn.tester = function(){
        return this.each(function(){
            (new $.Tester(this));
        });
    };

})(jQuery);

Это также работает как ожидалось.

Тем не менее, моя попытка сценария Жасмин не работает.

describe('tester', function() { 

    it('log should be empty', function() { 
        var log = "<div id='log'>log</div>";
        var result = $(log).tester();
        expect(result).toBeEmpty();
    }

});

Я пробовал различные варианты вышеизложенного - все терпят неудачу с:

"Expected '<div id="log">log</div>' to be empty"

Можно ли протестировать плагин, написанный таким образом?

Лучше написать код по-другому, чтобы сделать его более тестируемым?

Answer 1

Здесь есть некоторые проблемы. Сначала вы смешиваете тестирование вашего кода с тестированием функциональности кода запроса. Таким образом, expect(result).toBeEmpty(); будет проверять, что был вызван этот $('#log').empty() фрагмент кода, что правильно проверить, но также проверяет, что элемент пуст, что здесь не ваша работа.

Во-вторых, вы создаете новые экземпляры в своем коде, который хотите протестировать, что затрудняет тестирование, потому что вы имеете дело с $. Так что в конце концов было бы лучше только протестировать вашу функцию Tester() и вставить все элементы прямо к ней:

(function($){

    $.Tester = function(el, log, btnClearLog, btnAddLog){

    var base = this;

            base.init = function(){

        log.empty();

        btnClearLog.click(function() {
            base.clear();
        });

        btnAddLog.click(function() {
            base.add();
        });
            };

    base.clear = function(){
        log.empty();
            };

    base.add = function(){
        log.append("<br />something"); 
            };

            base.init();
    };

    $.fn.tester = function(){
        return this.each(function(){
            (new $.Tester(this, $('#log'), $('#btnClearLog'), $('#btnAddLog')));
        });
    };

})(jQuery);

Делая это, вы можете тестировать только свой тестер, передавая некоторые макеты вместо реальных элементов DOM. Посмотрите sinon о том, как создавать и использовать макеты. Так как мы находимся в мире JavaScript, вы также можете издеваться над JQuery, просто не вставляйте jquery в тестовую часть, а вытесняйте его с помощью насмешки.