Learn Front-End Development and Automated Testing with Angular/

...

/

Signup Test: Failure

Signup Test: Failure

Let's create a test for short passwords and configure our signup function to display the error message.

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.

Press + to interact
// 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 ...