Learn Front-End Development and Automated Testing with Angular/

...

/

Members List Test

Members List Test

Let's add unit tests for our members' list components.

We'll cover the following...

Our feature is complete so we can move on to testing our component.

Below is our updated code. Use this to make further changes.

Please provide values for the following:
your_API_key
Not Specified...
�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`�
Members list test

Start by updating our list of imports.

Press + to interact
// src/app/member-list/member-list.component.spec.ts
import { By } from '@angular/platform-browser';
import { of, throwError } from 'rxjs';
import { MemberListModule } from './member-list.module';
import { AuthService } from '../services/auth/auth.service';
import { EventsService } from '../services/events/events.service';
import { Event } from '../services/events/event';

Add mock services

Add the mocks for our services as follows:

  1. Creat two classes to mock EventsService and AuthService.

  2. In addition to those mocks, add the response from the documentation for Event Subscribe as well as two user objects. The two user objects will be used for the two cases that we’ll test for this component. These are the members’ list that is viewed from an event creator, and the members’ list that is viewed from a non-event creator (a user who can subscribe to the event).

  3. Leave the implementation mocks empty for now, as we’ll stub their return values within our tests, similar to our approach for testing CommentCreateComponent ...