Тестирование проектов 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 и создайте новое приложение:

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

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

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

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

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

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

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

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

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

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

<h1>{{title}}</h1>
{{points}}
<button (click)="plus1()">plus1</button>
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: git@gitlab.com:XXyour_userXX/XXyour_projectXX.git

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

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

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

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.

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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

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

Научиться

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree