в тест фреймворке jasmine в методе it можно использовать как describe так и it
Stepan Suvorov Blog
Release 2.0
Jasmine и юнит тесты
Jasmine на данный момент одна из самым популярных библиотек для организации юнит тестирования JavaScript.
На официальном сайте есть довольно хороший быстрый старт с примерами, но если все же хочется на русском и с комментариями – то добро пожаловать под кат.
Первым делом скачиваем себе библиотеку с офсайта. Далее создаем себе песочницу для экспериментов. Вместе с библиотекой сразу идет пример использования, но возможно сходу разобраться в нем будет не просто. Более простая версия будет выглядеть так:
Сразу модуль для рендера результатов(jasmine-html.js) и подключим его. Итоговый код будет такой:
Песочница есть, теперь можем переходить к экспериментам в tests.js:
* describe может включать в себя другой describe (если нужны подсекции)
далее идет сам тест:
понятное дело, что вместо true тут будет 2 выражения, которые должны быть равны. Какие еще могут быть варианты для сравнения?
Отличие toEqual от toBe в том, что toBe – это строгое ссылочное сравнение (для объектов a = b = <> ), а в случае с toEqual – сравнение по содержимому( a = <>, b = <> ). Во втором случае toBe вернет fail.
Также возможны варианты для нахождение совпадений подстроки:
Либо нахождения свойства в объекте:
Варианты проверки null и undefinded:
Аналогично работают методы: toBeTruthy, toBeFalsy, toContain(проверяет наличие значение в массиве), toBeLessThan, toBeGreaterThan, toBeCloseTo.
Если мы захотим проверить имя класса конструктора( аналог instanceof):
Также есть метод проверки исключений:
В группе тестов мы можем использовать инструкции beforeEach и afterEach, в которых мы указываем что нужно выполнить до/после каждого теста:
Группы и тесты обладают интересной особенностью, если мы поставим перед describe или it символ x, т.е. xdescribe и xit, то они будут проигнорированы. (При этом ошибка о том, что метод не найден, вызвана не будет)
Еще с помощью Jasmine мы можем выставлять наблюдателей(observer) на разные объекты с помощью метода spyOn:
После чего станут доступны следующие проверки:
Для метода spyOn существует ряд надстроек:
По сути тоже самое что и spyOn(foo, ‘setBar’), только тут мы можем создавать наблюдатель на функцию(как в первом случае), а не на метод объекта и делать это динамически(формируя название функции).
В случае, когда мы должны произвести тест через некоторое время после запуска тестируемого кода, на помощь нам приходит метод jasmine.Clock( аналог setTimeOut):
А сейчас разберем самое сложное место во всей библиотеке – асинхронные тесты, которые по моему мнению очень слабо разобраны в примерах на официальном сайте. Создаются они с помощью очередей организованных через методы runs() и waitsFor(). В метод runs() мы передаем наши асинхронные действия, а в waitsFor() прописываем условие, по которому мы узнаем что асинхронное действие завершено – обычно для этого используется глобальная переменная, как флаг. Допустим у нас есть асинхронный метод:
Теперь напишем тест для него:
Метод waitsFor имеет следующий синтаксис:
Итак еще раз: мы помещаем наши асинхронные действия в метод runs() и при выполнении этого действия меняем флаг, а в waitsFor() помещаем функцию, которая будет возвращать этот самый флаг. Причем тут может быть как один флаг, так и гораздо более сложные проверки (например, если у нас идет несколько асинхронных вызовов).
Введение в Jasmine
Программирование на стороне клиента давно стало нормой, а объем JavaScript кода и его сложность постоянно растут. Часто тестирование применяется только на серверной стороне, но при этом не стоит забывать о тестировании клиентского кода. Для тестирования JavaScript как на стороне клиента, так и для Node.js можно с успехом применять Jasmine.
Jasmine это BDD фреймворк (Behavior-Driven Development — Разработка на Основе Поведений) для тестирования JavaScript кода, позаимствовавший многие черты из RSpec.
Для удобства, будет рассматриваться тестирование в браузере, а для лаконичности примеры приводятся с использованием CoffeeScript (примеры на JavaScript).
Установить Jasmine можно скачав пакет Jasmine standalone. Потребуются файлы:
Основными ключевыми словами при работе с Jasmine являются:
Ключевые слова describe и it являются обычными вызовами функций, которым передаются два параметра. Первый — название группы или теста, второй — функция содержащая код. Простой пример для ясности:
Для того чтобы отключить выполнение набора тестов или конкретного теста, необходимо воспользоваться ключевыми словами xdescribe и xit соответственно.
Jasmine имеет стандартный набор ожиданий для проверки результатов:
Для того чтобы избежать повторения при создании/удалении объектов и загрузки фикстур, необходимых для выполнения тестов, используются функции beforeEach/afterEach. Они запускаются перед/после каждого теста в наборе.
Jasmine поддерживает тестирование асинхронных вызовов с помощью функций runs и waitsFor.
Рассмотрение работы со “шпионами” spies (mock object) и работы со временем (mock clock) оставим для следующей статьи. Если у Вас есть вопросы или замечания, буду рад на них ответить.
Тестирование вашего JavaScript с жасмином
Мы все знаем, что должны тестировать наш код, но на самом деле мы этого не делаем. Думаю, будет справедливо сказать, что большинство из нас откладывают это, потому что в девяти случаях из десяти это означает изучение еще одной концепции. В этом руководстве я познакомлю вас с отличной небольшой платформой для простого тестирования кода JavaScript.
Кстати, вы знали, что специалист по Envato Studio может быстро и легко исправить ошибки JavaScript?
Шаг 0: Понимание BDD
TDD в простейшем виде это просто:
Это довольно легко понять, а?
BDD немного более сложен: как я понимаю это прямо сейчас, я не думаю, что вы или я, как один разработчик, действительно можем практиковать это полностью; это больше командная вещь. Вот несколько практик BDD:
Чтобы узнать больше, вы можете прочитать обширную статью в Википедии (из которой были взяты эти пункты).
Все это говорит о том, что, хотя Jasmine объявляет себя платформой BDD, мы будем использовать ее в стиле TDD. Это не значит, что мы используем это неправильно. Как только мы закончим, вы сможете с легкостью протестировать свой JavaScript … и я ожидаю, что вы сделаете это!
Шаг 1: Изучение синтаксиса
Жасмин берет много подсказок от Rspec.
Если вы вообще знакомы с Rspec, де-факто платформой BDD, вы увидите, что Jasmine берет много подсказок от Rspec. Тесты Жасмин в основном состоят из двух частей: describe блоки и блоки. Посмотрим, как это работает.
Мы рассмотрим несколько более приближенных к реальной жизни тестов, но сейчас мы сделаем это просто:
Функции description и it принимают два параметра: текстовую строку и функцию. Большинство тестовых фреймворков стараются читать как можно больше на английском, и вы можете увидеть это с помощью Jasmine. Во-первых, обратите внимание, что строка, переданная для describe и строка, переданная it образуют предложение (своего рода): «Оператор сложения JavaScript добавляет два числа вместе». Затем мы продолжим, чтобы показать как.
Я думаю, что вы готовы перейти на следующий уровень, поэтому давайте настроим простой проект с использованием Jasmine.
Шаг 2: Настройка проекта
Жасмин может быть использован сам по себе; или вы можете интегрировать его с проектом Rails. Мы сделаем первое. В то время как Jasmine может работать вне браузера (например, Node, в других местах), мы можем получить действительно хороший маленький шаблон с загрузкой.
Итак, зайдите на отдельную страницу загрузки и получите последнюю версию. Вы должны получить что-то вроде этого:
Этот файл SpecRunner.html запускает тесты в браузере. Откройте его (и установите флажок «пройдено» в правом верхнем углу), и вы должны увидеть что-то вроде этого:
Это показывает нам, что все тесты для примера проекта проходят. После того, как вы spec/PlayerSpec.js этот урок, я рекомендую вам открыть файл spec/PlayerSpec.js и просмотреть этот код. Но сейчас давайте попробуем этот материал для написания теста.
Удалите ссылки на файлы примеров проектов в SpecRunner.html и добавьте следующие строки:
Теперь мы готовы создать мини-библиотеку, которая будет конвертировать единицы измерения. Начнем с написания тестов для нашей мини-библиотеки.
Шаг 3: Написание тестов
Итак, давайте напишем наши тесты, не так ли?
Теперь о реальных тестах. Я повторю звонки по внутреннему describe для вашего удобства.
Да, я согласен с тем, как Jasmine реализовал свои тесты, но я думаю, что это хороший формат. Итак, в этих двух тестах я сделал преобразования самостоятельно (хорошо, с помощью калькулятора), чтобы увидеть, какими должны быть результаты наших вызовов. Мы используем сопоставление toEqual чтобы проверить, прошли ли наши тесты.
И я собираюсь добавить еще два теста в наш вызов describe верхнего уровня:
Теперь, если вы откроете SpecRunner.html в браузере, вы получите следующее:
Большой! Наши тесты не проходят. Теперь давайте откроем наш файл convert.js и поработаем:
Мы не собираемся обсуждать это, потому что мы изучаем здесь Жасмин. Но вот основные моменты:
Теперь вернитесь к SpecRunner.html и перезагрузите страницу. Теперь вы должны увидеть это (после проверки «Показать пройдено»):
Вот и вы! Наши тесты проходят. Если бы мы разрабатывали настоящий проект здесь, мы бы написали тесты для определенной части функциональности, заставили бы их пройти, написали тесты для другой проверки, сделали их проходными и т. Д. Но так как это был простой пример, мы только что сделали это все одним махом.
И теперь, когда вы увидели этот простой пример использования Jasmine, давайте рассмотрим еще несколько функций, которые он предлагает вам.
Шаг 4: Изучение соответствия
toBeDefined / toBeUndefined
toBeTruthy / toBeFalsy
Если что-то должно быть правдой или ложью, эти сопоставители сделают это.
toBeLessThan / toBeGreaterThan
Для всех, кого ты числишь. Вы знаете, как они работают:
toMatch
Есть какой-нибудь выходной текст, который должен соответствовать регулярному выражению? Матч toMatch готов и готов.
содержать
Этот довольно полезен. Он проверяет, содержит ли массив или строка элемент или подстроку.
Шаг 5: Покрытие до и после
Часто при тестировании кодовой базы вам нужно выполнить несколько строк кода настройки для каждого теста в серии. Было бы больно и многословно копировать это при каждом вызове, поэтому у Jasmine есть небольшая удобная функция, которая позволяет нам назначать код для запуска до или после каждого теста. Давайте посмотрим, как это работает:
В этом надуманном примере вы можете видеть, как перед каждым тестом состояние obj устанавливается в «clean». Если мы этого не сделали, то изменения, внесенные в объект в предыдущем тесте, сохраняются в следующем тесте по умолчанию. Конечно, мы могли бы сделать нечто подобное с функцией AfterEach :
Шаг 6: Написание пользовательских соответствий
Вывод: развлекайся сам!
С Jasmine вы можете сделать гораздо больше: сопоставители функций, шпионы, асинхронные спецификации и многое другое. Я рекомендую вам изучить вики, если вам интересно. Есть также несколько сопутствующих библиотек, которые облегчают тестирование в DOM: Jasmine-jQuery и Jasmine-fixture (зависит от Jasmine-jQuery).
Так что, если вы пока не тестируете свой JavaScript, самое время начать. Как мы уже видели, быстрый и простой синтаксис Jasmine делает тестирование довольно простым. У тебя просто нет причин не делать этого сейчас, не так ли?
Если вы хотите продолжить разработку JavaScript, почему бы не проверить ассортимент элементов JavaScript на Envato Market? Существуют тысячи сценариев, приложений и фрагментов кода, чтобы помочь вам.
Мануал по запуску тестов при помощи Karma и Jasmine
Karma
Karma — это консольный инструмент для запуска тестов, который умеет следить за изменениями исходного кода и отображать процент покрытия кода тестами. Настраивается с помощью конфигурационного файла karma.conf.js, в котором нужно указать пути к файлам, которые будут тестироваться, и пути к файлам, содержащие тесты.
Консольные команды
karma init — создаёт базовый шаблон файла конфигурации. Его можно также скачать с репозитория.
karma start — запуск
Jasmine
Jasmine — фреймворк для написания js-тестов.
Основной синтаксис фреймворка:
describe() — оборачивает тесты в test-suite;
beforeEach() и afterEach() — соответственно запускаются для каждого теста;
it(‘название теста’, function()<>) — сам тест;
iit() и xit() — выделяют тест, чтобы прогнать только его или игнорировать его соответственно.
Пример теста
Установка и настройка компонентов
Скачивать компоненты мы будем с помощью пакетного менеджера npm, который входит в состав Node.js. Он также необходим для работы Karma.
После установки Node.js, переходим в корень проекта, вызываем консоль и поочерёдно выполняем команды. Все скачанные компоненты будут располагаться в каталоге node_modules.
Karma
Jasmine
Чтобы использовать фреймворк Jasmine, подключите к проекту следующие файлы:
jasmine.js — сам фреймворк;
jasmine-html.js — оформление результатов в виде HTML;
jasmine.css — внешний вид результата выполнения тестов.
Также можно использовать следующие команды:
jasmine init — инициализирует Jasmine проект;
jasmine examples — помещает в Jasmine проект примеры с тестами.
Настройка файла конфигурации Karma
Нужно убедиться, что для Karma прописана переменная среды ОС. Создадим файл с именем karma.conf.js. Для этого нужно в консоли выполнить команду
karma init karma.conf.js.
Пример файла karma.conf.js
Параметры karma.config.js:
В скобках () для каждого параметра указано значение по умолчанию:
files([]) — список файлов для загрузки. Массив тех файлов, которые будут подключены в браузер для запуска тестов;
exclude([]) — список исключений для предыдущего пункта;
reporters([‘progress’]) — вариант вывода прогресса;
port(8080) — порт веб-сервера;
runnerPort(9100) — порт клиента;
colors(true) — включение/выключение цветов при выводе лога в консоль;
logLevel(LOG_INFO) — LOG_DISABLE|LOG_ERROR|LOG_WARN|LOG_INFO|LOG_DEBUG;
autoWatch(false) — выполнение тестов при изменении файлов;
browsers([]) — Chrome, ChromeCanary, Firefox, Opera, Safari, PhantomJS;
captureTimeout(5000) — задание таймаута в миллисекундах;
singleRun(false) — для одноразового запуска;
preprocessors(<>) — список обработчиков, которые будут применены к файлам, до загрузки в браузер.
Запуск
В консоли выполним команду karma start.
introduction.js
Standalone Distribution
Suites: describe Your Tests
Specs
It’s Just Functions
Since describe and it blocks are functions, they can contain any executable code necessary to implement the test. JavaScript scoping rules apply, so variables declared in a describe are available to any it block inside the suite.
Expectations
Expectations are built with the function expect which takes a value, called the actual. It is chained with a Matcher function, which takes the expected value.
Matchers
Each matcher implements a boolean comparison between the actual value and the expected value. It is responsible for reporting to Jasmine if the expectation is true or false. Jasmine will then pass or fail the spec.
Any matcher can evaluate to a negative assertion by chaining the call to expect with a not before calling the matcher.
Included Matchers
Grouping Related Specs with describe
The describe function is for grouping related specs. The string parameter is for naming the collection of specs, and will be concatenated with specs to make a spec’s full name. This aids in finding specs in a large suite. If you name them well, your specs read as full sentences in traditional BDD style.
Setup and Teardown
The this keyword
Nesting describe Blocks
Calls to describe can be nested, with specs defined at any level. This allows a suite to be composed as a tree of functions. Before a spec is executed, Jasmine walks down the tree executing each beforeEach function in order. After the spec is executed, Jasmine walks through the afterEach functions similarly.
Disabling Suites
Suites can be disabled with the xdescribe function. These suites and any specs inside them are skipped when run and thus their results will not appear in the results.
Pending Specs
Any spec declared with xit is marked as pending.
Any spec declared without a function body will also be marked pending in results.
And if you call the function pending anywhere in the spec body, no matter the expectations, the spec will be marked pending.
Spies
Jasmine has test double functions called spies. A spy can stub any function and tracks calls to it and all arguments. A spy only exists in the describe or it block in which it is defined, and will be removed after each spec. There are special matchers for interacting with spies. This syntax has changed for Jasmine 2.0. The toHaveBeenCalled matcher will return true if the spy was called. The toHaveBeenCalledWith matcher will return true if the argument list matches any of the recorded calls to the spy.
Spies: and.callThrough
Spies: and.returnValue
Spies: and.callFake
If the function being spied on receives arguments that the fake needs, you can get those as well
Spies: and.throwError
Spies: and.stub
Other tracking properties
Every call to a spy is tracked and exposed on the calls property.
.calls.any() : returns false if the spy has not been called at all, and then true once at least one call happens.
.calls.count() : returns the number of times the spy was called
.calls.argsFor(index) : returns the arguments passed to call number index
.calls.allArgs() : returns the arguments to all calls
.calls.all() : returns the context (the this ) and arguments passed all calls
.calls.mostRecent() : returns the context (the this ) and arguments for the most recent call
.calls.first() : returns the context (the this ) and arguments for the first call
.calls.reset() : clears all tracking for a spy
Spies: createSpy
Spies: createSpyObj
In order to create a mock with multiple spies, use jasmine.createSpyObj and pass an array of strings. It returns an object that has a property for each string that is a spy.
Matching Anything with jasmine.any
jasmine.any takes a constructor or «class» name as an expected value. It returns true if the constructor matches the constructor of the actual value.
Partial Matching with jasmine.objectContaining
jasmine.objectContaining is for those times when an expectation only cares about certain key/value pairs in the actual.
Mocking the JavaScript Timeout Functions
This syntax has changed for Jasmine 2.0. The Jasmine Clock is available for a test suites that need the ability to use setTimeout or setInterval callbacks. It makes the timer callbacks synchronous, executing the registered functions only once the clock is ticked forward in time. This makes timer-related code much easier to test.
It is installed with a call to jasmine.clock().install in a spec or suite that needs to call the timer functions.
Be sure to uninstall the clock after you are done to restore the original timer functions.
Calls to any registered callback are triggered when the clock is ticked forward via the jasmine.clock().tick function, which takes a number of milliseconds.
Asynchronous Support
This syntax has changed for Jasmine 2.0. Jasmine also has support for running specs that require testing asynchronous operations.
This spec will not start until the done function is called in the call to beforeEach above. And this spec will not complete until its done is called.
By default jasmine will wait for 5 seconds for an asynchronous spec to finish before causing a timeout failure. If the timeout expires before done is called, the current spec will be marked as failed and suite execution will continue as if done was called.
If specific specs should fail faster or need more time this can be adjusted by setting jasmine.DEFAULT_TIMEOUT_INTERVAL around them.
Downloads
Support
Thanks
Running documentation inspired by @mjackson and the 2012 Fluent Summit.