Learn Front-End Development and Automated Testing with Angular/

...

/

Add Recommendations List Tests

Add Recommendations List Tests

Let's add unit tests for our recommendation list component.

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.

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

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