От автора: непрерывная интеграция и тестирование проектов Angular 4 — это неотъемлемая часть разработки на этом фреймворке. Благодаря angular/cli, gitlab-ci и PhantomJs это проходит довольно весело.
(Фрагменты могут содержать / * … * /, что означает, что я удалил код для чтения — не удаляйте этот код в своих скриптах, копируйте только то, что вам нужно.)
Что нам нужно сделать:
Создать новый проект с angular/cli
Написать несколько простых тестов и обработать исключения (TDD)
Настроить PhantomJS в качестве тестового браузера
Поместить это на gitlab.com
Настроить gitlab-ci.yml
Следить за пайплайном для непрерывной интеграции и улыбаться
Создайте и запустите приложение:
Установите //nodejs.org/en/
Установите //code.visualstudio.com/
Установите @ angular / cli и создайте новое приложение:
|
1 2 3 4 5 |
npm install -g @angular/cli ng --version # tutorial tested with: @angular/cli: 1.2.0, node: 8.1.2 ng new letslearn --prefix lsl cd letslearn ng serve -o |
Теперь приложение по умолчанию отображается в браузере. Джонас Банди советует: Оставайтесь на @ angular / cli 1.0.6, чтобы использовать отладку в karma-тестах, пока проблема не будет решена.
Использование разработки на основе тестов:
Мы хотим:
Изменить заголовок на «Letslearn»
Показать значение «points»
Увеличить число кнопкой «plus1»
Давайте напишем тесты:
Запустите» ng test» в новом терминале и продолжайте работу
Откройте «src / app / app.component.spec.ts»
Адаптируйте существующие тесты для поиска нового названия: «Letslearn»
Добавьте тест, который нажимает кнопку и проверяет, увеличивается ли количество точек на единицу.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import { async, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; /* add this to use By.css('button') */ import { AppComponent } from './app.component'; describe('AppComponent', () => { /* ... */ it(`should have as title 'lsl'`, async(() => { /* ... */ expect(app.title).toEqual('Letslearn'); /* change title */ })); it('should render title in a h1 tag', async(() => { /* ... */ expect(compiled.querySelector('h1').textContent).toContain('Letslearn'); /* change title */ })); /* add button test test */ it('increase number when button pressed', async(() => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); expect(fixture.componentInstance.points).toBe(1); fixture.debugElement.nativeElement.querySelector('button').click(); expect(fixture.componentInstance.points).toBe(2); })); }); |
Давайте решим тесты:
Откройте “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» все еще запущен, и что тесты пройдены
|
1 2 3 |
<h1>{{title}}</h1> {{points}} <button (click)="plus1()">plus1</button> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { Component } from '@angular/core'; @Component({ selector: 'lsl-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Letslearn'; points = 1; plus1() { this.points++; } } |
Booom!!!! Вы только что использовали разработку на основе тестов.
Устанавливаем PhantomJS
Откройте терминал в папке проекта «letslearn»
Установите пакеты, необходимые для phantomjs:
|
1 2 |
npm install --save-dev phantomjs-prebuilt karma-phantomjs-launcher npm install --save intl |
Включаем полифилы необходимые PhantomJS
Браузер PhantomJS нуждается в так называемых полифилах для запуска всех отличных функций JS, используемых Angular.
Откройте “src/polyfills.ts”
Включите большой блок полифилов в верхней части и связанные с ним объекты внизу
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/* ... */ /* enable these */ import 'core-js/es6/symbol'; import 'core-js/es6/object'; import 'core-js/es6/function'; import 'core-js/es6/parse-int'; import 'core-js/es6/parse-float'; import 'core-js/es6/number'; import 'core-js/es6/math'; import 'core-js/es6/string'; import 'core-js/es6/date'; import 'core-js/es6/array'; import 'core-js/es6/regexp'; import 'core-js/es6/map'; import 'core-js/es6/weak-map'; import 'core-js/es6/set'; /* ... */ /* and these: */ /** * Date, currency, decimal and percent pipes. * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 */ import 'intl'; // Run `npm install --save intl`. /** * Need to import at least one locale-data with intl. */ import 'intl/locale-data/jsonp/en'; |
Добавляем PhantomJS к karma.conf.js
Добавляем плагин karma-phantomjs-launcher в файл karma.conf.js и добавьте PhantomJS в список браузеров:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// Karma configuration file, see link for more information // //karma-runner.github.io/0.13/config/configuration-file.html module.exports = function (config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular/cli'], plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-phantomjs-launcher'), /* add PhantomJS launcher here */ require('karma-jasmine-html-reporter'), require('karma-coverage-istanbul-reporter'), require('@angular/cli/plugins/karma') ], /*...*/ browsers: ['Chrome', 'PhantomJS'], /* add PhatomJS here */ singleRun: false }); }; |
Запускаем тест с PhantomJS
|
1 |
ng test --browser PhantomJS |
Это запустит PhantomJS вместо Chrome. Нам нужен PhantomJS для непрерывного интегрирования на gitlab-ci.
Добавляем конфигурацию “.gitlab-ci.yml”
Создаём новый файл “.gitlab-ci.yml” и настраиваем базовый тест:
|
1 2 3 4 5 6 7 8 9 10 |
image: node:latest cache: paths: - node_modules/ test_letslearn: script: - npm install - ./node_modules/@angular/cli/bin/ng test --single-run=true --browsers PhantomJS --watch=false |
Создаём gitlab – проект — //gitlab.com/projects/new
Добавьте свой ssh-ключ в gitlab, если вы еще этого не сделали: //gitlab.com/profile/keys
вы получите его здесь «cat ~ / .ssh / id_rsa.pub»
запустите «ssh-keygen», если у вас его нет
Скопируйте git url: git@gitlab.com:XXyour_userXX/XXyour_projectXX.git
Загрузите проект:
|
1 2 3 4 |
git add remote origin git@gitlab.com:XXyour_userXX/XXyour_projectXX.git git add -A git commit -m 'TDD from letsboot rocks!' git push -u origin master |
Проверьте свой пайплайн
//gitlab.com/XXyour_userXX/XXyour_projectXX/-/jobs
Нажмите на значок слева (пройденный, запущенный, либо ожидающий) и посмотрите на вывод данных в режиме реального времени:
Вы очень обрадуетесь! Интегрируйте его в свои проекты. Сделайте это, и можете отмечать — это полностью изменит вашу жизнь! Теперь, прогуливаясь по улицам, вы будете знать, что ваша TDD дружит с CI.
Следующий шаг: Непрерывная доставка с развертыванием в firebase, облако Google, да в чем вашей душе угодно.
Автор: Jonas Felix
Источник: //medium.com/
Редакция: Команда webformyself.
