- Часто використовувані скорочення
- Модульне тестування JavaScript
- Лістинг 1. Вихідний код (example1 / script.js)
- Лістинг 2. Сценарій тестування (example1 / test.js)
- Лістинг 3. Сторінка HTML (example1 / runner.html)
- Приступаємо до роботи з QUnit
- Лістинг 4. Виконуюча HTML-сторінка (qunit / runner.html)
- Лістинг 5. Перетворення (qunit / js / script.js)
- Лістинг 6. Сценарії тестування (qunit / js / test.js)
- Лістинг 7. Включення script.js і test.js в виконуючу HTML-сторінку
- Малюнок 1. Результат QUnit
- Лістинг 8. Інші тестові затвердження
- Лістинг 9. Помилка останнього тестового затвердження
- Малюнок 2. Результат QUnit - невдалий останній тест
- Лістинг 10. setup () (qunit / js / test-setup.js)
- YUI Test: незалежний модуль для модульного тестування
- Лістинг 11. Завантаження YUI-модулів test і console
- Лістинг 12. Набір тестів і сценарій тестування
- Лістинг 13. Сценарії тестування з методами тестування
- Лістинг 14. Запуск тестів YUI
- Лістинг 15. Консоль Yahoo!
- Лістинг 16. Оновлення виконуючої HTML-сторінки для підтримки консолі Yahoo!
- Малюнок 3. Результат YUI Test
- Лістинг 17. Конфігураційний файл (jsTestDriver.conf)
- Лістинг 18. Тести JSTD
- Малюнок 4. Результати тестів JSTD
- висновок
- Ресурси для скачування
Застосування QUnit, YUI Test і JSTestDriver
Суть модульного тестування полягає в перевірці того, чи працює код блоку або модуля так, як задумано або очікується. Деякі розробники, які скоріше віддадуть перевагу створювати нові модулі, вважають написання сценаріїв тестування марною тратою часу. Але при роботі з великими додатками модульне тестування дозволяє реально економити час, допомагаючи відстежувати проблеми і без ризику оновлювати код.
Часто використовувані скорочення
- DOM: об'єктна модель документів
- HTML: мова гіпертекстової розмітки
- JSTD: JSTestDriver
- YUI: Інтерфейс користувача Yahoo!
Раніше модульне тестування застосовувалося тільки в мовах, що використовуються на стороні сервера. Але зростаюча складність підсистем доступу привела до зростання потреби в написанні сценаріїв для тестування коду JavaScript. При цьому, якщо ви нечасто займаєтеся написанням сценаріїв для тестування на клієнтській стороні, крива навчання може виявитися досить крутий. Тестування інтерфейсу користувача може зажадати перегляду деяких ваших переконань. (Деякі розробники до сих пір не можуть повірити, що JavaScript є серйозним мовою програмування.)
У цій статті ви дізнаєтеся про застосування QUnit, YUI Test і JSTestDriver для модульного тестування JavaScript.
завантажте вихідний код для цієї статті.
Модульне тестування JavaScript
Щоб проілюструвати процес тестування JavaScript, в цьому розділі аналізуються сценарії тестування базових функцій JavaScript. У лістингу 1 показана функція, яку ми тестуватиме: вона додає число 3 до переданої змінної.
Лістинг 1. Вихідний код (example1 / script.js)
function addThreeToNumber (el) {return el + 3; }
Лістинг 2 містить відповідний сценарій тестування в самовиконувана функції.
Лістинг 2. Сценарій тестування (example1 / test.js)
(Function testAddThreeToNumber () {var a = 5, valueExpected = 8; if (addThreeToNumber (a) === valueExpected) {console.log ( "Годен!");} Else {console.log ( "Не годен!") ;}} ());
Після передачі тестируемой функції числа 5 тест перевіряє, чи дорівнює значення, що повертається 8. Якщо тест пройшов успішно, на консоль сучасного браузера виводиться повідомлення Годен !; в іншому випадку з'являється повідомлення придатний! Для запуску цього тесту потрібно:
- імпортувати два файли сценарію в сторінку HTML, яка буде грати роль середовища тестування, як показано в лістингу 3;
- відкрити цю сторінку в браузері.
Лістинг 3. Сторінка HTML (example1 / runner.html)
<! DOCTYPE html> <html> <head> <meta http-equiv = "Content-type" content = "text / html; charset = utf-8"> <title> Example 1 </ title> <script type = " text / javascript "src =" js / script.js "> </ script> <script type =" text / javascript "src =" js / test.js "> </ script> </ head> <body> </ body> </ html>
Замість того щоб використовувати консоль браузера, можна роздрукувати результати всередині сторінки або всередині спливаючого вікна, створеного методом alert ().
Для перевірки відповідності певним умовам використовуються тестові затвердження, що становлять основу сценаріїв тестування. Наприклад, в лістингу 2 в ролі тестового затвердження виступає вираз addThreeToNumber (a) === valueExpected.
Якщо у вас є кілька сценаріїв тестування з кількома тестовими твердженнями, то зручніше використовувати інтегровану середу. У наступних розділах будуть описані деякі найбільш популярні інтегровані середовища для тестування модулів JavaScript: QUnit , YUI Test і JSTestDriver .
Приступаємо до роботи з QUnit
QUnit, інтегроване середовище для модульного тестування, подібна JUnit (програмування на Java), використовується групою jQuery для тестування бібліотеки jQuery. Для використання QUnit потрібно:
- завантажити файли qunit.css і qunit.js (див. ресурси );
- створити сторінку HTML з відповідними позначками та імпортувати в неї файли CSS і JavaScript, які ви тільки що завантажили.
У лістингу 4 показана стандартна HTML-сторінка для запуску QUnit.
Лістинг 4. Виконуюча HTML-сторінка (qunit / runner.html)
<! DOCTYPE html> <html> <head> <meta charset = "UTF-8" /> <title> QUnit Test Suite </ title> <link rel = "stylesheet" href = "css / qunit.css" type = "text / css" media = "screen"> <script type = "text / javascript" src = "js / lib / qunit.js"> </ script> </ head> <body> <h1 id = "qunit- header "> qUnit Test Suite </ h1> <h2 id =" qunit-banner "> </ h2> <div id =" qunit-testrunner-toolbar "> </ div> <h2 id =" qunit-userAgent "> </ h2> <ol id = "qunit-tests"> </ ol> <div id = "qunit-fixture"> test markup </ div> </ body> </ html>
Припустимо, що у нас є дві функції, які виконують перетворення температури з градусів за Цельсієм у градуси за Фаренгейтом і назад. Сценарій таких перетворень показаний в лістингу 5.
Лістинг 5. Перетворення (qunit / js / script.js)
function convertFromCelsiusToFahrenheit (c) {var f = c * (9/5) + 32; return f; } Function convertFromFahrenheitToCelsius (f) {var c = (f - 32) * (5/9); return c; }
У лістингу 6 показані відповідні сценарії тестування.
Лістинг 6. Сценарії тестування (qunit / js / test.js)
module ( "Перетворення температури") test ( "перетворення в F", function () {var actual1 = convertFromCelsiusToFahrenheit (20); equal (actual1, 68,? Значення невірно?); var actual2 = convertFromCelsiusToFahrenheit (30); equal (actual2 , 86,? значення невірно?);}) test ( "перетворення в C", function () {var actual1 = convertFromFahrenheitToCelsius (68); equal (actual1, 20,? значення невірно?); var actual2 = convertFromFahrenheitToCelsius (86) ; equal (actual2, 30,? значення невірно?);})
Сценарії тестування в QUnit визначаються методом test (). Логіка міститься в другому аргументі, переданому в цю функцію. У лістингу 6 використані два сценарії тестування, названі перетворення в F і перетворення в C. Кожен тест містить два тестових затвердження, які використовують метод equal (). Функція equal () дозволяє порівняти очікуване значення з фактичним значенням, що повертається тестируемой функцією. Третій аргумент методу equal () являє собою повідомлення, яке виводиться в разі невдачі.
Тести можна оформити у вигляді модулів за допомогою функції module (). У лістингу 6 обидва тести знаходяться в модулі Перетворення температури.
Для запуску тестів:
- включите вихідний код і тестовий файл в виконуючу HTML-сторінку, як показано в лістингу 7;
- відкрийте цю HTML-сторінку в браузері.
Лістинг 7. Включення script.js і test.js в виконуючу HTML-сторінку
... <script type = "text / javascript" src = "js / script.js"> </ script> <script type = "text / javascript" src = "js / test.js"> </ script>. ..
Малюнок 1 показує, як QUnit відображає результати в браузері Firefox.
Малюнок 1. Результат QUnit
Тестові затвердження в лістингу 6 використовують метод equal (), але це не єдина можливість, пропонована QUnit. Інші доступні в QUnit тестові затвердження включають ok () і strictEqual (). Застосування цих методів показано в лістингу 8.
Лістинг 8. Інші тестові затвердження
module ( "Інші тестові затвердження"); test ( "тестові затвердження", function () {ok (true); ok (3); strictEqual ( "c", "c"); equal (3, "3");});
Функція ok () перевіряє істинність першого параметра; strictEqual () перевіряє, що перший параметр строго дорівнює другому. За кадром strictEqual () використовує оператор ===, а equal () використовує оператор ==.
Крім того, QUnit надає корисну інформацію в разі невдалого виконання тесту. Замініть код лістингу 8 кодом лістингу 9, щоб останнє тестове твердження спрацювало невдало.
Лістинг 9. Помилка останнього тестового затвердження
module ( "Інша тестове твердження"); test ( "тестові затвердження", function () {ok (true); ok (3); strictEqual ( "c", "c"); strictEqual (3, "3");});
На малюнку 2 показано, який результат поверне QUnit у відповідь на код в лістингу 9.
Малюнок 2. Результат QUnit - невдалий останній тест
Результат містить докладний звіт, що дозволяє зрозуміти, в чому саме полягає відмінність очікуваного значення від реального в останньому тестовому затвердження.
Інша важлива функція QUnit дозволяє виконувати команди до або після виконання всіх тестів всередині модуля. Функція module () приймає в якості другого параметра повернені значення функцій setup () і teardown (). Оновлення лістинг 6 додавши функцію setup (), як показано в лістингу 10.
Лістинг 10. setup () (qunit / js / test-setup.js)
module ( "Перетворення температури", {setup: function () {this.celsius1 = 20; this.celsius2 = 30; this.fahrenheit1 = 68; this.fahrenheit2 = 86;}}); test ( "перетворення в F", function () {var actual1 = convertFromCelsiusToFahrenheit (this.celsius1); equal (actual1, this.fahrenheit1); var actual2 = convertFromCelsiusToFahrenheit (this.celsius2); equal (actual2, this.fahrenheit2); }); test ( "перетворення в C", function () {var actual1 = convertFromFahrenheitToCelsius (this.fahrenheit1); equal (actual1, this.celsius1); var actual2 = convertFromFahrenheitToCelsius (this.fahrenheit2); equal (actual2, this.celsius2); });
У цьому прикладі значення, використовувані в тестових твердженнях, перенесені в розділ setup, щоб уникнути використання цих значень в логіці тестів.
Крім того, QUnit підтримує асинхронне тестування за допомогою функції asyncTest (), яка дуже корисна, якщо ви маєте справу з асинхронним JavaScript і XML (Ajax). У цьому контексті функція expect () дозволяє перевірити число тестових тверджень в тесті.
YUI Test: незалежний модуль для модульного тестування
YUI Test є компонентом бібліотеки YUI (Yahoo!) і являє собою інтегроване середовище для всебічного і повного модульного тестування. Щоб почати роботу з YUI Test, потрібно:
- Імпортувати зерно YUI в виконуючу HTML-сторінку: <script src = "// yui.yahooapis.com/3.4.1/build/yui/yui-min.js"> </ script>
Як видно з коду, цей приклад використовує YUI Test версії 3. - Створити в файлі тестового сценарію екземпляр функції YUI і завантажити необхідні модулі test і console, як показано в лістингу 11.
Лістинг 11. Завантаження YUI-модулів test і console
YUI (). Use ( "test", "console", function (Y) {// Сюди вставляються сценарії тестування});
Модуль test необхідний для тестування, тоді як модуль console не обов'язковий, але в нашому прикладі він використовується для роздруківки результатів. Сценарії тестування розташовуються усередині зворотного виклику, причому в якості аргументу використовується глобальний примірник Y.
YUI Test використовує конструктор Y.Test.Case () для створення екземпляра нового сценарію тестування і конструктор Y.Test.Suite () для створення екземпляра набору тестів. Набір тестів, подібно JUnit, містить кілька сценаріїв тестування. Додавати тести в набір можна за допомогою методу add ().
Давайте ще раз протестуємо вихідний код в лістингу 5 за допомогою YUI Test. У лістингу 12 показано, як створити набір тестів і сценарій тестування.
Лістинг 12. Набір тестів і сценарій тестування
YUI (). Use ( "test", "console", function (Y) {var suite = new Y.Test.Suite ( "Набір для перетворення температури"); // додати сценарій тестування suite.add (new Y.Test .Case ({name: "Перетворення температури"));});
Код в лістингу 12 створює набір з ім'ям Набір для перетворення температури і сценарій тестування з ім'ям Перетворення температури. Тепер ви можете написати методи тестування всередині об'єктного литерала (object literal), переданого в якості аргументу конструктору Y.Test.Case, як показано в лістингу 13.
Лістинг 13. Сценарії тестування з методами тестування
suite.add (new Y.Test.Case ({name: "Перетворення температури", setUp: function () {this.celsius1 = 20; this.celsius2 = 30; this.fahrenheit1 = 68; this.fahrenheit2 = 86;} , testConversionCtoF: function () {Y.Assert.areEqual (this.fahrenheit1, convertFromCelsiusToFahrenheit (this.celsius1)); Y.Assert.areEqual (this.fahrenheit2, convertFromCelsiusToFahrenheit (this.celsius2));}, testConversionFtoC: function () {Y.Assert.areEqual (this.celsius1, convertFromFahrenheitToCelsius (this.fahrenheit1)); Y.Assert.areEqual (this.celsius2, convertFromFahrenheitToCelsius (this.fahrenheit2));}}));
Ймовірно, ви помітили, що в лістингу 13:
Для запуску тесту в YUI використовуйте об'єкт Y.Test.Runner. Додайте в цей об'єкт набори тестів або сценарії тестування і потім викличте метод run () для запуску тестів. У лістингу 14 показано, як запустити тести, створені в лістингу 13 .
Лістинг 14. Запуск тестів YUI
Y.Test.Runner.add (suite); Y.Test.Runner.run ();
За замовчуванням результати роздруковуються в консолі браузера (якщо ваш браузер підтримує консоль), але краще роздруковувати результати за допомогою консольного компонента Yahoo !. Щоб скористатися консольним компонентом Yahoo !, вам потрібно взяти конструктор Y.Console і прив'язати консоль до елементу DOM виконуючої HTML-сторінки, як показано в лістингу 15.
Лістинг 15. Консоль Yahoo!
var console = new Y.Console ({verbose: true, newestOnTop: false, width: "600px"}); console.render ( '# testLogger');
У лістингу 15 показано, як налаштувати консоль з декількома параметрами. Консоль виконується всередині елемента DOM, причому id дорівнює testLogger.
Виконуючу HTML-сторінку необхідно оновити. Додайте використовуваний консоллю елемент DOM, як показано в лістингу 16.
Лістинг 16. Оновлення виконуючої HTML-сторінки для підтримки консолі Yahoo!
<Body class = "yui3-skin-sam"> <div id = "testLogger"> </ div> </ body>
У цьому прикладі визначається клас для <body> з ім'ям yui3-skin-sam. Цей клас відповідає за визначення оболонки консолі.
На малюнку 3 показана консоль після запуску тестів.
Малюнок 3. Результат YUI Test
Просте тестування за допомогою JSTestDriver
Потужний інструмент JSTestDriver (JSTD) дозволяє запускати JavaScript з командного рядка в багатьох браузерах. У комплект поставки JSTD входить файл JAR, що дозволяє запустити сервер, захопити один або кілька браузерів і запустити тести в цих браузерах. При цьому вам не знадобиться виконуюча HTML-сторінка, як в двох інших описаних вище системах, але потрібно конфігураційний файл. Такий конфігураційний файл показаний в лістингу 17.
Лістинг 17. Конфігураційний файл (jsTestDriver.conf)
server: http: // localhost: 4224 load: - js / src / *. js test: - js / test / *. js
Цей конфігураційний файл написаний на мові YAML, який дуже зручний для створення конфігураційних файлів. Він містить інформацію про запускається сервері і про місцезнаходження вихідного коду і тестових файлів.
Для виконання тестів за допомогою JSTD:
- Запустіть тестовий сервер. З командного рядка перейдіть в папку, в якій збережено файл jsTestDriver.jar, і подайте наступну команду: java -jar JsTestDriver-1.3.3d.jar -port 4224
Порт, зазначений в лістингу 17 , Повинен збігатися з портом, зазначеним в файлі конфігурації. За замовчуванням JSTD шукає файл jsTestDriver.conf в тій же директорії, де знаходиться файл із розширенням JAR.
- 2. Зареєструйте на сервері один або кілька браузерів, скопіювавши і вставивши в тестований браузер адресу http: // localhost: 4224 / capture.
Перевірте той же вихідний код, який ви використовували в попередніх прикладах ( лістинг 5 ), Але на це раз використовуйте синтаксис JSTD. У лістингу 18 показано, як перетворити сценарії тестування з лістингу 10 для QUnit і лістингу 14 для YUI Test ..
Лістинг 18. Тести JSTD
TestCase ( "Перетворення температури", {setUp: function () {this.celsius1 = 20; this.celsius2 = 30; this.fahrenheit1 = 68; this.fahrenheit2 = 86;}, testConversionCtoF: function () {assertSame (this. fahrenheit1, convertFromCelsiusToFahrenheit (this.celsius1)); assertSame (this.fahrenheit2, convertFromCelsiusToFahrenheit (this.celsius2));}, testConversionFtoC: function () {assertSame (this.celsius1, convertFromFahrenheitToCelsius (this.fahrenheit1)); assertSame (this. celsius2, convertFromFahrenheitToCelsius (this.fahrenheit2));}});
Код в лістингу 18 майже не відрізняється від версії YUI. Для визначення сценарію тестування JSTD використовує функцію TestCase (). Методи тестування можна визначити за допомогою внутрістрочного оголошення, як в лістингу 18, або ж розширити прототип примірника TestCase. Методи SetUp () і tearDown () доступні для кожного сценарію тестування.
Для запуску тестів просто подайте наступну команду:
java -jar JsTestDriver-1.3.3d.jar --tests all
На малюнку 4 показаний текст, який виводиться на термінал.
Малюнок 4. Результати тестів JSTD
Тести успішно виконуються у всіх захоплених раніше браузерах (Chrome 15, Safari 5, і Firefox 7).
Крім того, JSTD відмінно вбудовується в вашу улюблену інтегровану систему і стає її частиною. Він підтримує інтеграцію в такі інтегровані середовища розробки (IDE), як Eclipse (модуль) або TextMate (пакет).
висновок
З урахуванням зростаючого уваги до клієнтської стороні веб-додатків тестування модулів JavaScript набуває все більшої важливості. Існує кілька систем, які можуть допомогти у вирішенні цього завдання; в цій статті розглядаються три найбільш популярні системи: QUnit, YUI Test і JSTestDriver.
- Починати роботу краще з QUnit, який дуже простий в застосуванні.
- YUI Test пропонує повний набір інструментів для тих, хто знайомий з бібліотекою YUI.
- JSTestDriver чудово підходить для запуску тестів в декількох браузерах.
Ресурси для скачування
Схожі теми
- Оригінал статті: Tools to unit test your JavaScript .
- Документація до QUnit : Дізнайтеся про те, як приступити до роботи, а також про API, надбудови, підтримки і Jquery.
- Як перевірити код JavaScript за допомогою QUnit : Щоб дізнатися більше про QUnit і про те, чому потрібно ретельно перевіряти свій код, прочитайте цей навчальний посібник.
- Автоматизація тестування JavaScript за допомогою QUnit : Дізнайтеся більше про метод тестування QUnit.
- YUI Test 3 : Прочитайте про систему YUI Test для заснованих на браузерах рішень JavaScript. Дізнайтеся, що нового в YUI Test 3.1 .
- Вікі-проект JSTestDriver : Отримаєте останню інформацію про віддалену консолі javascript.
- jQuery : Дізнайтеся про інтерфейс користувача, мобільних додатках, надбудови, порталах соціальних мереж, трасувальникові помилок, матеріалах для завантаження, документації, обговореннях та про багато іншого.
- Розділ веб-розробки на developerWorks : Тут ви знайдете ресурси, які допоможуть вам поліпшити свої навички веб-розробки. відвідайте Технічну бібліотеку для веб-розробників , Де ви знайдете широкий спектр технічних статей і порад, навчальних матеріалів, стандартів і червоних книг компанії IBM.
- проект JSTestDriver : Отримаєте необхідний файл JsTestDriver-1.3.3d.jar.
- Пакет JSTD для TextMate : Завантажте з Github.
- QUnit : Завантажте QUnit з Github.
Підпишіть мене на повідомлення до коментарів
Actual1, 68,?Значення невірно?
Actual2 , 86,?
Значення невірно?
Actual1, 20,?
Значення невірно?
Actual2, 30,?
Значення невірно?
