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

Event Subscribe/Unsubscribe E2E Tests

Explore how to implement end-to-end testing for event subscriptions and unsubscriptions using Cypress. Learn to create custom login commands, simulate user interactions with events, verify subscription states, and handle error scenarios in your Angular application tests.

We'll cover the following...

To test this feature within Cypress, we’ll need a user that creates an event and another that subscribes to that event. Let’s add another Cypress command for logging in users.

Login command

First, we’ll create a new file for the login command.

touch cypress/support/login.js

Then, create a new file for our new E2E tests.

touch cypress/integration/event-subscribe.js
Terminal 1
Terminal
Loading...

Below is the 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`�
Event subscribe/unsubscribe e2e tests

Add command

Add our new custom command in the login.js file.

Javascript (babel-node)
// cypress/support/login.js
Cypress.Commands.add('login', (username, password) => {
  cy
    .visit('/login')
    .url().should('include', '/login')
    .get('#username').type(username)
    .get('#password').type(password)
    .get('form').submit()
    .url().should('include', '/dashboard');
});

The command takes a username and password and logs the user in with these credentials. The Cypress code here should ...