Delve into front-end testing principles, learn best practices for writing enduring tests, and discover strategies for E2E testing and integration into CI pipelines. Gain actionable testing insights.

React Testing 101 Component, Integration, and End-to-end Testing_1.png

tarball.tar.gz

jest

jest_describe

jest_onlytest

skiptest

aftereach

headless

foo2

opening

first_test

custom

final_job

foo_final

This course will provide you with important information, principles, and experience-based advice, to enter the world of testing methodologies. 

Here, you will learn the best practices to follow to write useful and lasting tests, how to test different user flows without a working back-end, how to write effective end-to-end tests (E2E), and how to integrate tests into development and Continuous Integration pipelines.

At the end of the course, you will be able to apply the fundamental principles of the test methodologies to understand what and how to test effectively.

Front-end Testing 101: Integration and End-to-end Testing

# AJAX request

Do you remember the [list of problems](https://www.educative.io/courses/front-end-testing-integration/main-e2e-test-defects-utility-in-case-of-failure) that would break the signup flow? We fixed the DOM-related ones by retrieving the elements based on the contents instead of the order, but there were a lot of problems related to the AJAX request itself:

- The AJAX call does not start.

- The AJAX call has the wrong request payload.

- The API does not work and it does not respond.

- The API returns the wrong payload.

- The user already exists.

The tests we’ve covered so far still do not solve these errors.  When they fail, we need to spend some time debugging the web app during testing to discover that the issue is related to the incorrect AJAX request. Don’t worry, Cypress will improve the E2E testing experience!

## Server contract

When we test the front-end of our web app, we need to consider it as a closed block (i.e. blackbox testing) and check **its interactions with the external world**. We need to test the contracts between the front-end and all other involved entities. What contracts should be recognized by the front-end app?

   1. Functional contract with the user: The subject of all E2E tests.


   2. Presentational contract with the user: The subject for all visual regression tests (which will be discussed later).

   3. Contract with the server: The subject of front-end communication with the back-end.

We need to concentrate on the last one because the front-end often stops working due to a  misaligned communication with the back-end.

## AJAX request waiting

Because we know that an AJAX request happens systematically, we know that an AJAX request will occur every time we run the app. Thus, we need to consider the AJAX request in our Cypress test. The signup flow is a good example. Let’s see what  APIs allow us to do consider the AJAX request.

First, we need to set up AJAX call interception:

```js
it("The happy path should work", () => {
+ cy.intercept("POST", "**/api/users");

  cy.visit(paths.register);
  // the rest of the test code
});
```

- [`cy.intercept`](https://docs.cypress.io/api/commands/intercept.html) tells Cypress to intercept some requests. We can use a lot of options 
to match precisely which AJAX request we want to intercept. 
- `cy.intercept("POST", "**/api/users")` tells Cypress to intercept every `POST` request to every URL that ends with `**/api/users` as the signup form makes a request to the `http://localhost:3100/api/users` to take advantage of \* and \*\* glob support.



Second, we need to set a [Cypress alias](https://docs.cypress.io/guides/core-concepts/variables-and-aliases.html) to reference it later on.

```js
it("The happy path should work", () => {
  cy.intercept("POST", "**/api/users")
+   .as("signup-request");

  cy.visit(paths.register);
  // the rest of the test code
});
```
Third, we must “wait” for the AJAX request triggered by the front-end app.

```js
it("The happy path should work", () => {
  cy.intercept("POST", "**/api/users")
    .as("signup-request");
  cy.visit(paths.register);
  // form filling code
  cy.get("form")
    .within(() => cy.findByText(strings.signUp).click());
+ cy.wait("@signup-request");
  cy.findByText(noArticles, { timeout: 10000 }).should("be.visible");
});
```

What does “waiting” mean when applied to an AJAX request? The test will then **wait up to 5 seconds for the front-end to begin the AJAX request and up to 30 seconds for the back-end** to fulfill the request (both of the timeouts are customizable). Here, we can see the advantages of automatic Cypress waitings mixed with AJAX requests management! Essentially, AJAX will ask Cypress to wait via`cy.wait("@signup-request");`

Do you remember why we added the custom timeout to the c`y.findByText(noArticles, { timeout: 10000 })` call? We initially added the timeout due to the problem that` cy.contain` (later replaced by `cy.findByText`) sometimes failed because the AJAX request took too long (and the default `cy.contain`/`cy.findByText` timeout is 4000 milliseconds). Now we do not need this timeout anymore because the `cy.wait` knows that an AJAX request could take a really long time!

```js
- cy.findByText(noArticles, { timeout: 10000 }).should("be.visible");
+ cy.findByText(noArticles).should("be.visible");
```

That's all the changes we applied to the test



Let's learn about the Ajax request in testing.

Waiting for an Ajax Request

Introduction

E2E Testing

The First E2E Test

Polishing the E2E test

Ajax Requests

Custom Commands

UI Integration Tests

Other Best Practices

Bonus Section

Conclusion

Appendix

Waiting for an Ajax Request

AJAX request

Server contract