Protractor testing with ngStorage

Question

I'm using ngStorage to deal with local storage and Protractor to e2e specs in an AngularJS app.

describe('Test', function() {
  beforeEach(function () {
    browser.driver.manage().window().setSize(1280, 1024)
    browser.get('http://localhost:9000/#/test/first-test')
  })

  it("keeps the alternative marked", function () {
      element(by.id('element')).click()

      browser.refresh()

      expect(element(by.id('element')).isSelected()).toBe(true)
  })
})

Result:

1) Test keeps the alternative marked
   Message:
     Expected false to be true.
   Stacktrace:
     Error: Failed expectation
    at [object Object].<anonymous> (path/spec/test_spec.js:12:52)

I think that browser.refresh() clears the local storage. Is there a way to keep it or another way to test the same thing?

Answer 1

I've been having the same problem but I don't think it's related to browser.refresh() behaviour. It looks like there are timing issues with ngStorage actually updating things in localStorage.

You can see in https://github.com/gsklee/ngStorage/blob/master/ngStorage.js#L205 that ngStorage waits for 100ms after a change on $rootScope to actually save to localStorage.

What I'm seeing is pretty consistent with this: Sometimes the dismissed item remains hidden after reload, sometimes it doesn't. If I put an explicit browser.waitForAngular() before the refresh call, the test passes more often but not every time. The most reliable thing I've found so far is to add an explicit browser.sleep(125); after every action that changes localStorage via ngStorage. Incidentally, this appears to be the method ngStorage uses in it's own tests.

Worth noting that the onbeforeunload handler in ngStorage should take care of this particular case, but appears not to be doing so the correct thing when browser.refresh() is called.