E2E Tests in Angular with Cypress

An app having a couple of End-to-End (E2E) tests surely promises more reliability than an app having no tests at all, and in today’s world, with emerging businesses and complex applications, it becomes essential at some point to have E2E tests written to capture the entire flow of an application. Cypress is one of the best tools out there today when it comes to E2E tests for web applications. In this chapter, you’ll learn how to test your E2E flows in an Angular app with Cypress. Here are the recipes we’re going to cover in this chapter:

• Writing your first Cypress test
• Validating if a DOM element is visible on the view
• Testing form inputs and submission
• Waiting for XMLHttpRequests (XHRs) to finish
• Using Cypress bundled packages
• Using Cypress fixtures to provide mock data

Technical requirements

For the recipes in this chapter, ensure your setup is complete as per the 'Technical Requirements' in the 'Angular-Cookbook-2E' GitHub repository. For setup details, visit: https://github.com/PacktPublishing/Angular-Cookbook-2E/tree/main/docs/technical-requirements.md. The starter code for this chapter is located at https://github.com/PacktPublishing/Angular-Cookbook-2E/tree/main/start/apps/chapter11.

Writing your first Cypress test

If you have been writing E2E tests already, you might have been doing this using Protractor. Working with Cypress is a completely different experience, though. In this recipe, you’ll set up Cypress with an existing Angular application and write your first E2E test with Cypress.

Getting ready

The app that we are going to work with resides in start/apps/chapter11/ng-cypress-starter inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve ng-cypress-starter
   

   This should open the app in a new browser tab, and you should see the following:

   

   Figure 11.1: ng-cypress-starter app running on localhost:4200

How to do it…

The app we’re working with is a simple counter application. It has minimum and maximum values and some buttons that...

Validating if a DOM element is visible on the view

In most web applications, there is at least one element/view that is shown based on a certain condition. Otherwise, it is hidden. When it comes to making sure the end users see the right content in the right situations, it becomes necessary to test them well. In this recipe, you are going to learn how to check if an element is visible on the DOM.

Getting ready

The app that we are going to work with resides in start/apps/chapter11/ng-cy-element-visibility inside the cloned repository. However, the e2e tests are in the folder start/apps/chapter11/ng-cy-element-visibility-e2e. In this recipe, we are going to modify files in both folders. Let’s run the e2e tests first by following these steps:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to run the e2e tests for the project:

   npm run e2e ng-cy-element-visibility...

Testing form inputs and submission

If you’re building a web app, there’s a high chance that you’re going to have at least one form in it, and when it comes to forms, we need to make sure that we have the right User Experience (UX) and the right business logic in place. What better way to make sure everything works as expected than writing E2E tests for them? In this recipe, we’re going to test a form using Cypress and validate if the correct errors are being shown in appropriate situations.

Getting ready

The app that we are going to work with resides in start/apps/chapter11/ng-cy-forms inside the cloned repository. However, the e2e tests are in the folder start/apps/chapter11/ng-cy-forms-e2e. In this recipe, we’re going to modify files in both folders. Let’s run the e2e tests first by following these steps:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and...

Waiting for XHRs to finish

Testing User Interface (UI) transitions is the essence of E2E testing. While it is important to test the predicted outcome of an action right away, there might be cases where the outcome has a dependency. For instance, if a user fills out the Login form, we can’t show the success toast until we have a successful response from the backend server, hence we can’t test whether the success toast is shown right away. In this recipe, you’re going to learn how to wait for a specific XHR call to be completed before performing an assertion.

Getting ready

The app that we are going to work with resides in start/apps/chapter11/ng-cy-http-requests inside the cloned repository. However, the e2e tests are in the folder start/apps/chapter11/ng-cy-http-requests-e2e. In this recipe, we’re going to modify files for the e2e project only. Let’s run the e2e tests by following these steps:

1. Open the code repository in your code...

Using Cypress bundled packages

Cypress provides a bunch of bundled tools and packages that we can use in our tests to make things easier, not because writing tests with Cypress is otherwise hard but because these libraries are used by many developers already and so they’re familiar with them. In this recipe, we’re going to look at the bundled jQuery, Lodash, and Minimatch libraries to test some of our use cases.

Getting ready

The app that we are going to work with resides in start/apps/chapter11/ng-cy-bun-pack inside the cloned repository. However, the e2e tests are in the folder start/apps/chapter11/ng-cy-bun-pack-e2e. And in the recipe, we’re going to modify files for the e2e project only. Let’s run the e2e tests by following these steps:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to run the e2e tests for the project:

   npm run...

Using Cypress fixtures to provide mock data

When it comes to writing E2E tests, fixtures play a great role in making sure the tests are not flaky (don’t have different results in different test runs). Consider that your tests rely on fetching data from your API server, or your tests include snapshot testing, which includes fetching images from a Content Delivery Network (CDN) or a third-party API. Although they’re technically required for the tests to run successfully, it is not important that the server data and the images are fetched from the original source; therefore, we can create fixtures for them. In this recipe, we’ll create fixtures for the bucket data to avoid having to run the server for the e2e tests.

Getting ready

The app that we are going to work with resides in start/apps/chapter11/ng-cy-mock-data inside the cloned repository. However, the e2e tests are in the folder start/apps/chapter11/ng-cy-mock-data-e2e. In this recipe, we’re...