Убедитесь, что ваш набор тестов первоклассный

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

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

Покрытие кода поможет вам в этом. Это поможет вам понять, какая часть вашей кодовой базы покрыта тестами. Мы рассмотрим, почему вам стоит это беспокоиться и как можно интегрировать Istanbul - самопровозглашенный простейший инструмент покрытия кода JavaScript - в свое приложение.

Почему вы должны измерять охват кода

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

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

Вы также можете установить минимальный порог. Допустим, у вас есть порог 80%. Это означает, что вам необходимо протестировать 80% вашей кодовой базы, чтобы произвести зеленый тест. Таким образом, вы можете потерпеть неудачу при развертывании, чтобы предотвратить нарушение работы вашего приложения.

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

Как интегрировать Стамбул в ваше приложение

Чтобы запустить Istanbul, нам понадобятся две вещи: набор для тестирования с некоторыми тестовыми примерами, с которыми мы можем запустить инструмент, и, во-вторых, нам нужно установить его как зависимость, если вы не используете Jest. Чтобы сэкономить время, я воспользуюсь этим шаблоном из предыдущего урока. В нем есть несколько тестовых примеров, написанных на Jest. Вы можете клонировать его по ссылке выше.

Если вы не используете Jest, вам нужно запустить npm i --save-dev nyc, чтобы установить Istanbul после клонирования репозитория.

Настройка Jest для сбора покрытия

Откройте config.js внутри tests/unit и добавьте следующую строку:

Это включает покрытие кода для Jest. Вы можете запустить набор тестов с npm run unit. Но перед тем как это сделать, запустите самый последний тест в AppController.spec.js. В противном случае мы получим 100% покрытие и не сможем увидеть, как Стамбул сообщает нам, какая часть кода еще не покрыта.

После завершения тестов вы увидите папку coverage, созданную в корне вашего проекта.

Откройте index.html файл; это содержит сгенерированный отчет для всех файлов.

Рядом с каждой строкой вы увидите, сколько раз функция выполнялась в тестовом примере. Для метода add у нас есть восемь различных случаев, поэтому он был рассмотрен восемь раз. Но divide ничем не охвачено, так как мы выключили тест. Стамбул выделяет все красным, чтобы можно было легко обнаружить непокрытые части.

Добавление порогов

Так же просто добавить пороги. Как видно из приведенного выше GIF, мы можем добавить порог к четырем различным категориям: операторы, ветви, функции и строки. Чтобы добавить глобальную конфигурацию 80%, откройте свой config.js и добавьте следующее:

Вы можете добавить правило к каждой категории отдельно. Это приведет к глобальному применению порога для каждого файла. А если не соблюдаются 80%, Jest потерпит неудачу. Если вы хотите иметь собственные правила для отдельных файлов или папок, вы также можете это сделать.

Вам нужно передать путь к файлу и определить там свои пороги. Вы также можете указать отрицательные значения. Это означает, что максимальное количество раскрытых утверждений не может быть больше 10. И все - вы только что интегрировали Стамбул в свой набор тестов!

Резюме

Стамбул предоставляет простой способ понять, где ваш набор тестов нуждается в улучшении. На правильную настройку у вас уйдет не более пары часов в день. Но как только это будет сделано, затраченное время будет значительно возвращено. Это поможет вам создать лучший набор тестов, а вместе с ним и лучший продукт.

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

Спасибо, что нашли время прочитать эту статью - удачной настройки!