3.17.2016

Переходим на ES6 и разработку через тестирование

Всем привет! Не так давно я решил перейти на новый стандарт JavaScript ES6 при разработке клиентского кода. До этого я с удовольствием разрабатывал новые фичи в jsfiddle.net, а потом переносил код в свой любимы редактор brackets, либо сразу разрабатывал в нем. При такой системе тестировать свой код легко и просто можно в jsfiddle.net, а позже перенести все на jasmine.

В случае с кодом ES6 все становится немного сложнее и запутаннее и такая система больше не приносит счастья :). Да, в jsfiddle есть режим для разных стандартов кода, и да, он понимает babel, но это все не то. В начале просто начинают раздражать ошибки компиляции, когда код выкидывает синтаксическую ошибку в консоль, а позже начинаешь хотеть подключать модули через import или require и наконец приходишь к тому, что разработка в jsfiddle на es6 приносит слишком много неудобств.

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

Просто разрабатывай в brackets запускай все сборки и тесты через Grunt и радуйся жизни. Но, нет! Если разрабатываешь на es6 то и код и тесты должны быть в новом стандарте.

Сначала я попробовал реализовать задумку при помощи Grunt, но затея для меня не прижилась. Во-первых потому, что не нашлось модуля под Grunt для запуска тестов jasmine в формате es6. Во-вторых, потому что я хотел получить полностью автономный модуль в стандарте ES6. А во-третьих, не хотелось плодить в папке модуля еще и файл сборки с скомпилированным файлом.

Задача была простой! Хочу полностью автономный модуль который будет написан в современном стандарте es6 включая тесты и с возможностью запустить тестирование одной командой. При этом все коды и тесты соберутся, с компилируются, запустятся, а мне в консоль выведут результат и не каких лишних файлов.

Пришлось немного порыться на сайте babel найти решение. После запуска обнаружилось, что в консоль не выводятся описания тестов. И опять пришлось немного погуглить, и опять решение нашлось в виде готового модуля jasmine-spec-reporter

Получилось готовое решение. Правда нужно заметить, что через некоторое время мне понадобилось тестировать код в браузере и я добавил файл для запуска в браузере, плюс конфигурацию сборщика webpack и shell скрипт, чтобы собрать это одной командой.

В итоге вышло рабочее решение, которое можно запустить на автоматическое отслеживание изменений в коде и при желании добавить к нему phantomjs.

А итоговый модуль можно найти на моем репозитории https://github.com/Talalaev/run-code-es6_and_jasmine-test-es6 скачать себе как шаблон и с удовольствием начать разрабатывать свой замечательный код по методологии BDD и в соответствии современному стандарту ES6.

P.S.
А еще, если запускать командную строку из IDE то вообще песня! Вот тебе код, вот на соседней вкладочке тесты и вот тебе чуть ниже вывод тестирования в консоль в один клик или автоматически. Ну разве не чудо !?