fix storage event handling (#1400)

Author: marcoow

addon/session-stores/local-storage.js

@@ -3,7 +3,7 @@ import Ember from 'ember';
 import BaseStore from './base';
 import objectsAreEqual from '../utils/objects-are-equal';
 
-const { RSVP, $: jQuery, computed, getOwner } = Ember;
+const { RSVP, computed, getOwner, run: { bind } } = Ember;
 
 /**
   Session store that persists data in the browser's `localStorage`.
@@ -45,7 +45,13 @@ export default BaseStore.extend({
     this._super(...arguments);
 
     if (!this.get('_isFastBoot')) {
-      this._bindToStorageEvents();
+      window.addEventListener('storage', bind(this, this._handleStorageEvent));
+    }
+  },
+
+  willDestroy() {
+    if (!this.get('_isFastBoot')) {
+      window.removeEventListener('storage', bind(this, this._handleStorageEvent));
     }
   },
 
@@ -94,16 +100,14 @@ export default BaseStore.extend({
     return RSVP.resolve();
   },
 
-  _bindToStorageEvents() {
-    jQuery(window).on('storage', (e) => {
-      if (e.originalEvent.key === this.key) {
-        this.restore().then((data) => {
-          if (!objectsAreEqual(data, this._lastData)) {
-            this._lastData = data;
-            this.trigger('sessionDataUpdated', data);
-          }
-        });
-      }
-    });
+  _handleStorageEvent(e) {
+    if (e.key === this.get('key')) {
+      this.restore().then((data) => {
+        if (!objectsAreEqual(data, this._lastData)) {
+          this._lastData = data;
+          this.trigger('sessionDataUpdated', data);
+        }
+      });
+    }
   }
 });

addon/session-stores/session-storage.js

@@ -3,7 +3,7 @@ import Ember from 'ember';
 import BaseStore from './base';
 import objectsAreEqual from '../utils/objects-are-equal';
 
-const { RSVP, $: jQuery, computed, getOwner } = Ember;
+const { RSVP, computed, getOwner, run: { bind } } = Ember;
 
 /**
   Session store that persists data in the browser's `sessionStorage`.
@@ -41,7 +41,13 @@ export default BaseStore.extend({
     this._super(...arguments);
 
     if (!this.get('_isFastBoot')) {
-      this._bindToStorageEvents();
+      window.addEventListener('storage', bind(this, this._handleStorageEvent));
+    }
+  },
+
+  willDestroy() {
+    if (!this.get('_isFastBoot')) {
+      window.removeEventListener('storage', bind(this, this._handleStorageEvent));
     }
   },
 
@@ -90,16 +96,14 @@ export default BaseStore.extend({
     return RSVP.resolve();
   },
 
-  _bindToStorageEvents() {
-    jQuery(window).on('storage', (e) => {
-      if (e.originalEvent.key === this.key) {
-        this.restore().then((data) => {
-          if (!objectsAreEqual(data, this._lastData)) {
-            this._lastData = data;
-            this.trigger('sessionDataUpdated', data);
-          }
-        });
-      }
-    });
+  _handleStorageEvent(e) {
+    if (e.key === this.get('key')) {
+      this.restore().then((data) => {
+        if (!objectsAreEqual(data, this._lastData)) {
+          this._lastData = data;
+          this.trigger('sessionDataUpdated', data);
+        }
+      });
+    }
   }
 });

tests/unit/session-stores/local-storage-test.js

@@ -1,6 +1,7 @@
 import { describe } from 'mocha';
 import LocalStorage from 'ember-simple-auth/session-stores/local-storage';
 import itBehavesLikeAStore from './shared/store-behavior';
+import itBehavesLikeAStorageEventHandler from './shared/storage-event-handler-behavior';
 
 describe('LocalStorageStore', function() {
   itBehavesLikeAStore({
@@ -10,4 +11,12 @@ describe('LocalStorageStore', function() {
       });
     }
   });
+
+  itBehavesLikeAStorageEventHandler({
+    store() {
+      return LocalStorage.create({
+        _isFastBoot: false
+      });
+    }
+  });
 });

tests/unit/session-stores/session-storage-test.js

@@ -1,6 +1,7 @@
 import { describe } from 'mocha';
 import SessionStorage from 'ember-simple-auth/session-stores/session-storage';
 import itBehavesLikeAStore from './shared/store-behavior';
+import itBehavesLikeAStorageEventHandler from './shared/storage-event-handler-behavior';
 
 describe('SessionStorageStore', function() {
   itBehavesLikeAStore({
@@ -10,4 +11,12 @@ describe('SessionStorageStore', function() {
       });
     }
   });
+
+  itBehavesLikeAStorageEventHandler({
+    store() {
+      return SessionStorage.create({
+        _isFastBoot: false
+      });
+    }
+  });
 });

tests/unit/session-stores/shared/storage-event-handler-behavior.js

@@ -0,0 +1,73 @@
+import Ember from 'ember';
+import { describe, beforeEach, it } from 'mocha';
+import { expect } from 'chai';
+import sinon from 'sinon';
+
+const { run } = Ember;
+
+export default function(options) {
+  let store;
+
+  // eslint-disable-next-line mocha/no-top-level-hooks
+  beforeEach(function() {
+    store = options.store();
+  });
+
+  describe('storage events', function() {
+    beforeEach(function() {
+      sinon.spy(window, 'addEventListener');
+      sinon.spy(window, 'removeEventListener');
+    });
+
+    afterEach(function() {
+      window.addEventListener.restore();
+      window.removeEventListener.restore();
+    });
+
+    it('binds to "storage" events on the window when created', function() {
+      store = options.store();
+
+      expect(window.addEventListener).to.have.been.called.once;
+    });
+
+    it('triggers the "sessionDataUpdated" event when the data in the browser storage has changed', function() {
+      let triggered = false;
+      store.on('sessionDataUpdated', () => {
+        triggered = true;
+      });
+
+      window.dispatchEvent(new StorageEvent('storage', { key: store.get('key') }));
+
+      expect(triggered).to.be.true;
+    });
+
+    it('does not trigger the "sessionDataUpdated" event when the data in the browser storage has not changed', function() {
+      let triggered = false;
+      store.on('sessionDataUpdated', () => {
+        triggered = true;
+      });
+
+      store.persist({ key: 'value' }); // this data will be read again when the event is handled so that no change will be detected
+      window.dispatchEvent(new StorageEvent('storage', { key: store.get('key') }));
+
+      expect(triggered).to.be.false;
+    });
+
+    it('does not trigger the "sessionDataUpdated" event when the data in the browser storage has changed for a different key', function() {
+      let triggered = false;
+      store.on('sessionDataUpdated', () => {
+        triggered = true;
+      });
+
+      window.dispatchEvent(new StorageEvent('storage', { key: 'another key' }));
+
+      expect(triggered).to.be.false;
+    });
+
+    it('unbinds from "storage" events on the window when destroyed', function() {
+      run(() => store.destroy());
+
+      expect(window.removeEventListener).to.have.been.called.once;
+    });
+  });
+}