Юнит-тесты на Jasmine

Сегодня поговорим о написании юнит тестов для  javascript на фреймворке Jasmine.

Так как я запускаю тесты через  Karma, то мне для работы с Jasmine понадобилось просто установить плагин karma-jasmine.  Но случаи могут быть разные,  подробно про установку расписано в репозитории Jasmine на Github.

Итак, в юнит-тестах мы проверяем  — соответствует ли поведение кода тому, которое мы ожидаем.

Пример теста

Структура  кода довольно простая:

    describe("Проверка функции Sum(a,b)", function() {

        it("Sum(2,5) должно вернуть 7", function() {

            expect(Sum(2,5)).toBe(7);

        });

    });

Мы видим описание блока тестов, условие выполнения конкретного теста и наконец проверку самого утверждения:

expect(Sum(2,5)).toBe(7);

Естественно .toBe() не единственный метод, в документации рассматриваются и другие. Но на некоторые моменты я бы еще обратила внимание.

beforeEach и afterEach

Иногда возникает необходимость выполнить какие-либо действия перед каждым тестом блока.
В таком случае используем beforeEach().
А для действий после каждого теста блока используем afterEach().

 
var b = 0;

describe("Проверим как работает BeforeEach и afterEach", function() {

    beforeEach(function () {

        b = 1;

    });

    afterEach(function () {

        b = 0;

    });

    it("b должно быть равно 1", function () {

        expect(b).toEqual(1);

    });
});

describe("Проверим как работает afterEach", function() {

    it("b должно быть равно 0", function () {

        expect(b).toEqual(0);

    });
});

Все тесты выше выполнятся.

beforeAll()

Если хотим выполнить какое-либо действие один раз перед началом тестов блока, то используем beforeAll().

Например, может быть удобно создать объект один раз перед всеми тестами блока и проверять затем по очереди его методы.

 
beforeAll(function() {

    my_bicycle = new Bicycle('Stels','red');

}); 

Асинхронность

Jasmine поддерживает асинхронность. Иногда нам необходимо, чтобы тесты продолжили выполняться только после завершения какого-либо действия. Допустим мы по Ajax должны получить данные необходимые для тестов. Тогда мы используем done функцию:

beforeAll(function(done) {

    $.when( $.ajax(API_URL + 'data.json') ).then(function(data) {

       testData = data;
       done();

    });

});

Пока не вызовется done() тесты не продолжатся, а она вызовется только после получения json данных.

Тестирование DOM

И наконец бывает нам нужно потестировать функции связанные с DOM, либо проверить загрузились ли какие-то элементы в DOM после выполнения кода.

В таком случае понадобится плагин jasmine-jquery.
На странице плагина хорошие примеры, но один рассмотрим.

Допустим нам надо потестировать корректно ли работает функция привязки обработчика к событиям show и hide, которую я рассматривала в посте про обработку событий.

Код будет такой:

it ("show-hide handler should work", function() {

    setFixtures('
<div class="div">X</div>

');

    spyOnEvent('.div', 'show');

    j('.div').show();

    expect('show').toHaveBeenTriggeredOn('.div');

    spyOnEvent('.div', 'hide');

    j('.div').hide();

    expect('hide').toHaveBeenTriggeredOn('.div');

});

Сначала мы устанавливаем ‘фихтуру’ — просто создаем div для теста. Далее создаем шпиона на событие, затем вызываем событие и наконец проверяем, что событие на элементе сработало.

Тесты можно писать и на coffescript, также как и тестировать мы можем код написанный на coffescript.

Конечно, в таком случае перед запуском тестов необходимо переводить файлы в javascript, но об этом, а также о запуске тестов и сборке необходимых файлов с помощью Karma и Gulp в следующем посте Юнит-тесты: Jasmine Karma Gulp .