.travis.yml для приложения Angular
Если вы размещаете свой проект Angular на GitHub и хотите настроить конвейер CI, но не знаете, как это сделать, вот краткое руководство, как это сделать.
В первую очередь вам понадобится аккаунт Travis-CI. Если у вас его нет, просто зайдите на travis-ci.com и нажмите Зарегистрироваться на GitHub. После этого авторизуйте свою учетную запись, и все готово! Поздравляю!
Откройте страницу репозиториев, чтобы отобразить все ваши публичные проекты.
Если вы не видите свой проект, нажмите Синхронизировать учетную запись слева и обновите страницу.
Нажмите кнопку-переключатель, чтобы активировать Travis-CI для вашего проекта GitHub.
.travis.yml для проекта Angular
Все в порядке! Следующим шагом будет добавление файла .travis.yml. Этот файл является наиболее важной частью всего конвейера CI. Он объединяет все этапы вашего CI. Трэвис прочитает этот файл и установит пакеты, построит и протестирует ваше приложение в соответствии с его содержанием. Откройте свой проект angular и добавьте новый файл на корневой уровень. Требуется назвать его .travis.yml. Затем скопируйте и вставьте следующий код
По сути, мы говорим Трэвису, что собираемся создать приложение Node 8 (Angular использует node). Трэвис должен установить стабильную версию Google Chrome (необходим для тестирования) и кэшировать содержимое каталога node_modules. Трэвис должен использовать команду npm install для установки приложения Angular и после успешной установки запустить тестовый скрипт для тестирования приложения. Здесь важно добавить следующие переключатели в вашу команду npm run test
--watch=false --no-progress --browsers=ChromeHeadlessNoSandbox
- Установка флага watch в значение false приводит к тому, что тестовый скрипт завершается только после одного запуска и не ждет вечного ожидания изменений в файлах.
- no-progress не будет печатать сообщения о ходе выполнения в выводе консоли
- ChromeHeadlessNoSandbox - это специальная версия Chrome, созданная для автоматизированного тестирования и серверных сред (поэтому она идеально подходит для CI!)
Следующее, что нужно сделать, это настроить карму так, чтобы она не использовала изолированную версию Chrome Headless. Нам не нужно использовать изолированную версию Chrome, чтобы избежать следующей ошибки
The SUID sandbox helper binary was found, but is not configured correctly. Rather than run without sandboxing I'm aborting now. You need to make sure that /opt/google/chrome/chrome-sandbox is owned by root and has mode 4755.Вы можете найти подробную информацию об этой ошибке на странице документации Travis.
Хорошо, вернемся к настройке кармы. Откройте karma.conf.js и добавьте собственный лаунчер, подобный этому
Зафиксируйте все свои изменения, отправьте их на github. Откройте свой проект Travis и ... вы увидите, как ваш проект построен и протестирован! :)
И по умолчанию каждый раз, когда вы создаете пул-реквест в своем проекте на github, Travis-CI будет запускать все тесты за вас и предоставлять вам информацию о CI на странице PR. НАСКОЛЬКО ЭТО УДИВИТЕЛЬНО! :)
Вот и все! Теперь вы успешно настроили свой проект Angular для использования Travis-CI.
Вы можете найти рабочий пример на github: https://github.com/mjawulski/travis-ci-demo
Если вам понравилась эта статья, нажмите кнопку Хлопнуть и подписывайтесь на меня в твиттере по адресу twitter.com/mjawulski
Присоединяйтесь к нашему сообществу Slack и читайте наши еженедельные темы о Фавнах ⬇
