04.01.2010Юнит-тестирование в Javascript: просто делайте это!

Tagged: , and | 0 Comments
Post to EmailPost to DiggPost to GooglePost to Facebook

оригинал

Слоган Nike очень четко описывает то, о чем я хочу поговорить в этой статье: модульное тестирование. В глубине души каждый знает, какие есть выгоды от модульного тестирования кода. Модульное тестирование согреет вам душу, когда вы будете ложиться спать, зная что изменения сделанные вами, не сломали ничего написанного раньше. Оно сделает вас счастливыми и даст вам спокойствие :)

Тем не менее, многие (включая меня) до сих пор не используют модульное тестирование кода. Этому есть несколько объяснений, но сейчас разговор не об этом. Сейчас я хочу показать вам, насколько легко тестировать модули в JavaScript. Я буду использовать для этого QUnit, написанный John Resig, создателем jQuery.

Настройка среды тестирования

Создадим HTML файл который будет загружать jQuery, Qunit и таблицу стилей.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
  4. <head>
  5.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.   <title>Юнит тесты библиотеки тэгов</title>
  7.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  8.   <link rel="stylesheet" 
  9. href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css"
  10. media="screen" />
  11.   <script type="text/javascript" 
  12. src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script>
  13. </head>
  14. <body>
  15.   <h1 id="qunit-header">Юнит тесты библиотеки тэгов</h1>
  16.   <h2 id="qunit-banner"></h2>
  17.   <h2 id="qunit-userAgent"></h2>
  18.   <ol id="qunit-tests"></ol>
  19. </body>
  20. </html>

На этом этапе, когда вы запустите код в браузере, ничего особенного не произойдет, для начала надо добавить наши тесты.

Добавляем юнит-тесты

Теперь, когда мы все подготовили, пора написать тест. Я приведу вам несколько примеров того, как я делал это для своей библиотеки тэгов. Если вам необходимо API или вы хотите знать все возможности QUnit, вы можете посмотреть это здесь.

Что бы мой код был более организованным, я стараюсь повторить в тестах его структуру. Вот что я имею в виду:

Файловая структура

Все тесты лежат в отдельных файлах, отражающих оригинальную структуру. Тест для /tag/tag.pubsub.js находится в файле /tests/tag/tag.pubsub.js. Я думаю это хорошая идея - разделять тесты на модули. В одном большом файле, или даже внутри HTML файла - тесты все равно будут работать. Просто будет сложнее поддерживать код, если у вас много тестов.

Т.к. я везде использую модули, надо добавить признак того, что тестируется новый модуль.

  1. $(function(){
  2. /**
  3. * Опишем модуль:
  4. */
  5.   module("Базовый класс Tag");
  6. });

Это файл /tests/tag.js и он подключен к HTML в нашем первом шаге:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.   <title>Юнит тесты библиотеки тэгов</title>
  6.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  7.   <link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" 
  8. media="screen" />
  9.   <script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script>
  10.   <!-- добавим ссылки на юнит тесты: -->
  11.   <script type="text/javascript" src="../tag.js"></script><!-- тестируемая библиотека-->
  12.  <script type="text/javascript" src="tag.js"></script><!-- тест для этой библиотеки-->
  13. </head>
  14. <body>
  15.   <h1 id="qunit-header">Юнит тесты библиотеки тэгов</h1>
  16.   <h2 id="qunit-banner"></h2>
  17.   <h2 id="qunit-userAgent"></h2>
  18.   <ol id="qunit-tests"></ol>
  19. </body>
  20. </html>

В HTML, во-первых, мы подключаем файл содержащий тестируемый код. Далее подключаем тест этого кода. Вы можете добавить любые другие файлы для каждого тестируемого плагина.

И так, мы определили наш модуль. Во-первых, я добавим проверку того, загрузился ли файл, и было ли определенно пространство имен Tag в window.

  1. /**
  2. * Описываем модуль:
  3. */
  4.   module("Базовый класс Tag");
  5. /**
  6. * Проверяем существование объекта Tag:
  7. */
  8.   test("Tag", function() { 
  9.   expect(2); // необязательно
  10.   equals(typeof window.Tag, "object", "Проверяем существование объекта Tag");
  11.   equals(typeof window.Tag.constructor, "function", "Проверяем тип конструктора");
  12. });

Тесты для проверки существования объекта Tag сгруппированы вместе функцией test(). Внутри неё у нас может быть столько утверждений для проверки, сколько нам надо. В данном случае их два: проверка является ли window.Tag объектом и есть ли у него конструктор. Если оба утверждения пройдены успешно, это вполне достаточно убедит меня в том, что базовый класс Tag загружен и доступен на странице.

The basic premise of unit testing is that you test the smallest unit that makes up your code. In the case of the Tag library, the smallest unit will be a method from a plugin or the base class. So the next thing we’re obviously going to do, is test each of the methods inside the Tag object.

В качестве примера, напишем тест для метода Tag extend():

  1. /**
  2. * Проверяем работу метода extend :
  3. */
  4.   test("Tag.extend()",function() {
  5.     // утверждение использует ok()
  6.     ok(typeof window.Tag.extend === "function","Метод существует");
  7.     // шаблон плагина (так сказать пустышка (mock))
  8.     var tmp = {
  9.       _initCheck:false,
  10.       init:function() {
  11.         this._initCheck = true;
  12.       }
  13.     };
  14.     // Проверяем зарезервированные пространства имен:
  15.     var reserved = ["extFN", "extLocalFN"];
  16.     $.each(reserved, function() {
  17.       ok(!window.Tag.extend(this,tmp), "Пространство имен '" + this + "' не переопределенно");
  18.     });
  19.     // добавляем проверку плагина
  20.     ok(window.Tag.extend("test",tmp), "Пространство имен 'test' есть");
  21.     ok(!window.Tag.extend("test",tmp), "Пространство имен 'test' нельзя объявлять дважды");
  22.     equals(typeof window.Tag.test, "object", "Плагин Tag.test существует");
  23.     equals(typeof window.Tag.fn.test, "object", "Тестируемый плагин добавлен к FN");
  24.     // проверяем, можно ли расширить функциональность плагина:
  25.     $.each(reserved, function(index, ns) {
  26.       var obj = window.Tag[ns];
  27.       $.each(obj,function(key, value){
  28.         same(window.Tag.test[key], obj[key], "Проверяем существование '" + key + "'");
  29.       });
  30.     });
  31.     // проверяем был ли вызван init():
  32.     equals(true, window.Tag.test._initCheck, "Init был запущен");
  33.   });

Метод extend() делает очень многое, и все это, естественно, надо протестировать. Это единственный способ убедиться, что метод делает все, что должен. Для сложных методов, с большим количеством способов выполнения, тестировать становиться не так просто. Это причина делать методы маленькими и выносить функционал в подфункции: это упрощает тестирование (и понимание, когда вы решите заглянуть в ваш код через полгода после его написания).

Юнит тесты Ajax вызовов

Плагин Tag.core имеет функционал с асинхронной загрузкой. Проблема в том, что AJAX выполняется асинхронно, а модульные тесты - синхронно. Тесты должны выполняться по порядку, ни один тест не должен выполняться параллельно с другим. Тем не менее асинхронные вызовы надо тестировать. В QUnit есть метод asyncTest(), который предоставляет такую возможность. Я его не использую, делаю это "вручную".

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

  1. /**
  2. * проверяем работу метода loadJS:
  3. */
  4.   test("Tag.core.loadJS()",function() {
  5.     // проверяем загрузку:
  6.     window.Tag.core.loadJS("dummy.js");
  7.     // когда тестируем асинхронную функциональность, мы должны временно остановить
  8.     // выполнение тестов:
  9.     stop();
  10.     window.setTimeout(function(){
  11.       equals(typeof window.dummy, "object", "Провряем, загружается ли dummy");
  12.       // стартуем тесты снова:
  13.       start();
  14.     },250);
  15.   });

Во-первых, последовательность тестов останавливается методом stop(). Как только тест пройден, метод start() восстановит нормальное выполнение последовательности тестов. Просто, но эффективно.

Метод asyncTest() в QUnit делает примерно то же самое. Он просто выполняет метод stop() за вас. Вам необходимо только указать когда вернуться к выполнению тестов.

Будьте внимательны, асинхронные тесты могут содержать только один асинхронный вызов. Т.е. не может выполняться два AJAX запроса в одном тесте.

  1.   test("Tag.core.loadJS() multiple",function() {
  2.     // проверяем множественную загрузку
  3.     window.Tag.core.loadJS(["dummy.js","dummy2.js"]);
  4.     stop();
  5.     window.setTimeout(function(){
  6.       equals(typeof window.dummy, "object", "Провряем, загружается ли dummy");
  7.       equals(typeof window.dummy2, "object", "Провряем, загружается ли dummy повторно");
  8.       // стартуем тесты опять:
  9.       start();
  10.     },250);
  11.   });

Результаты тестов

Написав тесты, вы должно быть хотите увидеть какие-то результаты. Просто сохраните все и откройте html файл в браузере. Тесты запуститься и вы получите результаты, например, такие:

Проваленные тесты помечены красным. По любому тесту можно щелкнуть и появиться более подробное описание, которое вернул тест:

Чем подробнее вы опишите ваши тесты, тем проще вам будет понять где произошла ошибка.

Заключение

Использование модульного тестирования функционала JavaScript не может быть проще. Входного порога по уровню знаний нет, это так же легко, как создать html файл. Написание тестов может принести немало пищи для ума. В начале вы будете делать ошибки, но это нормально. Чем дольше вы будете использовать написание тестов, тем эффективнее вы будете их писать. Но надо начать. Просто начать.

Помните, я только показал дверь. войти вы должны сами. :)

Весь код используемы здесь можно найти в репозитарии

Rate It! (Average 5.00, 1 votes)

Related Posts

0 Responses to Юнит-тестирование в Javascript: просто делайте это!

Feed for this Entry

Leave a Reply

Mail will not be published