Learn Front-End Development and Automated Testing with Angular/

...

/

E2E Tests for Signup Component

E2E Tests for Signup Component

Let's add Cypress tests for our signup component.

We'll cover the following...

Our signup test is set up, ready, and running. It’s time to add E2E tests for our signup component. Below is our updated code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>LetsGetLunch</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>
Signup test setup

Signup test

  1. Utilize an it, passing it the title of our test, followed by a function containing the test itself.

  2. Begin the test with cy and then follow that with a series of chained methods provided by Cypress to interact with the browser.

  3. The first method is .visit('/signup'). Because we configured our baseUrl earlier, we don’t need to provide the full path here. Simply append whatever comes after http://0.0.0.0:8081.

  4. Chain .visit('/signup') with .url(), which receives the current URL.

  5. Chain .url() with an assertion using .should(). Pass it ...