Инструкции: Настройка модульного теста и тестового покрытия с QUnit.js и Blanket.js для офиса 365 Приложение SharePoint

Интро

Я изучали модульного тестирования и испытания покрытия для JavaScript, как я работаю над новым приложением SharePoint для SharePoint online в офисе 365 Люкс. Очевидным исследования путей привело меня к QUnit.js и сразу после, Кому Blanket.js.

QUnit позвольте мне создать модульные тесты и сгруппировать их в модули. Модуль-это всего лишь простой способ организовать соответствующие тесты. (Я не уверен, что я использую его, как предполагалось, но это работает для меня пока небольшой набор тестов, которые я пока определили).

Blanket.js интегрируется с Qunit и он покажет мне фактической строки JavaScript, которые были – и что более важно – не были фактически выполняются в ходе выполнения тестов. Это «покрытие» – линии, которые выполнены покрыты теста, в то время как другие являются не.

Создание хорошей тестовых случаев и просмотр покрытия, Мы можем уменьшить риск, что наш код имеет скрытые дефекты. Хорошие времена.

QUnit

Если у вас есть Visual Studio проект создан, Начните с загрузки пакета JavaScript из http://qunitjs.com. Добавьте в решение соответствующего CSS и JavaScript. Шахта выглядит так:

Рисунок 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" />
    <сценарий Тип= text/javascript"" src="QuizUtil.js" данные Обложка></сценарий>
    <сценарий типа =«text/javascript" src =«qunit-1.13.0.js"></сценарий>
    <сценарий типа =«text/javascript" src =«blanket.min.js"></сценарий>

    <сценарий>
        модуль(«getIDFromLookup");
        тест(«QuizUtil getIDFromLookupField", функция () {
            var goodValue = «1;#Пол Galvin";

            равных(getIDFromLookupField(goodValue) + 1, 2), «Идентификатор [" + goodValue + "] + 1 должно быть 2";
            равных(getIDFromLookupField(не определено), не определено, «Undefined входной аргумент должен возвращать неопределенный результат.");
            равных(getIDFromLookupField(""), не определено, «Пустой входной аргумент должен возвращать неопределенное значение.");
            равных(getIDFromLookupField(«gobbledigood3-thq;dkvn ада;skfja sdjfbvubvqrubqer0873407t534piutheqw;VN"), не определено,«Всегда должны возвращать результат кабриолет в целое число");
            равных(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-05Т: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("тест"), «Получить файл cookie, я должен работать.");
            равных(setCookie(«anycookie", «1", -1), Истина, «Установка действительный приготовления должен возвращать 'true'.");
            равных(setCookie(«имя сумасшедший cookie !@#$%"%\^&*(()?/><.,", «1", -1), Истина, «Плохой cookie имя параметра ли должен возвращать 'false'.");
            равных(setCookie(не определено, «1", -1), не определено, «Проходя определено как имя файла cookie.");
            равных(getCookieValue(«не существует"), "", «Сookie не существует теста.");
        });

    </сценарий>
</голова>
<тело>
    <Div ID= «qunit"></Div>
    <Div ID= «qunit светильник"></Div>

</тело>
</HTML>

Есть несколько вещей, здесь происходит:

Ссылка на мой код (QuizUtil.js)
Ссылки на Qunity.js
Определение некоторых модулей (getIDFromLookup, Печенье, и другие)
Размещение <Div> Идентификатор которого является «qunit».

Затем, Я просто подтянуть эту страницу и вы получите нечто вроде этого:

Рисунок 3

Если вы посмотрите в верхней, у вас есть несколько вариантов, два из которых интересны:

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

Что касается самих – несколько замечаний тестов:

Само собой разумеется, что необходимо написать свой код таким образом, что это в первую очередь для тестирования. С помощью инструмента может помочь обеспечить соблюдение дисциплины. К примеру, Я имел функцию под названием "getTodayAsCaml()”. Это не очень для тестирования, так как он принимает без ввода аргументов и для проверки на равенство, Мы должны постоянно обновлять код теста для отражения текущей даты. Я переделать его, добавив параметр ввода данных, а затем передавая на текущую дату, когда я хочу текущая дата в формате CAML.
Qunit рамки документы свои собственные испытания и кажется довольно надежные. Это можно делать простые вещи, как проверки на равенство и также имеет поддержку для вызовов ajax стиль («реальные» или издевались, используя ваш любимый насмешник).
Также переживает процесс заставляет вас думать через крайние случаи – что происходит с «неопределенный» или в функцию передается значение null. Это делает его мертвым простой для тестирования этих сценариев вне. Хорошие вещи.

Покрытие с Blanket.js

Blanket.js дополняет Qunit путем отслеживания фактических строк кода, которые выполняются во время выполнения тестов. Она интегрирует право в Qunit даже если это совершенно отдельные приложения., Он играет красиво – это действительно выглядит, как будто это один бесшовных app.

Это blanket.js в действии:

Рисунок 4

Рисунок 5

(На самом деле вы должны нажать на флажок «Включить освещение» в верхней [рис. 3] для этого.)

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

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

Скачать его из http://blanketjs.org/.
Добавьте его в проект
Обновление тестовой страницы Упряжь (QuizUtil_test.html в моем случае) следующим:
1. Код ссылки
2. Украсьте ваш <сценарий> ссылка, как это:

    <сценарий Тип= text/javascript"" src="QuizUtil.js" данные Обложка></сценарий>

Blanket.js забирает атрибут «данных Обложка» и делает свое волшебство. Крючки в Qunit, обновляет пользовательский интерфейс для добавления параметра «Включить освещение» и вуаля!

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

Использовать Qunit для написания тестовых случаев.

Скачать его
Добавьте его в проект
Написать тестовую страницу Упряжь
Создание тестов
- Переделать некоторые из кода быть проверяемым
- Быть творческим! Думать ума, невозможно сценариев и проверить их все равно.

Используйте blanket.js для обеспечения охвата

Убедитесь, что работает Qunit
Скачать blanket.js и добавить его в ваш проект
Добавить его в тестовую страницу Упряжь:
- Добавьте ссылку на blanket.js
- Добавьте атрибут «данных крышка» для вашего <сценарий> Тег
Qunit тесты выполнять.

Я никогда не делал этого раньше и имел некоторые элементарные вещи, работающие в несколько часов.

Счастливый тестирования!

</конец>

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

Следуй за мной по щебетать на http://www.twitter.com/pagalvin

Пол Галвин SharePoint пространство

Инструкции: Настройка модульного теста и тестового покрытия с QUnit.js и Blanket.js для офиса 365 Приложение SharePoint

Интро

QUnit

Покрытие с Blanket.js

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

Оставь ответ отменить ответ