The way to write protractor scenarios

Question

Let's say that the angular app contains two pages: contacts (contains the table with a list of contacts and a button "add new contact") and new contact page (with form for adding new contact). And I would like to write that scenario:

1. Click add button
2. Check that "new contacts" page opens
3. Input contacts data
4. Press add button
5. Check that new contacts is in table

For these pages i have page objects with functions like "click some button", "input some field" and all functions returns promises.

What is the best way to write test scenario: using js chaining like

contactPage.clickAddButton()
.then(function () {
    return newContactPage.checkUrl();
})
.then(function () {
    return newContactPage.inputData(data);
})
.then(function () {
    return newContactPage.clickAddButton();
})
.then(function () {
    return checkContact(data);
})
.then(function (succes) {
}, function (error) {
    console.error(error);
});

or I can write like this:

contactPage.clickAddButton();
newContactPage.checkUrl();
newContactPage.inputData(data);
newContactPage.clickAddButton();
checkContact(data);

And does it make sense to split the scenario into multiple "it" functions?

Answer 1

There is no need to resolve the promises explicitly. Protractor has a Control Flow and handles the queue of promises naturally out of the box. Since this is a single scenario, you may leave it inside a single it(), unless you don't repeat yourself:

contactPage.clickAddButton();
newContactPage.checkUrl();
newContactPage.inputData(data);
newContactPage.clickAddButton();
checkContact(data);