Вступ
Я було вивчення Модульне тестування та тестування покриття для JavaScript, як я працюю над новим застосунку SharePoint для SharePoint онлайн, в офісі 365 Люкс. Контури очевидні дослідження привели мене Qunit.js і після цього права, Щоб Blanket.js.
QUnit дозвольте мені встановити юніт-тестів і згрупувати їх на модулі. Модуль — просто простий спосіб організування схожі тести. (Я не впевнений, я використовую його за призначенням, але вона працює для мене до цих пір з невеликий набір тестів, я до сих пір визначено).
Blanket.js інтегрується з Qunit і покаже мене фактичного ліній JavaScript, які були- і більш важливо – були не фактично виконані в ході працює тести. Це «покриття»-ліній, які виконані покриваються тест, а інші ні.
Від створення хороші тести до перегляду покриття, Ми можемо зменшити ризик, що наш код має приховані дефекти. Гарні часи.
Qunit
Припускаючи, що у вас Visual Studio проекту встановити, Почніть з завантаження JavaScript пакета від http://qunitjs.com. Додати JavaScript і CSS відповідного на ваше рішення. Шахта виглядає наступним чином:
Фігура 1
Як ви можете бачити, Я використовую 1.13.0 у той час я написав це повідомлення в блозі. Не забудьте завантажити й додати CSS-файл.
Що з на шляху, наступним кроком буде створити свого роду випробування упряжі і посилатися на біт Qunit. Я тестування купу функції в сценарій файл з ім'ям "QuizUtil.js", так що я створив HTML-сторінку під назвою "QuizUtil_test.html", як показано:
Фігура 2
Ось код:
<!DOCTYPE HTML> <HTML xmlns= "http://www.w3.org/ 1999/xhtml"> <Голова> <Назва>QuizUtil тест з Qunit</Назва> <посилання REL= "таблиця стилів" href="../CSS/qunit-1.13.0.CSS" /> <сценарій тип= текст/javascript"" НДЦ="QuizUtil.js" дані палітурці></сценарій> <скрипт типу ="текст/javascript" src ="qunit-1.13.0.js"></сценарій> <скрипт типу ="текст/javascript" src ="blanket.min.js"></сценарій> <сценарій> модуль("getIDFromLookup"); тест("QuizUtil getIDFromLookupField", функція () { VAR goodValue = "1;#Paul Galvin"; Рівне(getIDFromLookupField(goodValue) + 1, 2), "Ідентифікатор [" + goodValue + "] + 1 повинно бути 2"; Рівне(getIDFromLookupField(не визначено), не визначено, "Невизначений вхідного аргументу слід повернути undefined результат."); Рівне(getIDFromLookupField(""), не визначено, "Порожні вхідного аргументу слід повернути невизначене значення."); Рівне(getIDFromLookupField("gobbledigood3-thq;dkvn Ада;skfja sdjfbvubvqrubqer0873407t534piutheqw;в. н."), не визначено,"Завжди прем'єр результат кабріолет на ціле число"); Рівне(getIDFromLookupField("2;#деякі інші особи"), "2", "Перевірка [2;#деякі інші особи]."); Рівне(getIDFromLookupField("9834524;#довгого вартість"), "9834524", "Велике значення тест."); notEqual(getIDFromLookupField("5;#хто-небудь", 6), 6, "Тестування на notEqual (5 Це не дорівнює 6 для цього зразка: [5;#хто-небудь]"); }); модуль("htmlEscape"); тест("QuizUtil htmlEscape()", функція () { Рівне(htmlEscape("<"), "<", "Втечі на менш ніж оператор ('<')"); Рівне(htmlEscape("<DIV клас = "someclass">Частина тексту</DIV>"), "<DIV клас ="SomeClass">Частина тексту</DIV>", "Більш складні тестовий рядок."); }); модуль("getDateAsCaml"); тест("QuizUtil getDateAsCaml()", функція () { Рівне(getDateAsCaml(нові Дата("12/31/2013")), "2013-12-31T:00:00:00", "Тестування жорстких закодованих дата: [12/31/2013]"); Рівне(getDateAsCaml(нові Дата("01/05/2014")), "2014-01-05T:00:00:00", "Тестування жорстких закодованих дата: [01/05/2014]"); Рівне(getDateAsCaml(нові Дата("01/31/2014")), "2014-01-31T:00:00:00", "Тестування жорстких закодованих дата: [01/31/2014]"); Рівне(getTodayAsCaml(), getDateAsCaml(нові Дата()), "getTodayAsCaml() має дорівнювати getDateAsCaml(Нова дата())"); Рівне(getDateAsCaml("дурниці значення"), не визначено, "Спробувати отримати дату дурниця значення."); Рівне(getDateAsCaml(не визначено), не визначено, "Спробуйте отримати дату на [не визначено] Дата."); }); модуль("getParameterByName"); тест("QuizUtil getParameterByName (від рядку запиту)", функція () { Рівне(getParameterByName(не визначено), не визначено, "Спробуйте отримати Невизначена параметр слід повернути невизначеною."); Рівне(getParameterByName("не існує"), не визначено, "Спробувати отримати значення параметра, коли ми знаємо, що не існує параметра."); }); модуль(«Печиво"); тест("QuizUtil різні функції cookie.", функція () { Рівне(setCookie("тест", "1", -1), getCookieValue("тест"), «Get я встановив cookie повинен працювати."); Рівне(setCookie("anycookie", "1", -1), Істина, "Налаштування дійсні приготування слід повернути значення" true"."); Рівне(setCookie("crazy cookie ім'я !@#$%"%\^&*(()?/><.,", "1", -1), Істина, "Установка поганий cookie ім'я слід повернути"false"."); Рівне(setCookie(не визначено, "1", -1), не визначено, "Проходження невизначене, як ім'я файлу cookie."); Рівне(getCookieValue("не існує"), "", "Cookie не існує тесту."); }); </сценарій> </Голова> <тіло> <DIV ID= "qunit"></DIV> <DIV ID= "qunit арматур"></DIV> </тіло> </HTML>
Є кілька речей, що відбувається тут:
- Посилання на мій код (QuizUtil.js)
- Посилання на Qunity.js
- Визначення деяких модулів (getIDFromLookup, Печиво, та інші)
- Розміщення на <DIV> ID рівним "qunit".
Потім, Я просто підтягти цю сторінку, і ви отримаєте щось на зразок цього:
Фігура 3
Якщо ви подивіться через верхню, є кілька способів, дві з яких є цікавим:
- Приховати пройшли випробування: Досить очевидно. Може допомогти очі просто побачити проблемні області і не багато перешкод.
- Модуль: (падіння вниз): Це буде фільтрувати тести аж до тільки ті груп випробувань, що ви хочете.
Що стосується тести, самі – кілька коментарів:
- Само собою зрозуміло, що вам потрібно написати код, така, що це в першу чергу перевіряються. За допомогою засобу можуть допомогти забезпечити дотримання цієї дисципліни. Наприклад, Я мав функції, яка називається "getTodayAsCaml()”. Це не дуже перевіряються, оскільки необхідне немає вхідного аргументу і протестувати його за рівність, Ми повинні постійно оновлювати тестовим кодом з урахуванням поточної дати. Я реструктурувати, шляхом додавання даних вхідний параметр потім проходить поточну дату, коли я хочу поточну дату у форматі CAML.
- Qunit рамках документи свого випробування, і здається досить надійною. Це можна зробити прості речі, як тестування за рівність і також має підтримку стилю ajax дзвінки ("реального" або mocked, використовуючи ваш улюблений насмішник).
- Також проходять через процес змушує вас думати, через край випадках – що відбувається з "невизначені" або null передається в функції. Це робить його мертва проста, щоб перевірити ці сценарії на. Хороший матеріал.
Покриття з Blanket.js
Blanket.js доповнює Qunit шляхом відстеження фактичних рядків коду, що виконати в ході проведення тестів. Вона інтегрує право в Qunit таким чином, навіть якщо це абсолютно окремий додаток, він грає красиво-дійсно схоже це один додаток безшовні.
Це blanket.js в дії:
Фігура 4
Фігура 5
(Ви насправді мають натискати на прапорець "Увімкнути охоплення" у верхній [див. малюнок 3] Щоб увімкнути цю функцію.)
Виділені лінії на малюнку 5 не були виконані, будь-який з моїх тестах, тому необхідно розробити тест, що змушує їх виконання, якщо я хочу, щоб повне покриття.
Отримати blanket.js працює, виконавши такі дії.:
- Завантажити його з http://blanketjs.org/.
- Додати його до вашого проекту
- Оновити вашу пробну сторінку амуніція (QuizUtil_test.html в моєму випадку) наступним чином:
- Код посилання
- Прикрасити ваш <сценарій> посилання, як це:
<сценарій тип= текст/javascript"" НДЦ="QuizUtil.js" дані палітурці></сценарій>
Blanket.js підбирає атрибут "даних палітурці" і робить свою магію. Це гачки в Qunit, оновлює користувальницький інтерфейс, щоб додати параметр "Увімкнути охоплення" і вуаля!
Резюме (TL; Д-Р)
Використовувати Qunit, щоб написати ваш тести.
- Завантажити його
- Додати його до вашого проекту
- Написати упряж тестової сторінки
- Створення тестів
- Деякі коду бути перевіряються рефакторінг
- Будьте винахідливі! Думаю, божевільні, неможливо сценарії та перевірити їх все одно.
Використовувати blanket.js, щоб забезпечити висвітлення
- Переконайтеся, що працює Qunit
- Завантажити blanket.js і додати його до вашого проекту
- Додати його в вашу пробну сторінку амуніція:
- Додати посилання на blanket.js
- Додати атрибут "даних палітурці" до вашого <сценарій> Тег
- Запустити Qunit випробувань.
Я ніколи не робив це раніше і деякі елементарні речі працюють в кілька годин.
Щасливі тестування!
</кінець>
Йди за мною на Twitter в http://www.twitter.com/pagalvin