Интро
Я изучали модульного тестирования и испытания покрытия для 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("<"), "<", «Побега менее чем оператор ('<')");
равных(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-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 в моем случае) следующим:
- Код ссылки
- Украсьте ваш <сценарий> ссылка, как это:
<сценарий Тип= text/javascript"" src="QuizUtil.js" данные Обложка></сценарий>
Blanket.js забирает атрибут «данных Обложка» и делает свое волшебство. Крючки в Qunit, обновляет пользовательский интерфейс для добавления параметра «Включить освещение» и вуаля!
Резюме (TL; Д-Р)
Использовать Qunit для написания тестовых случаев.
- Скачать его
- Добавьте его в проект
- Написать тестовую страницу Упряжь
- Создание тестов
- Переделать некоторые из кода быть проверяемым
- Быть творческим! Думать ума, невозможно сценариев и проверить их все равно.
Используйте blanket.js для обеспечения охвата
- Убедитесь, что работает Qunit
- Скачать blanket.js и добавить его в ваш проект
- Добавить его в тестовую страницу Упряжь:
- Добавьте ссылку на blanket.js
- Добавьте атрибут «данных крышка» для вашего <сценарий> Тег
- Qunit тесты выполнять.
Я никогда не делал этого раньше и имел некоторые элементарные вещи, работающие в несколько часов.
Счастливый тестирования!
</конец>
Подписаться на мой блог.
Следуй за мной по щебетать на http://www.twitter.com/pagalvin
