Собираем окружение для современного TDD на JavaScript + VS code

Моя цель - предложение широкого ассортимента товаров и услуг на постоянно высоком качестве обслуживания по самым выгодным ценам.
TDD уже давно не является чем-то диковинным: на хабре можно найти об этом подходе сотни статей, а каждый новичок знает, какую книгу об экстремальном программировании ему нужно прочитать.

image

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

Прыгаем к тестам


Начнем с самого простого: до тестов нужно добраться.
Для этого я пользуюсь Open Spec File
Это расширение помогает открыть файл с тестами из кода на соседней вкладке.

image

Таких много, на любой вкус:
— UnitTest Switcher позволяет переключаться первым пунктом меню по правой кнопке мыши
— Switch to test предлагает кастомизацию пути к файлу с тестами для проектов со сложной структурой

По моему опыту, самый быстрый вариант — хоткей. Выбрать файл с тестами из списка занимает 2 секунды, хоткеем — полсекунды.

Запускаем тесты


Итак, мы попали в файл с тестами. Здесь нам очень поможет расширение Add Only. С ним мы можем одним кликом покрыть describe, it, test, context модификатором only и запускать только его. Просто и удобно.

image

Другое расширение JavaScript Test Runner добавляет еще пару кнопок рядом с add only: запуск и debug. Удобно в моментах, когда нужно прогнать пачку тестов один раз.

image

Следим за покрытием


Расширение Coverage Gutters подсвечивает покрытие вашего кода тестами. С ним вам не нужно тратить время на разбирательства, какую часть кода вам не удалось покрыть. Все непокрытые ветвления будут видны сходу.

image

Расширение Code Coverage может стать как альтернативой, так и дополнением к предыдущему: подчеркивает непокрытые строки + может выводить количество покрытых строк в открытом файле в статус-бар.

image

Информация берется из файла lcov.info в папке coverage. Чтобы расширения указывали на актуальные проблемы, запускайте тестирование с флагами watch и coverage.

Всё и сразу


Если вы используете Jest, то попробуйте и одноименный плагин. Он мгновенно схватывает изменения в коде и прогоняет затронутые тесты. Добавляет фишечек в интерфейс:

image
Консоль Jest для отслеживания тестов

image
Показывает маркерами статус тестов и добавляет описание ошибкам

Wallaby это большой платный плагин. Он ориентирован на TDD. В своей разработке я его не использую, но чувствую, что обязан рассказать. Wallaby очень быстро прогоняет тесты после изменения кода, обновляет и показывает на ходу покрытие, позволяет также прыгать в файл с тестами и многое другое. Подробнее можно почитать на сайте: wallabyjs.com.

Резюме


Я рассказал о тех плагинах, что ежедневно использую в своей работе. Такой набор удобен для меня и определенно будет вам полезен, если вы запускаете тесты средствами из коробки. Их установка и настройка займут десять минут, а после они будут экономить ваше время каждый день.

На VS code существует масса других хороших расширений для удобной работы с тестами — напишите, какие упрощают жизнь вам.
Источник: https://habr.com/ru/company/tinkoff/blog/461737/


Интересные статьи

Интересные статьи

25 лет назад, 4 декабря 1995 года JavaScript был впервые представлен миру. Мы хотим отметить день рождения языка и поблагодарить вас за его поддержку все эти годы, поэтому мы подготовили ...
В последние несколько лет JavaScript был самым популярным и распространённым языком для разработки одностраничных приложений (Single Page Application, SPA). Это так и сегодня. Но неда...
В этом переводе расскажем про альтернативные редакторы кода, которые ничуть не уступают VS Code, а при грамотном подборе расширений даже превосходят его. Редактор Visual Studio...
Я — большой любитель TypeScript. По возможности я стараюсь использовать этот язык в своих проектах. TypeScript даёт разработчику отчёты об ошибках и проверку типов в JavaScript и TypeScript-коде....
Студенты из Университета Париж-Сакле (Франция) стали участниками практикума по переработке пластика, который проходит с 1 по 13 июля 2019 года в ФабЛабе НИТУ «МИСиС». Курс посвящен работе c м...