Статьи

jQuery плагины с jsTestDriver

Ноябрь 14, 2018

В этой статье мы собираемся разработать пример плагина jQuery с помощью jsTestDriver, небольшого фреймворка для написания автоматических тестов.

плагины jQuery

Плагины в jQuery — это просто функции, добавленные в jQuery.fn, который является прототипом объектов, создаваемых $ (). Таким образом, они будут привязаны к текущему элементу, возвращенному функцией $ (), где вы сможете их вызвать.

Плагин ссылается с этим как текущий объект, где они применяются; это , как правило , список узел , представляющий несколько элементов. Вы можете все плагины с:
$ (‘# elementId’). PluginName ();

Как правило, плагины должны быть определены в закрытии, чтобы избежать случайного загрязнения глобальной области видимости. Более того, когда они не возвращают значение, они должны просто возвращать это, чтобы поддерживать типичную цепочку JQuery.

jsTestDriver

jsTestDriver — это среда тестирования javascript. Он захватывает браузеры и заставляет их выполнять код JavaScript: после захвата вы можете использовать его из командной строки для многократного выполнения модульных тестов каждый раз, когда вы добавляете тест или реализуете функциональность.

Этот инструмент способен имитировать DOM-узлы, создавая их на лету и не привязывая ничего к реальному объекту документа. Вы должны написать достаточно свободный от браузера код, чтобы можно было работать без реального документа (и я покажу вам, как в этой статье).

Пример

Мы собираемся написать пример плагина jQuery maxHeight . Его цель — вернуть максимальную высоту набора элементов. Чтобы узнать, как настроить jsTestDriver, обратитесь к моей статье « Хотите узнать больше?». раздел.

Мы начнем с минимальной конфигурации, включая только jQuery, наш тест и наш исходный файл:

server: http://localhost:4224

load:
- http://code.jquery.com/jquery-1.7.1.js
- src/*.js
- test/*.js

Ожидается, что тест сможет вызывать maxHeight () на узлах с поддержкой jQuery. Когда мы создаем DOM-узлы с комментариями jsTestDriver, они впоследствии становятся доступны для этого :

TestCase("maxHeightPluginTest", {
    'test returns the height of a DIV' : function () {
        /*:DOC divElement = <div style="height: 100px;"></div>*/
        assertEquals(100, $(this.divElement).maxHeight());
    }
});

Первая реализация — просто пример Fake It , чтобы мы могли получить ходячий скелет. Единственный сложный код — это замыкание, автоматически вызываемое передачей jQuery, чтобы сохранить глобальную область видимости от случайного введения переменных:

(function ($) {
    $.fn.maxHeight = function() {
        return 100;
    }
})(jQuery);

Теперь мы можем добавить еще один тест, который должен нарушить текущую ложную реализацию:

TestCase("maxHeightPluginTest", {
    'test returns the height of a div' : function () {
        /*:DOC divElement = <div style="height: 100px;"></div>*/
        assertEquals(100, $(this.divElement).maxHeight());
    }, 
    'test returns the height of the current div' : function () {
        /*:DOC divElement = <div style="height: 200px"></div>*/
        assertEquals(200, $(this.divElement).maxHeight());
    }
});

И реализовать это:

(function ($) {
    $.fn.maxHeight = function() {
        return this.height();
    }
})(jQuery);

Я думаю, что вы получили базовый цикл: каждый тест заставляет нас сделать код немного более общим.

Окончательный результат этого теста:

TestCase("maxHeightPluginTest", {
    'test returns the height of a div' : function () {
        /*:DOC divElement = <div style="height: 100px;"></div>*/
        assertEquals(100, $(this.divElement).maxHeight());
    },
    'test returns the height of the current div' : function () {
        /*:DOC divElement = <div style="height: 200px"></div>*/
        assertEquals(200, $(this.divElement).maxHeight());
    },
    'test returns the maximum height of multiple divs' : function () {
        /*:DOC container = <form>
            <div style="height: 100px"></div>
            <div style="height: 200px"></div>
            <div style="height:  50px"></div>
           </form>
         */
        var divs = $(this.container).children('div');
        assertEquals(200, divs.maxHeight());
    }
});

Который заставил этот код быть написанным:

(function ($) {
    $.fn.maxHeight = function() {
        var max = null;
        this.each(function () {
            var currentHeight = $(this).height();
            max = Math.max(currentHeight, max);
        });
        return max;
    }
})(jQuery);

Хочу больше?

Весь пример кода на Github .

Я написал о jsTestDriver и о том, как с его помощью генерировать элементы DOM на этом сайте.

Существует часовую презентацию доступны от автора Test-Driven развития JavaScript, Кристиан Йохансен, где он развивает клиентскую часть предложений поиска Google с TDD. Презентация включает в себя более крупный пример, чем этот, включая объекты презентатора и озвучивание вызовов Ajax. Если вы обычно пишете JavaScript с ковбойским кодированием, как это делают многие из нас, я советую вам посмотреть его.

39
Share: