Learn Front-End Development and Automated Testing with Angular/

...

/

Events List E2E Tests

Events List E2E Tests

Let's add E2E tests for our events list component.

We'll cover the following...

To finish this chapter, begin by creating a new file for our event list feature tests.

touch cypress/integration/events-list.js
Terminal 1
Terminal
Loading...

Below is our updated code after running the above command. Use this code 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`�
Events list e2e tests

Update navbar tests

Start by updating the E2E tests for our navbar. Add another test for the “Events” link above our test for the “Logout” link.

Press + to interact
// cypress/integration/navbar.js
it('should show a link to see all events', () => {
  cy
    .get('[data-test=events]')
      .should('have.text', 'Events').click()
      .url().should('include', '/events');
});
it('should show a link to logout', () => {
  cy
    .get('[data-test=logout]')
      .should('have.text', 'Logout').click()
      .url().should('include', '/');
});

Add events list tests

Add the test setup for our events list feature. The steps are as follows:

  1. Configure
...
Ask