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

Спасибо за проверку его!

Как сказано в заголовке, вот как включить значок покрытия кода с помощью Angular на Gitlab CI. Кроме того, в конце я покажу настройку конвейера Gitlab для тестирования приложения Angular.

Angular использует Istanbul и Karma для встроенного тестирования. Итак, первым делом необходимо обновить файл karma.conf.js, в частности блок кода под названием coverageIstanbulReporter. Здесь вы хотите добавить text-summary в массив reports. Другие варианты Karma можно найти здесь.

Теперь, когда вы запустите ng test --watch=false --code-coverage, вы получите текстовую сводку в консоли о покрытии кода. Ура!

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

Затем перейдите на Gitlab.com и перейдите в свой проект ›Настройки› CI / CD ›Общие конвейеры. Прокрутите вниз до пункта Анализ покрытия тестирования.
Здесь вы хотите включить это регулярное выражение. (Благодаря этой публикации о переполнении стека за регулярное выражение).

Statements.*?(\d+(?:\.\d+)?)%

Хорошо! Итак, теперь это даст вам процент покрытия кода для выражений. Если вам нужна другая часть покрытия кода, отключите операторы для другого слова покрытия кода (ветви, функции или строки).

Сейчас мы на финише. Прокрутите еще немного вниз до раздела Общие конвейеры, над которым мы работали. Вы увидите два значка: Статус конвейера и Отчет о покрытии . Прежде чем просто скопировать разметку, убедитесь, что вы используете раскрывающийся список в правом верхнем углу, чтобы выбрать ветку, из которой вы хотите получать статусы. Как только у вас будет правильная ветка, просто скопируйте и вставьте ее туда, где душе угодно. т.е. README.md. Вот и все! В следующий раз, когда вы запустите конвейер, Gitlab захватит результат и обновит значок с указанием процента покрытия кода!

Как и обещал, я немного расскажу о настройке конвейера Gitlab для тестирования приложений Angular. Вот мой .gitlab-ci.yml

Уловка для меня заключалась в том, чтобы выяснить, как запускать тесты в докер-контейнере. Потому что, если вы попытаетесь запустить только node:latest контейнер, это не сработает, поскольку Karma ищет Chrome. К счастью, кто-то уже проделал большую работу по решению этой проблемы. Огромный привет этому докер-контейнеру и его сопровождающему. Так что с этим кусочком головоломки вы сможете запускать ng test --watch=false и ng e2e без проблем.

Внимательный читатель заметит этап сборки Pages. Я использую Gitlab Pages для размещения HTML-вывода моего покрытия кода. Это очень легко и просто сделать. Вы можете следовать инструкциям по сборке.

  • Использовать образ Alpine Docker
  • Переопределить глобальные before_scripts
  • Переместите coverage/ в public/ каталог
  • Создайте артефакт сборки каталога public/

Причина появления альпийского изображения в том, что он такой маленький; следовательно, на загрузку больших изображений тратится меньше минут конвейера. Все, что нам нужно сделать, это переместить один каталог в другой. Каталог coverage/ - это артефакт сборки из задания тестирования. Поскольку в задании страниц существует зависимость, задание страниц будет ждать завершения тестирования перед запуском. Наконец, создание артефакта сборки каталога public/ указывает Gitlab на автоматическое использование его в качестве страницы Gitlab.

Это все, что нужно для тестирования приложений Angular в конвейере Gitlab. Более подробную информацию о Gitlab CI / CD можно найти здесь.

2019–04–05: обновлены грамматика и орфография