Book Image

Spring Boot and Angular

By : Devlin Basilan Duldulao, Seiji Ralph Villafranca
5 (1)
Book Image

Spring Boot and Angular

5 (1)
By: Devlin Basilan Duldulao, Seiji Ralph Villafranca

Overview of this book

Angular makes building applications with the web easy and Spring Boot helps get an application up and running using just a few lines of code and minimal configuration. This book provides insights into building full-stack apps using Angular and Spring Boot effectively to reduce overall development time and increase efficiency. You'll start by setting up your CI/CD pipeline and then build your web application’s backend guided by best practices. You'll then see how Spring Boot allows you to build applications faster and more efficiently by letting the Spring Framework and Spring Boot extension do the heavy lifting. The book demonstrates how to use Spring Data JPA and add its dependencies along with Postgres dependencies in the project to save or persist a user's data in a database for future use. As you advance, you'll see how to write tests and test a service using Mockito. Finally, you'll create a CI workflow or pipeline for a Spring Boot and Angular application to enable operations to deliver quality applications faster. By the end of this Spring Boot and Angular book, you'll be able to build a full-stack web application and deploy it through continuous integration and continuous deployment.
Table of Contents (24 chapters)
1
Part 1: Overview of Spring Boot and Angular Development
4
Part 2: Backend Development
12
Part 3: Frontend Development
19
Part 4: Deployment

Writing Cypress tests

In this section, we will start writing simple Cypress tests to see how fun and easy it is to write tests using Cypress. We will start the tests by adding a test attribute in an HTML tag in the authentication form. We are going to edit the auth-form.component.html file to write the test-id attribute. Here is what was changed in the auth-form.component.html line:

<mat-card-title data-cy="auth-title">{{title}}</mat-card-title>

You can see the attribute we added in the preceding code. data-cy is an attribute for the test ID that Cypress will use to target the HTML element we want to test.

Now that we’ve added our first test ID, let’s go to the e2e folder inside the cypress directory and create a new file. The filename needs to contain .cy. Name the new file anti-heroes.cy.ts and then add the following code:

/// <reference types="cypress"/>
describe("Anti Heroes Page", () => {
  ...