Модульное тестирование JavaScript в PhpStorm

С помощью модульного тестирования, ты можешь убедиться, что части твоего исходного кода работают должным образом. После того как ты внёс правки в код или выполнил рефакторинг, модульные тесты оказываются очень полезны: они сразу смогут рассказать тебе в порядке ли существующая функциональность или нет. Давай посмотрим, как можно использовать модульное тестирование на JavaScript в PhpStorm.

1. Необходимые условия

Все действия, описанные здесь, были воспроизведены с корректными ожидаемыми результатами при следующем технологическом окружении:

PhpStorm поддерживает тесты, написанные с использованием фреймворков: JsTestDriver Assertion, Jasmine и QUnit. Прежде чем работать с модульными тестами на JavaScript в PhpStorm, ты должен установить один из инструментов для их запуска: JsTestDriver или Karma. Обрати внимание, что PhpStorm также поддерживает тесты, написанные с помощью фреймворков: Cucumber и Mocha. Давай посмотрим, как устанавливать необходимые инструменты для запуска тестов.

1.1. Установка плагина JsTestDriver

Для установки плагина JsTestDriver в PhpStorm необходимо с помощью главного меню IDE: [File → Settings... → Plugins] перейти в раздел Plugins (плагины) и нажать кнопку Install JetBrains plugin..., затем найти и установить JsTestDriver.

После установки плагина (с помощью кнопки Install или контекстного меню), необходимо перезапустить PhpStorm для того, чтобы включить его. После использования конфигурации запуска тестов для JsTestDriver станет доступно окно инструмента JsTestDriver Server в нижней панели окна инструментов, а также в меню [View → Tool Windows].

Для JsTestDriver также должен быть установлен плагин-адаптер того фреймворка тестирования, который будет использоваться для написания тестов.

1.2. Установка плагина Karma

Для установки плагина Karma в PhpStorm необходимо с помощью главного меню IDE: [File → Settings... → Plugins] перейти в раздел Plugins (плагины) и нажать кнопку Install JetBrains plugin..., затем найти и установить Karma.

После установки плагина (с помощью кнопки Install или контекстного меню), необходимо перезапустить PhpStorm для того, чтобы включить его. Для Karma также должен быть установлен плагин-адаптер того фреймворка тестирования, который будет использоваться для написания тестов.

Необходимый плагин-адаптер легко установить с помощью NPM. Для этого используй главное меню IDE [File → Settings... → Languages & Frameworks → Node.js and NPM] и затем секцию Packages (пакеты), выбранного раздела, для установки пакетов: karma-jasmine (Jasmine), karma-qunit (QUnit) или karma-mocha (Mocha).

2. Добавление модульного теста в проект

Модульные тесты на JavaScript могут храниться в твоём проекте, например, в папке с именем tests. В неё следует добавлять js файлы с тестами. Так, например, в проекте этого руководства файл example.jstda.js содержит тесты, написанные с помощью фреймворка JsTestDriver Assertion:

ExampleTest = TestCase('ExampleTest');

ExampleTest.prototype.testHello = function() {
	var result = Example.hello('Vasya');
	assertEquals(result, 'Hello, Vasya');
};

ExampleTest.prototype.testGoodbye = function() {
	var result = Example.goodbye('Vasya');
	assertEquals(result, 'Goodbye, Vasya');
};

А в файле example.jasmine.js для написания тестов используется фреймворк Jasmine:

describe('Hello', function() {
	it('says hello, name', function() {
		expect(Example.hello('Vasya')).toEqual('Hello, Vasya');
	});
});

describe('Goodbye', function() {
	it('says goodbye, name', function() {
		expect(Example.goodbye('Vasya')).toEqual('Goodbye, Vasya');
	});
});

Ниже представлен исходный код файла example.js, который будет подвергаться тестированию.

var Example = {

	hello: function(name) {
		return 'Hello, ' + name;
	},

	goodbye: function(name) {
		return 'Goodbye, ' + name;
	},

    q: function(name) {
        return name + ', how are you?';
    }
};

3. Создание конфигурации запуска

Независимо от того, какую среду исполнения тестов ты используешь, необходимо создать Run/Debug Configuration (конфигурацию запуска), чтобы запускать тесты. Это можно сделать с помощью панели инструментов или с помощью главного меню PhpStorm [Run → Edit Configurations...]. В открывшемся окне ты можешь добавить новую конфигурацию для JsTestDriver или Karma.

3.1. Создание конфигурации запуска для JsTestDriver

Для прогона тестов с помощью JsTestDriver необходимо определить, что является объектом для тестирования: каждый файл по отдельности или сразу весь каталог с тестами. Также необходимо создать и настроить файл конфигурации JsTestDriver, который записывается в формате YAML. Он может иметь название jsTestDriver.conf или *.jstd. Файл конфигурации JsTestDrive данного руководства имеет следующий вид:

load:
    - src/example.js
test:
    - tests/example.jstda.js

Справочную информацию по нему можно найти на официальном сайте инструмента. Также ты можешь выбрать параметры запуска тестового сервера, настроить отладку и покрытие кода.

3.2. Создание конфигурации запуска для Karma

Для запуска тестов в среде Karma требуется конфигурационный файл, который ты можешь создать с помощью окна терминала в PhpStorm.

Файл конфигурации Karma данного руководства имеет следующий вид:

module.exports = function(config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine'],
        files: [
            'src/example.js',
            'tests/example.jasmine.js'
        ],
        exclude: [
        ],
        preprocessors: {
            'src/example.js': ['coverage']
        },
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        singleRun: false,
        concurrency: Infinity
    })
};

Также ты можешь выбрать, в каком браузере будут исполняться тесты.

4. Выполнение модульных тестов

Теперь попробуй выполнить модульные тесты. После создания конфигурации запуска тестов, ты можешь использовать кнопки на панели инструментов, чтобы запустить её или нажми Shift + F10. Оба инструмента для прогона тестов: JsTestDriver и Karma запустят тестовый сервер, затем браузер и тесты в нём. Ты можешь использовать сразу несколько браузеров для прогона тестов. Результаты тестирования отображаются в окне инструмента Run.

Ты можешь видеть журнал всего тестового прогона, а также посмотреть статистику испытаний или перейти к просмотру отдельных тестов. Используя пункт контекстного меню Jump to Source, или нажав кнопку F4, ты можешь перейти к исходному коду тестов.

5. Покрытие кода тестами

Если хочешь быть уверен, что проверил все возможные варианты исполнения кода, то тебе стоит запустить модульные тесты с покрытием кода. Это можно сделать из контекстного меню или при помощи панели инструментов. При выполнении тестов этим способом появляется окно инструмента Coverage Run tests. Оно отображает статистические данные о доле операторов, выполняемых во время тестового прогона.

Ты можешь войти в необходимый каталог, затем перейти к источнику и посмотреть, какие выражения были протестированы, а какие нет. Цвета на левой стороне в редакторе укажут тебе, проверен ли данный участок кода. На скриншоте выше видно, что нет никакого теста для функции q. Его можно реализовать и тем самым увеличить тестовое покрытие исходного кода.