Learn Front-End Development and Automated Testing with Angular/

...

/

Tests for Listing All Events

Tests for Listing All Events

Let's test the feature to display all events.

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.

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

We’ll begin with the list of imports.

Press + to interact
// 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.

Press + to interact
// 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
...