Инструкции: Настройка модульного теста и тестового покрытия с 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.  Шахта выглядит так:

image

Рисунок 1

Как вы можете видеть, Я был с помощью 1.13.0 в то время я писал этот блог пост. Не забудьте скачать и добавить CSS-файл.

Что из пути, Следующий шаг должен создать своего рода тестирования и ссылаться Qunit биты.  Я тестирование кучу функций в файле сценария под названием «QuizUtil.js», поэтому я создал страницу HTML, под названием «QuizUtil_test.html», как показано:

image Рисунок 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>

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

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

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

image

Рисунок 3

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

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

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

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

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

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

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

image Рисунок 4

image

Рисунок 5

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

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

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

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

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

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

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

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

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

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

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

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

</конец>

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

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

Оставь ответ

Ваш электронный адрес не будет опубликован. Обязательные поля помечены *