How to wait for a event to be processed in a protractor end to end test?

Question

I have very simple AngularJs 1.4.8 Front-End:

When the form is filled and the OK button is pressed the new person is added to the table.

The form is in the addingPersonController and the table is in the allPersonsController, both are childs under the masterController.

When a user is added(OK clicked) the following happens:

1. a POST request is sent to the server in order to add the new person.
2. a personAddedEvent is emitted with $emit from the addingPersonController to the masterController
3. the masterController broadcasts an updatePersonsEvent to the allPersonsController
4. the allPersonsController sends a GET request to the server in order to get all the persons and update the table.

I have a protractor end to end test that exercises this case, the problem is that I can not figure out how to wait for the whole process to finish before to check the assertions and the test always fails.

The UI works when tested manually and I have tried to wait in the protractor test with:

• browser.wait(function(){}, timeout);
• browser.sleep(ms);
• .click().then();

None of them worked.
Is there a way to wait for such a process to complete before checking the assertions?

Answer 1

Got some similiar issues with my e2e tests too. There are couple of work-arounds can be added. Depend on situations , mostly due to some sort of non-response timeout (lost synchronization between protractor/selenium and browser). It is like a hang of the PC, cause by lack of resource (either GPU/VRAM, RAM or CPU). And this cause the built-in "wait for angular works to be done" of protractor lost its tracking. And run the spec before it should be ran.

Here is the list I will suggest you to try:

1. use built-in wait for angular Quick and solve the problem most of the time. But it will have nothing to deal with the lost synchronization between protractor/selenium and browser.

browser.waitForAngular();

2. use ExpectedConditions with browser.wait() This is always the best because it will sure work for all case. Even outside angular environment. Bad thing about this is... it is quite long to type

browser.wait( ExpectedConditions.textToBePresentInElement( $('#someId'), "Person's Name"), 10000);

EDIT: typos and make answer more understandable