Qunit

Вступ

Я було вивчення Модульне тестування та тестування покриття для JavaScript, як я працюю над новим застосунку SharePoint для SharePoint онлайн, в офісі 365 Люкс. Контури очевидні дослідження привели мене Qunit.js і після цього права, Щоб Blanket.js.

QUnit дозвольте мені встановити юніт-тестів і згрупувати їх на модулі. Модуль — просто простий спосіб організування схожі тести. (Я не впевнений, я використовую його за призначенням, але вона працює для мене до цих пір з невеликий набір тестів, я до сих пір визначено).

Blanket.js інтегрується з Qunit і покаже мене фактичного ліній JavaScript, які були- і більш важливо – були не фактично виконані в ході працює тести. Це «покриття»-ліній, які виконані покриваються тест, а інші ні.

Від створення хороші тести до перегляду покриття, Ми можемо зменшити ризик, що наш код має приховані дефекти. Гарні часи.

Припускаючи, що у вас 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("<"), "&lt;", "Втечі на менш ніж оператор ('<')");
            Рівне(htmlEscape("<DIV клас =  "someclass">Частина тексту</DIV>"), "&lt;DIV клас =&quot;SomeClass&quot;&gt;Частина тексту&lt;/DIV&gt;", "Більш складні тестовий рядок.");
        });

        модуль("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 в моєму випадку) наступним чином:
1. Код посилання
2. Прикрасити ваш <сценарій> посилання, як це:

    <сценарій тип= текст/javascript"" НДЦ="QuizUtil.js" дані палітурці></сценарій>

Blanket.js підбирає атрибут "даних палітурці" і робить свою магію. Це гачки в Qunit, оновлює користувальницький інтерфейс, щоб додати параметр "Увімкнути охоплення" і вуаля!

Резюме (TL; Д-Р)

Використовувати Qunit, щоб написати ваш тести.

Завантажити його
Додати його до вашого проекту
Написати упряж тестової сторінки
Створення тестів
- Деякі коду бути перевіряються рефакторінг
- Будьте винахідливі! Думаю, божевільні, неможливо сценарії та перевірити їх все одно.

Використовувати blanket.js, щоб забезпечити висвітлення

Переконайтеся, що працює Qunit
Завантажити blanket.js і додати його до вашого проекту
Додати його в вашу пробну сторінку амуніція:
- Додати посилання на blanket.js
- Додати атрибут "даних палітурці" до вашого <сценарій> Тег
Запустити Qunit випробувань.

Я ніколи не робив це раніше і деякі елементарні речі працюють в кілька годин.

Щасливі тестування!

</кінець>

Підписатися на мій блог.

Йди за мною на Twitter в http://www.twitter.com/pagalvin

Поль Гелвін SharePoint простір

Архів тегів: Qunit

Як: Налаштувати Модульне тестування та тестування покриття з QUnit.js і Blanket.js для офісу 365 Застосунку SharePoint

Вступ

Qunit

Покриття з Blanket.js

Резюме (TL; Д-Р)