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

Events List E2E Tests

Explore how to create and run end-to-end tests for the events list feature in an Angular application using Cypress. Learn how to set up test data, interact with UI elements, and verify correct event display and error handling.

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.

TypeScript 3.3.4
// 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
...