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

Signup Mock Test: Success

Explore how to write mock tests for user signup functionality in Angular. Understand how to simulate HTTP requests with HttpClientTestingModule and HttpTestingController, mock API responses, and verify your service’s behavior without hitting a real backend.

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.

TypeScript 3.3.4
// 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 authService.signup() method at line 14, providing it the user object.

  3. Subscribe to that service’s response, setting the return value to the ...