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

21

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

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

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

Створити новий проект з angular/cli

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

Налаштувати PhantomJS в якості тестового браузера

Помістити на gitlab.com

Налаштувати gitlab-ci.yml

Стежити за пайплайном для безперервної інтеграції і посміхатися

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

Установіть https://nodejs.org/en/

Установіть https://code.visualstudio.com/

Встановіть @ angular / cli і створіть новий додаток:

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»

Додайте тест, який натискає кнопку і перевіряє, чи збільшується кількість точок на одиницю.

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»

Видаліть весь код

Додайте заголовок

{{title}}

Покажіть {{points}}

Додайте і прив’яжіть (click) до plus1

Переконайтеся, що «ng test» все ще запущений, і що тести пройдені

{{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

Відкрийте термінал в папці проекту «letslearn»

Встановіть пакунки, необхідні для phantomjs:

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

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

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

Відкрийте “src/polyfills.ts»

Увімкніть великий блок полифилов у верхній частині і пов’язані з ним об’єкти внизу

/* … */
/* 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

ви отримаєте його тут «cat ~ / .ssh / id_rsa.pub»

запустіть «ssh-keygen», якщо у вас його немає

Скопіюйте 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

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

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

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

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

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