Writing Tests in Angular

In the previous chapter, we learned how to secure an Angular application by adding user authentication, retrieving user information, and protecting routes.

What if I told you that writing tests in the frontend could be fun and exciting? This chapter will show you how good the developer experience of Cypress E2E, short for end-to-end testing, is. Why do frontend developers love the Cypress framework?

This chapter will teach you how to write basic Cypress tests and mock HTTP requests for testing.

In this chapter, we will cover the following topics:

• Getting started with Cypress
• Writing a simple Cypress test
• Mocking HTTP responses and intercepting HTTP requests

Technical requirements

The following link will take you to the finished version of this chapter: https://github.com/PacktPublishing/Spring-Boot-and-Angular/tree/main/Chapter-15/superheroes.

Getting started with Cypress

In this section, you will learn what Cypress is and how to get started with it.

Cypress is an end-to-end agnostic framework for testing web applications. You can write test IDs in HTML tags and assert whether the HTML tags are rendered in the way you would expect them to be.

Let’s define what end-to-end means. End-to-end means how a user will use your application after they land on your web application and finish tasks such as logging in, signing up, checking out, viewing a profile, logging out, filling out a form, and so on.

For instance, you can test or check the UI of your web application in different example cases or scenarios:

• The sentence of the landing page’s value proposition contains the word sale
• The widget count of a section of your website is what you expected
• The items in the basket on the checkout page are cleared out after hitting the Clear button
• A login form is present when the web application...

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", () => {
  ...

Mocking HTTP responses and intercepting HTTP requests

Mocking tests can help us isolate and focus on tests and not on the state of external dependencies or behavior. In this section, we will mock the HTTP responses of our server and intercept the HTTP requests of our Angular application for testing. We are going to intercept the HTTP requests so that we can send fake responses to Angular and not pollute our dev database.

We will start by adding a new file to the root of the cypress directory. Name the file global.d.ts. The global.d.ts file, also known as global libraries, provides a way to make interfaces and types globally available in our TypeScript code.

After creating the global.d.ts file, write the following code inside it:

/// <reference types="cypress"/>
declare namespace Cypress {
    interface Chainable {
        getCommand(url: string, responseBody: Array<any>):
   &...

Summary

With this, you have arrived at the end of this chapter. First, you learned what Cypress is and how easy it is to set up and write an end-to-end test. You also learned how to intercept HTTP requests and mock HTTP responses.

In the next chapter, you will learn how to package both frontend and backend applications into a single executable JAR file.