Здравствуйте, читатель, нет никаких сомнений в популярности фреймворка Angular. В большинстве сегодняшних разработок веб-приложений Angular является наиболее любимым и часто используемым фреймворком для веб-приложений.
Мы занимаемся проектированием, кодированием и модульным тестированием в соответствии с нашим регулярным графиком на нашем рабочем месте, но мы сталкиваемся с проблемами, когда требуется интегрировать приложение Angular с любым инструментом автоматизации, таким как Jenkins + Sonarqube. Так что эта статья может помочь вам, когда вы столкнетесь с такими проблемами.
Чтобы сделать вас очень понятным и простым, давайте разберем этот процесс на следующие простые шаги:
- Создайте компонент Angular
- Напишите модульное тестирование (используя Карму и Жасмин)
- Создание покрытия кода кармы
- Установить Sonarqube
- Настроить сонар с помощью Angular
- Интегрируйте покрытие кода Karma с Sonarqube
Прежде чем перейти к пошаговому процессу, предположим, что вы установили JVM, Node JS, Angular CLI и создал проект Angular, если нет, обратитесь к Начало работы с Angular.
Шаг 1: (Создайте компонент Angular)
Поскольку мы используем Angular CLI, создать компонент очень просто. Пожалуйста, следуйте приведенной ниже команде,
ng генерировать компонент COMPONENT_NAME
( OR)
ng g c test COMPONENT_NAME
Рассмотрим следующие компоненты:
Шаг 2: (Напишите модульное тестирование)
Следуйте приведенному ниже фрагменту кода для модульного тестирования вышеуказанного компонента, например TestComponent,
Для получения дополнительной информации о модульном тестировании Angular перейдите по ссылке https://angular.io/guide/testing.
Шаг 3: (Создайте покрытие кода Кармы)
После того, как вы закончите писать примеры модульных тестов для своих компонентов, выполните следующую команду для создания покрытия кода:
ng test - покрытие кода
Если вы хотите остановить сервер Karma, отправьте генерацию покрытия кода или выполнение всех тестовых примеров, запустите,
ng test - watch = false - покрытие кода
( OR)
Вы можете просто изменить атрибут singleRun на false в вашем karma.conf.js, доступном в корневом каталоге.
Вы можете получить ошибку тайм-аута Karma, в этом случае просто добавьте browserNoActivityTimeout: 100000 в свой karma.conf.js.
Вы увидите, что папка покрытие могла быть создана в корневых каталогах вашего приложения.
Шаг 4: (Установите Sonarqube)
Для установки Sonarqube сначала загрузите Sonarqube с https://www.sonarqube.org/downloads/.
Для бесплатного использования просто нажмите Community Edition.
После загрузки файл ZIP извлекается в любую папку, а затем запускается StartSonar.bat из sonarqube \ bin \ windows-x86–64. После запуска командного файла вы увидите следующие сообщения в командной строке.
Убедитесь, что на вашем компьютере установлена и запущена JVM. В течение некоторого времени вы можете получить время ожидания JVM или ошибку загрузки, не беспокойтесь, просто перезапустите файл StartSonar.bat.
Теперь вы можете получить доступ к Sonarqube из браузера, используя порт по умолчанию http: // localhost: 9000. Вы можете использовать учетные данные по умолчанию, то есть admin и admin в качестве имени входа и пароля соответственно. Как только вы войдете в Sonarqube, вы увидите следующее окно,
Если порт 9000 уже используется, выполнение файла StartSonar.bat завершится ошибкой. Чтобы решить эту проблему, вы можете использовать любой свободный доступный порт в sonar.web.port, присутствующий в sonarqube \ conf \ sonar.properties, и раскомментировать или включить его. Повторно запустите файл StartSonar.bat .
Шаг 5: (Настройте сонар с помощью Angular)
Теперь пришло время настроить Sonar с приложением Angular, и для этого нам понадобится узел узла sonar-scanner в приложении Angular. И чтобы включить это, воспользуйтесь одним из следующих способов:
Включите сонар-сканер как devDependencies в package.json, а затем запустите
npm install или npm i
( OR)
Прямой запуск
npm установить сонар-сканер - save-dev
Создайте файл с именем sonar-project.properties в корневом каталоге Angular и добавьте ниже атрибуты,
Шаг 6: (Интегрируйте покрытие кода Karma с Sonarqube)
У нас есть покрытие кода Karma и готовый сервер Sonar, теперь мы интегрируем их с помощью сонара-сканера, который мы установили на предыдущем шаге.
Сначала добавьте скрипт под названием sonar в свой package.json,
Наконец, выполните следующую команду, чтобы интегрировать покрытие Karma с сервером Sonar,
npm run сонар
И вы получите результат прямо на сервере Sonar, перейдя по адресу http: // localhost: 9002 / projects. Пожалуйста, найдите скриншот ниже.
Скачать
Для получения дополнительной информации скачайте проект с Github.
Заключение
В заключение, у нас есть четыре важных шага, например,
- Установка Sonarqube.
- Настройка Sonar с Angular с помощью sonar-project.properties и установка пакета sonar-scanner.
- Получение покрытия кода Кармы.
- Интеграция покрытия кода Karma с Sonarqube.
