Від автора: безперервна інтеграція і тестування проектів Angular 4 — це невід’ємна частина розробки на цьому фреймворку. Завдяки angular/cli, gitlab-ci і PhantomJs це проходить досить весело.

(Фрагменти можуть містити / * … * /, що означає, що я видалив код для читання — не видаляйте цей код у своїх скриптах, копіюйте тільки те, що вам потрібно.)

Що нам треба зробити:

Створіть і запустіть додаток:

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-тестах, поки проблема не буде вирішена.

Використання розробки на основі тестів:

Ми хочемо:

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

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);
}));
});

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

{{title}}

{{points}}
plus1
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

npm install –save-dev phantomjs-prebuilt karma-phantomjs-launcher
npm install –save intl

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

Браузер PhantomJS потребує так званих полифилах для запуску всіх відмінних функцій JS, використовуваних Angular.

/* … */
/* 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 в список браузерів:

// Karma configuration file, see link for more information
// https://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

ng test –browser PhantomJS

Це запустить PhantomJS замість Chrome. Нам потрібен PhantomJS для безперервного інтегрування на gitlab-ci.

Додаємо конфігурацію “.gitlab-ci.yml”

Створюємо новий файл “.gitlab-ci.yml” і налаштовуємо базовий тест:

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 – проект — https://gitlab.com/projects/new

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

Скопіюйте git url: [email protected]:XXyour_userXX/XXyour_projectXX.git

Завантажте проект:

git add remote origin [email protected]:XXyour_userXX/XXyour_projectXX.git
git add -A
git commit -m ‘TDD from letsboot rocks!’
git push -u origin master

Перевірте свій пайплайн

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

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

Ви зрадієте! Інтегрувати його в свої проекти. Зробіть це, і можете відзначати — це повністю змінить ваше життя! Тепер, прогулюючись вулицями, ви будете знати, що ваша TDD дружить з CI.

Наступний крок: Безперервна доставка з розгортанням у firebase, хмару Google, так що вашій душі завгодно.