Learn Front-End Development and Automated Testing with Angular/

...

/

Tests for Signup Page

Tests for Signup Page

Let's add a test for successful user creation and a test for failed user creation due to short password length.

We'll cover the following...

Our TestBed has been configured and our signupPage has been instantiated using our SignupPage class, so we can write our first test.

This is our updated application 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 page tests

Signup test: success

Let’s add our first test case for successful signup. First, import of, which will be used to mock the returned observable from our AuthService. Then, add the test case for creating a user as follows:

  1. From lines 12 to 17, leverage the page object, signupPage, to interact with the form.

    1. Set values to our usernameInput and passwordInput.
    2. Call .dispatchEvent() on the two inputs, providing it with an argument new Event('input').
...