Protractor & ngStorage not working together as expected

[cayleyh]

When writing an e2e test in Protractor of behaviour that uses ngStorage, there are problems when the test refreshes the page and expects to see updated behaviour based on items persisted to localStorage.

Simple theoretical example is:

it('remains closed once dismissed', function() {
    browser.get('/');
    expect( element(by.css('.dismisable-element')).isDisplayed() ).toBe(true);

    element(by.css('.dismisable-element')).click();
    expect( element(by.css('.page-callout')).isDisplayed() ).toBe(false);

    browser.refresh();
    // FAILS
    expect( element(by.css('.dismisable-element')).isDisplayed() ).toBe(false);
});

Inserting a browser.sleep(125) before the browser.refresh() call will cause the test to pass every time. However, according to the protractor docs, this type of thing should not be necessary (http://www.protractortest.org/#/api?view=Protractor.prototype.waitForAngular).

Appears that localStorage is not being updated correctly both by the $timeout wait that protractor is supposed to do, and by the onbeforeunload handler.

There is a related discussion on stackoverflow here: https://stackoverflow.com/questions/28108148/protractor-testing-with-ngstorage/38083164#38083164