Search⌘ K
AI Features
Home
Courses
Learn Front-End Development and Automated Testing with Angular

Tests for Signup Page

Explore writing Angular unit tests for a user signup page, including success and failure scenarios. Learn to mock AuthService responses, simulate user input with dispatched events, and update the view to test error message display using Angular's change detection. This lesson helps you build reliable signup functionality through comprehensive testing.

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'). Dispatching events on each user input is necessary so that Angular is aware of the changes made to the input’s values.
    3. Click the first two
...