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

Members List Test

Explore how to write comprehensive tests for the Members List component in Angular by using mock services for EventsService and AuthService. Learn to verify different user roles, simulate subscribing to events, handle errors, and validate DOM updates. This lesson guides you through setting up test configurations and running multiple test scenarios for thorough component testing.

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.

�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.

TypeScript 3.3.4
// 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.

TypeScript 3.3.4
// src/app/member-list/member-list.component.spec.ts
const updatedEvent: Event = {
  '_id': '5a55135639fbc4ca3ee0ce5a',
  '_creator': '5a550ea739fbc4ca3ee0ce58',
  'title': 'My first updated event',
  'description': 'My first updated description',
  'city': 'Miami',
  'state': 'FL',
  'startTime': '2018-01-09T19:00:00.000Z',
  'endTime': '2018-01-09T20:00:00.000Z',
  '__v': 1,
  'suggestLocations': true,
  'members': [
    {
      '_id': '5a550ea739fbc4ca3ee0ce58',
      'username': 'newUser',
      '__v': 0,
      'dietPreferences': []
    },
    {
      '_id': '5a539449b689d341cccc4be7',
      'username': 'adam',
      '__v': 0,
      'dietPreferences': []
    }
  ]
};
const eventCreator = {
  'username': 'newUser',
  '_id': '5a550ea739fbc4ca3ee0ce58'
};
const nonEventCreator = {
  'username': 'adam',
  '_id': '5a539449b689d341cccc4be7'
};
class MockAuthService {
  currentUser() {}
}
class MockEventsService {
  isEventCreator() {}
  subscribe() {}
}
describe('MemberListComponent', () => {
  ...
});

Tests configuration

Now, update the configuration for our test. The list of steps to reconfigure our ...