Добро пожаловать в последнюю и заключительную часть моего урока! В предыдущем я показал вам, как выполнить модульное тестирование коннектора с помощью Jest framework, создать покрытие кода и проверить качество кода с помощью eslint. Теперь вы узнаете, как автоматизировать все это с помощью платформы CI. В этой статье я буду использовать CircleCI, однако эти шаги должны быть очень похожи для других инструментов, таких как Semaphore или Travis.

В этой статье мы сделаем следующее:

  • Заставьте CircleCI запускать набор модульных тестов при каждой новой фиксации
  • Автоматически запускать проверки eslint
  • Сгенерируйте покрытие кода и отправьте его на codecov.io
  • После успешной сборки вставьте новый код в Google Scripts.

Строительная часть

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

Простая настройка сборки

Сначала давайте зарегистрируемся в CircleCI и добавим репозиторий как «проект» в инструмент CI. Теперь нам нужно добавить .circleci/config.yml файл в наш репозиторий. Мы включим туда все необходимые шаги по сборке / развертыванию. Наш исходный файл будет отвечать только за запуск тестов. Вот как это выглядит:

Теперь, если я зафиксирую файл и отправлю основную ветку на GitHub, сборка начнется автоматически:

Eslint и покрытие кода

Теперь давайте воспользуемся тем фактом, что мы настроили eslint и что Jest может генерировать покрытие кода. Мы изменим шаги, чтобы проверить качество кода и запустить набор тестов с отчетом о покрытии кода. Я заменил команду yarn test следующей:

- run:
    name: "Lint the code"
    command: yarn lint
- run:
    name: "Run tests (with coverage)"
    command: yarn coverage

Теперь всякий раз, когда любое из правил eslint нарушается, сборка завершается ошибкой с соответствующим выводом:

Отправить покрытие в CodeCov

Это супер необязательно. Я решил, что хочу отобразить симпатичный значок с процентом покрытия кода в файле readme моего репозитория. Я выбрал бесплатный инструмент CodeCov для проектов с открытым исходным кодом. Их значок выглядит так:

Сначала я, конечно, зарегистрировал и настроил свой репозиторий в интерфейсе CodeCov. Затем, основываясь на этом документе, надеялись, что CircleCI каким-то образом автоматически отправит покрытие в CodeCov. На самом деле этого не произошло: D

Решение оказалось не таким уж сложным - оказалось, что есть пакет npm, который делает то, что мне нужно, поэтому мне нужно было только:

  1. Добавить CODECOV_TOKEN в мой проект CircleCI

2. Добавьте следующий шаг в .circleci/config.yml файл.

- run:
    name: "Send coverage to CodeCov"
    command: yarn add --dev codecov && ./node_modules/.bin/codecov

Часть развертывания

Часть развертывания намного интереснее. Мне не удалось найти в Интернете никаких руководств по этому вопросу, так что, похоже, я новатор в этой области. Если вы знаете, как лучше настроить автоматическое развертывание коннектора GDS, дайте мне отзыв :)

Подготовьте сценарий развертывания

В моем решении для управления версиями скриптов используется пакет CLASP. Я уже описал идею версий и развертываний скрипта, а также то, как настроить CLASP в части 1 серии, так что если вы новичок в этих концепциях, сделайте перерыв. здесь, прочтите первую часть и вернитесь через несколько минут :)

Как вы, наверное, помните, тогда я уже настроил развертывание «Производство». Теперь мы напишем сценарий, который будет выполнять следующие действия:

  1. Отправьте код в скрипты Google
  2. Создать новую версию скрипта
  3. Измените развертывание «Производство» так, чтобы оно указывало на только что созданную версию.

Вот как выглядит придуманный мною сценарий bash:

Запускаем скрипт на CircleCI

Худшее уже сделано. Осталось только заставить CircleCI запускать скрипт развертывания при каждом нажатии на master.

Сначала давайте добавим новый скрипт в наш package.json файл: "deploy-production": "./deploy.sh 'Production'".

Затем нам нужно разрешить заданию CircleCI изменять наш скрипт Google. Если вы еще не сделали этого, запустите clasp login в src папке и войдите, используя свои учетные данные Google. Clasp создаст .clasprc.json файл, содержащий токены доступа к службам Google в вашем домашнем каталоге.

Я не нашел лучшего способа выполнить аутентификацию Google на стороне CI, чем просто скопировать содержимое вашего локального файла в приложение CI. В случае CircleCI нам нужно будет добавить новую переменную среды в наш проект CircleCI и назвать ее CLASPRC. Значение переменной должно быть просто содержимым вашего локального clasprc.json файла.

Последнее, что нужно сделать, это добавить этап развертывания в наш .circleci/config.yml файл, чтобы:

  • Записывает содержимое CLASPRC переменной в ~/.clasprc.json файл.
  • Он запускает deploy.sh скрипт, который мы написали ранее.
  • Шаг deploy выполняется только после успешного master построения ветки.

Наш окончательный файл конфигурации выглядит так:

Проверьте результаты!

Хорошо, это тот момент, которого мы ждали - давайте сделаем что-нибудь, чтобы освоить, отправим это на GitHub и позвольте CircleCI творить чудеса!

Работа успешно завершена. Теперь, если мы проверим результат в интерфейсе Google Scripts, мы действительно увидим, что была создана новая версия:

И точки развертывания «Производство» во вновь созданной версии:

Резюме

Вот и все! В этой части наш коннектор стал еще более зрелым. Теперь здесь не будет места случайным ошибкам - каждая новая строка кода будет тщательно проверена инструментом CI и мгновенно появится для пользователей благодаря написанному нами сценарию развертывания.

Вы можете сказать, что выполнение всего того, что я делал в частях 3 и 4, является излишним для такого небольшого приложения и ... возможно, вы правы. Однако, когда ваш коннектор станет более продвинутым, вы быстро заметите, что ручная отладка и развертывание занимают много времени. Я почти уверен, что после недели такой «ручной» разработки вы потратите столько же времени на отладку, сколько я потратил на написание модульных тестов и настройку CI :)

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

Как всегда, вы можете проверить полный код этой части в моем репозитории на GitHub или протестировать коннектор по этой ссылке.

Если вам понравился сериал, не сомневайтесь 👏!