Тестирование проектов Angular 4: angular/cli + gitlab-ci + ng test + PhantomJS + TDD

Тестирование проектов Angular 4: angular/cli + gitlab-ci + ng test + PhantomJS + TDD

От автора: непрерывная интеграция и тестирование проектов Angular 4 — это неотъемлемая часть разработки на этом фреймворке. Благодаря angular/cli, gitlab-ci и PhantomJs это проходит довольно весело.

(Фрагменты могут содержать / * … * /, что означает, что я удалил код для чтения — не удаляйте этот код в своих скриптах, копируйте только то, что вам нужно.)

Что нам нужно сделать:

Создать новый проект с angular/cli

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Написать несколько простых тестов и обработать исключения (TDD)

Настроить PhantomJS в качестве тестового браузера

Поместить это на gitlab.com

Настроить gitlab-ci.yml

Следить за пайплайном для непрерывной интеграции и улыбаться

Создайте и запустите приложение:

Установите https://nodejs.org/en/

Установите https://code.visualstudio.com/

Установите @ angular / cli и создайте новое приложение:

Теперь приложение по умолчанию отображается в браузере. Джонас Банди советует: Оставайтесь на @ angular / cli 1.0.6, чтобы использовать отладку в karma-тестах, пока проблема не будет решена.

Использование разработки на основе тестов:

Мы хотим:

Изменить заголовок на «Letslearn»

Показать значение «points»

Увеличить число кнопкой «plus1″

Давайте напишем тесты:

Запустите» ng test» в новом терминале и продолжайте работу

Откройте «src / app / app.component.spec.ts»

Адаптируйте существующие тесты для поиска нового названия: «Letslearn»

Добавьте тест, который нажимает кнопку и проверяет, увеличивается ли количество точек на единицу.

Давайте решим тесты:

Откройте “src/app/app.component.ts”

Измените переменную «title» на «Letslearn»

Добавьте переменную “points = 1;”

Добавьте функцию plus1 (), которая увеличивает this.points ++

Откройте “src/app/app.component.html”

Удалите весь код

Добавьте заголовок <h1>{{title}}</h1>

Покажите {{points}}

Добавьте <button> и привяжите (click) к plus1

Убедитесь, что «ng test» все еще запущен, и что тесты пройдены

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Booom!!!! Вы только что использовали разработку на основе тестов.

Устанавливаем PhantomJS

Откройте терминал в папке проекта «letslearn»

Установите пакеты, необходимые для phantomjs:

Включаем полифилы необходимые PhantomJS

Браузер PhantomJS нуждается в так называемых полифилах для запуска всех отличных функций JS, используемых Angular.

Откройте “src/polyfills.ts”

Включите большой блок полифилов в верхней части и связанные с ним объекты внизу

Добавляем PhantomJS к karma.conf.js

Добавляем плагин karma-phantomjs-launcher в файл karma.conf.js и добавьте PhantomJS в список браузеров:

Запускаем тест с PhantomJS

Это запустит PhantomJS вместо Chrome. Нам нужен PhantomJS для непрерывного интегрирования на gitlab-ci.

Добавляем конфигурацию “.gitlab-ci.yml”

Создаём новый файл “.gitlab-ci.yml” и настраиваем базовый тест:

Создаём gitlab – проект — https://gitlab.com/projects/new

Добавьте свой ssh-ключ в gitlab, если вы еще этого не сделали: https://gitlab.com/profile/keys

вы получите его здесь «cat ~ / .ssh / id_rsa.pub»

запустите «ssh-keygen», если у вас его нет

Скопируйте git url: git@gitlab.com:XXyour_userXX/XXyour_projectXX.git

Загрузите проект:

Проверьте свой пайплайн

https://gitlab.com/XXyour_userXX/XXyour_projectXX/-/jobs

Тестирование проектов Angular 4: angular/cli + gitlab-ci + ng test + PhantomJS + TDD

Нажмите на значок слева (пройденный, запущенный, либо ожидающий) и посмотрите на вывод данных в режиме реального времени:

Тестирование проектов Angular 4: angular/cli + gitlab-ci + ng test + PhantomJS + TDD

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

Следующий шаг: Непрерывная доставка с развертыванием в firebase, облако Google, да в чем вашей душе угодно.

Автор: Jonas Felix

Источник: https://medium.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Angular 4 с Нуля до Профи

Angular 4 - полное руководство для современной веб-разработки

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree