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

Automate Login After Signup

Let's update the signup function so that newly added users are logged in automatically. Also, we’ll update the function tests accordingly.

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.

// 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:

...