Protractor: How to avoid UnexpectedAlertOpenError

At work, we've recently started to use protractor to write end-to-end tests for a legacy AngularJs code base.

Last week we found a problem while trying to test that an element from a list was deleted:

	describe("A project landings list page", function () {
	var TestTools = require('./TestTools'),
	Navigation = require('./Navigation'),
	ptor;
	beforeEach(function () {
	TestTools.resetTestData();
	ptor = protractor.getInstance();
	ptor.get('/ebo/#/projects/excecutive-education');
	Navigation.logIn(ptor);
	TestTools.waitForElementByCssToBePresent('.project-item__title', ptor);
	});
	it("lists all landings and mailings", function () {
	var landingsAndMailings = element.all(
	by.repeater('landing in project.landings')),
	mailings = element.all(
	by.repeater('mailing in project.landings | filter:{mailing:true}'));
	landingsAndMailings.count().then(function (landingsAndMailingsNumber) {
	mailings.count().then(function (mailingsNumber) {
	var landingsNumbers = landingsAndMailingsNumber - mailingsNumber;
	expect(mailingsNumber).toBe(4);
	expect(landingsNumbers).toBe(2);
	});
	});
	});
	it("removes a landing", function () {
	element.all(by.css('.delete')).first().click(); // <- the problem happens here
	expect(
	element.all(
	by.repeater('landing in project.landings')).count()
	).toBe(5);
	});
	// some other tests
	});

view raw e2eTestsWithError.js hosted with ❤ by GitHub

The problem was that clicking on the delete icon was displaying an alert box, prompting the user to confirm whether they actually wanted to delete the element or not, that protractor didn't expect and was causing the following error:
UnexpectedAlertOpenError: unexpected alert open

After searching in Google for a while, we found a solution:

	it("removes a landing", function () {
	element.all(by.css('.delete')).first().click();
	ptor.driver.switchTo().alert().then( // <- this fixes the problem
	function (alert) {
	alert.accept();
	},
	function (error) {
	}
	);
	expect(
	element.all(
	by.repeater('landing in project.landings')).count()
	).toBe(5);
	});

view raw e2eTestsWithErrorFixed.js hosted with ❤ by GitHub

that fixed the problem by switching to the alert box and confirming that we wanted to delete the element.

Since it was a bit verbose and we'd probably have to use it again in some other tests, we extracted it to a helper function in our TestTools module:

	it("removes a landing", function () {
	element.all(by.css('.delete')).first().click();
	TestTools.switchToAlertAndAccept(ptor); // <- the fix is now in a helper function
	expect(
	element.all(
	by.repeater('landing in project.landings')).count()
	).toBe(5);
	});

view raw refactoredE2eTestWithErrorFixed.js hosted with ❤ by GitHub

I hope you might find this useful if you're using protractor.