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

Add Recommendations List Tests

Explore how to implement and configure unit tests for the recommendations list component in an Angular event view. Learn to simulate different service responses and input conditions to ensure robust testing of UI behavior, including mocks, test setup, and verifying DOM updates.

We'll cover the following...

With our feature working, we can now move on to the tests for this 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`�
Add recommendations list tests

First, we’ll add our imports.

TypeScript 3.3.4
// app/recommendations-list/recommendations-list.component.spec.ts
import { By } from '@angular/platform-browser';
import { of } from 'rxjs';
import { RecommendationsListModule } from './recommendations-list.module';
import {
  RecommendationsService
} from '../services/recommendations/recommendations.service';

Then, we’ll add our mocks.

TypeScript 3.3.4
// app/recommendations-list/recommendations-list.component.spec.ts
const recommendationsResult = require('../testing/recommendations-result.json');
class MockRecommendationsService {
  get() {}
}
describe('RecommendationsListComponent', () => {
  ...
});

Once again, we’re testing a few different scenarios here, so let’s leave the implementation of get within our mocked class empty for now.

Now, we’ll update our test’s configuration to get our test suite to pass. The list of steps to reconfigure our test setup is below.

  1. Add a service variable declaration at the top of our outermost describe.
  2. Update declarations to imports by adding our module, RecommendationsListModule.
  3. Chain .overrideComponent
...