Cannot Stub localStorage in Firefox 35

[jherdman]

It seems localStorage cannot be stubbed with Sinon 1.12.2 in Firefox 35. Here's a JSBin that illustrates this problem http://jsbin.com/nepehiriga/1/edit?js,output.

Possibly helpful jasmine/jasmine#299

[mroderick]

This seems related to #306

In past projects, we've created wrappers around native objects, including localStorage exactly because of these limitations.

Perhaps someone should put out a little library that we can point to ...

[mroderick]

@jherdman have you been able to do this with other combinations of Sinon.JS and Firefox?

[jherdman]

Hi! I've verified that this problem still exists in FF 37.0a2 (current version of Developer Edition as of writing this reply).

[jherdman]

In the past I've used things like amplify.js's localStorage wrapper, but this feels really silly given that localStorage is so broadly supported (http://caniuse.com/#search=localStorage).

If the problem cannot be fixed directly, perhaps sinon should throw an error when it's asked to stub such an object's methods?

[mroderick]

In the past I've used things like amplify.js's localStorage wrapper, but this feels really silly given that localStorage is so broadly supported (http://caniuse.com/#search=localStorage).

It makes good sense to me to wrap apis, so it's easier to test things. It also gives you an opportunity to adjust the api to include mandatory defaults, handle weird errors in a single place, or just make your code clearer by eliminating duplication.

I have no problem wrapping builtin api's, that's what we've been doing with jQuery and the DOM for almost a decade now.

If the problem cannot be fixed directly, perhaps sinon should throw an error when it's asked to stub such an object's methods?

I can imagine one way to do it, would be to have a quick feature test to set up some flags, and then in the stub function, throw an error if it's called with localStorage.

If we decide to take this route, we'll have to add it for pretty much every API that is implemented in browsers, or it's not going to be surprising that Sinon warns you about some APIs, and not others.

I think down that road lies a maintenance nightmare.

How would you implement this?

[mroderick]

store.js looks like a promising wrapper for localStorage

[jherdman]

I wonder if we can leverage Object.getOwnPropertyDescriptor? Here's a sample session in Firefox's developer console:

And in Chrome:

It may be reasonable to assume that anything that doesn't have a property descriptor isn't safe to stub and a warning should be issued. This is obviously not entirely true given that I can safely stub localStorage in Chrome and Phantom...

[mroderick]

Interesting idea to use Object.getOwnPropertyDescriptor, but easily defeated.

var Car = function() {};
Car.prototype.getItem = function() {};
var car = new Car();
Object.getOwnPropertyDescriptor(car, 'getItem');
// undefined

[mroderick]

Oh, there's also lockr

[jherdman]

Dang! That's heartbreaking. I think it's reasonable to close this issue given that there's no obvious solution to the problem. At least with this issue hopefully future trouble sinon users will see a potential solution: wrap the offending library, and silently sob that Object.getOwnPropertyDescriptor doesn't always work as we'd like.

[mroderick]

I'd like to write some documentation on the matter, or a couple of blog posts about the merits of wrapping apis... one of which would be: "make stubbing possible"

[irvingreid]

Filed https://bugzilla.mozilla.org/show_bug.cgi?id=1141698 to see if we can get Firefox to add support.

[bzbarsky]

I just marked that bug as invalid, because the Firefox behavior here is the one required by the spec for localStorage and sessionStorage, due to the named setter on them. Yes, named setters are insane.

The right fix is to modify the functions on Storage.prototype, which is where they live, instead of modifying them on the instance objects...

[bzbarsky]

The other possible fix is to try to get the spec for localStorage and sessionStorage changed in some way, I guess.

[jherdman]

Two quick questions for a relative newb to modern JS, hopefully one of you smart folks can point me to some helpers:

• What's a named setter?
• Where do I find the docs for Storage and its relationship to localStorage/sessionStorage?

[bzbarsky]

What's a named setter?

It's something that allows things that look like just a basic property set to get turned into a method call on the object. In the case of session/localStorage, it gets turned into setItem. If you want more details, there's spec text at http://heycam.github.io/webidl/#idl-named-properties and http://heycam.github.io/webidl/#indexed-and-named-properties but it's not the easiest thing in the world to follow. Plus you have to mentally apply the changes from whatwg/webidl#45.

Where do I find the docs for Storage and its relationship to localStorage/sessionStorage?

Storage is the interface those objects implement. See https://html.spec.whatwg.org/multipage/webstorage.html#the-sessionstorage-attribute and https://html.spec.whatwg.org/multipage/webstorage.html#the-localstorage-attribute and https://html.spec.whatwg.org/multipage/webstorage.html#the-storage-interface

[mroderick]

@jherdman I've created a tiny wrapping module that you can use as a stubbing target

https://github.com/mroderick/wrapple

Can this ticket be closed?

[mroderick]

@jherdman It's been ~1 month, I am closing this. Re-open it with more details, if you feel there's something we haven't covered.