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

Последнее обновление: 15.05.2017 г.
Публикация: 27.02.2017 г.

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

Заметка

PhpStorm также поддерживает модульное тестирование PHP кода с использованием фреймворка PHPUnit, а также BDD тестирование с помощью фреймворка Behat.


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

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

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

Внимание

При тестировании достаточно использовать только один инструмент для прогона тестов. В зависимости от своих предпочтений, ты можешь установить JsTestDriver или Karma.


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

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

PhpStorm: Установка плагина JsTestDriver

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

PhpStorm: Окно инструмента JsTestDriver Server

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

Заметка

JsTestDriver Assertion поставляется вместе с плагином JsTestDriver и не требует установки плагина-адаптера.


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

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

Внимание

Чтобы плагин работал, предварительно в PhpStorm должен быть установлен плагин NodeJS и NPM пакет Karma.

PhpStorm: Установка плагина Karma

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

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

PhpStorm: Установка плагин-адаптера для Karma

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

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

PhpStorm: создание конфигурации запуска для JsTestDriver
Заметка

Плагин JsTestDriver делает запуск отдельных тестовых файлов проще. Вместо того чтобы создавать вручную конфигурацию запуска, ты можешь использовать пункт контекстного меню Create "test_name" configuration и создать конфигурацию запуска для конкретного теста. Также ты можешь использовать пункт Run "test_name" для создания конфигурации запуска и немедленного прогона теста.


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

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

karma init

Файл конфигурации 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
    })
};
Заметка

Karma выполняет модульные тесты в соответствии с файлом конфигурации karma.conf.js, который генерируется полуавтоматически в интерактивном режиме. Справочную информацию по нему можно найти на официальном сайте инструмента.

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

PhpStorm: создание конфигурации запуска для Karma

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

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

PhpStorm: результаты тестирования в окне инструмента "Run"

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

Заметка

На панели инструментов окна инструмента Run, ты можешь включить опцию Toggle auto-test. При её активации PhpStorm будет автоматически повторно запускать тесты на JavaScript всякий раз, когда будут сделаны изменения в коде, который является объектом тестирования.

PhpStorm: опция "Toggle auto-test"

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

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

PhpStorm: окно инструмента "Coverage Run tests"

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

Внимание

Для запуска тестов с покрытием кода в Karma, необходимо с помощью NPM установить пакет karma-coverage.

Контрольные вопросы

Источники и дополнительные материалы