Jestify autosave spec and add localStorage helperfe-jestify-specs-starting-with-a-1

The helper was needed because `jest.spyOn` would not
work on this special window object property. The only way
we could successfully spy on `localStorage` was with this helper.

2 files changed, 49 insertions, 11 deletions

diff --git a/spec/javascripts/autosave_spec.js b/spec/frontend/autosave_spec.js
index dcb1c781591..4d9c8f96d62 100644
--- a/spec/javascripts/autosave_spec.js
+++ b/spec/frontend/autosave_spec.js
@@ -1,16 +1,19 @@
 import $ from 'jquery';
 import Autosave from '~/autosave';
 import AccessorUtilities from '~/lib/utils/accessor';
+import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 
 describe('Autosave', () => {
+  useLocalStorageSpy();
+
   let autosave;
   const field = $('<textarea></textarea>');
   const key = 'key';
 
   describe('class constructor', () => {
     beforeEach(() => {
-      spyOn(AccessorUtilities, 'isLocalStorageAccessSafe').and.returnValue(true);
-      spyOn(Autosave.prototype, 'restore');
+      jest.spyOn(AccessorUtilities, 'isLocalStorageAccessSafe').mockReturnValue(true);
+      jest.spyOn(Autosave.prototype, 'restore').mockImplementation(() => {});
     });
 
     it('should set .isLocalStorageAvailable', () => {
@@ -27,8 +30,6 @@ describe('Autosave', () => {
         field,
         key,
       };
-
-      spyOn(window.localStorage, 'getItem');
     });
 
     describe('if .isLocalStorageAvailable is `false`', () => {
@@ -55,7 +56,7 @@ describe('Autosave', () => {
       });
 
       it('triggers jquery event', () => {
-        spyOn(autosave.field, 'trigger').and.callThrough();
+        jest.spyOn(autosave.field, 'trigger').mockImplementation(() => {});
 
         Autosave.prototype.restore.call(autosave);
 
@@ -77,7 +78,7 @@ describe('Autosave', () => {
       });
 
       it('does not trigger event', () => {
-        spyOn(field, 'trigger').and.callThrough();
+        jest.spyOn(field, 'trigger');
 
         expect(field.trigger).not.toHaveBeenCalled();
       });
@@ -86,11 +87,9 @@ describe('Autosave', () => {
 
   describe('save', () => {
     beforeEach(() => {
-      autosave = jasmine.createSpyObj('autosave', ['reset']);
+      autosave = { reset: jest.fn() };
       autosave.field = field;
       field.val('value');
-
-      spyOn(window.localStorage, 'setItem');
     });
 
     describe('if .isLocalStorageAvailable is `false`', () => {
@@ -123,8 +122,6 @@ describe('Autosave', () => {
       autosave = {
         key,
       };
-
-      spyOn(window.localStorage, 'removeItem');
     });
 
     describe('if .isLocalStorageAvailable is `false`', () => {
diff --git a/spec/frontend/helpers/local_storage_helper.js b/spec/frontend/helpers/local_storage_helper.js
new file mode 100644
index 00000000000..48e66b11767
--- /dev/null
+++ b/spec/frontend/helpers/local_storage_helper.js
@@ -0,0 +1,41 @@
+/**
+ * Manage the instance of a custom `window.localStorage`
+ *
+ * This only encapsulates the setup / teardown logic so that it can easily be
+ * reused with different implementations (i.e. a spy or a [fake][1])
+ *
+ * [1]: https://stackoverflow.com/a/41434763/1708147
+ *
+ * @param {() => any} fn Function that returns the object to use for localStorage
+ */
+const useLocalStorage = fn => {
+  const origLocalStorage = window.localStorage;
+  let currentLocalStorage;
+
+  Object.defineProperty(window, 'localStorage', {
+    get: () => currentLocalStorage,
+  });
+
+  beforeEach(() => {
+    currentLocalStorage = fn();
+  });
+
+  afterEach(() => {
+    currentLocalStorage = origLocalStorage;
+  });
+};
+
+/**
+ * Create an object with the localStorage interface but `jest.fn()` implementations.
+ */
+export const createLocalStorageSpy = () => ({
+  clear: jest.fn(),
+  getItem: jest.fn(),
+  setItem: jest.fn(),
+  removeItem: jest.fn(),
+});
+
+/**
+ * Before each test, overwrite `window.localStorage` with a spy implementation.
+ */
+export const useLocalStorageSpy = () => useLocalStorage(createLocalStorageSpy);