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

Signup Test: Failure

Understand how to implement and test error handling in the user signup process using Angular. Explore writing tests for signup failures like short passwords and learn to display error messages effectively in the signup component.

We'll cover the following...

Now that our signup functionality is working, we want to handle any user errors. Such scenarios might include attempting to create a password that’s too short.

This is our updated code:

�PNG


IHDR?�~�	pHYs��~�fIDATH��WKLQ���̔�uG��	e�n�.6qcb�l?���D`�F#�
Ku�F
1Qc�
��!����	��C�P�|B?$���ܱ3����I&}��}�̽s�[*�ɀU�A��K��yx�gY�Ajq��3L	Š���˫�OD�4��3Ϗ:X�3��o�PJ�ğo#IH�a����,{>1/�2$�R	AR]�)w��?�sZw^��q�Y�m_��e���r[8�^�
�&p��-���A}c��- ������!����2_)E�)㊪j���v�m��ZOi�g�nW�{<n8�P����o�=$8�K��9|$����@��v�P<�j�>�n.|�e2�a&�0aŸ����be�̀��C�fˤE%-{�ֺ��׮C��N��jXi�~c�C,t��T�����r�{� �L)s��V��6%�(�#ᤙ!�]��H�ҐH$R���^R�A�61(?Y舚�>���(Z����Qm�L2�K�ZIc��
���̧�C��2!⅄�(����"�Go��>�q��=��$%�z`ѯ��T�&����PHh�Z!=���z��O��������,*VVV�1�f*CJ�]EE��K�k��d�#5���`2yT!�}7���߈~�,���zs�����y�T��V������D��C2�G��@%̑72Y�޾{oJ�"@��^h�~��fĬ�!a�D��6���Ha|�3��� [>�����]7U2п���]�ė
��PU��.Wejq�in�g��+p<ߺQH����總j[������.���	Q���p _�K��1(��+��bB8�\ra
�́�v.l���(���ǽ�w���L��w�8�C��IEND�B`�
Signup tests

Test for short password

In the code above, in auth.service.spec.ts, add another test for an error case. Because this is still related to our signup method, we’ll keep this test within the describe spec.

TypeScript 3.3.4
// src/app/services/auth/auth.service.spec.ts
describe('signup', () => {
  it('should return a user object with a valid username and password', () => {
    ...
  });
  it('should return an error for an invalid user object', () => {
    const user = { username: 'myUser', password: 'pswd' };
    const signupResponse = 'Your password must be at least 5 characters long.';
    let errorResponse;
    authService.signup(user).subscribe(res => { }, err => {
      errorResponse = err;
    });
    http
      .expectOne('{{EDUCATIVE_LIVE_VM_URL}}:3000/api/users')
      .flush({ message: signupResponse }, { status: 400, statusText: 'Bad Request' });
    expect(errorResponse.error.message).toEqual(signupResponse);
    http.verify();
  });
});

  1. Update the user object with a password that’s shorter than our required 5 characters.

  2. Update the signupResponse to the error message we expect to receive from our API listed in ...