Как настроить покрытие кода Angular в VS Code

Менее чем за 30 секунд.

Вот как настроить покрытие кода, чтобы определить, какие фрагменты вашего приложения Angular тестируются.

Три.

Два.

Один.

GO!

1. Измените angular.json

Откройте файл angular.json в корневой папке вашего проекта Angular.

Прокрутите до раздела test и добавьте строку codeCoverage: true.

Нравится.

"test": {
   "builder": "@angular-devkit/build-angular:karma",
   "options": {
      ...
      "codeCoverage": true
   }
},

Теперь, когда вы перезапустите процесс тестирования Angular, вы увидите новую папку в своем проекте под названием coverage. Это отчет о покрытии кода для вашего приложения Angular.

2. Настройте отчет о покрытии кода в Visual Studio Code.

Итак, теперь, когда у нас есть отчеты о покрытии кода, как нам их показать?

Что ж, есть расширение, которое сделает это за нас. Это называется Водосточные желоба.

Перейдите в раздел «Расширения» в VS Code, найдите Coverage Gutters и установите его.

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

3. Начальные желоба покрытия.

И, наконец, используйте ярлык CTRL + SHIFT + P, чтобы открыть окно команд, и выберите Coverage Gutters: Watch, чтобы показать статус покрытия кода в Visual Studio Code.

Вывод

Не забывайте, что покрытие кода Angular - не панацея.

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

Тем не менее, покрытие кода - отличный термометр, который поможет вам решить, сколько тестов вам нужно написать.

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

Follow Me: GitHub, Medium, Личный блог

Первоначально опубликовано на https://danielk.tech.