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

Tests for Listing All Events

Explore how to test the events listing feature in an Angular application. Learn to set up mock services, configure testing modules, and write test cases for scenarios with and without existing events using Angular testing utilities.

We'll cover the following...

We’ve successfully implemented the functionality to retrieve and display all events. Now it’s time to test this feature.

Below is the 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`�
Tests for listing all events

We’ll begin with the list of imports.

TypeScript 3.3.4
// src/app/events-list/events-list.component.spec.ts
import { By } from '@angular/platform-browser';
import { of } from 'rxjs';
import { RouterTestingModule } from '@angular/router/testing';
import { EventsListModule } from './events-list.module';
import { EventsService } from '../services/events/events.service';
import { Event } from '../services/events/event';

From here, we’ll set up the mock for EventsService.

TypeScript 3.3.4
// src/app/events-list/events-list.component.spec.ts
const events: Array<Event> = [{
  '_id': '5a539459b689d341cccc4be8',
  '_creator': '5a539449b689d341cccc4be7',
  'title': 'Another event',
  'description': 'Another event description',
  'city': 'Atlanta',
  'state': 'GA',
  'startTime': '2018-01-08T05:00:00.000Z',
  'endTime': '2018-01-09T05:00:00.000Z',
  '__v': 0,
  'suggestLocations': false,
  'members': [
    '5a539449b689d341cccc4be7'
  ]
}];
class MockEventsService {
  all() {}
}
describe('EventsListComponent', () => {
  ...
});

Update test setup and configuration. The list of steps to reconfigure the test setup is below.

  1. Add the service variable declaration at the top of our outermost describe.
  2. Update declarations to imports by adding the EventsListModule, and RouterTestingModule modules. We’ll do this because our template uses routerLink.
  3. Chain .overrideComponent
...