Learn Front-End Development and Automated Testing with Angular/

...

/

Signup Mock Test: Success

Signup Mock Test: Success

Let's create mock tests for signup functionality.

We'll cover the following...

In the previous lesson, we revamped our default test setup by adding the HTTPClient module to our tests file. In this lesson, we’ll create mock tests for our successful signup functionality cases.

Below is our updated code. Use this to make this lesson’s changes.

�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`�
Auth service without mock tests

Create mock tests

Below, the first test creates a spec for our service’s signup function and its first test case.

Press + to interact
// src/app/services/auth/auth.service.spec.ts
fdescribe('AuthService', () => {
  let authService: AuthService;
  let http: HttpTestingController;
  beforeEach(() => {
    ...
  });
  it('should be created', () => {
    expect(authService).toBeTruthy();
  });
  describe('signup', () => {
    it('should return a user object with a valid username and password', () => {
    });
  });
});

Like we saw earlier, we’ll call signup with a username and password and receive a user object as a response. This is how we write the test case.

  1. Declare two variables, user and signupResponse, at lines 4 and 5. The object user contains the properties and values our API expects to receive to create a user. The object signupResponse is the response we expect to receive in return.

  2. Make a call to our ...