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

Automate Login After Signup

Explore how to enhance your Angular signup service by automating user login right after account creation. Learn to use spies in testing, merge observables, and update your signup service for seamless authentication and robust test coverage.

We'll cover the following...

At the moment, we have two services that do what we need them to do (signup and login.) Now, we need signup to also call login so that newly created users are automatically logged into the application.

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>
Login test case and login method

Update signup tests

Let’s first update our test for this new behavior of our signup method. Add the response we expect to receive from our test. Add the response for the login method just below signupResponse.

TypeScript 3.3.4
// src/app/services/auth/auth.service.spec.ts
it('should return a user object with a valid username and password', () => {
  const user = { 'username': 'myUser', 'password': 'password' };
  const signupResponse = {
    '__v': 0,
    'username': 'myUser',
    'password': '$2a$10$oF7YW1FyOSW3Gw7G4ThbO.ibduCgF3U0gVI/GE9fKQcGtVEBs0B.2',
    '_id': '5a550ea739fbc4ca3ee0ce58',
    'dietPreferences': []
  };
  const loginResponse = { 'token': 's3cr3tt0ken' }; // Add this
  let response;
  authService.signup(user).subscribe(res => {
    response = res;
  });
  http.expectOne('{{EDUCATIVE_LIVE_VM_URL}}:3000/api/users').flush(signupResponse);
  expect(response).toEqual(signupResponse);
  http.verify();
});

Then, create what’s known as a spy within testing as follows:

  1. Import of at the top of our file which allows us to create an observable value.
TypeScript 3.3.4
// src/app/services/auth/auth.service.spec.ts
import { of } from 'rxjs';
  ...
  
it('should return a user object with a valid username and password', () => {
  const user = { 'username': 'myUser', 'password': 'password' };
  const signupResponse = {
    '__v': 0,
    'username': 'myUser',
    'password': '$2a$10$oF7YW1FyOSW3Gw7G4ThbO.ibduCgF3U0gVI/GE9fKQcGtVEBs0B.2',
    '_id': '5a550ea739fbc4ca3ee0ce58',
    'dietPreferences': []
  };
  const loginResponse = { 'token': 's3cr3tt0ken' };
  let response;
  authService.signup(user).subscribe(res => {
    response = res;
  });
  spyOn(authService, 'login').and.callFake(() => of(loginResponse));
  http.expectOne('{{EDUCATIVE_LIVE_VM_URL}}:3000/api/users').flush(signupResponse);
  expect(response).toEqual(signupResponse);
  http.verify();
});

  1. Add the spy below our call to authService.signup(). A spy tracks a function, allowing us to form expectations within our test about that function. It also lets us intercept calls to that function, manually providing its return values. In this case, we’re spying on the login method of our authService. ...