Вступление


Создание современных веб-приложений с использованием комбинации Angular и Spring Boot очень популярно как среди крупных, так и среди малых предприятий. Angular предоставляет все необходимые инструменты для создания надежного, быстрого и масштабируемого внешнего интерфейса, в то время как Spring Boot делает то же самое для внутреннего интерфейса без хлопот с настройкой и обслуживанием сервера веб-приложений.


Чтобы убедиться, что все программные компоненты, из которых состоит конечный продукт, работают в унисон, их необходимо тестировать вместе. Вот тут-то и начинается интеграционное тестирование с Serenity BDD. Serenity BDD — это библиотека с открытым исходным кодом, которая помогает писать чище и удобнее в сопровождении. автоматические приемочные и регрессионные тесты.


:::Информация


BDD (Behaviour-Driven Development) — это метод тестирования, который включает в себя выражение того, как приложение должно вести себя, на простом бизнес-ориентированном языке.


Цель


Цель этой статьи — создать простое веб-приложение, которое пытается предсказать возраст человека по его имени. Затем, используя библиотеку Serenity BDD, напишите интеграционный тест, который гарантирует правильное поведение приложения.


Создание веб-приложения


Во-первых, основное внимание будет уделено серверной части Spring Boot. Конечная точка GET API будет отображаться с помощью Spring RestController. Когда конечная точка вызывается с именем человека, она возвращает предсказанный возраст для этого имени. Фактический прогноз будет обрабатываться agify.io.


Далее будет реализовано приложение Angular, предоставляющее пользователю ввод текста. Когда имя вводится во входные данные, на серверную часть будет отправлен HTTP-запрос GET для получения предсказания возраста. Затем приложение примет прогноз и отобразит его пользователю.


Полный код проекта для этой статьи доступен на [GitHub] (https://github.com/andreistefanwork/angular-spring-integration-test).


Создание бэкенда


Сначала будет определена модель прогнозирования возраста. Он будет иметь форму записи Java с именем и возрастом. Здесь также будет определен пустой прогноз возраста:


AgePrediction.java


```java


общедоступная запись AgePrediction (имя строки, целочисленный возраст) {


частный AgePrediction () {


это("", 0);


public static AgePrediction empty() {


вернуть новый AgePrediction();


RestController обрабатывает HTTP-вызовы к /age/prediction. Он определяет метод GET, который получает имя и обращается к api.agify.io для получения прогноза возраста. Метод помечен @CrossOrigin, чтобы разрешить запросы от Angular. Если параметр name не указан, метод просто возвращает пустой прогноз возраста.


Чтобы сделать фактический вызов прогноза, будет использоваться REST-клиент Spring — RestTemplate:


AgePredictionController.java


```java


@RestController


@RequestMapping("/возраст/прогноз")


@RequiredArgsConstructor


открытый класс AgePredictionController {


закрытая конечная статическая строка API_ENDPOINT = "https://api.agify.io";


частный окончательный RestTemplate restTemplate;


  • Пытается предсказать возраст для указанного имени.

  • Если имя пусто, возвращается пустой прогноз.

  • Имя @param, используемое для предсказания возраста

  • Предсказание возраста @return для данного имени

@CrossOrigin(происхождение = "http://localhost:4200")


@GetMapping


public AgePrediction predictAge(@RequestParam(required = false) Строковое имя) {


если (StringUtils.isEmpty(имя)) {


вернуть AgePrediction.empty();


Заголовки HttpHeaders = new HttpHeaders();


headers.set(HttpHeaders.ACCEPT, MediaType.APPLICATION_JSON_VALUE);


HttpEntity<?> entity = new HttpEntity<>(заголовки);


вернуть restTemplate.exchange (buildAgePredictionForNameURL (имя),


HttpMethod.GET, объект, AgePrediction.class).getBody();


частная строка buildAgePredictionForNameURL (имя строки) {


вернуть UriComponentsBuilder


.fromHttpUrl(API_ENDPOINT)


.queryParam("имя", имя)


.toUriString();


Создание интерфейса


Модель прогнозирования возраста будет определена как интерфейс с «именем» и «возрастом»:


предсказание возраста.модель.тс


```машинопись


интерфейс экспорта AgePredictionModel {


имя: строка;


возраст: число;


Веб-страница будет состоять из текста <input>, где пользователи будут вводить имя, которое будет использоваться для предсказания возраста, и двух элементов <h3>, где будут отображаться имя и предсказанный возраст.


Когда пользователи вводят <input>, текст будет передан классу typescript через функцию onNameChanged($event).


Отображение name и предполагаемого возраста обрабатывается путем подписки на observable agePrediction$.


app.component.html


```разметка


<дел>



<input id="nameInput"


тип = "текст"


(вход)="onNameChanged($event)"/>